/* =============================== RESPONSIVE FIXES FOR TABLETS AND MOBILE =============================== */
/* Using only responsive units: rem, em, vw, vh, % - NO px values */

/* 1. CAR BRANDS NAVBAR RESPONSIVE FIXES */
/* Fix navbar alignment issues on tablets when user is logged in */
/* REMOVED - NOT WORKING - OVERRIDDEN BY MAIN STYLES.CSS */
/* The tablet responsive rules were being overridden by styles.css */
/* Using nuclear option overrides below instead */

/* Specific fix for 1024px width screens */
@media (max-width: 63.9375rem) and (min-width: 60rem) {
  .search-bar-carbrand {
    width: 22rem !important;
    max-width: 22rem !important;
    margin-left: 3% !important;
    margin-right: 1% !important;
  }
  
  .navbar-carbrand .collapse {
    flex-shrink: 0; /* Prevent navigation from shrinking */
    min-width: fit-content;
  }
  
  .search-bar-carbrand input {
    width: 12rem !important;
    max-width: 12rem !important;
  }
  
  .search-bar-carbrand button {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }
}

/* Ensure navbar collapse is visible at exactly 1024px */
@media (width: 64rem) {
  .navbar-collapse.d-md-flex {
    display: flex !important;
    justify-content: flex-end !important;
  }
  
  .navbar-carbrand {
    flex-wrap: nowrap !important;
  }
  
  .search-bar-carbrand {
    width: 22rem !important;
    max-width: 22rem !important;
    margin-left: 3% !important;
    margin-right: 1% !important;
    flex: none !important;
  }
}

/* REMOVED - NOT WORKING - OVERRIDDEN BY MAIN STYLES.CSS */
/* The mobile responsive rules were being overridden by styles.css */
/* Using nuclear option overrides below instead */

/* REMOVED - NOT WORKING - OVERRIDDEN BY MAIN STYLES.CSS */
/* The 768px-770px responsive rules were being overridden by styles.css */
/* Using nuclear option overrides below instead */

/* AGGRESSIVE OVERRIDES - HIGHEST SPECIFICITY */
/* Force override all conflicting styles with maximum specificity */

@media (max-width: 47.9375rem) {
  /* Nuclear option - MOBILE with HAMBURGER DROPDOWN like other pages */
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand {
    padding: 0.75rem 2% !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    background: rgba(30, 30, 30, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    box-shadow: 0rem 0.25rem 0.9375rem rgba(0, 0, 0, 0.3) !important;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1) !important;
  }
  
  /* BRAND NAME - left side, smaller */
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .navbar-brand-carbrand {
    font-size: 1.25rem !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    color: #f0f0f0 !important;
  }
  
  /* HAMBURGER TOGGLER - right side, first row */
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .navbar-toggler {
    order: 3 !important;
    flex: 0 0 auto !important;
    border: none !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 1rem !important;
    background: transparent !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
  
  /* SEARCH BAR - stays on first row, compact */
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .search-bar-carbrand.search-bar-carbrand {
    width: 45% !important;
    max-width: 45% !important;
    margin: 0 1% !important;
    order: 2 !important;
    flex: 0 0 45% !important;
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.2) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 1.5625rem !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .search-bar-carbrand.search-bar-carbrand input {
    width: calc(100% - 2.5rem) !important;
    max-width: calc(100% - 2.5rem) !important;
    font-size: 0.75rem !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #fff !important;
    margin-left: 0.5rem !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .search-bar-carbrand.search-bar-carbrand button {
    width: 2.5rem !important;
    padding: 0.375rem 0.25rem !important;
    font-size: 0.625rem !important;
    background: #0056b3 !important;
    border: none !important;
    border-radius: 1.5625rem !important;
    color: white !important;
    font-weight: bold !important;
    cursor: pointer !important;
  }
  
  /* COLLAPSIBLE NAVIGATION - hidden by default, shows on toggle */
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .collapse.navbar-collapse {
    flex: 1 1 100% !important;
    order: 4 !important;
    margin: 0.5rem 0 0 0 !important;
    display: none !important; /* Hidden by default on mobile */
    width: 100% !important;
  }
  
  /* When collapsed menu is shown */
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .collapse.navbar-collapse.show {
    display: block !important;
  }
  
  /* Navigation items in collapsed state */
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .navbar-nav {
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .nav-link {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    color: white !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.5rem !important;
    margin: 0.125rem 0 !important;
    text-align: center !important;
    display: block !important;
    text-decoration: none !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .nav-link:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
  }
  
  /* Dropdown menu items */
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .dropdown-menu {
    background: rgba(30, 30, 30, 0.95) !important;
    border: 0.0625rem solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.5rem !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .dropdown-item {
    color: white !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
  }
}

/* Nuclear option for 768px-1023px range - EXTENDED to cover 960px-1023px gap */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand {
    flex-wrap: nowrap !important;
    padding: 0.75rem 2% !important;
    width: 100% !important;
    background: rgba(30, 30, 30, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    box-shadow: 0rem 0.25rem 0.9375rem rgba(0, 0, 0, 0.3) !important;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Hide hamburger button for tablet screens */
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .navbar-toggler {
    display: none !important;
  }
  
  /* Search bar sizing based on screen width */
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .search-bar-carbrand.search-bar-carbrand {
    width: 22rem !important;
    max-width: 22rem !important;
    margin-left: 3% !important;
    margin-right: 2% !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.2) !important;
    padding: 0.625rem 1.125rem !important;
    border-radius: 1.5625rem !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .search-bar-carbrand.search-bar-carbrand input {
    width: calc(100% - 3.5rem) !important;
    max-width: calc(100% - 3.5rem) !important;
    font-size: 0.875rem !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #fff !important;
    margin-left: 0.75rem !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .search-bar-carbrand.search-bar-carbrand button {
    width: 3.5rem !important;
    padding: 0.5rem 0.5rem !important;
    font-size: 0.75rem !important;
    background: #0056b3 !important;
    border: none !important;
    border-radius: 1.5625rem !important;
    color: white !important;
    font-weight: bold !important;
    cursor: pointer !important;
  }
  
  /* ENSURE NAVIGATION IS VISIBLE */
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .collapse.navbar-collapse {
    flex: 0 0 auto !important;
    margin: 0 !important;
    display: flex !important;
    width: auto !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .navbar-nav {
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .nav-link {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    white-space: nowrap !important;
    color: white !important;
    text-decoration: none !important;
  }
  
  /* Force Bootstrap classes to work */
  body .navbar-collapse.d-md-flex.d-md-flex {
    display: flex !important;
    justify-content: flex-end !important;
  }
}

/* NAVBAR FOR LARGE SCREENS (≥1024px) - Single row with all elements */
@media (min-width: 64rem) {
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand {
    flex-wrap: nowrap !important;
    padding: 0.75rem 2% !important;
    width: 100% !important;
    background: rgba(30, 30, 30, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    box-shadow: 0rem 0.25rem 0.9375rem rgba(0, 0, 0, 0.3) !important;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Hide hamburger button on large screens */
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .navbar-toggler {
    display: none !important;
  }
  
  /* Search bar sizing for large screens */
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .search-bar-carbrand.search-bar-carbrand {
    width: 25rem !important;
    max-width: 25rem !important;
    margin-left: 3% !important;
    margin-right: 2% !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.2) !important;
    padding: 0.625rem 1.125rem !important;
    border-radius: 1.5625rem !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .search-bar-carbrand.search-bar-carbrand input {
    width: calc(100% - 3.5rem) !important;
    max-width: calc(100% - 3.5rem) !important;
    font-size: 0.875rem !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #fff !important;
    margin-left: 0.75rem !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .search-bar-carbrand.search-bar-carbrand button {
    width: 3.5rem !important;
    padding: 0.5rem 0.5rem !important;
    font-size: 0.75rem !important;
    background: #0056b3 !important;
    border: none !important;
    border-radius: 1.5625rem !important;
    color: white !important;
    font-weight: bold !important;
    cursor: pointer !important;
  }
  
  /* ENSURE NAVIGATION IS VISIBLE AND IN SINGLE ROW */
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .collapse.navbar-collapse {
    flex: 0 0 auto !important;
    margin: 0 !important;
    display: flex !important;
    width: auto !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .navbar-nav {
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .nav-link {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    white-space: nowrap !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 0.375rem !important;
    transition: background-color 0.2s ease !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .nav-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
  }
  
  /* Force Bootstrap classes to work */
  body .navbar-collapse.d-md-flex.d-md-flex {
    display: flex !important;
    justify-content: flex-end !important;
  }
}

/* Nuclear option for hero section - RESPONSIVE FONT SIZES & MARGINS */
/* Large screens (1024px+) - Base size */
@media (min-width: 64rem) {
  body .hero-section-carbrand.hero-section-carbrand {
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 10rem !important; /* 200px = 12.5rem - responsive */
    margin-bottom: 0rem !important; /* Large bottom margin for desktop */
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  
  body .hero-section-carbrand.hero-section-carbrand h1 {
    font-size: 2.625rem !important; /* 42px = 2.625rem */
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  
  body .hero-section-carbrand.hero-section-carbrand p {
    font-size: 1.25rem !important; /* 20px = 1.25rem */
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    box-sizing: border-box !important;
  }
}

/* Medium screens (768px-1023px) - Scaled down */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  body .hero-section-carbrand.hero-section-carbrand {
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 8rem !important; /* Smaller margin for tablets */
    margin-bottom: 0rem !important; /* Medium bottom margin for tablets */
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  body .hero-section-carbrand.hero-section-carbrand h1 {
    font-size: 2.25rem !important; /* 85% of base */
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  
  body .hero-section-carbrand.hero-section-carbrand p {
    font-size: 1.125rem !important; /* 90% of base */
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box !important;
  }
}

/* Small screens (≤767px) - Smaller fonts */
@media (max-width: 47.9375rem) {
  body .hero-section-carbrand.hero-section-carbrand {
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 7rem !important; /* Much smaller margin for mobile */
    margin-bottom: 0rem !important; /* Small bottom margin for mobile */
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  body .hero-section-carbrand.hero-section-carbrand h1 {
    font-size: 1.75rem !important; /* 67% of base for mobile */
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  
  body .hero-section-carbrand.hero-section-carbrand p {
    font-size: 1rem !important; /* 80% of base for mobile */
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }
}

/* Extra small screens (≤480px) - Even smaller fonts */
@media (max-width: 30rem) {
  body .hero-section-carbrand.hero-section-carbrand {
    margin-top: 7rem !important; /* Even smaller margin for very small screens */
    margin-bottom: 0rem !important; /* Very small bottom margin for tiny screens */
  }
  
  body .hero-section-carbrand.hero-section-carbrand h1 {
    font-size: 1.2rem !important; /* 57% of base for very small screens */
  }
  
  body .hero-section-carbrand.hero-section-carbrand p {
    font-size: 0.75rem !important; /* 70% of base for very small screens */
  }
}

/* Additional fix for small tablets (768px-800px) - Smaller search bar */
@media (min-width: 48rem) and (max-width: 50rem) {
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .search-bar-carbrand.search-bar-carbrand {
    width: 18rem !important;
    max-width: 18rem !important;
    margin-left: 2% !important;
    margin-right: 1% !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .search-bar-carbrand.search-bar-carbrand input {
    width: calc(100% - 3rem) !important;
    max-width: calc(100% - 3rem) !important;
    font-size: 0.8125rem !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .search-bar-carbrand.search-bar-carbrand button {
    width: 3rem !important;
    padding: 0.5rem 0.25rem !important;
    font-size: 0.75rem !important;
  }
  
  body .navbar-carbrand.navbar-carbrand.navbar-carbrand .nav-link {
    padding: 0.375rem 0.6rem !important;
    font-size: 0.8rem !important;
  }
}

/* REMOVED - NOT WORKING - OVERRIDDEN BY MAIN STYLES.CSS */
/* The hero section tablet rules were being overridden by styles.css */
/* Using nuclear option overrides below instead */

/* REMOVED - NOT WORKING - OVERRIDDEN BY MAIN STYLES.CSS */
/* The hero section mobile rules were being overridden by styles.css */
/* Using nuclear option overrides below instead */

/* REMOVED - NOT WORKING - OVERRIDDEN BY MAIN STYLES.CSS */
/* The hero section small mobile rules were being overridden by styles.css */
/* Using nuclear option overrides below instead */

/* 3. SEAT COVER PHOTOS RESPONSIVE FIXES */
/* Truly responsive images that scale with screen size */

/* Portrait orientation fixes */
@media (max-width: 64rem) and (orientation: portrait) {
  .seat-covers-content .cards-list {
    grid-template-columns: repeat(auto-fit, minmax(clamp(12rem, 30vw, 18rem), 1fr));
    gap: clamp(0.75rem, 3vw, 1.5rem);
    padding: clamp(0.75rem, 2vw, 1.25rem);
  }
  
  .seat-covers-content .product-card {
    height: auto;
    max-height: clamp(22rem, 50vh, 28rem);
  }
  
  .seat-covers-content .product-image {
    height: clamp(14rem, 35vh, 20rem);
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  .seat-covers-content .card-content {
    height: auto;
    min-height: clamp(6rem, 12vh, 8rem);
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.25rem;
  }
  
  .product-title {
    font-size: clamp(0.875rem, 2.5vw, 1.1rem);
    line-height: 1.2;
    margin-bottom: 0.25rem;
  }
  
  .product-price, .original-price {
    font-size: clamp(0.875rem, 2vw, 1rem);
  }
  
  .color-variants-preview {
    margin-top: 0.5rem;
  }
  
  /* ===== SEAT COVER DETAILS PAGE - PORTRAIT ORIENTATION FIX ===== */
  /* This fixes the white space issue when height < width (portrait) */
  .seat-cover-details-container .main-content-layout {
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .seat-cover-details-container .main-content-layout .image-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 100% !important;
    background: transparent !important;
  }
  
  .seat-cover-details-container .main-content-layout .image-container .seat-cover-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* Landscape orientation fixes */
@media (max-width: 64rem) and (orientation: landscape) {
  .seat-covers-content .cards-list {
    grid-template-columns: repeat(auto-fit, minmax(clamp(10rem, 20vw, 16rem), 1fr));
    gap: clamp(0.5rem, 1.5vw, 1.25rem);
    padding: clamp(0.5rem, 1.5vw, 1rem);
  }
  
  .seat-covers-content .product-card {
    height: auto;
    max-height: clamp(16rem, 75vh, 24rem);
  }
  
  .seat-covers-content .product-image {
    height: clamp(10rem, 65vh, 20rem);
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  .seat-covers-content .card-content {
    height: auto;
    min-height: clamp(4rem, 20vh, 8rem);
    padding: clamp(0.375rem, 1vw, 0.625rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .product-title {
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    line-height: 1.2;
  }
  
  .product-price, .original-price {
    font-size: clamp(0.75rem, 1.8vw, 0.875rem);
  }
  
  /* ===== SEAT COVER DETAILS PAGE - LANDSCAPE ORIENTATION FIX ===== */
  /* This ensures consistency across all orientations */
  .seat-cover-details-container .main-content-layout {
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .seat-cover-details-container .main-content-layout .image-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 100% !important;
    background: transparent !important;
  }
  
  .seat-cover-details-container .main-content-layout .image-container .seat-cover-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

@media (max-width: 30rem) {
  /* Extra small mobile adjustments */
  .seat-covers-content .cards-list {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
  }
  
  .seat-covers-content .product-card {
    max-height: 18rem;
    width: 90%;
  }
  
  .seat-covers-content .product-image {
    height: clamp(10rem, 65vh, 20rem);
    width: 100%;
    aspect-ratio: 1/1;
  }
  
  .seat-covers-content .card-content {
    min-height: 6rem;
    padding: 0.375rem;
  }
  
  .product-title {
    font-size: 0.75rem;
  }
  
  .product-price, .original-price {
    font-size: 0.75rem;
  }
}

/* Ensure color variants are always visible */
@media (max-width: 64rem) {
  .color-variants-preview {
    display: block;
    visibility: visible;
    opacity: 1;
  }
  
  .color-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
  }
  
  .color-text {
    display: block;
    font-size: 0.6875rem;
    color: #666;
    margin-top: 0.125rem;
  }
}

/* ADDITIONAL RESPONSIVE FIXES FOR OVERALL LAYOUT */

/* Fix navbar userhome (seat covers page) for responsive */
@media (max-width: 64rem) and (min-width: 48.1rem) {
  .navbar-userhome {
    padding: 1rem 3%;
    flex-wrap: wrap;
  }
  
  .search-bar-userhome {
    margin-left: 20%;
    margin-right: 3%;
    flex: 1;
    min-width: 12.5rem;
  }
  
  .navbar-userhome .collapse {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  
  .navbar-userhome .navbar-nav {
    flex-direction: row;
    gap: 0.625rem;
  }
  
  .navbar-userhome .nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    white-space: nowrap;
  }
}

@media (max-width: 48rem) {
  .navbar-userhome {
    padding: 0.625rem 2%;
    flex-direction: column;
    gap: 0.625rem;
  }
  
  .search-bar-userhome {
    margin: 0;
    width: 100%;
    order: 2;
  }
  
  .navbar-userhome .collapse {
    width: 100%;
    order: 3;
    margin-top: 0.625rem;
  }
  
  .navbar-userhome .navbar-nav {
    flex-direction: row;
    justify-content: center;
    gap: 0.9375rem;
    flex-wrap: wrap;
  }
  
  .navbar-userhome .nav-link {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
  }
}

/* Fix car brand cards grid for better responsive display */
/* Car Brand Cards Responsive Design - Fully responsive with rem units */

/* RESPONSIVE PADDING FOR CARDS CONTAINER - reduce space between hero text and brand cards */
/* Large screens (≥1024px) - Keep original spacing */
@media (min-width: 64rem) {
  body .cards-list-carbrand.cards-list-carbrand {
    padding: 5rem 3.125rem 5rem !important; /* Original spacing for desktop */
  }
}

/* Medium screens (768px-1023px) - Reduce top padding */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  body .cards-list-carbrand.cards-list-carbrand {
    padding: 3rem 2rem 3rem !important; /* Less space for tablets */
  }
}

/* Small screens (≤767px) - Much smaller padding */
@media (max-width: 47.9375rem) {
  body .cards-list-carbrand.cards-list-carbrand {
    padding: 1.5rem 1rem 2rem !important; /* Minimal space for mobile */
  }
}

/* Extra small screens (≤480px) - Very minimal padding */
@media (max-width: 30rem) {
  body .cards-list-carbrand.cards-list-carbrand {
    padding: 1rem 0.5rem 1.5rem !important; /* Very tight spacing */
  }
}

/* Large Desktop screens (1440px+) */
@media (min-width: 90rem) {
  .cards-list-carbrand .card-carbrand {
    width: 21.875rem;
    height: 21.875rem;
  }
  
  .cards-list-carbrand .brand-name-text {
    font-size: 3.5rem;
  }
}

/* Small laptops and tablets landscape (768px - 1023px) */
@media (min-width: 48rem) and (max-width: 89.9rem) {
  .cards-list-carbrand .card-carbrand {
    width: 15.625rem;
    height: 15.625rem;
    border-radius: 1.875rem;
  }
  
  .cards-list-carbrand .brand-name-text {
    font-size: 2.2rem;
    letter-spacing: 0.09375rem;
    padding: 0.9375rem;
  }
}

/* Tablets portrait and large phones (481px - 767px) */
@media (min-width: 30.1rem) and (max-width: 47.9rem) {
  .cards-list-carbrand .card-carbrand {
    width: 12.5rem;
    height: 12.5rem;
    border-radius: 1.5625rem;
  }
  
  .cards-list-carbrand .brand-name-text {
    font-size: 1.8rem;
    letter-spacing: 0.0625rem;
    padding: 0.75rem;
  }
  
  .cards-list-carbrand .card-carbrand-wrapper {
    margin: 1.25rem;
  }
}

/* Small phones (320px - 480px) */
@media (max-width: 30rem) {
  .cards-list-carbrand .card-carbrand {
    width: 10rem;
    height: 10rem;
    border-radius: 1.25rem;
  }
  
  .cards-list-carbrand .brand-name-text {
    font-size: 1.4rem;
    letter-spacing: 0.05rem;
    padding: 0.625rem;
  }
  
  .cards-list-carbrand .card-carbrand-wrapper {
    margin: 0.9375rem;
  }
}

/* Extra small phones (less than 320px) */
@media (max-width: 20rem) {
  .cards-list-carbrand .card-carbrand {
    width: 8.75rem;
    height: 8.75rem;
    border-radius: 0.9375rem;
  }
  
  .cards-list-carbrand .brand-name-text {
    font-size: 1.2rem;
    letter-spacing: 0.03125rem;
    padding: 0.5rem;
  }
  
  .cards-list-carbrand .card-carbrand-wrapper {
    margin: 0.625rem;
  }
}

/* Fix navbar overflow on smaller tablets - ensure all elements stay within viewport */
@media (max-width: 64rem) and (min-width: 48.1rem) {
  .navbar-carbrand .collapse {
    overflow: hidden;
  }
  
  .navbar-carbrand .navbar-nav {
    max-width: 100%;
  }
  
  .navbar-userhome .collapse {
    overflow: hidden;
  }
  
  .navbar-userhome .navbar-nav {
    max-width: 100%;
  }
}

/* Ensure proper spacing and alignment on all screen sizes */
@media (max-width: 75rem) {
  /* Large tablets and small laptops */
  .search-bar-carbrand {
    margin-left: 15%;
  }
  
  .search-bar-userhome {
    margin-left: 15%;
  }
}

/* ===== HEIGHT-BASED FIXES FOR SEAT COVER DETAILS ===== */
/* This specifically targets the height ranges where white space appears */

/* Fix for heights 800px and below (where white space appears) */
@media (max-height: 800px) {
  .seat-cover-details-container .main-content-layout {
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .seat-cover-details-container .main-content-layout .image-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 100% !important;
    background: transparent !important;
  }
  
  .seat-cover-details-container .main-content-layout .image-container .seat-cover-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* Fix for heights 700px and below */
@media (max-height: 700px) {
  .seat-cover-details-container .main-content-layout {
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .seat-cover-details-container .main-content-layout .image-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 100% !important;
    background: transparent !important;
  }
  
  .seat-cover-details-container .main-content-layout .image-container .seat-cover-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* Fix for heights 600px and below */
@media (max-height: 600px) {
  .seat-cover-details-container .main-content-layout {
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .seat-cover-details-container .main-content-layout .image-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 100% !important;
    background: transparent !important;
  }
  
  .seat-cover-details-container .main-content-layout .image-container .seat-cover-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* =================================================================== */
/* LOGIN PAGE COMPREHENSIVE RESPONSIVE STYLING - COMPLETE OVERHAUL     */
/* =================================================================== */

/* RESET AND OVERRIDE ALL EXISTING LOGIN STYLES */
/* Large Desktop screens (≥1200px) - Fully responsive */
@media (min-width: 75rem) {
  .container-login {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 0 3vw;
    height: 100vh;
    min-height: 100vh;
    background-attachment: fixed;
    gap: clamp(1.5rem, 3vw, 3rem);
  }
  
  .content-container-login {
    flex: 0 0 auto;
    width: clamp(28rem, 36vw, 45rem);
    max-width: none;
    text-align: center;
    margin-bottom: 0;
  }
  
  .content-container-login h1 {
    font-size: clamp(2.5rem, 3vw + 1rem, 4rem);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
  
  .content-container-login p {
    font-size: clamp(1.125rem, 1.2vw + 0.5rem, 1.5rem);
    line-height: 1.7;
    max-width: 75%;
    text-align: center;
    margin: 0 auto;
  }
  
  .login-container-login {
    flex: 0 0 auto;
    width: clamp(36rem, 48vw, 60rem);
    max-width: none;
    padding: clamp(3rem, 4vw, 5rem) clamp(2.5rem, 3vw, 4rem);
    margin: 0;
    text-align: center;
  }
  
  .login-container-login h2 {
    font-size: clamp(1.5rem, 1.8vw + 0.5rem, 2.25rem);
    margin-bottom: 2rem;
    text-align: center;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  
  .input-field-login,
  .login-button-login {
    font-size: clamp(1rem, 1vw + 0.2rem, 1.25rem);
    padding: clamp(1rem, 1.2vw + 0.3rem, 1.5rem) clamp(1.25rem, 1.5vw + 0.3rem, 1.75rem);
  }
  
  .google-login-button {
    font-size: clamp(0.9rem, 0.9vw + 0.2rem, 1.125rem);
    padding: clamp(0.875rem, 1vw + 0.2rem, 1.25rem) clamp(1rem, 1.2vw + 0.3rem, 1.5rem);
    white-space: nowrap;
    min-width: fit-content;
  }
}

/* Desktop screens (1024px-1199px) - Fully responsive */
@media (min-width: 64rem) and (max-width: 74.9375rem) {
  .container-login {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 0 3vw;
    height: 100vh;
    min-height: 100vh;
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
  }
  
  .content-container-login {
    flex: 0 0 auto;
    width: clamp(24rem, 34vw, 40rem);
    max-width: none;
    text-align: center;
    margin-bottom: 0;
  }
  
  .content-container-login h1 {
    font-size: clamp(2.25rem, 2.8vw + 0.8rem, 3.25rem);
    line-height: 1.2;
    margin-bottom: 1.25rem;
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
  
  .content-container-login p {
    font-size: clamp(1rem, 1.1vw + 0.4rem, 1.35rem);
    line-height: 1.6;
    max-width: 75%;
    text-align: center;
    margin: 0 auto;
  }
  
  .login-container-login {
    flex: 0 0 auto;
    width: clamp(32rem, 44vw, 54rem);
    max-width: none;
    padding: clamp(2.5rem, 3.5vw, 4rem) clamp(2rem, 2.8vw, 3.5rem);
    margin: 0;
    text-align: center;
  }
  
  .login-container-login h2 {
    font-size: clamp(1.375rem, 1.6vw + 0.4rem, 2rem);
    margin-bottom: 1.75rem;
    text-align: center;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  
  .input-field-login,
  .login-button-login {
    font-size: clamp(0.95rem, 0.9vw + 0.2rem, 1.2rem);
    padding: clamp(0.9rem, 1.1vw + 0.2rem, 1.35rem) clamp(1.1rem, 1.3vw + 0.2rem, 1.5rem);
  }
  
  .google-login-button {
    font-size: clamp(0.85rem, 0.8vw + 0.2rem, 1.05rem);
    padding: clamp(0.75rem, 0.9vw + 0.1rem, 1.1rem) clamp(0.9rem, 1.1vw + 0.2rem, 1.3rem);
    white-space: nowrap;
    min-width: fit-content;
  }
}

/* Large tablets landscape (900px-1023px) - Responsive single column */
@media (min-width: 56.25rem) and (max-width: 63.9375rem) {
  .container-login {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: clamp(1.5rem, 3vh, 3rem) 4vw;
    height: auto;
    min-height: 100vh;
    width: 100%;
  }
  
  .content-container-login {
    width: clamp(28rem, 70vw, 50rem);
    text-align: center;
    margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
  }
  
  .content-container-login h1 {
    font-size: clamp(2.25rem, 4vw + 0.5rem, 3rem);
    line-height: 1.2;
    margin-bottom: 1rem;
    width: 100%;
    max-width: 100%;
  }
  
  .content-container-login p {
    font-size: clamp(1rem, 1.5vw + 0.3rem, 1.25rem);
    line-height: 1.6;
    max-width: 75%;
    margin: 0 auto;
  }
  
  .login-container-login {
    width: clamp(26rem, 75vw, 45rem);
    padding: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 3vw, 3rem);
    margin: 0 auto;
    text-align: center;
  }
  
  .login-container-login h2 {
    font-size: 1.625rem;
    margin-bottom: 1.5rem;
    text-align: center;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  
  .input-field-login,
  .login-button-login {
    font-size: 1rem;
    padding: 1rem 1.125rem;
  }
  
  .google-login-button {
    font-size: 0.9375rem;
    padding: 0.875rem 1rem;
    white-space: nowrap;
    min-width: fit-content;
  }
}

/* Tablets portrait (768px-899px) - Responsive single column */
@media (min-width: 48rem) and (max-width: 56.1875rem) {
  .container-login {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: clamp(1.25rem, 2.5vh, 2.5rem) 4vw;
    height: auto;
    min-height: 100vh;
    width: 100%;
  }
  
  .content-container-login {
    width: clamp(24rem, 65vw, 42rem);
    text-align: center;
    margin-bottom: clamp(1.25rem, 2.5vh, 2rem);
  }
  
  .content-container-login h1 {
    font-size: clamp(2rem, 3.5vw + 0.5rem, 2.75rem);
    line-height: 1.2;
    margin-bottom: 1rem;
    width: 100%;
    max-width: 100%;
  }
  
  .content-container-login p {
    font-size: clamp(0.9rem, 1.3vw + 0.3rem, 1.125rem);
    line-height: 1.6;
    max-width: 75%;
    margin: 0 auto;
  }
  
  .login-container-login {
    width: clamp(22rem, 70vw, 38rem);
    padding: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem);
    margin: 0 auto;
    text-align: center;
  }
  
  .login-container-login h2 {
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    text-align: center;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  
  .input-field-login,
  .login-button-login {
    font-size: 1rem;
    padding: 0.9375rem 1rem;
  }
  
  .google-login-button {
    font-size: 0.9375rem;
    padding: 0.8125rem 0.9375rem;
    white-space: nowrap;
    min-width: fit-content;
  }
}

/* Large phones landscape (600px-767px) - Responsive mobile */
@media (min-width: 37.5rem) and (max-width: 47.9375rem) {
  .container-login {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: clamp(1rem, 2vh, 2rem) 3vw;
    height: auto;
    min-height: 100vh;
    width: 100%;
  }
  
  .content-container-login {
    width: clamp(20rem, 85vw, 35rem);
    text-align: center;
    margin-bottom: clamp(1rem, 2vh, 1.5rem);
  }
  
  .content-container-login h1 {
    font-size: clamp(1.75rem, 4vw + 0.25rem, 2.25rem);
    line-height: 1.2;
    margin-bottom: 0.875rem;
    width: 100%;
    max-width: 100%;
  }
  
  .content-container-login p {
    font-size: clamp(0.85rem, 1.5vw + 0.2rem, 1.05rem);
    line-height: 1.5;
    max-width: 80%;
    margin: 0 auto;
  }
  
  .login-container-login {
    width: clamp(18rem, 90vw, 32rem);
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
    margin: 0 auto;
    text-align: center;
  }
  
  .login-container-login h2 {
    font-size: 1.375rem;
    margin-bottom: 1.125rem;
    text-align: center;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  
  .input-field-login,
  .login-button-login {
    font-size: 0.9375rem;
    padding: 0.875rem 0.9375rem;
  }
  
  .google-login-button {
    font-size: 0.875rem;
    padding: 0.75rem 0.875rem;
    white-space: nowrap;
    min-width: fit-content;
  }
}

/* Mobile phones (480px-599px) - Responsive mobile */
@media (min-width: 30rem) and (max-width: 37.4375rem) {
  .container-login {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: clamp(0.75rem, 1.5vh, 1.75rem) 2vw;
    height: auto;
    min-height: 100vh;
    width: 100%;
  }
  
  .content-container-login {
    width: clamp(18rem, 90vw, 30rem);
    text-align: center;
    margin-bottom: clamp(0.75rem, 1.5vh, 1.25rem);
  }
  
  .content-container-login h1 {
    font-size: clamp(1.5rem, 4.5vw + 0.2rem, 2rem);
    line-height: 1.2;
    margin-bottom: 0.75rem;
    width: 100%;
    max-width: 100%;
  }
  
  .content-container-login p {
    font-size: clamp(0.8rem, 1.8vw + 0.1rem, 0.975rem);
    line-height: 1.5;
    max-width: 85%;
    margin: 0 auto;
  }
  
  .login-container-login {
    width: clamp(16rem, 95vw, 28rem);
    padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.5rem);
    margin: 0 auto;
    text-align: center;
  }
  
  .login-container-login h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    text-align: center;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  
  .input-field-login,
  .login-button-login {
    font-size: 0.9375rem;
    padding: 0.8125rem 0.875rem;
  }
  
  .google-login-button {
    font-size: 0.8125rem;
    padding: 0.6875rem 0.75rem;
    white-space: nowrap;
    min-width: fit-content;
  }
}

/* Small mobile phones (≤479px) - Fully responsive */
@media (max-width: 29.9375rem) {
  .container-login {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: clamp(0.5rem, 1vh, 1.5rem) 1.5vw;
    height: auto;
    min-height: 100vh;
    width: 100%;
  }
  
  .content-container-login {
    width: clamp(16rem, 95vw, 26rem);
    text-align: center;
    margin-bottom: clamp(0.5rem, 1vh, 1rem);
  }
  
  .content-container-login h1 {
    font-size: clamp(1.25rem, 5vw + 0.1rem, 1.75rem);
    line-height: 1.2;
    margin-bottom: 0.625rem;
    width: 100%;
    max-width: 100%;
  }
  
  .content-container-login p {
    font-size: clamp(0.75rem, 2.2vw + 0.05rem, 0.9rem);
    line-height: 1.4;
    max-width: 90%;
    margin: 0 auto;
  }
  
  .login-container-login {
    width: clamp(15rem, 98vw, 24rem);
    padding: clamp(1rem, 2.2vw, 1.75rem) clamp(0.75rem, 1.8vw, 1.25rem);
    margin: 0 auto;
    text-align: center;
  }
  
  .login-container-login h2 {
    font-size: 1.125rem;
    margin-bottom: 0.875rem;
    text-align: center;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  
  .input-field-login,
  .login-button-login {
    font-size: 0.875rem;
    padding: 0.75rem 0.8125rem;
  }
  
  .google-login-button {
    font-size: 0.75rem;
    padding: 0.625rem 0.6875rem;
    white-space: nowrap;
    min-width: fit-content;
  }
  
  .google-logo {
    width: 1rem;
    height: 1rem;
    margin-right: 0.625rem;
  }
}

/* Landscape orientation optimization for mobile devices */
@media (orientation: landscape) and (max-height: 35rem) and (max-width: 56.25rem) {
  .content-container-login p {
    display: none; /* Hide paragraph to save vertical space */
  }
  
  .content-container-login h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
  
  .container-login {
    padding-top: 1rem;
    padding-bottom: 1rem;
    justify-content: center;
  }
  
  .login-container-login {
    padding: 1.25rem 1rem;
  }
}

/* ===================================================================== */
/* MY CARS PAGE TARGETED RESPONSIVE FIXES                               */
/* ===================================================================== */

/* Fix navbar wrapping issues for screens 769px-1024px */
@media (min-width: 48.0625rem) and (max-width: 64rem) {
  .navbar-userhome {
    flex-wrap: nowrap !important;
    height: auto;
    min-height: 3.5rem;
    padding: 0.75rem 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .navbar-brand-userhome {
    flex-shrink: 0;
    font-size: 1.5rem;
  }
  
  .navbar-userhome .collapse {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    margin-left: 1rem;
  }
  
  .navbar-userhome .navbar-nav {
    flex-direction: row;
    margin: 0;
    align-items: center;
  }
  
  .navbar-userhome .nav-item {
    margin: 0 0.125rem;
  }
  
  .navbar-userhome .nav-link {
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  
  /* Ensure single row layout */
  .navbar-userhome .d-md-flex {
    display: flex !important;
    align-items: center;
    gap: 0.25rem;
  }
}

/* My Cars Mobile navbar - EXACT same approach as car_brands */
/* Fix for 768px specific centering issue */
@media (max-width: 48rem) {
  .container-mycars {
    margin-top: 3.5rem;
  }
  
  /* Nuclear option - MOBILE with HAMBURGER DROPDOWN exactly like car_brands */
  body .navbar-userhome.navbar-userhome.navbar-userhome {
    padding: 0.75rem 2% !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    background: rgba(30, 30, 30, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    box-shadow: 0rem 0.25rem 0.9375rem rgba(0, 0, 0, 0.3) !important;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1) !important;
  }
  
  /* BRAND NAME - left side, larger consistent font size */
  body .navbar-userhome.navbar-userhome.navbar-userhome .navbar-brand-userhome {
    font-size: 1.5rem !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    color: #f0f0f0 !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* HAMBURGER TOGGLER - right side with larger size and proper margin */
  body .navbar-userhome.navbar-userhome.navbar-userhome::after {
    content: '☰';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.75rem;
    color: #f0f0f0;
    cursor: pointer;
    z-index: 1001;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s ease;
    order: 3;
  }
  
  body .navbar-userhome.navbar-userhome.navbar-userhome:hover::after {
    background: rgba(255, 255, 255, 0.2);
  }
  
  /* COLLAPSIBLE NAVIGATION - hidden by default, shows on hover - increased padding */
  body .navbar-userhome.navbar-userhome.navbar-userhome .collapse.navbar-collapse {
    flex: 1 1 100% !important;
    order: 4 !important;
    margin: 0.5rem 1rem 0 0 !important;
    display: none !important; /* Hidden by default on mobile */
    width: calc(100% - 2rem) !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    background: rgba(30, 30, 30, 0.95) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
    border: 0.0625rem solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.75rem !important;
  }
  
  /* When hovered, show collapsed menu - EXACT same as car_brands */
  body .navbar-userhome.navbar-userhome.navbar-userhome:hover .collapse.navbar-collapse {
    display: block !important;
  }
  
  /* Navigation items in collapsed state - increased spacing */
  body .navbar-userhome.navbar-userhome.navbar-userhome .navbar-nav {
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  
  /* Show all nav-items in dropdown on mobile - both Back and User dropdown */
  body .navbar-userhome.navbar-userhome.navbar-userhome .nav-item {
    display: block !important;
    width: 100% !important;
    margin: 0.25rem 0 !important;
  }
  
  body .navbar-userhome.navbar-userhome.navbar-userhome .nav-link {
    padding: 1rem 1.25rem !important;
    font-size: 0.9375rem !important;
    color: white !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.5rem !important;
    margin: 0.25rem 0 !important;
    text-align: center !important;
    display: block !important;
    text-decoration: none !important;
  }
  
  body .navbar-userhome.navbar-userhome.navbar-userhome .nav-link:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
  }
  
  /* Dropdown toggle styling - increased padding and margin */
  body .navbar-userhome.navbar-userhome.navbar-userhome .dropdown-toggle {
    padding: 1rem 1.25rem !important;
    font-size: 0.9375rem !important;
    color: white !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.5rem !important;
    margin: 0.25rem 0 !important;
    text-align: center !important;
    display: block !important;
    text-decoration: none !important;
    border: none !important;
  }
  
  body .navbar-userhome.navbar-userhome.navbar-userhome .dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
  }
  
  /* Dropdown menu items - increased spacing and padding */
  body .navbar-userhome.navbar-userhome.navbar-userhome .dropdown-menu {
    background: rgba(30, 30, 30, 0.95) !important;
    border: 0.0625rem solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.5rem !important;
    position: static !important;
    box-shadow: none !important;
    padding: 0.5rem !important;
    margin: 0.375rem 0 0 0 !important;
    width: 100% !important;
  }
  
  body .navbar-userhome.navbar-userhome.navbar-userhome .dropdown-item {
    color: white !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.9375rem !important;
    margin: 0.25rem 0 !important;
    border-radius: 0.375rem !important;
  }
  
  body .navbar-userhome.navbar-userhome.navbar-userhome .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
  }
}

/* Fix "My Cars" header row layout and "Add My Car" button */
@media (max-width: 64rem) {
  .container-mycars .row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem 0.5rem 2rem;
    margin: 0;
  }
  
  .container-mycars .col-10 {
    flex: 1;
    padding: 0;
    max-width: none;
  }
  
  .container-mycars .col-2 {
    flex: 0 0 auto;
    padding: 0;
    margin-left: 1rem;
    max-width: none;
  }
  
  .container-mycars h3 {
    margin: 0;
    white-space: nowrap;
  }
  
  .add-car-button {
    white-space: nowrap !important;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    margin: 0 1rem 0 0;
    flex-shrink: 0;
  }
}

@media (max-width: 48rem) {
  .container-mycars .row {
    padding: 1rem 1.5rem 0.5rem 1.5rem;
  }
  
  .add-car-button {
    font-size: 0.8125rem;
    padding: 0.4375rem 0.875rem;
    margin: 0 0.875rem 0 0;
  }
}

@media (max-width: 30rem) {
  .container-mycars .row {
    padding: 1rem 1rem 0.5rem 1rem;
  }
  
  .container-mycars .col-2 {
    margin-left: 0.75rem;
  }
  
  .add-car-button {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    margin: 0 0.75rem 0 0;
  }
}

@media (max-width: 20rem) {
  .container-mycars .row {
    padding: 1rem 0.75rem 0.5rem 0.75rem;
  }
  
  .container-mycars .col-2 {
    margin-left: 0.5rem;
  }
  
  .add-car-button {
    font-size: 0.6875rem;
    padding: 0.3125rem 0.625rem;
    margin: 0 0.625rem 0 0;
  }
}

/* Fix card styling for screens ≤480px - make them match larger screens but proportionally smaller */
@media (max-width: 30rem) {
  /* Override the old small card styling to match larger screens */
  .card-mycars.small-car-card-mycars {
    width: 16rem !important; /* Smaller but proportional */
    height: 22rem !important; /* Maintain aspect ratio */
    background: #ffffff !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e5e7eb !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .card-mycars.small-car-card-mycars:hover {
    transform: translateY(-0.25rem) !important;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15) !important;
    border-color: #d1d5db !important;
  }
  
  .car-image-container {
    width: 100% !important;
    height: 10rem !important; /* Proportionally smaller */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    padding: 0.75rem !important;
  }
  
  .car-poster-mycars {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #ffffff !important;
  }
  
  .card-content-mycars {
    padding: 0 0.75rem 1rem 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.375rem !important;
    flex: 1 !important;
    justify-content: space-between !important;
  }
  
  .card-mycars .card_title {
    font-family: 'Poppins', sans-serif !important;
    color: #1f2937 !important;
    text-align: center !important;
    font-size: 1rem !important; /* Slightly smaller */
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0.75rem 0 0.5rem 0 !important;
    height: auto !important;
    text-shadow: none !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .car-status {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0.375rem 0 !important;
    padding: 0 0.375rem !important;
  }
  
  .status-available, .status-unavailable {
    font-weight: 600 !important;
    font-size: 0.75rem !important; /* Smaller text */
  }
  
  .select-car-button {
    background: #3b82f6 !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem !important; /* Smaller padding */
    border-radius: 0.375rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.75rem !important; /* Smaller text */
    margin: 0.375rem 0 !important;
  }
  
  .select-car-button:hover {
    background: #2563eb !important;
    transform: translateY(-1px) !important;
  }
  
  .selected-car-text {
    color: #059669 !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important; /* Smaller text */
    margin: 0.375rem 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  
  .unavailable-message {
    text-align: center !important;
    padding: 0 0.75rem !important;
  }
  
  .unavailable-message p {
    color: #6b7280 !important;
    font-size: 0.7rem !important; /* Smaller text */
    margin: 0.375rem 0 !important;
  }
  
  .unavailable-message .btn {
    font-size: 0.65rem !important; /* Smaller text */
    padding: 0.375rem 0.75rem !important;
  }
  
  .delete-section {
    text-align: center !important;
    margin-top: auto !important;
    padding-top: 0.5rem !important;
  }
  
  .delete-car-button {
    background: #ef4444 !important;
    color: white !important;
    border: none !important;
    padding: 0.375rem 0.75rem !important; /* Smaller padding */
    border-radius: 0.25rem !important;
    font-size: 0.75rem !important; /* Smaller text */
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
    margin: 0 !important;
  }
  
  .delete-car-button:hover {
    background: #dc2626 !important;
    transform: translateY(-1px) !important;
  }
  
  .delete-car-button i {
    margin-right: 0.375rem !important;
  }
}

/* Additional spacing fixes for very small screens */
@media (max-width: 23.4375rem) {
  .small-car-card-mycars {
    padding-bottom: 1rem;
  }
  
  .delete-section {
    margin-top: 1rem;
    padding-bottom: 0.75rem;
  }
  
  .delete-car-button {
    margin-bottom: 0.75rem;
  }
}

/* Ensure proper card content spacing */
.card-content-mycars {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 8rem;
}

@media (max-width: 30rem) {
  .card-content-mycars {
    min-height: 7rem;
  }
}

/* Seat Covers Page Navbar - Override conflicting My Cars rules with higher specificity */
/* The seat covers page uses navbar-userhome class but has proper Bootstrap structure */
@media (max-width: 48rem) {
  /* HIGHEST SPECIFICITY - Override all conflicting My Cars rules */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome.navbar.navbar-expand-md {
    padding: 0.75rem 1rem !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(30, 30, 30, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0rem 0.25rem 0.9375rem rgba(0, 0, 0, 0.3) !important;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1) !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  /* Remove ALL pseudo-element hamburgers for seat covers page */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome.navbar.navbar-expand-md::after {
    display: none !important;
    content: none !important;
  }
  
  /* Brand styling - LEFT side */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .navbar-brand-userhome {
    font-size: 1.5rem !important;
    color: #f0f0f0 !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 1 !important;
    flex: 0 0 auto !important;
  }
  
  /* Bootstrap hamburger button - RIGHT side */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .navbar-toggler {
    border: none !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 1rem !important;
    background: transparent !important;
    margin: 0 !important;
    order: 3 !important;
    flex: 0 0 auto !important;
    position: static !important;
    right: auto !important;
    display: block !important;
  }
  
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
    display: block !important;
  }
  
  /* Container fluid inside navbar */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .container-fluid {
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  /* Collapsible navigation - Bootstrap style */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .navbar-collapse {
    background: rgba(30, 30, 30, 0.95) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
    border: 0.0625rem solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.75rem !important;
    margin-top: 0.5rem !important;
    position: absolute !important;
    top: 100% !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: calc(100% - 1rem) !important;
    display: none !important;
    flex: none !important;
    order: 4 !important;
  }
  
  /* Show when Bootstrap adds .show class */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .navbar-collapse.show {
    display: block !important;
  }
  
  /* Navigation items */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .navbar-nav {
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .nav-item {
    width: 100% !important;
    margin: 0.25rem 0 !important;
  }
  
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .nav-link {
    padding: 1rem 1.25rem !important;
    font-size: 0.9375rem !important;
    color: white !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.5rem !important;
    margin: 0.25rem 0 !important;
    text-align: center !important;
    display: block !important;
    text-decoration: none !important;
  }
  
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .nav-link:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
  }
  
  /* Dropdown toggle styling */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .dropdown-toggle {
    padding: 1rem 1.25rem !important;
    font-size: 0.9375rem !important;
    color: white !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.5rem !important;
    margin: 0.25rem 0 !important;
    text-align: center !important;
    display: block !important;
    text-decoration: none !important;
    border: none !important;
  }
  
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
  }
  
  /* Dropdown menu items */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .dropdown-menu {
    background: rgba(30, 30, 30, 0.95) !important;
    border: 0.0625rem solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.5rem !important;
    position: static !important;
    box-shadow: none !important;
    padding: 0.5rem !important;
    margin: 0.375rem 0 0 0 !important;
    width: 100% !important;
  }
  
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .dropdown-item {
    color: white !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.9375rem !important;
    margin: 0.25rem 0 !important;
    border-radius: 0.375rem !important;
  }
  
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
  }
}

/* Seat Covers Page Navbar - Consistent styling for larger screens */
@media (min-width: 48.0625rem) {
  /* Override My Cars rules for seat covers on larger screens */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome.navbar.navbar-expand-md {
    padding: 0.75rem 2rem !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(30, 30, 30, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0rem 0.25rem 0.9375rem rgba(0, 0, 0, 0.3) !important;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1) !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  /* Remove pseudo-element hamburger on larger screens */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome.navbar.navbar-expand-md::after {
    display: none !important;
    content: none !important;
  }
  
  /* Brand styling - consistent across all screen sizes */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .navbar-brand-userhome {
    font-size: 1.75rem !important;
    color: #f0f0f0 !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 1 !important;
    flex: 0 0 auto !important;
  }
  
  /* Hide hamburger button on larger screens */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .navbar-toggler {
    display: none !important;
  }
  
  /* Container fluid */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .container-fluid {
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  /* Navigation - horizontal layout */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .navbar-collapse {
    display: flex !important;
    position: static !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
    order: 2 !important;
  }
  
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .navbar-nav {
    flex-direction: row !important;
    gap: 1rem !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
  }
  
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .nav-item {
    width: auto !important;
    margin: 0 !important;
  }
  
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .nav-link {
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    color: #f0f0f0 !important;
    background: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    display: inline-block !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .nav-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border-radius: 0.375rem !important;
  }
  
  /* Dropdown toggle styling for larger screens */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .dropdown-toggle {
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    color: #f0f0f0 !important;
    background: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    display: inline-block !important;
    text-decoration: none !important;
    border: none !important;
    white-space: nowrap !important;
  }
  
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border-radius: 0.375rem !important;
  }
  
  /* Dropdown menu for larger screens */
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .dropdown-menu {
    background: rgba(30, 30, 30, 0.95) !important;
    border: 0.0625rem solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.5rem !important;
    position: absolute !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
    padding: 0.5rem !important;
    margin: 0.25rem 0 0 0 !important;
    min-width: 10rem !important;
    width: auto !important;
  }
  
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .dropdown-item {
    color: white !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.9375rem !important;
    margin: 0 !important;
    border-radius: 0.25rem !important;
    white-space: nowrap !important;
  }
  
  body .container-mycars .navbar-userhome.navbar-userhome.navbar-userhome .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
  }
}

/* =============================== END RESPONSIVE FIXES =============================== */