/* @import "tailwindcss"; */

/* Override .collapse utility which uses `visibility: collapse`.
   Bootstrap's collapse component relies on height/transitions and the `.show` class.
   The generated `.collapse{visibility:collapse}` breaks that behavior. We unset
   that property and ensure non-shown collapse elements are hidden via `display`.
*/

/* Remove the bad visibility rule */
.collapse {
  visibility: visible !important;
}

/* Modern Dark Theme */
/*:root {*/
/*  --dark-bg: #0d1117;*/
/*  --dark-bg-secondary: #161b22;*/
/*  --dark-bg-tertiary: #21262d;*/
/*  --dark-border: #30363d;*/
/*  --dark-text: #f0f6fc;*/
/*  --dark-text-secondary: #8b949e;*/
/*  --dark-primary: #58a6ff;*/
/*  --dark-success: #3fb950;*/
/*  --dark-warning: #d29922;*/
/*  --dark-danger: #f85149;*/
/*}*/

/*body.bg-not-dark {*/
/*  background-color: var(--dark-bg) !important;*/
/*  color: var(--dark-text) !important;*/
/*}*/

/*.bg-not-dark-custom {*/
/*  background-color: var(--dark-bg-secondary) !important;*/
/*  border-bottom: 1px solid var(--dark-border);*/
/*}*/

/*.bg-not-darker {*/
/*  background-color: var(--dark-bg) !important;*/
/*}*/

/*.bg-not-dark-secondary {*/
/*  background-color: var(--dark-bg-secondary) !important;*/
/*}*/

/*.bg-not-dark-tertiary {*/
/*  background-color: var(--dark-bg-tertiary) !important;*/
/*}*/

/*.text-light-muted {*/
/*  color: var(--dark-text-secondary) !important;*/
/*}*/
/* When not shown, keep it visually hidden but allow Bootstrap to control layout via height */
.collapse:not(.show) {
  display: none;
}

/* Ensure .collapsing uses the expected display during transition */
.collapsing {
  display: block;
}


/* ========================================
   MODERN SIDE MENU NAVIGATION
   ======================================== */

/* CSS Variables for theming */
:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --primary-color: #667eea;
  --primary-hover: #5568d3;
  --success-color: #10b981;
  --danger-color: #ef4444;
  --warning-color: #f59e0b;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-hover: #f3f4f6;
  --border-color: #e5e7eb;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

body.dark-mode {
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --bg-primary: #1f2937;
  --bg-secondary: #111827;
  --bg-hover: #374151;
  --border-color: #374151;
}

/* Side Menu Container */
.side-menu {
  position: fixed;
  top: 0;
  left: -360px;
  width: 360px;
  height: 100vh;
  background: var(--bg-primary);
  box-shadow: var(--shadow-xl);
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
  z-index: 1050;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.side-menu.open {
  left: 0;
}

/* Custom Scrollbar */
.side-menu::-webkit-scrollbar {
  width: 6px;
}

.side-menu::-webkit-scrollbar-track {
  background: transparent;
}

.side-menu::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.3);
  border-radius: 3px;
}

.side-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.5);
}

/* Side Menu Overlay */
.side-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 1040;
}

.side-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Side Menu Header */
.side-menu-header {
  padding: 1.75rem 1.5rem;
  background: var(--primary-gradient);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
}

.side-menu-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.side-menu-brand {
  font-size: 1.375rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: white !important;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
}

.side-menu-brand:hover {
  transform: translateX(2px);
}

.side-menu-brand i {
  font-size: 1.5rem;
}

.side-menu-logo {
  height: 40px;
  width: 180px;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
}

.side-menu-close {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

.side-menu-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: rotate(90deg);
}

/* User Section in Side Menu */
.side-menu-user {
  padding: 1.5rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.side-menu-user-avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}

.side-menu-user-info {
  flex: 1;
  min-width: 0;
}

.side-menu-user-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-menu-user-email {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-menu-user-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.user-stat {
  text-align: center;
}

.user-stat-value {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-color);
}

.user-stat-label {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 0.125rem;
}

.side-menu-user-buying-power {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 8px;
  margin-top: 0.75rem;
}

.buying-power-icon {
  font-size: 1.125rem;
  color: var(--success-color);
}

.buying-power-amount {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--success-color);
}

.buying-power-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-left: auto;
}

/* Side Menu Content */
.side-menu-content {
  padding: 0;
  flex: 1;
}

/* Menu Section */
.menu-section {
  border-bottom: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.menu-section.collapsible .menu-section-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem 0.75rem;
  transition: background 0.2s ease;
}

.menu-section.collapsible .menu-section-header:hover {
  background: var(--bg-hover);
}

.menu-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.menu-section-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.75rem;
}

.menu-section-icon.activity {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.menu-section-icon.financial {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.menu-section-icon.info {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.menu-section-icon.account {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.menu-section-toggle {
  font-size: 0.75rem;
  color: var(--text-secondary);
  transition: transform 0.3s ease;
}

.menu-section.collapsed .menu-section-toggle {
  transform: rotate(-90deg);
}

.menu-section.collapsed .menu-section-items {
  max-height: 0;
  overflow: hidden;
}

.menu-section-items {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* Menu Items */
.menu-item {
  display: flex;
  align-items: center;
  padding: 0.875rem 1.5rem;
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 3px solid transparent;
  position: relative;
}

.menu-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  background: var(--primary-gradient);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 4px 4px 0;
}

.menu-item:hover::before {
  width: 4px;
  height: 70%;
}

.menu-item:hover {
  background: var(--bg-hover);
  color: var(--primary-color);
  transform: translateX(2px);
}

.menu-item.active {
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, transparent 100%);
  color: var(--primary-color);
  font-weight: 600;
}

.menu-item.active::before {
  width: 4px;
  height: 80%;
}

.menu-item i {
  width: 28px;
  margin-right: 0.875rem;
  font-size: 1.125rem;
  text-align: center;
  transition: transform 0.2s ease;
}

.menu-item:hover i {
  transform: scale(1.1);
}

.menu-item-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-item .badge {
  margin-left: auto;
  font-size: 0.6875rem;
  padding: 0.25rem 0.5rem;
  border-radius: 10px;
  font-weight: 600;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Menu Divider */
.menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: 0.5rem 1.5rem;
}

/* Hamburger Menu Button */
.hamburger-btn {
  background: var(--bg-hover);
  border: none;
  padding: 0.625rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: all 0.3s ease;
  border-radius: 10px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.hamburger-btn:hover {
  background: var(--primary-color);
}

.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--text-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
}

.hamburger-btn:hover span {
  background: white;
}

.hamburger-btn.active span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.hamburger-btn.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Modern Top Navbar */
.navbar-minimal {
  padding: 1rem 1.25rem;
  background: var(--bg-primary);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.navbar-minimal .navbar-brand {
  font-size: 1.375rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--text-primary);
  transition: color 0.2s ease;
  min-width: 150px;
}

.navbar-minimal .navbar-brand:hover {
  color: var(--primary-color);
}

.navbar-minimal .navbar-brand i {
  font-size: 1.5rem;
  color: var(--primary-color);
}

.navbar-logo {
  height: 50px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  transition: opacity 0.2s ease;
}

.navbar-minimal .navbar-brand:hover .navbar-logo {
  opacity: 0.8;
}

body.dark-mode .navbar-logo {
  filter: brightness(0) invert(1);
}

/* Search Bar in Top Nav */
.navbar-search {
  flex: 1;
  max-width: 600px;
  margin: 0 1.5rem;
  position: relative;
}

.navbar-search-input {
  width: 100%;
  padding: 0.625rem 1rem 0.625rem 2.75rem;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  font-size: 0.9375rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.navbar-search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  background: var(--bg-primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.navbar-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 1.125rem;
  pointer-events: none;
}

.navbar-search-input:focus + .navbar-search-icon {
  color: var(--primary-color);
}

/* Top Actions Group */
.top-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.action-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 0.625rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}

.action-btn:hover {
  background: var(--bg-hover);
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.action-btn.btn-primary {
  background: var(--primary-gradient);
  border-color: transparent;
  color: white;
}

.action-btn.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.action-btn.btn-success {
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--success-color);
  color: var(--success-color);
  font-weight: 600;
}

.action-btn.btn-success:hover {
  background: var(--success-color);
  color: white;
}

.action-btn .badge {
  font-size: 0.6875rem;
  padding: 0.125rem 0.375rem;
  border-radius: 8px;
  font-weight: 600;
}

/* Dark Mode Toggle */
.dark-mode-toggle {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-primary);
  font-size: 1.125rem;
}

.dark-mode-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: rotate(20deg);
}

body.dark-mode .dark-mode-toggle {
  background: rgba(250, 204, 21, 0.1);
  border-color: #fbbf24;
  color: #fbbf24;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .navbar-search {
    max-width: 400px;
    margin: 0 1rem;
  }
}

@media (max-width: 768px) {
  .side-menu {
    width: 320px;
    left: -320px;
  }

  .navbar-search {
    display: none;
  }

  .top-actions .d-none-mobile {
    display: none !important;
  }

  .side-menu-user-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 576px) {
  .side-menu {
    width: 100%;
    left: -100%;
  }

  .navbar-minimal {
    padding: 0.75rem 1rem;
  }

  .navbar-minimal .navbar-brand span {
    display: none;
  }

  .navbar-logo {
    height: 40px;
  }

  .action-btn span {
    display: none;
  }

  .top-actions {
    gap: 0.5rem;
  }

  .action-btn {
    padding: 0.625rem;
    min-width: 44px;
  }

  .side-menu-user {
    flex-direction: column;
    text-align: center;
  }

  .side-menu-user-avatar {
    width: 64px;
    height: 64px;
  }
}

/* Dark Mode Body Styles */
body.dark-mode {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

body.dark-mode .navbar-minimal {
  background: var(--bg-primary);
  border-bottom-color: var(--border-color);
}

body.dark-mode .bg-light {
  background: var(--bg-secondary) !important;
}

/* Footer Facebook Preview */
.facebook-preview {
  transition: transform 0.2s ease, opacity 0.2s ease;
  display: block;
}

.facebook-preview:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.facebook-preview img {
  transition: filter 0.2s ease;
}

.facebook-preview:hover img {
  filter: brightness(1.1);
}

/* Category Subsections */
.menu-subsection {
  margin: 0.5rem 0 0.25rem 0;
}

.menu-subsection.collapsible .menu-subsection-title {
  cursor: pointer;
  user-select: none;
}

.menu-subsection-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.5rem 0.35rem 1.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(0, 0, 0, 0.02);
  border-left: 2px solid rgba(0, 0, 0, 0.1);
  opacity: 0.8;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.menu-subsection.collapsible .menu-subsection-title:hover {
  background: rgba(0, 0, 0, 0.04);
  opacity: 1;
}

.menu-subsection-title-content {
  display: flex;
  align-items: center;
}

.menu-subsection-title-content i {
  width: 20px;
  font-size: 0.7rem;
  margin-right: 0.65rem;
  opacity: 0.7;
  text-align: center;
}

.menu-subsection-title strong {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1px;
}

.menu-subsection-toggle {
  font-size: 0.65rem;
  color: var(--text-secondary);
  transition: transform 0.3s ease;
  margin-left: 0.5rem;
  opacity: 0.6;
}

.menu-subsection.collapsed .menu-subsection-toggle {
  transform: rotate(-90deg);
}

.menu-subsection-items {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.menu-subsection.collapsed .menu-subsection-items {
  max-height: 0;
  overflow: hidden;
}

.menu-subsection-items .menu-item {
  padding: 0.75rem 1.5rem 0.75rem 3.5rem;
  font-size: 0.9rem;
}

.menu-subsection-items .menu-item::before {
  left: 2.5rem;
}

.menu-subsection-items .menu-item:hover::before {
  width: 3px;
  height: 60%;
}

.menu-subsection-items .menu-item i {
  width: 26px;
  font-size: 1.05rem;
  margin-right: 0.875rem;
}

.menu-subsection-items .menu-item .category-icon {
  width: 26px;
  height: 26px;
  margin-right: 0.875rem;
}

/* Category Logo Support */
.category-icon {
  width: 28px;
  height: 28px;
  margin-right: 0.875rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
  transition: all 0.2s ease;
}

.menu-item:hover .category-icon {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
  transform: scale(1.1);
}

.category-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.category-icon i {
  margin: 0;
  width: auto;
  font-size: 1rem;
}

/* ========================================
   FILTERS MODAL STYLES
   ======================================== */

/* Modal Backdrop with Blur */
.modal-backdrop.show {
  backdrop-filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.6);
}

/* Modal Dialog */
#filtersModal .modal-dialog {
  max-width: 1200px;
}

#filtersModal .modal-content {
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  border: none;
}

#filtersModal .modal-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

#filtersModal .modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
}

#filtersModal .modal-body {
  background-color: #f8f9fa;
  padding: 2rem;
  overflow-y: auto;
  max-height: calc(85vh - 200px);
}

/* Custom Scrollbar for Modal */
#filtersModal .modal-body::-webkit-scrollbar {
  width: 10px;
}

#filtersModal .modal-body::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 5px;
}

#filtersModal .modal-body::-webkit-scrollbar-thumb {
  background: #667eea;
  border-radius: 5px;
}

#filtersModal .modal-body::-webkit-scrollbar-thumb:hover {
  background: #5568d3;
}

#filtersModal .card {
  border: 1px solid #dee2e6;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

#filtersModal .card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#filtersModal .card-header {
  background-color: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 1.5rem;
  border-radius: 0.75rem 0.75rem 0 0;
}

#filtersModal .card-body {
  padding: 1.5rem;
}

#filtersModal .modal-footer {
  padding: 1.25rem 2rem;
  border-top: 1px solid #e5e7eb;
  background-color: #ffffff;
  gap: 0.75rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  #filtersModal .modal-dialog {
    max-width: 95vw;
    margin: 1rem auto;
  }

  #filtersModal .modal-body {
    padding: 1rem;
    max-height: calc(85vh - 180px);
  }

  #filtersModal .modal-header,
  #filtersModal .modal-footer {
    padding: 1rem 1.5rem;
  }
}

/* Select2 dropdowns inside filters modal - limited height and scrolling */
#filtersModal .select2-results__options {
  max-height: 300px;
  overflow-y: auto;
}

/* ========================================
   OLD DESKTOP FIXED SIDEBAR LAYOUT - REMOVED
   Now using horizontal menu instead of left sidebar.
   See sidebar_filters.css for the new layout styles.
   ======================================== */

/* Toast notifications */
.alert.position-fixed {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    transform: translate(-50%, -100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

/* Ultra-wide screen support for car grid - MAX 8 per row */
@media (min-width: 1920px) {
  /* 8 cards per row on ultra-wide screens (1920px+) */
  .car-item {
    flex: 0 0 auto;
    width: 12.5%; /* 100% / 8 = 12.5% */
  }
}

/* ============================================
   PINNED ACCOUNT PANEL - Uses offcanvas only
   ============================================ */

/* Initial layout shift prevention - class added to html in head */
@media (min-width: 992px) {
  html.sidebar-pinned .navbar.fixed-top {
    right: 280px;
  }
  
  html.sidebar-pinned .page-wrapper {
    margin-right: 280px;
  }
}

/* When panel is pinned: keep offcanvas visible without backdrop */
html.sidebar-pinned #accountPanelOffcanvas {
  transform: none !important;
  visibility: visible !important;
  box-shadow: -2px 0 8px rgba(0,0,0,0.1);
}

/* Remove backdrop when pinned */
html.sidebar-pinned .offcanvas-backdrop {
  display: none !important;
}

/* Floating toggle tab on right edge - visible when panel is closed */
.sidebar-toggle-tab {
  display: none;
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1040;
  background: #1a56db;
  color: #fff;
  border: none;
  border-radius: 8px 0 0 8px;
  padding: 12px 8px;
  cursor: pointer;
  box-shadow: -2px 0 8px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  font-weight: 600;
}

.sidebar-toggle-tab:hover {
  background: #1e40af;
  padding-left: 12px;
}

.sidebar-toggle-tab i {
  margin-bottom: 6px;
  font-size: 14px;
}

/* Show toggle tab on desktop only when NOT pinned and offcanvas is closed */
@media (min-width: 992px) {
  .sidebar-toggle-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Hide when pinned */
  html.sidebar-pinned .sidebar-toggle-tab {
    display: none;
  }
  
  /* Hide when offcanvas is shown (has .show class) */
  html:has(#accountPanelOffcanvas.show) .sidebar-toggle-tab {
    display: none;
  }
}

/* Mobile - no pinned mode */
@media (max-width: 991.98px) {
  html.sidebar-pinned .navbar.fixed-top {
    right: 0;
  }
  
  html.sidebar-pinned .page-wrapper {
    margin-right: 0;
  }
  
  .sidebar-toggle-tab {
    display: none !important;
  }
}

/* Remove the separate pinned-sidebar element - we only use offcanvas now */
.pinned-sidebar {
  display: none !important;
}

/* =============================================================================
   Real-time Bid Update Animations (2026-01-05)
   ============================================================================= */

/* Flash animation when bid updates */
@keyframes bid-flash {
  0% {
    background-color: rgba(40, 167, 69, 0.3);
    transform: scale(1);
  }
  50% {
    background-color: rgba(40, 167, 69, 0.5);
    transform: scale(1.02);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}

.bid-flash {
  animation: bid-flash 1.5s ease-out;
}

/* Bid increase indicator */
.bid-increased {
  color: #28a745 !important;
}

.bid-change-icon {
  animation: bid-flash 1.5s ease-out;
  margin-right: 0.25rem;
}

/* Smooth transition for bid amount updates */
#currentBidAmount {
  transition: all 0.3s ease-in-out;
}

/* Live update indicator */
.bid-live-indicator {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  color: #28a745;
  margin-left: 0.5rem;
}

.bid-live-indicator::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #28a745;
  border-radius: 50%;
  margin-right: 0.25rem;
  animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

/* =============================================================================
   UNIFIED NAVIGATION & ACCOUNT PANEL STYLES (2026-02-04)
   ============================================================================= */

/* Extended Search Bar */
.nav-search-extended {
  max-width: 500px;
}

.nav-search-extended .input-group {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

.nav-search-extended .input-group:focus-within {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.nav-search-extended .input-group-text {
  background: white;
  border-right: none;
}

.nav-search-extended .form-control {
  border-left: none;
}

.nav-search-extended .form-control:focus {
  box-shadow: none;
  border-color: #dee2e6;
}

/* User Avatar Styles */
.user-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.user-avatar-lg {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Nav Buying Power Display */
.nav-buying-power {
  padding: 0.25rem 0.5rem;
  background: #f0fdf4;
  border-radius: 8px;
  border: 1px solid #bbf7d0;
}

.nav-buying-power .btn-success {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

/* Account Panel Trigger Button */
.account-panel-trigger {
  border-radius: 8px;
  padding: 0.375rem 0.75rem;
  border: none;
  background: transparent;
  color: #374151;
  transition: all 0.2s ease;
}

.account-panel-trigger:hover {
  background-color: #f3f4f6;
  color: #111827;
}

/* Account Panel Offcanvas */
.account-panel.offcanvas {
  width: 260px;
  max-width: 100%;
  border-left: 1px solid #e5e7eb;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
}

/* Page Wrapper - Flex layout for sidebar */
/* Note: body already has padding-top for fixed navbar (see sidebar_filters.css) */
.page-wrapper {
  display: flex;
  min-height: calc(100vh - var(--navbar-height, 64px));
  /* No margin-top needed - body padding-top handles navbar offset */
}

.page-wrapper .main-content {
  flex: 1;
  min-width: 0;
}

/* ============================================
   PINNED ACCOUNT PANEL - Uses offcanvas only
   ============================================ */

/* Initial layout shift prevention - class added to html in head */
@media (min-width: 992px) {
  html.sidebar-pinned .navbar.fixed-top {
    right: 280px;
  }

  html.sidebar-pinned .page-wrapper {
    margin-right: 280px;
  }
}

/* When panel is pinned: keep offcanvas visible without backdrop */
html.sidebar-pinned #accountPanelOffcanvas {
  transform: none !important;
  visibility: visible !important;
  box-shadow: -2px 0 8px rgba(0,0,0,0.1);
}

/* Remove backdrop when pinned */
html.sidebar-pinned .offcanvas-backdrop {
  display: none !important;
}

/* Floating toggle tab on right edge - visible when panel is closed */
.sidebar-toggle-tab {
  display: none;
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1040;
  background: #1a56db;
  color: #fff;
  border: none;
  border-radius: 8px 0 0 8px;
  padding: 12px 8px;
  cursor: pointer;
  box-shadow: -2px 0 8px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  font-weight: 600;
}

.sidebar-toggle-tab:hover {
  background: #1e40af;
  padding-left: 12px;
}

.sidebar-toggle-tab i {
  margin-bottom: 6px;
  font-size: 14px;
}

/* Show toggle tab on desktop only when NOT pinned and offcanvas is closed */
@media (min-width: 992px) {
  .sidebar-toggle-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Hide when pinned */
  html.sidebar-pinned .sidebar-toggle-tab {
    display: none;
  }

  /* Hide when offcanvas is shown (has .show class) */
  html:has(#accountPanelOffcanvas.show) .sidebar-toggle-tab {
    display: none;
  }
}

/* Mobile - no pinned mode */
@media (max-width: 991.98px) {
  html.sidebar-pinned .navbar.fixed-top {
    right: 0;
  }

  html.sidebar-pinned .page-wrapper {
    margin-right: 0;
  }

  .sidebar-toggle-tab {
    display: none !important;
  }
}

/* Remove the separate pinned-sidebar element - we only use offcanvas now */
.pinned-sidebar {
  display: none !important;
}

.account-panel .offcanvas-header {
  padding: 1rem 1.25rem;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.account-panel .offcanvas-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
}

.account-panel .offcanvas-body {
  display: flex;
  flex-direction: column;
  background: #fafafa;
}

/* Account Panel Header Section */
.account-panel-header {
  background: #fff !important;
}

.account-panel-header .min-width-0 {
  min-width: 0;
}

/* Buying Power Card */
.buying-power-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 1rem;
  margin-top: 0.75rem;
}

.buying-power-card .fs-4 {
  color: #047857;
}

/* Account Panel Sections */
.account-panel-section {
  background: #fff;
  margin-bottom: 1px;
}

.account-panel-section .section-header {
  background: #f9fafb !important;
}

.account-panel-section .list-group-item {
  border: none;
  border-radius: 0;
  padding: 0.75rem 1rem;
  transition: background-color 0.15s ease;
}

.account-panel-section .list-group-item:hover {
  background-color: #f3f4f6;
}

.account-panel-section .list-group-item a {
  color: #374151;
}

.account-panel-section .list-group-item a:hover {
  color: #111827;
}

.account-panel-section .list-group-item .badge {
  font-size: 0.7rem;
  font-weight: 500;
}

/* Account Panel Footer */
.account-panel-footer {
  background: #fff !important;
}

.account-panel-footer .form-switch .form-check-input {
  cursor: pointer;
}

/* Sticky Panel Mode - Visual indicator */
.account-panel.sticky-enabled .offcanvas-header {
  background: #ecfdf5 !important;
}

.account-panel .offcanvas-header .form-switch {
  margin-bottom: 0;
}

.account-panel .offcanvas-header .form-check-input {
  cursor: pointer;
}

.account-panel.sticky-enabled .offcanvas-header .form-check-input {
  background-color: #047857;
  border-color: #047857;
  font-weight: 900;
  font-size: 0.7rem;
  margin-left: 0.5rem;
  color: #6b7280;
}

/* Nav Action Buttons */
.nav-action-btn {
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.15s ease;
  text-decoration: none;
}

.nav-action-btn:hover {
  background-color: #f3f4f6;
}

/* Notification Badge */
.notification-badge {
  font-size: 0.65rem;
  min-width: 18px;
  padding: 0.15rem 0.35rem;
}

/* Dropdown Menu Modern */
.dropdown-menu-modern {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  animation: dropdownFadeIn 0.15s ease;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-menu-modern .dropdown-item {
  border-radius: 8px;
  padding: 0.625rem 1rem;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}

.dropdown-menu-modern .dropdown-item:hover {
  background-color: #f3f4f6;
}

.dropdown-menu-modern .dropdown-header {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  padding: 0.5rem 1rem;
}

.dropdown-menu-modern .dropdown-divider {
  margin: 0.375rem 0;
  border-color: #e5e7eb;
}

/* Category Icon Image */
.category-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Mobile Navigation Styles */
#mobileNavOffcanvas .list-group-item {
  border: none;
  padding: 0.75rem 1rem;
}

#mobileNavOffcanvas .list-group-item a {
  color: #374151;
}

#mobileNavOffcanvas .list-group-item-light {
  background-color: #f9fafb;
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
  .nav-search-extended {
    display: none !important;
  }

  .navbar-logo {
    max-height: 32px;
  }
}

@media (max-width: 991.98px) {
  .account-panel.offcanvas {
    width: 100%;
  }

  /* Hide pin toggle on mobile/tablet - pinned mode doesn't work well there */
  .account-panel .offcanvas-header .form-switch {
    display: none !important;
  }
}

/* Fix navbar spacing */
.unified-navbar {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.unified-navbar .navbar-nav .nav-link {
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  color: #374151;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.unified-navbar .navbar-nav .nav-link:hover {
  background-color: #f3f4f6;
  color: #111827;
}

.unified-navbar .navbar-nav .nav-link.active {
  color: #667eea;
  font-weight: 600;
}

/* Navbar Logo */
.navbar-logo {
  max-height: 40px;
  width: auto;
}

















/* ========================================
   TWO-ROW NAVIGATION & QUICK SEARCH
   ======================================== */
.two-row-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  display: none;
}
/* Flex row [logo | center (flex:1) | auth] so the center column has a
   real, constrained width — at narrow desktop widths (992–1199px) the
   menu row can wrap to a second line instead of items disappearing
   behind the absolute-positioned auth column. min-height keeps the
   spacious feel at wider viewports; an inline ResizeObserver in
   _quick_search.html.erb keeps --navbar-height in sync when the nav
   grows so body padding-top stays correct. */
.two-row-nav-inner {
  display: flex;
  align-items: stretch;
  min-height: clamp(80px, 4.6vw, 100px);
}
.nav-logo-col {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 clamp(0.75rem, 1vw, 1.5rem);
}
.nav-logo-col img { height: clamp(36px, 2.5vw, 56px); }
.nav-center-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nav-search-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0.25rem 0;
}
.nav-search-row form {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 0.4vw, 0.5rem);
}
.nav-search-row .qs-select-wrap {
  min-width: clamp(90px, 7vw, 150px);
}
.nav-search-row .select2-container { width: 100% !important; }
.nav-search-row .select2-container--default .select2-selection--single {
  height: clamp(30px, 1.9vw, 40px);
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #f9fafb;
}
.nav-search-row .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: clamp(28px, 1.8vw, 38px);
  padding-left: clamp(8px, 0.6vw, 14px);
  font-size: clamp(0.75rem, 0.75vw, 0.95rem);
  color: #374151;
}
.nav-search-row .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: clamp(28px, 1.8vw, 38px);
}
.nav-search-row .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #6b7280;
}
.nav-search-row .select2-container--default .select2-selection--multiple {
  min-height: clamp(30px, 1.9vw, 40px);
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #f9fafb;
  padding: 2px clamp(4px, 0.3vw, 8px);
  display: flex;
  align-items: center;
}
.nav-search-row .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0;
}
.nav-search-row .select2-container--default .select2-selection--multiple .select2-selection__choice {
  font-size: clamp(0.65rem, 0.65vw, 0.8rem);
  padding: 1px 4px;
  margin: 0;
  border-radius: 3px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-search-row .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
  font-size: clamp(0.75rem, 0.75vw, 0.95rem);
  margin: 0;
  padding: 0;
  height: auto;
}
.nav-search-row .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: #6b7280;
  font-size: clamp(0.75rem, 0.75vw, 0.95rem);
}
.qs-search-wrap { width: clamp(150px, 14vw, 320px); }
.qs-search-wrap .input-group { height: clamp(30px, 1.9vw, 40px); }
.qs-search-wrap .input-group-text {
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-right: none;
  border-radius: 6px 0 0 6px;
  padding: 0 0.5rem;
}
.qs-search-wrap input {
  border: 1px solid #d1d5db;
  border-left: none;
  border-radius: 0 6px 6px 0;
  background: #f9fafb;
  font-size: clamp(0.75rem, 0.75vw, 0.95rem);
  height: clamp(30px, 1.9vw, 40px);
}
.qs-search-wrap input:focus {
  box-shadow: none;
  border-color: #d1d5db;
  background: white;
}
.qs-btn {
  height: clamp(30px, 1.9vw, 40px);
  width: clamp(30px, 1.9vw, 40px);
  padding: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.7rem, 0.7vw, 0.9rem);
}
.qs-btn-search { background: #2563eb; color: white; border: none; }
.qs-btn-search:hover { background: #1d4ed8; color: white; }
.qs-btn-clear { background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db; }
.qs-btn-clear:hover { background: #e5e7eb; color: #374151; }
/* Wrap menu items at narrow desktop widths — wrap is set on the inner
   UL (which is the actual flex container holding the <li> items) so
   nothing is clipped behind the auth column. The outer .nav-menu-row
   stays a single-line flex item with min-width:0 + width:100%, so the
   ul fills the available center-col width before wrapping. */
.nav-menu-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 0.75rem 0.25rem;
  min-width: 0;
  width: 100%;
}
.nav-menu-row > .navbar-nav {
  flex-wrap: wrap;
  row-gap: 0.25rem;
  justify-content: center;
}
.nav-menu-row .nav-link {
  color: #374151;
  font-size: clamp(0.8rem, 0.78vw, 1rem);
  font-weight: 500;
  padding: clamp(0.25rem, 0.3vw, 0.5rem) clamp(0.4rem, 0.5vw, 0.75rem);
  border-radius: 6px;
  white-space: nowrap;
}
.nav-menu-row .nav-link:hover { color: #2563eb; background: #f3f4f6; }
.nav-menu-row .nav-link.active { color: #2563eb; background: #eff6ff; }
.nav-menu-row .dropdown-toggle::after { margin-left: 0.25rem; }
.nav-auth-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(0.75rem, 1vw, 1.5rem);
  gap: 0.25rem;
}
.nav-auth-top { display: flex; align-items: center; gap: clamp(0.3rem, 0.4vw, 0.6rem); }
.nav-auth-bottom { display: flex; align-items: center; justify-content: flex-end; }
.nav-auth-bottom .btn { font-size: clamp(0.75rem, 0.7vw, 0.9rem); color: #374151; }
.user-avatar-sm {
  width: clamp(26px, 1.6vw, 36px);
  height: clamp(26px, 1.6vw, 36px);
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: clamp(0.7rem, 0.7vw, 0.9rem);
  font-weight: 600;
}
.nav-buying-power { font-size: clamp(0.75rem, 0.7vw, 0.9rem); }
.notification-badge { font-size: 0.6rem; padding: 0.15rem 0.35rem; }
.nav-auth-col .position-relative { overflow: visible; }
.nav-auth-col .notification-badge {
  top: -2px;
  left: calc(100% + 2px);
  right: auto;
  transform: translateX(-50%);
}
.dropdown-menu-modern {
  border: none;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  border-radius: 8px;
  padding: 0.5rem;
}
.dropdown-menu-modern .dropdown-item {
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: clamp(0.8rem, 0.75vw, 0.95rem);
}
.dropdown-menu-modern .dropdown-item:hover { background: #f3f4f6; color: #2563eb; }
.category-icon-img { width: clamp(16px, 1vw, 22px); height: clamp(16px, 1vw, 22px); object-fit: contain; }

/* Mobile Navigation */
.mobile-nav {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.mobile-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 0.75rem;
}
.mobile-nav-logo img { height: 32px; }
.mobile-search-toggle { border-top: 1px solid #e5e7eb; background: #f9fafb; }
.mobile-search-toggle button { height: 36px; font-size: 0.8rem; }
/* #mobileQuickSearch is nested inside the fixed .mobile-nav wrapper —
   no positioning needed here. */
#mobileQuickSearch {
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Mobile Quick Search: pin BOTH single and multi Select2 wrappers to
   the same fixed height (31px) with the same border/radius so the
   Type / Make / Model / Year row reads as one consistent line. The
   multi-select Model would otherwise default to ~38–40px (Select2's
   own min-height + padding-bottom) and tower over its neighbours.
   Also style the disabled multi-select so its placeholder ("Modelis")
   shows greyed out instead of a blank bug-looking box. Lives in the
   external CSS (NOT inline in the partial) so it actually reaches
   <head> — partial renders in <body> too late for yield :head to
   capture content_for :head. */
#mobileQuickSearch .select2-container--default .select2-selection--single,
#mobileQuickSearch .select2-container--default .select2-selection--multiple {
  height: 31px !important;
  min-height: 31px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.25rem !important;
  padding: 0 28px 0 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  background: white;
}
#mobileQuickSearch .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 29px;
  padding: 0;
  font-size: 0.875rem;
  color: #374151;
}
#mobileQuickSearch .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 29px;
  top: 0;
}
#mobileQuickSearch .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  padding: 0;
  margin: 0;
  width: 100%;
  align-items: center;
  list-style: none;
  height: 100%;
}
#mobileQuickSearch .select2-container--default .select2-selection--multiple .select2-search--inline {
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
#mobileQuickSearch .select2-container--default .select2-selection--multiple .select2-search__field {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  height: auto !important;
}
/* Disabled state — show the placeholder ("Modelis") greyed out so
   the empty disabled box doesn't look like a render bug. */
#mobileQuickSearch .select2-container--disabled .select2-selection--multiple {
  background: #e9ecef !important;
  cursor: not-allowed;
}
#mobileQuickSearch .select2-container--disabled .select2-search__field {
  background: transparent;
  cursor: not-allowed;
  color: #6b7280;
  opacity: 1;
}
#mobileQuickSearch .select2-container--disabled .select2-search__field::placeholder {
  color: #6b7280;
  opacity: 1;
}
.select2-container--open .select2-dropdown { z-index: 1050; }

@media (min-width: 992px) {
  .two-row-nav { display: block; }
  .mobile-nav { display: none; }
}

/* ========================================
   UNIFIED NAVBAR HEIGHT VARIABLE
   ======================================== */
:root {
  --navbar-height: clamp(80px, 4.6vw, 100px); /* Two-row nav: clamp-based, matches _quick_search.html.erb */
}

@media (max-width: 991px) {
  :root {
    /* Mobile: 50px nav + 53px Quick Search/Filtrai bar (both fixed-
       positioned). Body padding-top reads this so first-paint
       content sits below both bars. */
    --navbar-height: 103px;
  }
}

/* ========================================
   UNIFIED PAGE HEADER STYLES
   ======================================== */

/* Standard page header - use on all pages for consistency */
.page-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .page-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
}

.page-header h1,
.page-header h2,
.page-header .page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #212529;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-header h1 i,
.page-header h2 i,
.page-header .page-title i {
  color: #6c757d;
}

.page-header .page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ========================================
   LEFT SIDEBAR FILTERS STYLES
   ======================================== */

/* Cars page layout - no extra margin needed since body has padding-top */
.cars-page-layout {
  margin-top: 0;
}

.filters-sidebar-col {
  padding-right: 0;
  border-right: 1px solid #e5e7eb;
  background: #fff;
  position: sticky;
  top: var(--navbar-height);
  height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
  overflow-x: hidden;
  /* Ensure scrolling works on touch devices */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.filters-sidebar {
  padding: 0;
  /* Ensure sidebar content can be taller than container to enable scrolling */
  min-height: min-content;
}

.filters-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  position: sticky;
  top: 0;
  z-index: 10;
}

.filters-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: #1f2937;
}

.filter-section {
  border-bottom: 1px solid #f3f4f6;
}

.filter-section-static .filter-section-body {
  padding: 0.5rem 0.75rem 0.5rem;
}

.filter-inline-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.25rem;
  text-align: center;
}

.filter-inline-label i {
  font-size: 0.65rem;
  color: #9ca3af;
}

/* Auction site toggle buttons with brand colors */
.auction-site-btn { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.5px; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.btn-site-copart { color: #0072bc; border-color: #0072bc; }
.btn-check:checked + .btn-site-copart { background: #0072bc; color: #fff; border-color: #0072bc; }
.btn-site-iaai { color: #c90107; border-color: #c90107; }
.btn-check:checked + .btn-site-iaai { background: #c90107; color: #fff; border-color: #c90107; }
.btn-site-copart-canada { color: #0072bc; border-color: #0072bc; }
.btn-check:checked + .btn-site-copart-canada { background: #0072bc; color: #fff; border-color: #0072bc; }
.btn-site-adesa-canada { color: #00875a; border-color: #00875a; }
.btn-check:checked + .btn-site-adesa-canada { background: #00875a; color: #fff; border-color: #00875a; }

.filter-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.34rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.filter-section-header:hover {
  background: #f9fafb;
}

.filter-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  display: flex;
  align-items: center;
}

.filter-section-title i {
  color: #6b7280;
  font-size: 0.8rem;
}

.filter-toggle-icon {
  font-size: 0.65rem;
  color: #9ca3af;
  transition: transform 0.2s ease;
}

.filter-section-header.collapsed .filter-toggle-icon {
  transform: rotate(-90deg);
}

.filter-section-body {
  padding: 0 0.75rem 0.75rem;
}

/* Category Icons - Horizontal clickable icons */
.category-icons {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

.cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #6b7280;
  background: #f3f4f6;
  text-decoration: none;
  transition: all 0.15s ease;
}

.cat-icon:hover {
  background: #e5e7eb;
  color: #374151;
  text-decoration: none;
}

.cat-icon.active {
  background: #2563eb;
  color: #fff;
}

.cat-icon.active:hover {
  background: #1d4ed8;
  color: #fff;
}

.filter-checkbox-group .form-check {
  padding-left: 1.75rem;
  margin-bottom: 0.5rem;
}

.filter-checkbox-group .form-check-label {
  font-size: 0.875rem;
  color: #4b5563;
}

/* Form controls in sidebar */
.filters-sidebar .form-select-sm,
.filters-sidebar .form-control-sm {
  font-size: 0.8125rem;
}

.filters-sidebar .form-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.filters-sidebar .input-group-text {
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
}

/* Make Model Row */
.make-model-row {
  padding-bottom: 0.75rem;
}

.make-model-row:not(:first-child) {
  padding-top: 0.75rem;
  border-top: 1px dashed #e5e7eb;
}

/* Sidebar Select2 consistent sizing */
.filters-sidebar .select2-container {
  min-height: 31px;
}

.filters-sidebar .select2-container .select2-selection--single,
.filters-sidebar .select2-container .select2-selection--multiple {
  min-height: 31px;
  font-size: 0.8125rem;
}

.filters-sidebar .select2-container--default .select2-selection--multiple {
  padding-bottom: 2px;
}

.filters-sidebar .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 0 5px;
  min-height: 29px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

/* Ensure placeholder is visible when empty */
.filters-sidebar .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: #6c757d;
  margin-left: 0;
}

/* Style for selected items in multi-select */
.filters-sidebar .select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: 2px;
  padding: 2px 6px;
  font-size: 0.75rem;
  line-height: 1.4;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Multi-select chip overflow indicator: "+N more ▾" pill rendered after the
   visible chips by window.applySelect2ChipOverflow. Picks up the same chip
   styling but bg-tinted so it reads as a control. flex-shrink/max-width
   inside the narrow filters-sidebar so the pill survives the container's
   overflow-hidden clip — the chip(s) before it shrink first. */
.select2-selection__more {
  display: inline-flex;
  align-items: center;
  margin: 2px;
  padding: 2px 8px;
  font-size: 0.75rem;
  line-height: 1.4;
  background: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  color: #495057;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}
.select2-selection__more:hover {
  background: #dde2e6;
}

/* When chip-overflow is active, the visible chip(s) get a tighter cap so the
   pill always wins the remaining horizontal space inside the rendered area. */
.filters-sidebar .select2-selection--multiple .select2-selection__rendered:has(.select2-selection__more) .select2-selection__choice:not(.select2-selection__more) {
  max-width: none;
  flex-shrink: 1;
  min-width: 0;
}
.filters-sidebar .select2-selection--multiple .select2-selection__rendered:has(.select2-selection__more) .select2-search--inline {
  flex: 0 0 0;
  width: 0;
  overflow: hidden;
}
/* Hide the absolutely-positioned ▾ pseudo-caret in the narrow sidebar when
   the pill is shown — the pill carries its own ▾ glyph and the duplicate
   caret was overlapping the pill. */
.filters-sidebar .select2-container--default .select2-selection--multiple:has(.select2-selection__more)::before {
  display: none;
}

/* Disabled state for Select2 */
.filters-sidebar .select2-container--disabled .select2-selection {
  background-color: #e9ecef;
  cursor: not-allowed;
  opacity: 0.65;
}

.filters-sidebar .select2-container--disabled .select2-selection__placeholder {
  color: #adb5bd;
}

/* Select2 with external clear button */
.select2-with-clear {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.select2-with-clear .select2-container {
  flex: 1;
}

.select2-with-clear .btn-clear-select {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1;
  color: #6c757d;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.15s ease;
}

.select2-with-clear .btn-clear-select:hover {
  color: #dc3545;
  background: #fff;
  border-color: #dc3545;
}

/* Improve Select2 clear button within the control */
.select2-container--default .select2-selection--multiple .select2-selection__clear,
.select2-container--default .select2-selection--single .select2-selection__clear {
  font-size: 1.25rem;
  font-weight: bold;
  color: #999;
  margin-right: 8px;
  cursor: pointer;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear:hover,
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: #dc3545;
}

/* Make Select2 choice remove button more visible */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #999;
  font-size: 1rem;
  font-weight: bold;
  margin-right: 4px;
  padding: 0 2px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
  border-radius: 2px;
}

/* Main Content Column */
.main-content-col {
  background: #f9fafb;
  min-height: calc(100vh - var(--navbar-height));
}

.auctions-breadcrumb {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  margin: 0 -0.5rem;
  padding: 0.2rem 1rem;
}

.auctions-breadcrumb .breadcrumb {
  --bs-breadcrumb-divider: '›';
  font-size: 0.85rem;
  margin: 0;
}

.auctions-breadcrumb .breadcrumb-item a {
  color: #6b7280;
  text-decoration: none;
}

.auctions-breadcrumb .breadcrumb-item a:hover {
  color: #2563eb;
  text-decoration: underline;
}

.auctions-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: #9ca3af;
  padding: 0 0.35rem;
}

.auctions-breadcrumb .breadcrumb-item.active {
  color: #111827;
}

/* Active-filters chip group on the breadcrumb row. The user can rack
   up dozens of filters (multi-select damage / status / make+model
   pairs etc.) — clamp the area so it doesn't crowd the breadcrumb on
   the left or grow the row to half the page height when filters
   stack 5+ rows deep. Two visible rows of chips, then scroll. */
.auctions-breadcrumb .active-filters-tags {
  max-width: 70%;
  max-height: 4.4rem;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: flex-start;
  scrollbar-width: thin;
}
.auctions-breadcrumb .active-filters-tags .badge {
  font-weight: 500;
  font-size: 0.72rem;
  padding: 0.3rem 0.5rem;
  white-space: nowrap;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
}
.auctions-breadcrumb .active-filters-tags .badge a {
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
}

.auctions-breadcrumb .breadcrumb-item.active h1 {
  display: inline;
  font-size: inherit;
  font-weight: 600;
  color: inherit;
  margin: 0;
  letter-spacing: 0;
  line-height: inherit;
}

.auction-show-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #374151;
  letter-spacing: 0;
  line-height: 1.3;
}

@media (max-width: 767.98px) {
  .auction-show-title {
    font-size: 1rem;
  }
}

/* Active filter tags */
.active-filters-tags .badge {
  font-weight: 500;
  font-size: 0.75rem;
}

.active-filters-tags .badge a {
  text-decoration: none;
  opacity: 0.8;
}

.active-filters-tags .badge a:hover {
  opacity: 1;
}

/* Brand-tinted chips — mirror the sidebar's btn-site-* / btn-outline-success
   colors so the active filter chip is recognisable at a glance. */
.active-filters-tags .auction-site-chip { color: #fff; }
.active-filters-tags .auction-site-chip-copart        { background: #0072bc; }
.active-filters-tags .auction-site-chip-iaai          { background: #c90107; }
.active-filters-tags .auction-site-chip-adesa-canada  { background: #00875a; }
.active-filters-tags .seller-type-chip-insurance      { background: #198754; color: #fff; }

/* Mobile Filters Bar */
.mobile-filters-bar {
  position: sticky;
  top: var(--navbar-height);
  z-index: 1010;
  background: #fff;
}


/* ========================================
   COMPACT CAR CARDS
   ======================================== */

.car-card-compact {
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.car-card-compact:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important;
}

.car-card-compact .car-image-wrapper {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: #f3f4f6;
}

.car-card-compact .card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.car-card-compact:hover .card-img-top {
  transform: scale(1.05);
}

.car-card-compact .badge-sm {
  font-size: 0.65rem;
  padding: 0.2rem 0.4rem;
}

/* Auction Timer Overlay */
.auction-timer-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  padding: 1.5rem 0.5rem 0.5rem;
}

.countdown-inline {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Courier New', monospace;
}

.countdown-inline i {
  margin-right: 0.25rem;
}

/* Car specs */
.car-specs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* Responsive adjustments */
@media (max-width: 1399px) {
  .car-card-compact .car-image-wrapper {
    height: 140px;
  }
}

@media (max-width: 991px) {
  .filters-sidebar-col {
    display: none;
  }

  .main-content-col {
    min-height: auto;
  }

  .cars-page-layout {
    margin-top: 0; /* body already has padding-top, no double spacing */
  }
}

/* ========================================
   Purchase Timeline (Won Bid Completion)
   ======================================== */
.purchase-timeline {
  position: relative;
  padding-left: 2rem;
}

.purchase-timeline .timeline-step {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding-bottom: 1.5rem;
}

.purchase-timeline .timeline-step:last-child {
  padding-bottom: 0;
}

/* Vertical connector line */
.purchase-timeline .timeline-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: 1.75rem;
  width: 2px;
  height: calc(100% - 0.5rem);
  background: #dee2e6;
}

.purchase-timeline .timeline-step.completed:not(:last-child)::before {
  background: #198754;
}

.purchase-timeline .timeline-step.in-progress:not(:last-child)::before {
  background: linear-gradient(to bottom, #0d6efd 50%, #dee2e6 50%);
}

.purchase-timeline .timeline-icon {
  position: absolute;
  left: -2rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  background: #dee2e6;
  color: #6c757d;
  flex-shrink: 0;
}

.purchase-timeline .timeline-step.completed .timeline-icon {
  background: #198754;
  color: #fff;
}

.purchase-timeline .timeline-step.in-progress .timeline-icon {
  background: #0d6efd;
  color: #fff;
}

.purchase-timeline .timeline-content {
  padding-left: 0.5rem;
}

/* Collapsible per-payment line-item breakdown under a partial/final step */
.purchase-timeline .timeline-breakdown-toggle {
  font-size: 0.8125rem;
  color: #0d6efd;
}

.purchase-timeline .timeline-breakdown-toggle .bi-chevron-down {
  transition: transform 0.15s ease;
}

.purchase-timeline .timeline-breakdown-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

.purchase-timeline .timeline-breakdown {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
}

@media (max-width: 767px) {
  .car-card-compact .car-image-wrapper {
    height: 180px;
  }
}


/* ========================================
   OFFCANVAS MOBILE FILTERS
   ======================================== */

#mobileFiltersOffcanvas {
  width: 320px;
}

#mobileFiltersOffcanvas .filters-sidebar {
  height: 100%;
  overflow-y: auto;
}

#mobileFiltersOffcanvas .filters-sidebar-header {
  position: relative;
}


/* ========================================
   SCROLLBAR STYLES
   ======================================== */

.filters-sidebar-col::-webkit-scrollbar {
  width: 6px;
}

.filters-sidebar-col::-webkit-scrollbar-track {
  background: transparent;
}

.filters-sidebar-col::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.filters-sidebar-col::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}


/* ========================================
   FLASH MESSAGES
   ======================================== */

.flash-message-fixed {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  z-index: 1025;
}

/* Body padding for fixed navbar - applies to ALL pages consistently */
body {
  padding-top: var(--navbar-height);
}


/* ========================================
   RANGE SLIDER STYLES
   ======================================== */

.range-slider-container {
  padding: 0.5rem 0;
}

.range-slider-track {
  position: relative;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  margin: 1rem 0.5rem;
  cursor: pointer;
}

.range-slider-range {
  position: absolute;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 3px;
  pointer-events: none;
}

.range-slider-thumb {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 2px solid #667eea;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  z-index: 2;
}

.range-slider-thumb:hover {
  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);
  transform: translate(-50%, -50%) scale(1.1);
}

.range-slider-thumb:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}

.range-slider-thumb.active {
  cursor: grabbing;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
  transform: translate(-50%, -50%) scale(1.15);
}

.range-slider-thumb-max {
  z-index: 3;
}

/* Range display values */
.range-slider-values {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
}

.range-slider-value {
  background: #f3f4f6;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  font-weight: 600;
  color: #374151;
  min-width: 60px;
  text-align: center;
}

.range-slider-input {
  background: #f3f4f6;
  padding: 0.25rem 0.375rem;
  border-radius: 4px;
  font-weight: 600;
  color: #374151;
  min-width: 60px;
  max-width: 90px;
  text-align: center;
  font-size: 0.8125rem;
  border: 1px solid transparent;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  box-sizing: border-box;
}

.range-slider-input:hover {
  border-color: #d1d5db;
}

.range-slider-input--editing {
  border-color: #3b82f6;
  background: #fff;
  cursor: text;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.range-slider-separator {
  color: #9ca3af;
  font-weight: 500;
}

/* Compact inputs for manual entry */
.range-slider-inputs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.range-slider-inputs .form-control {
  text-align: center;
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
}

.range-slider-inputs .range-separator {
  color: #9ca3af;
  font-size: 0.875rem;
}


/* ========================================
   DUAL RANGE SLIDER (Native HTML5)
   ======================================== */

.dual-range-slider {
  padding: 0.5rem 0;
}

.dual-range-track {
  position: relative;
  height: 40px;
  margin: 0.5rem 0;
  /* Add horizontal padding so thumbs don't overflow container */
  padding: 0 10px;
}

/* Background track element - visual only */
.dual-range-track::before {
  content: '';
  position: absolute;
  /* Account for padding - track starts after left padding and ends before right padding */
  left: 10px;
  right: 10px;
  width: auto;
  height: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: #e5e7eb;
  border-radius: 3px;
  pointer-events: none;
}

/* Range fill - highlights selected range */
.dual-range-fill {
  position: absolute;
  height: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 3px;
  pointer-events: none;
  z-index: 1;
}

.dual-range-input {
  position: absolute;
  /* Account for track padding - input spans the padded area */
  left: 10px;
  right: 10px;
  width: calc(100% - 20px);
  height: 40px;
  top: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  margin: 0;
  padding: 0;
}

/* Hide the track - we use ::before on container instead */
.dual-range-input::-webkit-slider-runnable-track {
  height: 40px;
  background: transparent;
  border: none;
}

.dual-range-input::-moz-range-track {
  height: 40px;
  background: transparent;
  border: none;
}

.dual-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 3px solid #667eea;
  border-radius: 50%;
  cursor: grab;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
  /* Center thumb on the track: track is 40px, thumb is 20px, visual line is at 50% (20px) */
  /* We need: (track_height / 2) - (thumb_height / 2) = (40 / 2) - (20 / 2) = 20 - 10 = 10px offset */
  /* But input starts at top:0, so thumb at center = 10px from top of input area */
  margin-top: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
  z-index: 2;
}

.dual-range-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #fff;
  border: 3px solid #667eea;
  border-radius: 50%;
  cursor: grab;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.dual-range-input:hover::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
  border-color: #5a67d8;
}

.dual-range-input:hover::-moz-range-thumb {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
  border-color: #5a67d8;
}

.dual-range-input:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.2);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6);
  border-color: #4c51bf;
  background: #f0f0ff;
}

.dual-range-input:active::-moz-range-thumb {
  cursor: grabbing;
  transform: scale(1.2);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6);
  border-color: #4c51bf;
  background: #f0f0ff;
}

.dual-range-input:focus {
  outline: none;
}

.dual-range-input:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.25), 0 2px 8px rgba(102, 126, 234, 0.4);
}

.dual-range-input:focus::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.25), 0 2px 8px rgba(102, 126, 234, 0.4);
}

/* Z-index handling - bring focused slider to top */
.dual-range-min {
  z-index: 3;
}

.dual-range-max {
  z-index: 4;
}

/* When min value is at max position, bring it to top */
.dual-range-min:active,
.dual-range-min:focus {
  z-index: 5;
}


/* ========================================
   LIST VIEW STYLES
   ======================================== */

/* Container for list view */
.cars-list {
  display: flex;
  flex-direction: column;
  /*gap: 1rem;*/
  padding: 0.25rem 1rem 1rem;
}

.cars-list .car-item {
  width: 100%;
}

/* List card styling */
.list-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.list-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.list-row {
  display: flex;
  align-items: center;
  padding: 1rem;
  gap: 1.5rem;
}

/* List image */
.list-image {
  flex-shrink: 0;
  width: 180px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
}

.list-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lazy loading states - smooth fade in when image loads */
.list-image img.lazyload,
.list-image img.lazyloading {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.list-image img.lazyloaded {
  opacity: 1;
}

.list-image .bg-light {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-image .bi-car-front {
  font-size: 2.5rem;
}

/* List info section */
.list-info {
  flex: 1;
  min-width: 0;
}

.list-info h6 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
  color: #6b7280;
  font-size: 0.875rem;
}

.list-specs span {
  display: flex;
  align-items: center;
}

.list-specs i {
  color: #9ca3af;
}

/* List price */
.list-price {
  flex-shrink: 0;
  text-align: right;
  min-width: 120px;
}

.list-price .fw-bold {
  font-size: 1.25rem;
  color: #059669;
}

/* List actions */
.list-actions {
  flex-shrink: 0;
  display: flex;
  gap: 0.5rem;
}

/* ========================================
   COMPACT MOBILE/TABLET LIST VIEW (<992px)
   Layout: Row 1 = [Image | Details | Price+Buttons on RIGHT]
           Row 2 = [Info section inline, full width]
   ======================================== */


/* ========================================
   GRID VIEW ADJUSTMENTS
   ======================================== */

/* Grid container - use Bootstrap row but add proper gutter */
#cars-container.row {
  margin: 0 -0.5rem;
}

#cars-container.row > .car-item {
  padding: 0.5rem;
}

/* Ensure grid cards display properly */
.grid-card,
.car-card-compact {
  height: 100%;
}

/* Hide list cards in grid view by default */
.grid .list-card {
  display: none !important;
}

/* Hide grid cards in list view */
.cars-list .grid-card,
.cars-list .car-card-compact {
  display: none !important;
}

.cars-list .list-card {
  display: block !important;
}

/* ========================================
   IMPROVED LIST VIEW STYLES
   ======================================== */

/* List card container */
.list-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: all 0.2s ease;
  cursor: pointer;
}

.list-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: #dee2e6;
}

/* List row - main flex container */
.list-row {
  display: flex;
  align-items: center;
  /*gap: 1rem;*/
  padding: 1rem;
}

/* Car image */
.list-image {
  flex-shrink: 0;
  width: 220px;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #f8f9fa;
}

.list-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.list-image .image-count-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 2;
}

/* Auction site badge positioning and styling */
.list-image .auction-site-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.list-image .auction-site-badge.badge-copart {
  background: #0072bc;
  color: #fff;
}

.list-image .auction-site-badge.badge-iaai {
  background: #c90107;
  color: #fff;
}

/* Auction site logo positioning */
.list-image .auction-site-logo {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* --- Hover slideshow gallery + watermark + media pills --- */
.list-image .list-image-main {
  transition: opacity 0.25s ease-in-out;
  will-change: opacity;
}

.list-image:hover .list-image-main {
  opacity: 0.98;
}

/* Subtle darkening gradient at bottom so pills + watermark stay readable */
.list-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.42), rgba(0,0,0,0));
  opacity: 0.75;
  z-index: 1;
}

/* Brand watermark (bottom-left, fades on hover so slideshow reads cleaner) */
.list-image .list-image-watermark {
  position: absolute;
  left: 6px;
  bottom: 4px;
  z-index: 3;
  pointer-events: none;
  line-height: 0;
  opacity: 0.85;
  transition: opacity 0.25s ease;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
}
.list-image .list-image-watermark img {
  height: 22px;
  width: auto;
  display: block;
}
.list-image:hover .list-image-watermark {
  opacity: 0.45;
}

/* Media pill buttons (Video / Spin) */
.list-image .list-image-media-btn {
  position: absolute;
  bottom: 6px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.2px;
  backdrop-filter: blur(2px);
  transition: background 0.15s ease, transform 0.15s ease;
}
.list-image .list-image-media-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: translateY(-1px);
}
.list-image .list-image-media-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}
.list-image .list-image-media-btn i {
  font-size: 0.85rem;
  line-height: 1;
}
/* Video in bottom-left (to the right of watermark) */
.list-image .list-image-media-btn--video {
  left: 70px;
}
/* When no watermark room, hug the left edge */
.list-image:not(:has(.list-image-watermark)) .list-image-media-btn--video {
  left: 6px;
}
/* Spin in bottom-right */
.list-image .list-image-media-btn--spin {
  right: 6px;
}

/* Make image-count-badge sit top-right so it doesn't collide with Spin pill */
.list-image .image-count-badge {
  top: 8px;
  right: 8px;
  bottom: auto;
  left: auto;
}

.list-image .image-count-badge .image-count-total {
  opacity: 0.75;
  font-size: 0.85em;
  margin-left: 1px;
}

/* Prev/Next arrow navigation on list-image (visible on hover) */
.list-image .list-image-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background 0.15s ease, transform 0.15s ease;
}
.list-image:hover .list-image-nav {
  opacity: 1;
  pointer-events: auto;
}
.list-image .list-image-nav:hover {
  background: rgba(0, 0, 0, 0.85);
}
.list-image .list-image-nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  opacity: 1;
  pointer-events: auto;
}
.list-image .list-image-nav--prev { left: 6px; }
.list-image .list-image-nav--next { right: 6px; }

/* When hovering the list-image, the nav arrow on the right side overlaps the
   Spin pill. Push the spin pill up a hair so they don't collide visually. */
.list-image:hover .list-image-media-btn--spin {
  transform: translateY(-1px);
}

/* Inline 360 spin overlay — replaces the card image when active */
.list-image .list-image-spin-overlay {
  position: absolute;
  inset: 0;
  z-index: 6; /* above site badge + pills + nav arrows */
  background: #111;
  overflow: hidden;
  border-radius: inherit;
}
.list-image .list-image-spin-overlay iframe,
.list-image .list-image-spin-overlay .spin-viewer {
  border-radius: inherit;
}
.list-image .list-image-spin-close {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 7;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
  transition: background 0.15s ease;
}
.list-image .list-image-spin-close:hover {
  background: rgba(0, 0, 0, 0.95);
}
.list-image .list-image-spin-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

/* Copart 360 viewer frame (inline) */
.spin-viewer {
  user-select: none;
}
.spin-viewer img {
  pointer-events: none;
}
.spin-viewer .spin-hint {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
}

/* Car details section */
.list-details {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.list-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}

.list-title {
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
  margin: 0;
}

.list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: #6c757d;
}

.list-meta span {
  white-space: nowrap;
}

.list-meta strong {
  color: #495057;
  font-weight: 500;
}

/* Info section (seller, title, location) */
.list-info-section {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  border-left: 1px solid #e9ecef;
  padding-left: 1rem;
}

.list-info-section .info-row {
  display: flex;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.list-info-section .info-label {
  color: #6c757d;
  flex-shrink: 0;
}

.list-info-section .info-value {
  color: #212529;
}

/* Price section */
.list-price-section {
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  padding-left: 1rem;
  border-left: 1px solid #e9ecef;
}

.price-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.price-info .current-bid-label {
  white-space: nowrap;
}

.current-bid-label {
  display: inline-block;
  font-size: 0.75rem;
  color: #6c757d;
  text-transform: uppercase;
  white-space: nowrap;
}

.current-bid-value {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
}

.current-bid-value.text-success {
  color: #198754 !important;
}

.buy-now-price {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 0.25rem;
}

.buy-now-price .fw-bold {
  color: #0d6efd;
}

.auction-timer {
  font-size: 0.8rem;
  color: #dc3545;
  font-weight: 500;
  margin-top: 0.35rem;
}

.list-actions {
  margin-top: 0.5rem;
}

.list-actions .btn {
  white-space: nowrap;
}

/* ========================================
   AUCTION SITE BADGES
   ======================================== */
.auction-site-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-copart {
  background: #0072bc;
  color: #fff;
}

.badge-iaai {
  background: #c90107;
  color: #fff;
}

/* ========================================
   SELLER TYPE BADGES
   ======================================== */
.seller-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
}

.seller-type-insurance {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
}

.seller-type-dealer {
  background-color: #cfe2ff;
  color: #084298;
  border: 1px solid #6ea8fe;
}

.seller-type-rental {
  background-color: #d1e7dd;
  color: #0f5132;
  border: 1px solid #75b798;
}

.seller-type-financial {
  background-color: #e2e3e5;
  color: #41464b;
  border: 1px solid #ced4da;
}

.seller-type-broker {
  background-color: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
}

.seller-type-private {
  background-color: #cff4fc;
  color: #055160;
  border: 1px solid #6edff6;
}

.seller-type-default {
  background-color: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
}

/* ========================================
   BID NOW BUTTON
   ======================================== */
.btn-bid-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 6px;
  margin-top: 0.5rem;
  background: linear-gradient(135deg, #198754 0%, #157347 100%);
  border: none;
  box-shadow: 0 2px 4px rgba(25, 135, 84, 0.3);
  transition: all 0.2s ease;
}

.btn-bid-now:hover {
  background: linear-gradient(135deg, #157347 0%, #0d5a38 100%);
  box-shadow: 0 4px 8px rgba(25, 135, 84, 0.4);
  transform: translateY(-1px);
}

/* ========================================
   BUY NOW OPTION
   ======================================== */
.buy-now-option {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 0.5rem;
  padding: 0.35rem 0.75rem;
  background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
  border: 1px solid #ffc107;
  border-radius: 6px;
}

.buy-now-text {
  font-size: 0.7rem;
  color: #856404;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.buy-now-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: #664d03;
}

/* ========================================
   IMPROVED CURRENT BID
   ======================================== */
.current-bid-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #198754;
}

.current-bid-value small {
  font-size: 0.7rem;
  font-weight: 400;
}

/* ========================================
   IMPROVED AUCTION TIMER
   ======================================== */
.auction-timer {
  font-size: 0.75rem;
  color: #6c757d;
  font-weight: 500;
  margin-top: 0.5rem;
  padding: 0.35rem 0.6rem;
  background: #f8f9fa;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #e9ecef;
}

.auction-timer .timer-label {
  color: #6c757d;
  font-weight: 400;
}

.auction-timer .timer-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
}

.auction-timer .timer-value span[data-countdown-timer-target] {
  font-weight: 700;
  color: #dc3545;
  font-size: 0.85rem;
}

.auction-timer .timer-value small {
  font-weight: 400;
  color: #6c757d;
  font-size: 0.65rem;
}

/* Admin debug panel: whole header row toggles the collapse. Caret flips
   when the target panel is expanded — Bootstrap sets aria-expanded="true". */
.admin-debug-toggle .admin-debug-caret {
  transition: transform .15s ease-in-out;
}
.admin-debug-toggle[aria-expanded="true"] .admin-debug-caret {
  transform: rotate(180deg);
}
.admin-debug-toggle:hover {
  background-color: #e9ecef !important;
}

/* Fallback "Live auction: <date>" line shown under the Timed presale timer.
   Matches auction-timer sizing so the card row doesn't get taller than its neighbours. */
.auction-fallback-date {
  font-size: 0.7rem;
  color: #6c757d;
  margin-top: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  line-height: 1.2;
  white-space: nowrap;
}
.auction-fallback-date .timer-label {
  color: #6c757d;
  font-weight: 400;
}
.auction-fallback-date .timer-value {
  color: #495057;
  font-weight: 600;
}

/* Price column: label + value sit side-by-side on ONE line in desktop cards.
   Previously they wrapped to two lines inside the 160px column. Widening the
   column slightly + forcing nowrap keeps typical amounts ($1,150 USD) visible
   on a single row alongside the "DABARTINIS STATYMAS" / "Current Bid" label. */
.list-price-section {
  flex-basis: 240px;
  min-width: 240px;
}
.list-price-section .price-info {
  flex-wrap: nowrap;
  column-gap: 0.4rem;
  align-items: baseline;
  justify-content: flex-end;
}
.list-price-section .price-info .current-bid-value,
.list-price-section .price-info .current-bid-label,
.list-price-section .price-info .current-bid-value small {
  white-space: nowrap;
}
/* Bottom stack — timer, fallback date, ended date — share a matching width
   so their LEFT edges line up instead of each row being right-aligned at
   its own content width (creates a ragged-left zig-zag look otherwise). */
.list-price-section .auction-timer,
.list-price-section .auction-fallback-date,
.list-price-section .auction-ended-date {
  white-space: nowrap;
  align-items: center;
  justify-content: flex-end;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
}
/* Tablet/smaller desktop: drop the wider basis back so the card doesn't
   push the info column off-screen. */
@media (max-width: 1199.98px) {
  .list-price-section {
    flex-basis: 180px;
    min-width: 180px;
  }
}

/* Mobile compact mode for the fallback date: smaller font + flush-right so
   it lines up with the presale timer above rather than dangling below it. */
@media (max-width: 767.98px) {
  .auction-fallback-date {
    font-size: 0.55rem;
    margin-top: 0.1rem;
    justify-content: flex-end;
    align-items: center;
  }
  .auction-fallback-date i {
    font-size: 0.6rem;
  }
}

/* Reserve price styling */
.current-bid-value.reserve-price {
  color: #0d6efd;
}

.current-bid-value.login-prompt {
  font-size: 0.85rem;
}

.current-bid-value.login-prompt a {
  color: #6c757d;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}

.current-bid-value.login-prompt a:hover {
  color: #0d6efd;
  text-decoration: underline;
}

.current-bid-value.login-prompt i {
  font-size: 0.75rem;
}

/* Remove Bootstrap row styling when in list mode */
.cars-list {
  display: flex !important;
  flex-direction: column !important;
}

.cars-list .car-item {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

/* Badge styling */
.badge-sm {
  font-size: 0.7rem;
  padding: 0.2rem 0.45rem;
  font-weight: 500;
}

.badge-auction-type {
  background-color: #6366f1;
  color: #fff;
}

.badge-virtual {
  background-color: #6f42c1;
  color: #fff;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .list-info-section {
    flex: 0 0 180px;
  }
  .list-price-section {
    flex: 0 0 140px;
  }
}

/* ========================================
   MOBILE LIST CARD LAYOUT
   Must be AFTER all base list card styles
   ======================================== */

/* Tablet / small laptop (<992px) — compact horizontal cards */
@media (max-width: 991.98px) {
  .cars-list {
    gap: 0.4rem;
    padding: 0.25rem 0;
  }
  .list-card {
    border-radius: 0.5rem;
    margin-bottom: 0;
    overflow: hidden;
  }
  .list-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    padding: 0.5rem;
    align-items: center;
  }
  /* Compact thumbnail */
  .list-image {
    flex-shrink: 0;
    width: 90px;
    height: 62px;
    border-radius: 6px;
  }
  .list-image .auction-site-badge {
    font-size: 0.5rem;
    padding: 1px 3px;
  }
  .list-image .image-count-badge {
    font-size: 0.55rem;
    padding: 1px 4px;
    top: 3px;
    right: 3px;
    bottom: auto;
    left: auto;
  }
  /* On compact cards (≤991px) the thumbnail is too small for pills/watermark;
     hide decorative overlays but keep the site badge + image count. */
  .list-image .list-image-watermark,
  .list-image .list-image-media-btn,
  .list-image .list-image-nav {
    display: none;
  }
  .list-image::after {
    display: none;
  }
  /* Details: takes remaining space */
  .list-details {
    flex: 1;
    min-width: 120px;
  }
  .list-title {
    font-size: 0.82rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .list-title-row {
    margin-bottom: 0.15rem;
    gap: 0.3rem;
  }
  .list-title-row .badge {
    font-size: 0.55rem;
    padding: 0.1em 0.3em;
  }
  .list-meta {
    font-size: 0.75rem;
    gap: 0.1rem 0.4rem;
    color: #888;
  }
  .list-meta strong {
    font-weight: 600;
    color: #666;
  }
  /* Price section: stays on the RIGHT via flex order */
  .list-price-section {
    order: 3;
    flex: 0 0 auto;
    border-left: none;
    padding-left: 0;
    text-align: right;
    align-items: flex-end;
  }
  .list-price-section .price-info {
    margin-bottom: 0;
  }
  .list-price-section .current-bid-label {
    font-size: 0.6rem;
  }
  .list-price-section .current-bid-value {
    font-size: 0.95rem;
  }
  .list-price-section .current-bid-value small {
    font-size: 0.5rem;
  }
  .btn-bid-now {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    margin-top: 0.2rem;
    min-height: 32px;
  }
  .buy-now-option {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    margin-top: 0.15rem;
  }
  .buy-now-option .buy-now-text {
    font-size: 0.6rem;
  }
  .buy-now-option .buy-now-price {
    font-size: 0.75rem;
  }
  .auction-timer, .auction-ended-date {
    font-size: 0.6rem;
    padding: 0.15rem 0.3rem;
    margin-top: 0.15rem;
  }
  .auction-timer .timer-value span[data-countdown-timer-target] {
    font-size: 0.7rem;
  }
  .auction-timer .timer-value small {
    font-size: 0.55rem;
  }
  /* Info section: wraps to full-width second row */
  .list-info-section {
    order: 4;
    flex: 0 0 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #f0f0f0;
    padding-top: 0.2rem;
    font-size: 0.75rem;
  }
  .list-info-section .info-row {
    display: inline-flex;
    gap: 0.15rem;
    font-size: 0.75rem;
    white-space: nowrap;
    line-height: 1.5;
  }
  .list-info-section .info-label {
    color: #aaa;
    font-size: 0.7rem;
  }
  .list-info-section .info-value {
    color: #444;
  }
  .list-info-section .seller-type-badge {
    font-size: 0.65rem;
    padding: 0 4px;
    border-radius: 3px;
  }
}

/* Phone (<768px) — stacked card layout for usability */
@media (max-width: 767.98px) {
  .cars-list {
    gap: 0.5rem;
  }
  .list-card {
    border-radius: 8px;
  }
  .list-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  /* Image: full-width banner at top of card — scale with viewport width
     so car photos aren't cropped into a squat strip on small phones. */
  .list-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 0;
    position: relative;
  }
  .list-image .list-image-main,
  .list-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .list-image .auction-site-badge {
    font-size: 0.6rem;
    padding: 2px 6px;
    top: 8px;
    left: 8px;
  }
  .list-image .image-count-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    top: 8px;
    right: 8px;
    bottom: auto;
    left: auto;
  }
  /* Re-show the hover overlays on the full-width mobile banner
     (the ≤991.98px rule above hides them for the 90×62 tablet thumb). */
  .list-image .list-image-watermark,
  .list-image .list-image-media-btn,
  .list-image .list-image-nav {
    display: inline-flex;
  }
  .list-image .list-image-watermark {
    display: inline-block;
  }
  .list-image::after {
    display: block;
  }
  /* On touch devices there's no hover — keep nav arrows always visible. */
  .list-image .list-image-nav {
    opacity: 1;
    pointer-events: auto;
  }
  /* Details: below image */
  .list-details {
    flex: none;
    min-width: unset;
    padding: 0.6rem 0.75rem 0;
  }
  .list-title {
    font-size: 0.95rem;
    line-height: 1.3;
    -webkit-line-clamp: 2;
  }
  .list-title-row {
    margin-bottom: 0.25rem;
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  .list-title-row .badge {
    font-size: 0.6rem;
    padding: 0.15em 0.4em;
  }
  .list-meta {
    font-size: 0.78rem;
    gap: 0.15rem 0.6rem;
    color: #666;
    flex-wrap: wrap;
  }
  .list-meta strong {
    font-weight: 600;
    color: #444;
  }
  /* Hide VIN on phones — lot + odometer + engine is enough */
  .list-meta span:nth-child(2) {
    display: none;
  }
  /* Price section: full-width row with price + timer + button */
  .list-price-section {
    order: 3;
    flex: none;
    border-left: none;
    padding: 0.5rem 0.75rem;
    text-align: left;
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: space-between;
  }
  .list-price-section .price-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    width: 100%;
    margin-bottom: 0;
  }
  .list-price-section .current-bid-label {
    font-size: 0.7rem;
    display: inline;
  }
  .list-price-section .current-bid-value {
    font-size: 1.1rem;
    font-weight: 700;
  }
  .list-price-section .current-bid-value small {
    font-size: 0.65rem;
  }
  .btn-bid-now {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    min-height: 44px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Flatten buy-now to a single inline row so it matches BID NOW + timer
     height on the mobile flex-row price section. Keep the yellow pill but
     restore horizontal padding — previously `padding: 0.2rem 0` left the
     text hugging the yellow border. */
  .buy-now-option {
    flex-direction: row;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.55rem;
    margin-top: 0;
  }
  .buy-now-option .buy-now-text {
    font-size: 0.7rem;
  }
  .buy-now-option .buy-now-price {
    font-size: 0.85rem;
    font-weight: 700;
  }
  .auction-timer, .auction-ended-date {
    font-size: 0.75rem;
    padding: 0.2rem 0;
    margin-top: 0;
  }
  .auction-timer .timer-label,
  .auction-ended-date .timer-label {
    font-size: 0.7rem;
  }
  .auction-timer .timer-value span[data-countdown-timer-target] {
    font-size: 0.8rem;
  }
  .auction-timer .timer-value small {
    font-size: 0.65rem;
  }
  .auction-timer i,
  .auction-ended-date i {
    margin-right: 0.2rem;
  }
  /* Info section: compact footer row */
  .list-info-section {
    order: 4;
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem 0.6rem;
    border-left: none;
    padding: 0.4rem 0.75rem 0.6rem;
    border-top: 1px solid #f0f0f0;
    font-size: 0.75rem;
  }
  .list-info-section .info-row {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    white-space: nowrap;
    line-height: 1.5;
  }
  .list-info-section .info-label {
    color: #999;
    font-size: 0.7rem;
  }
  .list-info-section .info-value {
    color: #444;
  }
  .list-info-section .seller-type-badge {
    font-size: 0.7rem;
    padding: 0 5px;
    border-radius: 3px;
  }
  /* Hide auction date row — timer already shows it */
  .list-info-section .info-row:last-child {
    display: none;
  }
}

/* Small phone (<576px) — tighten stacked card */
@media (max-width: 575.98px) {
  .list-image {
    /* Keep the 4:3 aspect from the ≤768px rule — don't force a tiny fixed height */
    aspect-ratio: 4 / 3;
    height: auto;
  }
  .list-details {
    padding: 0.5rem 0.6rem 0;
  }
  .list-title {
    font-size: 0.88rem;
  }
  .list-title-row .badge {
    font-size: 0.55rem;
  }
  .list-meta {
    font-size: 0.75rem;
    gap: 0.1rem 0.5rem;
  }
  .list-price-section {
    padding: 0.4rem 0.6rem;
  }
  .list-price-section .current-bid-value {
    font-size: 1rem;
  }
  .btn-bid-now {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
    min-height: 40px;
  }
  /* Small phones: keep buy-now visible but compact. Previously `display: none`
     hid the Buy Now price entirely on <576px — users on phones had no way
     to see it. Now it renders as a tight inline pill below the BID NOW row. */
  .buy-now-option {
    font-size: 0.7rem;
    padding: 0.2rem 0.45rem;
    gap: 0.3rem;
  }
  .buy-now-option .buy-now-text {
    font-size: 0.6rem;
  }
  .buy-now-option .buy-now-price {
    font-size: 0.75rem;
  }
  .list-info-section {
    padding: 0.35rem 0.6rem 0.5rem;
    font-size: 0.75rem;
    gap: 0.1rem 0.5rem;
  }
  .list-info-section .info-row {
    font-size: 0.75rem;
  }
  /* Only show seller + location on small phones */
  .list-info-section .info-row:nth-child(n+3) {
    display: none;
  }
}

/* ========================================
   MOBILE SHOW PAGE IMPROVEMENTS
   ======================================== */

/* Touch-friendly tabs on auction show page (mobile) */
@media (max-width: 767.98px) {
  .auction-show-page .nav-tabs .nav-item {
    flex: 1;
  }
  .auction-show-page .nav-tabs .nav-link {
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    width: 100%;
  }
  .auction-show-page .nav-tabs {
    display: flex;
  }
  /* Thumbnail grid: add gap for touch targets */
  .auction-show-page .d-grid {
    gap: 4px;
  }
}

/* Auction history tabs on auction show page (desktop / tablet).
   Without this the three tabs (lot history, VIN history, VIN specs) only
   take ~1/6 of the page width and look like inert text — users miss that
   they're clickable. nav-fill on the <ul> already stretches each tab to
   1/3 of the row; this rule turns them into a proper tab bar:
   - bigger, bolder labels (clear hit target + clickable hint)
   - subtle hover lift
   - distinct active state (primary-color underline + bg tint)
   The mobile rule above keeps mobile compact — this branch is desktop only. */
@media (min-width: 768px) {
  .auction-show-page .auction-history-tabs {
    border-bottom-width: 2px;
  }
  .auction-show-page .auction-history-tabs .nav-link {
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: #4b5563;             /* slate-600 — clearly readable + invites click */
    border-bottom-width: 3px;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  }
  .auction-show-page .auction-history-tabs .nav-link:hover:not(.active) {
    color: #1f2937;             /* slate-800 */
    background-color: #f9fafb;  /* gray-50 */
    border-color: transparent transparent #d1d5db;
  }
  .auction-show-page .auction-history-tabs .nav-link.active {
    color: var(--bs-primary);
    background-color: #eff6ff;  /* blue-50 */
    border-color: #e5e7eb #e5e7eb var(--bs-primary);
  }
  .auction-show-page .auction-history-tabs .nav-link i {
    font-size: 1.05rem;
  }
}

/* ========================================
   MOBILE SHARE DROPDOWN & CALCULATOR
   ======================================== */

/* Share dropdown: prevent off-screen overflow on mobile */
@media (max-width: 767.98px) {
  .auction-show-page .dropdown-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    transform: none;
    border-radius: 12px 12px 0 0;
    margin: 0;
    padding: 0.5rem 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1060;
  }
  .auction-show-page .dropdown-menu .dropdown-item {
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
  }
  /* Backdrop for bottom sheet */
  .auction-show-page .dropdown-menu.show::before {
    content: '';
    position: fixed;
    top: -100vh;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: -1;
  }
}

/* Price calculator: better mobile spacing */
@media (max-width: 767.98px) {
  .auction-show-page .tab-pane .card-body .table td,
  .auction-show-page .tab-pane .card-body .table th {
    padding: 0.6rem 0.5rem;
    font-size: 0.875rem;
  }
  .auction-show-page .tab-pane .input-group {
    min-height: 44px;
  }
  .auction-show-page .tab-pane .input-group input {
    font-size: 1rem;
    min-height: 44px;
  }
}

/* Live-sync indicator: overlays the bid_panel with a blurred copy of
   its contents and a centered status pill while a page-load refresh
   job is in flight. Managed by live_sync_indicator_controller.js.
   - .live-sync--active (default on connect): blur + pulsing green pill
   - .live-sync--failed  (15s timeout w/ no stream): red pill + "failed" label
   - .live-sync--done    (stream arrived OR failure linger ended): fade out */
.live-sync-target {
  position: relative;
}
.live-sync-content {
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.live-sync--active .live-sync-content,
.live-sync--failed .live-sync-content {
  filter: blur(3px) saturate(0.85);
  pointer-events: none;
  user-select: none;
}
.live-sync-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 1rem;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.live-sync--done .live-sync-overlay,
.live-sync--done .live-sync-content {
  opacity: 0;
}
.live-sync--done .live-sync-content {
  filter: none;
}
.live-sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(25, 135, 84, 0.3);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #198754;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.live-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #198754;
  box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.55);
  animation: live-sync-pulse 1.3s ease-in-out infinite;
  transition: background 0.3s ease;
}
.live-sync-label {
  letter-spacing: 0.01em;
}
.live-sync--failed .live-sync-pill {
  color: #dc3545;
  border-color: rgba(220, 53, 69, 0.3);
}
.live-sync--failed .live-sync-dot {
  background: #dc3545;
  animation: none;
  box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
}
@keyframes live-sync-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(25, 135, 84, 0); }
  100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

/* Bid form input-group invalid-state border
   When the .form-control inside an input-group becomes .is-invalid,
   Bootstrap by default only paints the middle input red, leaving the
   $/USD addons with their default light-grey borders — visually a
   sharp red slab between unchanged rounded addons. Pull the addons
   into the invalid state too so the whole group reads as one
   coherent error-state input with intact rounded corners. */
.input-group:has(> .form-control.is-invalid) > .input-group-text {
  border-color: var(--bs-form-invalid-border-color, #dc3545);
}
.input-group:has(> .form-control.is-invalid:focus) > .input-group-text {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}

/* vPIC index/show panel — "view all fields" toggle.
   Bootstrap toggles the .collapsed class on the trigger button when
   the linked .collapse element is hidden. We flip the inline label
   text accordingly so one button reads as "View all N fields" while
   collapsed and "Hide additional fields" while expanded. */
[data-test="vpic-toggle-additional"].collapsed .when-expanded,
[data-test="vpic-toggle-additional"]:not(.collapsed) .when-collapsed {
  display: none;
}

/* Min-width safeguard */
html {
  min-width: 320px;
}

/* =============================================================================
   Landing-page auction carousel (lcaro = "landing carousel")
   Cards inside .lcaro-cell are the v2 MOBILE list card (forced via
   card_partial: 'auctions/list_card_v2_mobile' in LandingCarouselController)
   because the cells are narrow vertical columns — the desktop v2 layout
   is horizontal and breaks below ~480px wide.
   Per MEMORY: media queries for list cards live at the end of this file.
   ============================================================================= */
.lcaro {
  background: linear-gradient(180deg, #ffffff 0%, var(--bs-light, #f8f9fa) 100%);
  border: 1px solid var(--bs-gray-200);
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1rem;
  margin: 1.5rem auto;
  max-width: 1400px;
}

/* Collapse vertical gap between consecutive carousel sections so they read
   as a stack rather than each section floating in its own pool of margin. */
.lcaro + .lcaro {
  margin-top: 0.5rem;
}

/* Auto-cycling carousel already advances each card's preview image via the
   shared card-hover-gallery controller's `tick()`. The per-card chevron
   buttons (rendered by the mobile v2 partial) are only useful on touch
   devices where there's no hover affordance. Hide them on desktop.
   Specificity is intentionally bumped past `.lcv2m-gallery .list-image
   .list-image-nav` (3 classes) in list_card_v2.css, which always re-shows
   them with `display: inline-flex`. */
.lcaro .lcaro-cell .lcv2m-gallery .list-image .list-image-nav {
  display: none;
}
@media (max-width: 767.98px) {
  .lcaro .lcaro-cell .lcv2m-gallery .list-image .list-image-nav {
    display: inline-flex;
    opacity: 1;
    pointer-events: auto;
  }
}

.lcaro-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
  padding: 0 0.25rem;
}

.lcaro-titles {
  min-width: 0;
}

.lcaro-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--bs-dark);
  margin: 0 0 0.125rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.lcaro-subtitle {
  font-size: 0.875rem;
  color: var(--bs-gray-600);
  margin: 0;
}

.lcaro-playpause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--bs-gray-300);
  background: #fff;
  color: var(--bs-dark);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}

.lcaro-playpause:hover {
  background: var(--bs-light);
  border-color: var(--bs-gray-400);
}

.lcaro-playpause:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.lcaro-playpause--paused {
  background: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
}

.lcaro-playpause--paused:hover {
  background: #0b5ed7;
  border-color: #0b5ed7;
}

.lcaro-playpause i {
  font-size: 1.15rem;
  line-height: 1;
}

.lcaro-viewport {
  position: relative;
  border-radius: 12px;
}

/* Soft fades on the left/right edges hint at scrollability. */
.lcaro-viewport::before,
.lcaro-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  z-index: 2;
}

.lcaro-viewport::before {
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%);
  border-radius: 12px 0 0 12px;
}

.lcaro-viewport::after {
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%);
  border-radius: 0 12px 12px 0;
}

/* Nav arrows — absolute-positioned on viewport sides, vertically centered. */
.lcaro-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--bs-gray-300);
  background: #fff;
  color: var(--bs-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.5rem;
  z-index: 5;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.lcaro-nav--prev { left: -28px; }
.lcaro-nav--next { right: -28px; }

.lcaro-nav:hover {
  background: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
  transform: translateY(-50%) scale(1.05);
}

.lcaro-nav:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.lcaro-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.25rem 0.25rem 0.5rem;
  /* Cells size to their own card content (no row-height equalisation). The
     prior `stretch` made cells without a bid/buy button leave a tall empty
     pocket below the price bar because the body's `flex: 1` chain pushed
     the card border out without filling the body. */
  align-items: flex-start;
}

.lcaro-track::-webkit-scrollbar {
  display: none;
}

.lcaro-cell {
  flex: 0 0 300px;
  scroll-snap-align: start;
  min-width: 0;
}

/* Cards size to their content within the cell — no forced row-height
   equalisation. See the `align-items: flex-start` note on .lcaro-track. */
.lcaro-cell > .car-item,
.lcaro-cell > .car-item-v2 {
  width: 100%;
  margin: 0;
}

/* Skeleton placeholders before the JSON arrives. Same shape as a real
   card so there's no layout shift on swap. */
.lcaro-cell--skeleton {
  background: #fff;
  border: 1px solid var(--bs-gray-200);
  border-radius: 12px;
  overflow: hidden;
  height: 480px;
  padding: 0;
  flex-direction: column;
}

.lcaro-skel {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.04) 0%,
    rgba(0,0,0,0.08) 50%,
    rgba(0,0,0,0.04) 100%);
  background-size: 200% 100%;
  animation: lcaro-shimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
}

.lcaro-skel--image {
  height: 220px;
  border-radius: 0;
  margin: 0;
}

.lcaro-skel--line {
  height: 14px;
  margin: 14px 16px 0;
}

.lcaro-skel--line-1 { width: 80%; }
.lcaro-skel--line-2 { width: 55%; }
.lcaro-skel--line-3 { width: 40%; margin-bottom: 16px; }

@keyframes lcaro-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lcaro-track { scroll-behavior: auto; }
  .lcaro-skel  { animation: none; }
  .lcaro-nav,
  .lcaro-playpause { transition: none; }
}

/* Large laptop / 1080p+ wider screens — let arrows sit fully outside */
@media (min-width: 1400px) {
  .lcaro          { padding: 1.5rem 1.75rem 1.25rem; }
  .lcaro-nav      { width: 60px; height: 60px; font-size: 1.65rem; }
  .lcaro-nav--prev { left: -30px; }
  .lcaro-nav--next { right: -30px; }
  .lcaro-cell     { flex: 0 0 320px; }
}

/* Tablet */
@media (max-width: 1199px) {
  .lcaro          { padding: 1.125rem 1rem 0.875rem; margin: 1.25rem auto; }
  .lcaro-title    { font-size: 1.25rem; }
  .lcaro-subtitle { font-size: 0.825rem; }
  .lcaro-cell     { flex: 0 0 280px; }
  .lcaro-cell--skeleton { height: 460px; }
  .lcaro-skel--image    { height: 200px; }
  .lcaro-nav      { width: 48px; height: 48px; font-size: 1.25rem; }
  .lcaro-nav--prev { left: -20px; }
  .lcaro-nav--next { right: -20px; }
}

/* Phone */
@media (max-width: 767px) {
  .lcaro          { padding: 0.5rem 0.75rem 0.5rem; margin: 0.75rem 0.5rem; border-radius: 14px; }
  /* Centered title + absolute-positioned play/pause so the title stays
     visually centered regardless of pause/play state. */
  .lcaro-header   { position: relative; padding: 0; margin-bottom: 0.5rem; justify-content: center; text-align: center; }
  .lcaro-titles   { width: 100%; }
  .lcaro-title    { font-size: 1.1rem; }
  .lcaro-subtitle { font-size: 0.8rem; }
  .lcaro-playpause { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 34px; height: 34px; }
  .lcaro-playpause i { font-size: 0.95rem; }
  .lcaro-nav      { width: 44px; height: 44px; font-size: 1.1rem; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
  /* Inside-viewport on phones so the arrows don't push into the page margins */
  .lcaro-nav--prev { left: 8px; }
  .lcaro-nav--next { right: 8px; }
  /* Cell width = full available inner space of the carousel section
     (track inner = viewport - .lcaro margin (0.5rem ×2) - .lcaro padding
     (0.75rem ×2) - .lcaro-track padding (0.25rem ×2) ≈ 3rem total).
     With one card visible at a time on phones, this makes the card
     fill the row instead of sitting flush-left with an empty gutter
     on the right. Subsequent cards still scroll via x-overflow. */
  .lcaro-cell     { flex: 0 0 calc(100vw - 3rem); max-width: 360px; }
  .lcaro-cell--skeleton { height: 420px; }
  .lcaro-skel--image    { height: 180px; }
  .lcaro-viewport::before,
  .lcaro-viewport::after { width: 18px; }
}

/* Very small */
@media (max-width: 420px) {
  .lcaro-cell     { flex: 0 0 calc(100vw - 3rem); }
  .lcaro-title    { font-size: 1rem; }
}