/* Font Import - DM Sans for premium typography */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* CSS Variables */
    :root {
      --primary: #48831f;
      --primary-color: #3b641a;
      --primary-hover: #48831f;
      --secondary-color: #804000;
      --background-light: #F7F8FA;
      --text-light-primary: #1A1A1A;
      --text-light-secondary: #6B7280;
      --border-light: #E5E7EB;
      --white: #FFFFFF;
      --surface-light: #FFFFFF;
      --gray-200: #E5E7EB;
      --gray-400: #9CA3AF;
      --gray-500: #6B7280;
      --gray-900: #111827;
      --transition-duration: 0.3s;
      --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      --shadow: 0 4px 20px rgba(139, 119, 0, 0.3);
      --header-height: 100px;
      --header-height-scrolled: 80px;
      --navbar-bottom-shadow: 0 6px 24px rgba(80,80,80,0.20);
    }

    /* Hide placeholder on focus for country inputs */
    #from:focus::placeholder,
    #from-desktop:focus::placeholder,
    #destination:focus::placeholder,
    #destination-desktop:focus::placeholder {
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    /* Global mobile overflow prevention */
    @media (max-width: 768px) {
      html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
      }

      .container, .main-container, .content-wrapper, .page-wrapper {
        max-width: 100% !important;
        overflow-x: hidden !important;
      }

      img, video, iframe {
        max-width: 100% !important;
        height: auto;
      }
    }
    
    /* Custom Phone Input with Country Selector */
    .phone-input-wrapper {
      display: flex;
      gap: 0.5rem;
      width: 100%;
    }
    
    .country-selector {
      position: relative;
      flex-shrink: 0;
    }
    
    .country-selector-btn {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      height: 2.75rem;
      padding: 0 0.75rem;
      background-color: #fff;
      border: 1px solid #000000;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.2s;
      font-size: 1.25rem;
      box-shadow: none;
    }
    
    .country-selector-btn:hover {
      border-color: #000000;
      background-color: #fff;
    }
    
    .country-selector-btn:focus {
      outline: none;
      border-color: #000000;
      box-shadow: none;
    }
    
    .country-flag {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .country-flag img {
      width: 24px;
      height: 18px;
      object-fit: cover;
      border-radius: 2px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    
    .country-arrow {
      font-size: 1.25rem;
      color: #64748b;
      transition: transform 0.2s;
    }
    
    .country-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 0.5rem);
      left: 0;
      min-width: 280px;
      max-width: 320px;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 0.75rem;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
      z-index: 1000;
      overflow: hidden;
    }
    
    .country-dropdown.open {
      display: block;
      animation: dropdownFadeIn 0.2s ease;
    }
    
    @keyframes dropdownFadeIn {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .country-search-wrapper {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem;
      border-bottom: 1px solid #e2e8f0;
      background: #f8fafc;
    }
    
    .country-search-wrapper .search-icon {
      color: #94a3b8;
      font-size: 1.25rem;
    }
    
    .country-search {
      flex: 1;
      border: none;
      background: transparent;
      font-size: 0.9375rem;
      color: #1e293b;
      outline: none;
    }
    
    .country-search::placeholder {
      color: #94a3b8;
    }
    
    .country-list {
      max-height: 250px;
      overflow-y: auto;
    }
    
    .country-list::-webkit-scrollbar {
      width: 6px;
    }
    
    .country-list::-webkit-scrollbar-track {
      background: #f1f5f9;
    }
    
    .country-list::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 3px;
    }
    
    .country-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      cursor: pointer;
      transition: background-color 0.15s;
    }
    
    .country-item:hover {
      background-color: #f1f5f9;
    }
    
    .country-item-flag {
      width: 24px;
      height: 18px;
      object-fit: cover;
      border-radius: 2px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      flex-shrink: 0;
    }
    
    .country-item-name {
      flex: 1;
      font-size: 0.9375rem;
      color: #1e293b;
    }
    
    .country-item-dial {
      font-size: 0.875rem;
      color: #64748b;
      font-weight: 500;
    }
    
    .phone-number-input-wrapper {
      display: flex;
      align-items: center;
      flex: 1;
      border: 1px solid #000000;
      border-radius: 0.5rem;
      background: #fff;
      overflow: hidden;
      transition: border-color 0.2s, box-shadow 0.2s;
      box-shadow: none;
    }
    
    .phone-number-input-wrapper:focus-within {
      border-color: #000000;
      box-shadow: none;
    }
    
    .dial-code {
      padding: 0 0.5rem;
      padding-right: 0.25rem;
      font-size: 0.9375rem;
      font-weight: 500;
      color: #1e293b;
      background: #fff;
      height: 100%;
      display: flex;
      align-items: center;
      border-right: none;
      min-height: 2.75rem;
    }
    
    .phone-number-input {
      flex: 1;
      border: none !important;
      padding: 0.75rem !important;
      padding-left: 0.25rem !important;
      font-size: 1rem;
      outline: none;
      background: transparent;
      border-radius: 0 !important;
    }
    
    .phone-number-input:focus {
      box-shadow: none !important;
    }
    
    /* Base Styles */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'Poppins', sans-serif;
      background-color: var(--background-light);
      color: var(--text-light-primary);
      min-height: max(884px, 100dvh);
      line-height: 1.5;
      overflow-x: hidden;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    
    /* Typography */
    .font-display {
      font-family: 'Poppins', sans-serif;
    }
    
    .font-heading {
      font-family: 'Playfair Display', serif;
    }
    
    /* Layout */
    .container {
      max-width: 28rem;
      margin: 0 auto;
      padding: 0 1rem;
      padding-top: 5rem;
      width: 100%;
      overflow-x: hidden;
      box-sizing: border-box;
    }

    @media (min-width: 1280px) {
      .container {
        padding-top: 8rem !important;
        margin-top: 0 !important;
      }
    }

    /* Header Styles */
    header:not(.brand-filter-title) {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 2001;
      height: 4rem;
      width: 100%;
      max-width: 100%;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      background-color: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(4px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      display: flex;
      align-items: center;
      overflow-x: hidden;
      transform: translateY(0);
      transition: transform 0.25s ease-out;
      will-change: transform;
    }

    header:not(.brand-filter-title).hidden {
      transform: translateY(-100%);
    }

    .header-wrapper {
      width: 100%;
      height: 100%;
      padding: 0 0.75rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    @media (min-width: 640px) {
      .header-wrapper {
        padding: 0 1rem;
      }
    }

    @media (min-width: 768px) {
      .header-wrapper {
        padding: 0 2rem;
        justify-content: space-between;
      }
    }

    @media (min-width: 1280px) {
      .header-wrapper {
        padding: 0 2rem;
      }
    }

    .logo-container {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-shrink: 1;
      justify-content: flex-start;
      min-width: 0;
      max-width: calc(100% - 4rem);
      overflow: visible;
    }

    .logo-icon-wrapper {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      border: 2px solid #48831f;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
    }

    .logo-icon {
      width: 100% !important;
      height: 100% !important;
      border-radius: 50% !important;
      object-fit: cover !important;
      object-position: center !important;
      display: block !important;
      transform: scale(1.15) !important;
      border: none !important;
    }

    .logo-text {
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 1;
      text-transform: uppercase;
      font-family: 'Yeseva One', 'Playfair Display', serif;
      white-space: nowrap;
      position: relative;
      display: inline-block;
      background: linear-gradient(120deg, #7B3F00 0%, #7B3F00 32%, #fff 36%, #ffd700 40%, #fff 44%, #7B3F00 48%, #7B3F00 100%);
      background-size: 200% auto;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      animation: shimmer-wave 16s linear infinite;
      flex-shrink: 1;
      margin: 0;
      min-width: 0;
    }

    @keyframes shimmer-wave {
      0% {
        background-position: 400% 0;
      }
      100% {
        background-position: 0% 0;
      }
    }

    @media (min-width: 1280px) {
      .logo-text {
        font-size: 1.75rem;
      }
    }

    @media (min-width: 1280px) {
      .logo-text {
        font-size: 1.75rem;
      }
    }

    /* Logo Motto Banner - replaces text */
    .logo-motto-banner-wrapper {
      position: relative;
      display: inline-block;
      overflow: hidden;
    }

    .logo-motto-banner {
      height: 42px;
      max-width: 200px;
      object-fit: contain;
      flex-shrink: 1;
      min-width: 0;
      display: block;
    }

    .logo-motto-banner-wrapper::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 80%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
      );
      animation: shimmer-banner 14s ease-in-out infinite;
    }

    @keyframes shimmer-banner {
      0% {
        left: -100%;
      }
      50%, 100% {
        left: 150%;
      }
    }

    @media (min-width: 768px) {
      .logo-motto-banner {
        height: 48px;
        max-width: 220px;
      }
    }

    @media (min-width: 1280px) {
      .logo-motto-banner {
        height: 52px;
        max-width: 240px;
      }
    }

    .mobile-menu-button {
      display: block;
      padding: 0.5rem;
      border-radius: 0.375rem;
      color: var(--text-light-secondary);
      background: none;
      border: none;
      cursor: pointer;
      margin-left: auto;
    }

    @media (min-width: 1280px) {
      .mobile-menu-button {
        display: none;
      }
    }

    .mobile-menu-icon {
      font-size: 1.875rem;
    }

    /* Header Auth Buttons - Desktop Only */
    .header-auth-buttons {
        display: none;
        align-items: center;
        gap: 0.75rem;
        margin-left: auto;
    }

    .header-banner-img {
        height: 3.3rem;
        width: auto;
        object-fit: contain;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    .header-banner-img:hover {
        transform: scale(1.02);
    }

    /* Coming Soon Tooltip */
    .banner-tooltip {
        position: fixed;
        background: #FFD700;
        color: #333;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        white-space: nowrap;
        z-index: 9999;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-5px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
        max-width: calc(100vw - 20px);
    }

    .banner-tooltip.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .banner-tooltip::after {
        content: '';
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 0 8px 8px 8px;
        border-style: solid;
        border-color: transparent transparent #FFD700 transparent;
    }

    .header-auth-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.875rem;
        font-size: 0.8125rem;
        font-weight: 500;
        text-decoration: none;
        border-radius: 999px;
        transition: all 0.2s ease;
        white-space: nowrap;
        background-color: transparent;
        border: 1.5px solid #7B3F00;
        color: #7B3F00;
    }

    .header-auth-btn .material-symbols-outlined {
        font-size: 1rem;
    }

    .header-login-btn:hover {
        background-color: rgba(123, 63, 0, 0.1);
    }

    .header-signup-btn {
        background-color: #7B3F00;
        color: #ffffff;
        border-color: #7B3F00;
    }

    .header-signup-btn:hover {
        background-color: #5a2e00;
        border-color: #5a2e00;
    }

    /* Show auth buttons on desktop */
    @media (min-width: 1280px) {
        .header-auth-buttons {
            display: flex;
        }
    }

    /* Tab Bar Styles */
    .tab-bar {
        display: none;
        position: fixed;
        top: 4rem;
        left: 0;
        right: 0;
        z-index: 2000;
        width: 100%;
        height: 3.5rem;
        border-top: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        background-color: #ffffff;
        backdrop-filter: blur(4px);
        margin: 0;
        padding: 0;
        transform: translateY(0);
        transition: transform 0.25s ease-out, background-color 0.3s ease-out, border-bottom-color 0.3s ease-out;
        will-change: transform, background-color;
    }

    .tab-bar.navbar-hidden {
        transform: translateY(-4rem);
        background-color: #ffffff;
        border-bottom-color: rgba(0, 0, 0, 0.1);
    }



    @media (min-width: 1280px) {
        .tab-bar {
            display: block;
        }
    }

    .tab-bar .container {
        padding-top: 0;
        padding-bottom: 0;
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .tab-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        padding: 0.5rem 1rem;
        height: 3.5rem;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .tab-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        height: auto;
        padding: 0.25rem 1rem;
        color: #000000;
        text-decoration: none;
        font-size: 0.8125rem;
        font-weight: 500;
        transition: all 0.3s ease-out;
        border: 2px solid #000000;
        border-radius: 9999px;
        background-color: #ffffff;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .tab-link .material-icons-outlined {
        font-size: 1.125rem;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        color: #48831f;
        transition: color 0.3s ease-out;
    }

    .tab-link:hover {
        color: #00D100;
        background-color: #ffffff;
        border-color: #00D100;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .tab-link:hover .material-icons-outlined {
        color: #00D100;
    }

    .tab-link.active {
        background-color: #00D100;
        color: #ffffff;
        border-color: #00D100;
    }

    .tab-link.active .material-icons-outlined {
        color: #ffffff;
    }

    .tab-link.active:hover {
        background-color: #00B800;
        border-color: #00B800;
        color: #ffffff;
    }

    /* Tab Bar Banner - Hidden by default, appears on right near auth buttons when navbar hides */
    .tab-banner {
        position: absolute;
        right: 14.5rem;
        top: 50%;
        transform: translateY(-50%) translateX(20px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease-out;
        pointer-events: none;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .tab-banner-img {
        height: 2.75rem;
        width: auto;
        object-fit: contain;
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    .tab-banner-img:hover {
        transform: scale(1.02);
    }

    /* Tab Bar Banner - appear when navbar hides */
    .tab-bar.navbar-hidden .tab-banner {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    .tab-bar.navbar-hidden .tab-banner-img {
        pointer-events: auto;
        position: relative;
        z-index: 100;
    }

    /* Compact banner for 1440px screen width */
    @media (min-width: 1400px) and (max-width: 1500px) {
        .tab-banner-img {
            height: 2.5rem;
            max-width: 140px;
        }

        .tab-banner {
            right: 15rem;
        }
    }

    /* Compact banner on smaller desktops to prevent overlap */
    @media (min-width: 768px) and (max-width: 1400px) {
        .tab-banner-img {
            height: 1.75rem;
            max-width: 80px;
        }

        .tab-banner {
            right: 15rem;
        }
    }

    /* Tab Bar Auth Buttons - Hidden by default, appear when navbar hides */
    .tab-auth-buttons {
        position: absolute;
        right: 2rem;
        top: 50%;
        transform: translateY(-50%) translateX(20px);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease-out;
        pointer-events: none;
    }

    .tab-auth-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.875rem;
        font-size: 0.8125rem;
        font-weight: 500;
        border-radius: 999px;
        text-decoration: none;
        transition: all 0.2s ease;
        white-space: nowrap;
        background-color: transparent;
        border: 1.5px solid #7B3F00;
        color: #7B3F00;
    }

    .tab-auth-btn .material-symbols-outlined {
        font-size: 1rem;
    }

    .tab-login-btn:hover {
        background-color: rgba(123, 63, 0, 0.1);
    }

    .tab-signup-btn {
        background-color: #7B3F00;
        color: #ffffff;
        border-color: #7B3F00;
    }

    .tab-signup-btn:hover {
        background-color: #5a2e00;
        border-color: #5a2e00;
    }

    /* Header Auth Buttons Animation - fade out when navbar hides */
    .header-auth-buttons {
        transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    }

    header.hidden .header-auth-buttons {
        opacity: 0;
        transform: translateY(-10px);
    }

    /* Tab Bar Auth Buttons - appear when navbar hides */
    .tab-bar.navbar-hidden .tab-auth-buttons {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
        visibility: visible;
        pointer-events: auto;
    }


    /* ============================================
       MODERN SIDEBAR STYLES - Light Professional Theme
       Mobile & Tablet Only
       ============================================ */

    /* Sidebar Overlay */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 3000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

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

    /* Main Sidebar Container */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(320px, 85vw);
        height: 100vh;
        height: 100dvh;
        background: #ffffff;
        z-index: 3001;
        transform: translateX(-100%);
        transition: transform 0.35s ease-out;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Subtle top accent line */
    .sidebar::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #48831f 0%, #65a830 50%, #48831f 100%);
        z-index: 10;
    }

    /* Close Button */
    .sidebar-close-btn {
        position: absolute;
        top: 1.25rem;
        right: 1rem;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #ffffff;
        border: 2px solid #e5e7eb;
        color: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        z-index: 10;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .sidebar-close-btn:hover {
        background: #fee2e2;
        border-color: #ef4444;
        color: #ef4444;
        transform: scale(1.05);
    }

    .sidebar-close-btn:active {
        transform: scale(0.95);
    }

    .sidebar-close-btn .material-symbols-outlined {
        font-size: 1.125rem;
        font-weight: 600;
    }

    /* Brand Header Section */
    .sidebar-brand {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.875rem;
        padding: 1.5rem 1.25rem 1.25rem;
        border-bottom: 1px solid #000000;
        background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
    }

    .sidebar-brand-logo {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        overflow: hidden;
        flex-shrink: 0;
        background: #ffffff;
        border: 2px solid #48831f;
        box-shadow: 0 2px 8px rgba(72, 131, 31, 0.15);
    }

    .sidebar-brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sidebar-brand-text {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .sidebar-brand-name {
        font-size: 1.125rem;
        font-weight: 700;
        color: #000000;
        letter-spacing: -0.01em;
        line-height: 1.2;
        font-family: 'Public Sans', sans-serif;
    }

    .sidebar-brand-tagline {
        font-size: 0.5rem;
        color: #000000;
        font-weight: 600;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }

    /* Navigation Section */
    .sidebar-nav {
        flex: 1;
        padding: 1rem 0.875rem;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .sidebar-nav-label {
        font-size: 0.6875rem;
        font-weight: 600;
        color: #000000;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0 0.625rem;
        margin-bottom: 0.625rem;
    }

    /* Navigation Items */
    .sidebar-nav-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 0.875rem;
        margin-bottom: 0.25rem;
        border-radius: 12px;
        text-decoration: none;
        color: #374151;
        background: transparent;
        border: 1px solid transparent;
        transition: background 0.2s ease, border-color 0.2s ease;
        position: relative;
    }

    /* Nav Item Hover State */
    .sidebar-nav-item:hover {
        background: #f8fafc;
        border-color: #e5e7eb;
        color: #111827;
    }

    /* Nav Item Active State */
    .sidebar-nav-item.active {
        background: linear-gradient(135deg, rgba(72, 131, 31, 0.08) 0%, rgba(72, 131, 31, 0.04) 100%);
        border-color: rgba(72, 131, 31, 0.2);
        color: #1e293b;
    }

    .sidebar-nav-item.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 24px;
        background: linear-gradient(180deg, #48831f 0%, #65a830 100%);
        border-radius: 0 3px 3px 0;
    }

    /* Nav Icon */
    .sidebar-nav-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        flex-shrink: 0;
    }

    .sidebar-nav-item:hover .sidebar-nav-icon {
        background: #e5e7eb;
        border-color: #d1d5db;
    }

    .sidebar-nav-item.active .sidebar-nav-icon {
        background: #48831f;
        border-color: #48831f;
        box-shadow: 0 2px 8px rgba(72, 131, 31, 0.3);
    }

    .sidebar-nav-icon .material-symbols-outlined {
        font-size: 1.25rem;
        color: #000000;
    }

    .sidebar-nav-item:hover .sidebar-nav-icon .material-symbols-outlined {
        color: #000000;
    }

    .sidebar-nav-item.active .sidebar-nav-icon .material-symbols-outlined {
        color: #ffffff;
    }

    .sidebar-nav-item.active .sidebar-nav-icon svg {
        fill: #ffffff;
    }

    /* Nav Content */
    .sidebar-nav-content {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.0625rem;
    }

    .sidebar-nav-title {
        font-size: 0.9375rem;
        font-weight: 700;
        color: #000000;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-nav-item:hover .sidebar-nav-title,
    .sidebar-nav-item.active .sidebar-nav-title {
        color: #000000;
    }

    .sidebar-nav-subtitle {
        font-size: 0.625rem;
        color: #000000;
        font-weight: 400;
        white-space: nowrap;
    }

    .sidebar-nav-item:hover .sidebar-nav-subtitle {
        color: #000000;
    }

    .sidebar-nav-item.active .sidebar-nav-subtitle {
        color: #48831f;
    }

    /* Nav Badge */
    .sidebar-nav-badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.5625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-radius: 5px;
        flex-shrink: 0;
        margin-left: auto;
    }

    .sidebar-nav-badge.new {
        background: #FFBF00;
        color: #000000;
        box-shadow: 0 2px 6px rgba(255, 191, 0, 0.35);
    }

    /* Nav Arrow */
    .sidebar-nav-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-left: auto;
        padding-left: 1rem;
    }

    .sidebar-nav-arrow .material-symbols-outlined {
        font-size: 1.125rem;
        color: #9ca3af;
    }

    .sidebar-nav-item:hover .sidebar-nav-arrow .material-symbols-outlined {
        color: #6b7280;
    }

    .sidebar-nav-item.active .sidebar-nav-arrow .material-symbols-outlined {
        color: #48831f;
    }

    /* Sidebar Banner */
    .sidebar-banner {
        padding: 0.75rem 1rem;
        margin-top: 0.5rem;
        cursor: pointer;
        position: relative;
    }

    .sidebar-banner-img {
        width: 100%;
        max-height: 50px;
        border-radius: 6px;
        object-fit: contain;
    }

    .sidebar-banner-tooltip {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #fbbf24;
        color: #000;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
        z-index: 9999;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        animation: tooltipFadeIn 0.2s ease;
    }

    .sidebar-banner-tooltip::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-bottom-color: #fbbf24;
    }

    /* Footer Section */
    .sidebar-footer {
        padding: 0.875rem 1rem 1.25rem;
        margin-top: auto;
        background: #f9fafb;
        border-top: 1px solid #e5e7eb;
    }

    .sidebar-footer-divider {
        display: none;
    }

    .sidebar-footer-link {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.625rem 0.75rem;
        margin-bottom: 0.125rem;
        border-radius: 8px;
        text-decoration: none;
        color: #000000;
        font-size: 0.8125rem;
        font-weight: 500;
    }

    .sidebar-footer-link:hover {
        color: #000000;
        background: #f3f4f6;
    }

    .sidebar-footer-link .material-symbols-outlined {
        font-size: 1.125rem;
        color: #6b7280;
    }

    .sidebar-footer-link:hover .material-symbols-outlined {
        color: #4b5563;
    }

    .sidebar-footer-version {
        text-align: center;
        font-size: 0.6875rem;
        color: #9ca3af;
        margin-top: 0.75rem;
        letter-spacing: 0.02em;
        font-weight: 500;
    }

    /* Hide Sidebar on Desktop (1024px+) */
    @media (min-width: 1280px) {
        .sidebar,
        .sidebar-overlay,
        .mobile-menu-button {
            display: none !important;
        }
    }

    .material-icons-outlined {
      font-family: 'Material Icons Outlined';
      font-weight: normal;
      font-style: normal;
      font-size: 24px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      font-feature-settings: 'liga';
      -webkit-font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
    }
    
    .main {
      padding: 0.25rem 0;
      overflow-x: visible !important;
      overflow-y: visible !important;
    }
    
    .section {
      margin-bottom: 1rem;
    }
    
    .section:first-of-type {
      margin-top: 0;
      margin-bottom: 0.75rem;
      padding-top: 0.25rem;
    }
    
    .section:has(.text-3xl.font-heading) {
      margin-top: 0;
      margin-bottom: 0.75rem;
      padding-top: 0.25rem;
    }
    
    /* Material Icons */
    .material-symbols-outlined {
      font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24
    }
    
    /* Search Form */
    .search-form {
      background-color: var(--white);
      padding: 1rem;
      border-radius: 1.25rem;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
      margin-bottom: 1rem;
    }
    
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
    
    .form-group {
      margin-bottom: 0.5rem;
    }
    
    .form-label {
      display: block;
      font-size: 0.75rem;
      font-weight: bold;
      color: #000000;
      margin-bottom: 0.25rem;
    }
    
    label[for="destination"],
    label[for="from"] {
      white-space: nowrap;
    }
    
    .form-input, .form-select {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid var(--border-light);
      border-radius: 0.5rem;
      background-color: var(--background-light);
      color: var(--text-light-primary);
      font-family: inherit;
      font-size: 0.75rem;
      box-shadow: 0 10px 15px -3px rgba(72, 131, 31, 0.3);
      transition: box-shadow 0.2s, border-color 0.2s;
    }
    
    /* Form input with icon - Tablet and Desktop */
    @media (min-width: 768px) {
      .form-input-with-icon {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 2.5rem;
      }
      
      .form-input-with-icon .form-input {
        padding-left: 2.5rem;
      }
      
      .form-input-icon {
        position: absolute;
        left: 0.75rem;
        pointer-events: none;
        color: var(--text-light-secondary);
        font-size: 1rem;
        z-index: 1;
      }
      
      .form-input-with-icon:has(.form-input:focus) .form-input-icon {
        color: var(--primary-color);
      }
    }
    
    .form-input::placeholder,
    .form-select::placeholder {
      font-size: 0.75rem;
      color: var(--text-light-secondary);
    }
    
    .form-group-date {
      position: relative;
    }
    
    .form-group-date .form-input {
      padding-left: 2.75rem;
      padding-right: 0.5rem;
    }
    
    .date-icon {
      position: absolute;
      left: 0.75rem;
      bottom: 0.5rem;
      pointer-events: none;
      color: var(--text-light-secondary);
      display: flex;
      align-items: center;
      z-index: 1;
    }
    
    .form-group-date .form-input:focus + .date-icon {
      color: var(--primary-color);
    }
    
    .form-input:focus, .form-select:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 2px rgba(72, 131, 31, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    }
    
    .form-group-full {
      grid-column: 1 / -1;
    }
    
    .travellers-counter {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid var(--border-light);
      background-color: var(--background-light);
      padding: 0.5rem;
      border-radius: 0.5rem;
      height: 2.5rem;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      transition: box-shadow 0.2s, border-color 0.2s;
    }
    
    .travellers-counter:focus-within {
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(0, 90, 224, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    }
    
    .counter-btn {
      color: var(--primary);
      font-weight: bold;
      font-size: 1.125rem;
      width: 1.5rem;
      background: none;
      border: none;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    
    .counter-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .counter-btn:hover:not(:disabled) {
      opacity: 0.8;
    }
    
    .counter-value {
      font-weight: 500;
    }
    
    .btn-primary {
      width: 100%;
      background-color: var(--primary);
      color: var(--white);
      font-weight: bold;
      padding: 0.75rem 1rem;
      border: none;
      border-radius: 0.75rem;
      box-shadow: 0 4px 6px -1px rgba(0, 90, 224, 0.4);
      cursor: pointer;
      transition: opacity 0.2s;
    }
    
    .btn-primary:hover {
      opacity: 0.9;
    }

    /* Skeleton Loader for Car Cards */
    .skeleton-container {
      display: none;
      width: 100%;
    }

    .skeleton-container.active {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    /* Mobile skeleton card - vertical layout */
    .skeleton-card {
      background: #fff;
      border-radius: 1.25rem;
      overflow: hidden;
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 2px 4px -1px rgba(0, 0, 0, 0.12),
        0 4px 8px -2px rgba(0, 0, 0, 0.10);
    }

    .skeleton-image {
      width: 100%;
      height: 200px;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s infinite;
    }

    .skeleton-content {
      padding: 1rem;
    }

    .skeleton-title {
      height: 1.25rem;
      width: 70%;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s infinite;
      border-radius: 4px;
      margin-bottom: 0.75rem;
    }

    .skeleton-text {
      height: 0.875rem;
      width: 50%;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s infinite;
      border-radius: 4px;
      margin-bottom: 0.5rem;
    }

    .skeleton-text.medium {
      width: 60%;
    }

    .skeleton-specs {
      display: flex;
      gap: 0.5rem;
      margin: 1rem 0;
    }

    .skeleton-spec {
      height: 2rem;
      width: 3rem;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s infinite;
      border-radius: 6px;
    }

    .skeleton-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 0.75rem;
      border-top: 1px solid #f0f0f0;
      margin-top: 0.75rem;
    }

    .skeleton-price {
      height: 1.5rem;
      width: 5rem;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s infinite;
      border-radius: 4px;
    }

    .skeleton-button {
      height: 2.25rem;
      width: 6rem;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s infinite;
      border-radius: 6px;
    }

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

    /* Tablet/Desktop skeleton card - horizontal layout like actual car cards */
    @media (min-width: 768px) {
      .skeleton-container.active {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }

      .skeleton-card {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem;
        border-radius: 0.75rem;
        border: 1px solid var(--border-light);
        background-color: #fff;
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.08),
          0 2px 4px -1px rgba(0, 0, 0, 0.12),
          0 4px 8px -2px rgba(0, 0, 0, 0.10);
      }

      .skeleton-image {
        width: 280px;
        min-width: 280px;
        height: 180px;
        border-radius: 0.5rem;
        flex-shrink: 0;
      }

      .skeleton-content {
        flex: 1;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .skeleton-title {
        height: 1.5rem;
        width: 60%;
        margin-bottom: 0.5rem;
      }

      .skeleton-text {
        height: 1rem;
        width: 40%;
        margin-bottom: 0.5rem;
      }

      .skeleton-specs {
        display: flex;
        gap: 1rem;
        margin: 0.75rem 0;
      }

      .skeleton-spec {
        height: 2.5rem;
        width: 4rem;
        border-radius: 8px;
      }

      .skeleton-footer {
        border-top: none;
        padding-top: 0;
        margin-top: auto;
      }

      .skeleton-price {
        height: 1.75rem;
        width: 6rem;
      }

      .skeleton-button {
        height: 2.5rem;
        width: 8rem;
        border-radius: 8px;
      }
    }

    /* Hide car cards when loading */
    .car-cards.loading {
      display: none !important;
    }

    /* Results Section */
    .results-header {
      margin-bottom: 1rem;
    }
    
    .results-count {
      font-size: 0.875rem;
      color: var(--text-light-secondary);
      margin-bottom: 0.75rem;
      text-align: center;
    }
    
    .filters-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      flex-wrap: nowrap;
    }
    
    .btn-filter {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.5rem 1.25rem;
      border: 1px solid var(--border-light);
      border-radius: 0.75rem;
      background-color: var(--white);
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text-light-primary);
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      transition: box-shadow 0.2s;
      cursor: pointer;
      min-width: 120px;
      flex-shrink: 0;
    }
    
    .btn-filter:hover {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    
    .sort-select {
      padding: 0.5rem 0.75rem;
      border: 1px solid var(--border-light);
      border-radius: 0.75rem;
      background-color: var(--white);
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text-light-primary);
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      transition: box-shadow 0.2s;
      cursor: pointer;
      min-width: 140px;
      flex: 1;
      font-family: inherit;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }
    
    .sort-select:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 2px rgba(72, 131, 31, 0.2);
    }
    
    /* Car Cards */
    .car-cards {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      overflow-anchor: none; /* Prevent scroll anchoring during pagination */
      overflow: visible !important; /* Ensure content is not clipped on mobile */
      min-height: auto; /* Allow natural height for no-results message */
    }

    /* Instant appearance - no transitions on initial load */
    .car-card {
      opacity: 1 !important;
      transform: none !important;
      visibility: visible !important;
    }

    /* Car images - prevent flash while loading */
    .car-card .car-image {
      background-color: #f0f0f0; /* Placeholder background while image loads */
    }
    
    .car-card {
      background-color: var(--white);
      border-radius: 1.25rem;
      box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 2px 4px -1px rgba(0, 0, 0, 0.12),
        0 4px 8px -2px rgba(0, 0, 0, 0.10),
        0 8px 16px -4px rgba(0, 0, 0, 0.08),
        0 12px 24px -6px rgba(0, 0, 0, 0.06),
        0 16px 32px -8px rgba(0, 0, 0, 0.04),
        0 20px 40px -10px rgba(0, 0, 0, 0.02),
        -2px 0 4px -1px rgba(0, 0, 0, 0.12),
        -4px 0 8px -2px rgba(0, 0, 0, 0.10),
        -8px 0 16px -4px rgba(0, 0, 0, 0.08),
        -12px 0 24px -6px rgba(0, 0, 0, 0.06),
        -16px 0 32px -8px rgba(0, 0, 0, 0.04),
        -20px 0 40px -10px rgba(0, 0, 0, 0.02),
        2px 0 4px -1px rgba(0, 0, 0, 0.12),
        4px 0 8px -2px rgba(0, 0, 0, 0.10),
        8px 0 16px -4px rgba(0, 0, 0, 0.08),
        12px 0 24px -6px rgba(0, 0, 0, 0.06),
        16px 0 32px -8px rgba(0, 0, 0, 0.04),
        20px 0 40px -10px rgba(0, 0, 0, 0.02);
      overflow: hidden;
    }
    
    .car-image {
      width: 100%;
      height: 12rem;
      object-fit: cover;
    }
    
    .car-details {
      padding: 1rem;
    }
    
    .car-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 0.75rem;
    }
    
    .car-title {
      font-size: 1.125rem;
      font-weight: bold;
    }
    
    .car-price {
      text-align: right;
    }
    
    .price-amount {
      font-size: 1.25rem;
      font-weight: bold;
      color: #1a2421;
    }
    
    .price-period {
      font-size: 0.75rem;
      color: #1a2421;
    }
    
    .price-old {
      font-size: 0.875rem;
      color: #dc2626;
      text-decoration: line-through;
      margin-right: 0.25rem;
      display: inline;
    }
    
    .car-price {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.25rem;
    }
    
    .price-amount {
      display: inline;
    }
    
    .price-period {
      display: inline;
    }
    
    /* Desktop/Tablet: inline price display */
    @media (min-width: 768px) {
      .price-info {
        display: flex;
        align-items: baseline;
        gap: 0.25rem;
      }
      
      .price-info .price-old {
        font-size: 0.875rem;
      }
      
      .price-info .daily-price {
        display: inline;
      }
    }
    
    .car-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
      font-size: 0.875rem;
      color: #000000;
      margin-bottom: 1rem;
    }
    
    /* Tablet: 4 features per row */
    @media (min-width: 768px) and (max-width: 1279px) {
      .car-features {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.15rem 0.35rem !important;
        font-size: 0.6rem !important;
      }
      
      .feature {
        font-size: 0.6rem !important;
      }
      
      .feature-icon {
        font-size: 0.75rem !important;
        margin-right: 0.15rem !important;
      }
      
      .car-feature {
        font-size: 0.6rem !important;
      }
      
      .car-features-row {
        display: contents !important;
      }
    }
    
    .feature {
      display: flex;
      align-items: center;
    }
    
    .feature-icon {
      font-size: 1.125rem;
      margin-right: 0.5rem;
      color: #48831f;
    }
    
    .feature-icon svg path[fill="currentColor"] {
      fill: #48831f;
    }
    
    .btn-view-deal {
      width: 100%;
      background-color: #00CA00;
      color: white;
      font-weight: bold;
      font-size: 1.05rem;
      padding: 0.75rem 1rem;
      border: none;
      border-radius: 0.75rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-view-deal:hover {
      background-color: #00b300;
    }
    
    /* Text Styles */
    .text-xl {
      font-size: 1.25rem;
      font-weight: 600;
    }
    
    .text-3xl {
      font-size: 1.875rem;
      font-weight: bold;
      line-height: 1.25;
    }
    
    .material-symbols-outlined.text-3xl {
      font-size: 1.875rem;
    }
    
    /* Compact heading for single line */
    .text-3xl.font-heading {
      font-size: 0.9375rem;
      line-height: 1.2;
      letter-spacing: -0.02em;
      white-space: nowrap;
      word-spacing: -0.05em;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }
    
    /* Responsive: Smaller font on mobile for single line */
    @media (max-width: 375px) {
      .text-3xl.font-heading {
        font-size: 0.875rem;
        letter-spacing: -0.025em;
        word-spacing: -0.1em;
      }
    }
    
    /* Very small screens: Smaller font */
    @media (max-width: 320px) {
      .text-3xl.font-heading {
        font-size: 0.8125rem;
        letter-spacing: -0.03em;
        word-spacing: -0.15em;
      }
    }
    
    .text-lg {
      font-size: 1.125rem;
      font-weight: bold;
    }
    
    .text-sm {
      font-size: 0.875rem;
    }
    
    .text-xs {
      font-size: 0.75rem;
    }
    
    .font-bold {
      font-weight: bold;
    }
    
    .font-semibold {
      font-weight: 600;
    }
    
    .leading-tight {
      line-height: 1.25;
    }
    
    /* Category Filters and Link Buttons */
    .category-filters {
      margin-bottom: 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
    }
    
    @media (max-width: 767px) {
      .category-filters {
        margin-top: 0.25rem;
      }
    }
    
    @media (min-width: 768px) {
      .category-filters {
        flex-direction: row;
        margin-top: 0.5rem;
      }
    }
    
    .filter-container {
      width: 100%;
      position: relative;
      display: none;
    }
    
    @media (max-width: 767px) {
      .filter-container {
        display: block;
      }
    }
    
    @media (max-width: 767px) {
      .filter-container::before,
      .filter-container::after {
        display: none;
      }
    }
    
    .link-buttons {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      overflow-x: auto;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
      padding-bottom: 0.5rem;
      scroll-behavior: smooth;
    }
    
    .link-buttons::-webkit-scrollbar {
      display: none; /* Chrome, Safari and Opera */
    }
    
    .link-button {
      padding: 0.625rem 1.25rem;
      border-radius: 9999px;
      font-weight: 500;
      border: 2px solid #FFD700;
      background-color: var(--surface-light);
      color: #000000;
      cursor: pointer;
      transition: all var(--transition-duration);
      white-space: nowrap;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      text-decoration: none;
    }
    
    .link-button:hover {
      border-color: var(--primary-color);
    }
    
    .link-button.active {
      background-color: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
    }
    
    /* Make link buttons more compact on mobile */
    @media (max-width: 767px) {
      .link-button {
        padding: 0.5rem 0.875rem;
        font-size: 0.875rem;
        gap: 0.375rem;
      }
      
      .link-button .material-icons-outlined {
        font-size: 1.125rem;
        color: #48831f;
      }
      
      .link-button.active .material-icons-outlined {
        color: white;
      }
      
      .link-buttons {
        gap: 0.5rem;
      }
    }
    
    /* Available Cars List - Sliding Ticker Design */
    .available-cars-section {
      margin-bottom: 0;
      width: 100vw;
      margin-left: calc(-50vw + 50%);
      box-sizing: border-box;
      position: relative;
      z-index: 1;
      overflow: hidden;
    }

    .available-cars-bar {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0;
      background: #f8f9fa;
      border-radius: 0;
      padding: 0;
      min-height: 50px;
      height: 50px;
      max-height: 50px;
      overflow: hidden !important;
      border: none;
      border-bottom: 1px solid #e5e7eb;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      flex-wrap: nowrap;
    }

    .available-cars-label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.7rem;
      font-weight: 700;
      color: #ffffff;
      text-align: center;
      flex-shrink: 0;
      line-height: 1;
      padding: 0 1rem;
      background: linear-gradient(135deg, #48831f 0%, #3d6f1a 100%);
      height: 100%;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }

    .available-cars-label::before {
      content: '';
      width: 8px;
      height: 8px;
      background-color: #ffffff;
      border-radius: 50%;
      animation: pulse-dot 1.5s ease-in-out infinite;
    }

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

    .available-cars-navigation {
      display: flex;
      align-items: center;
      gap: 0;
      overflow: hidden !important;
      position: relative;
      flex: 1;
      min-height: 0;
      height: 100%;
      background: transparent;
      max-height: 100%;
    }

    .available-cars-list {
      display: flex;
      align-items: center;
      gap: 0;
      animation: ticker-scroll 25s linear infinite;
      height: 100%;
      padding: 0 1rem;
      flex-wrap: nowrap !important;
      overflow: visible;
      white-space: nowrap;
    }

    .available-cars-list:hover {
      animation-play-state: paused;
    }

    @keyframes ticker-scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .available-cars-list::-webkit-scrollbar {
      display: none;
    }

    .car-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.4rem 1.25rem;
      border-radius: 0 !important;
      font-size: 0.85rem;
      font-weight: 600 !important;
      border: none !important;
      border-right: 1px solid #e5e7eb !important;
      background-color: transparent !important;
      color: #1f2937 !important;
      margin-right: 0;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      white-space: nowrap;
      flex-shrink: 0;
      box-shadow: none !important;
      height: 100%;
      text-transform: capitalize;
      opacity: 1 !important;
    }

    .car-item .brand-logo {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      object-fit: contain;
      border-radius: 4px;
    }

    .car-item .brand-name {
      white-space: nowrap;
    }

    .loading-brands {
      color: #6b7280;
      font-size: 0.8rem;
      padding: 0 1rem;
    }

    .car-item:last-child {
      margin-right: 0;
      border-right: none;
    }

    .car-item:hover {
      background-color: rgba(72, 131, 31, 0.15);
      color: #1f2937;
    }

    .car-item.active {
      background-color: #48831f;
      color: #ffffff;
      border-color: transparent;
    }

    .car-item.active:hover {
      background-color: #3d6f1a;
    }

    .car-item:active {
      transform: scale(0.98);
    }

    .car-nav-arrow {
      display: none;
    }

    .car-nav-arrow:hover {
      background-color: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
      box-shadow: 0 2px 4px rgba(72, 131, 31, 0.3);
    }

    .car-nav-arrow:active {
      transform: scale(0.95);
    }

    .car-nav-arrow .material-icons-outlined {
      font-size: 1.25rem;
    }

    .car-nav-arrow:disabled {
      opacity: 0.3;
      cursor: not-allowed;
      pointer-events: none;
    }
    
    /* Mobile-specific enhancements - Ticker Design */
    @media (max-width: 767px) {
      .available-cars-section {
        margin-bottom: 0;
        margin-top: 0;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
      }

      .available-cars-bar {
        min-height: 45px;
        height: 45px;
        background: #f8f9fa !important;
        background-image: none !important;
        border: none !important;
        border-bottom: 1px solid #e5e7eb !important;
        border-radius: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        padding: 0 !important;
      }

      .available-cars-label {
        font-size: 0.55rem;
        padding: 0 0.75rem;
        background: linear-gradient(135deg, #48831f 0%, #3d6f1a 100%) !important;
        height: 100%;
        display: flex;
        align-items: center;
        color: #ffffff;
      }

      .available-cars-navigation {
        gap: 0;
        height: 100%;
      }

      .available-cars-list {
        gap: 0;
        padding: 0 0.5rem;
        animation: ticker-scroll 20s linear infinite;
      }

      .car-item {
        font-size: 0.75rem;
        padding: 0.3rem 0.75rem;
        border: none !important;
        border-right: 1px solid #e5e7eb !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        color: #1f2937 !important;
        margin-right: 0;
        height: 100%;
      }

      .car-item .brand-logo {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        object-fit: contain;
        border-radius: 3px;
      }

      .car-item .brand-name {
        white-space: nowrap;
      }

      .loading-brands {
        color: #6b7280;
        font-size: 0.7rem;
        padding: 0 0.5rem;
      }

      .car-item:hover {
        background-color: rgba(72, 131, 31, 0.15) !important;
        color: #1f2937 !important;
      }

      .car-item.active {
        background-color: #48831f !important;
        color: #ffffff !important;
      }

      .car-nav-arrow {
        display: none !important;
      }
    }

    /* Tablet - Ticker Design */
    @media (min-width: 768px) and (max-width: 1279px) {
      .available-cars-section {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-bottom: 0;
        margin-top: 0;
        overflow: hidden !important;
      }

      .results-section .available-cars-section {
        display: none !important;
      }

      .brand-filter-section-desktop {
        display: block;
      }

      .available-cars-bar {
        min-height: 50px;
        height: 50px;
        background: #f8f9fa !important;
        background-image: none !important;
        border: none !important;
        border-bottom: 1px solid #e5e7eb !important;
        border-radius: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        padding: 0 !important;
      }

      .available-cars-label {
        font-size: 0.65rem;
        padding: 0 1rem;
        background: linear-gradient(135deg, #48831f 0%, #3d6f1a 100%) !important;
        height: 100%;
        display: flex;
        align-items: center;
        color: #ffffff;
      }

      .available-cars-navigation {
        gap: 0;
        height: 100%;
      }

      .available-cars-list {
        gap: 0;
        padding: 0 1rem;
        animation: ticker-scroll 25s linear infinite;
      }

      .car-item {
        font-size: 0.85rem;
        padding: 0.4rem 1rem;
        border: none !important;
        border-right: 1px solid #e5e7eb !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        color: #1f2937 !important;
        margin-right: 0;
        height: 100%;
      }

      .car-item .brand-logo {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        object-fit: contain;
        border-radius: 4px;
      }

      .car-item .brand-name {
        white-space: nowrap;
      }

      .loading-brands {
        color: #6b7280;
        font-size: 0.75rem;
        padding: 0 0.75rem;
      }

      .car-item:hover {
        background-color: rgba(72, 131, 31, 0.15) !important;
        color: #1f2937 !important;
      }

      .car-item.active {
        background-color: #48831f !important;
        color: #ffffff !important;
      }

      .car-nav-arrow {
        display: none !important;
      }
    }

    /* Desktop - Ticker Design */
    @media (min-width: 1280px) {
      .available-cars-section {
        display: block !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-bottom: 0;
        margin-top: 0;
        overflow: hidden !important;
        padding-bottom: 0;
      }

      .results-section .available-cars-section {
        display: none !important;
      }

      .brand-filter-section-desktop {
        display: block;
      }

      .available-cars-bar {
        min-height: 42px;
        height: 42px;
        background: #f8f9fa !important;
        background-image: none !important;
        border: none !important;
        border-bottom: 1px solid #e5e7eb !important;
        border-radius: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        padding: 0 !important;
      }

      .available-cars-label {
        font-size: 0.75rem;
        padding: 0 1.5rem;
        background: linear-gradient(135deg, #48831f 0%, #3d6f1a 100%) !important;
        height: 100%;
        display: flex;
        align-items: center;
        color: #ffffff;
      }

      .available-cars-navigation {
        gap: 0;
        height: 100%;
      }

      .available-cars-list {
        gap: 0;
        padding: 0 1rem;
        animation: ticker-scroll 30s linear infinite;
      }

      .car-item {
        font-size: 0.8rem;
        padding: 0.35rem 1rem;
        border: none !important;
        border-right: 1px solid #e5e7eb !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        color: #1f2937 !important;
        margin-right: 0;
        height: 100%;
      }

      .car-item .brand-logo {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        object-fit: contain;
        border-radius: 4px;
      }

      .car-item .brand-name {
        white-space: nowrap;
      }

      .loading-brands {
        color: #6b7280;
        font-size: 0.8rem;
        padding: 0 1rem;
      }

      .car-item:hover {
        background-color: rgba(72, 131, 31, 0.15) !important;
        color: #1f2937 !important;
      }

      .car-item.active {
        background-color: #48831f !important;
        color: #ffffff !important;
      }

      .car-item.active:hover {
        background-color: #3d6f1a !important;
      }

      .car-nav-arrow {
        display: none !important;
      }
    }

    /* =====================================================
       MOBILE DATE PICKER - REFINED LUXURY DESIGN
       Cohesive, compact, premium aesthetic
       ===================================================== */

    .date-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.6);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 3000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      animation: fadeIn 0.2s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .date-modal-overlay.active {
      display: flex;
    }

    @media (min-width: 768px) {
      .date-modal-overlay {
        display: none !important;
      }
    }

    .date-modal-container {
      position: relative;
      display: flex;
      width: 100%;
      max-width: 320px;
      max-height: calc(100vh - 2rem);
      flex-direction: column;
      background: #fff;
      border-radius: 1.5rem;
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 24px 48px -12px rgba(0, 0, 0, 0.25);
      overflow: hidden;
      animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* Header */
    .date-modal-header {
      display: flex;
      flex-direction: column;
      background: linear-gradient(160deg, #48831f 0%, #3a6919 100%);
      padding: 0.875rem 0.875rem 0.75rem;
      position: relative;
      overflow: hidden;
    }

    .date-modal-header::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 120px;
      height: 120px;
      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
      border-radius: 50%;
    }

    .date-modal-header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.625rem;
    }

    .date-modal-header-icon {
      width: 1.75rem;
      height: 1.75rem;
      flex-shrink: 0;
    }

    .date-modal-header-title {
      flex: 1;
      text-align: center;
      font-family: 'DM Sans', -apple-system, sans-serif;
      font-size: 0.9375rem;
      font-weight: 600;
      color: #fff;
      letter-spacing: -0.01em;
    }

    .date-modal-header-spacer {
      width: 1.75rem;
    }

    .date-modal-close-btn {
      display: flex;
      width: 1.75rem;
      height: 1.75rem;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.18);
      border: none;
      cursor: pointer;
      color: #fff;
      transition: all 0.2s ease;
    }

    .date-modal-close-btn:active {
      transform: scale(0.92);
    }

    .date-modal-close-btn .material-symbols-outlined {
      font-size: 1.125rem;
      width: auto;
      height: auto;
    }

    /* Summary Cards */
    .date-modal-header-summary {
      padding: 0;
    }

    .date-summary-card {
      display: flex;
      gap: 0.375rem;
      padding: 0;
      border: none;
      background: transparent;
    }

    .date-summary-row {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.125rem;
      padding: 0.375rem 0.25rem;
      background: rgba(255, 255, 255, 0.12);
      border-radius: 0.5rem;
      backdrop-filter: blur(4px);
    }

    .date-summary-row:last-child {
      background: rgba(255, 215, 0, 0.18);
    }

    .date-summary-label {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.5625rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: rgba(255, 255, 255, 0.7);
    }

    .date-summary-value {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.6875rem;
      font-weight: 600;
      color: #fff;
    }

    .date-summary-total {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.6875rem;
      font-weight: 700;
      color: #fde047;
    }

    /* Main Content */
    .date-modal-main {
      flex: 1;
      padding: 0.75rem;
      overflow-y: auto;
      background: #fafbfc;
    }

    .date-calendar-container {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    /* Calendar */
    .date-calendar {
      width: 100%;
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: 0.875rem;
      padding: 0.625rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .date-calendar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.125rem;
      margin-bottom: 0.5rem;
    }

    .date-calendar-title {
      flex: 1;
      text-align: center;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.8125rem;
      font-weight: 600;
      color: #1e293b;
      letter-spacing: -0.01em;
    }

    .date-calendar-nav {
      width: 1.625rem;
      height: 1.625rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: none;
      background: #f1f5f9;
      border-radius: 0.375rem;
      color: #64748b;
      transition: all 0.15s ease;
    }

    .date-calendar-nav:hover {
      background: #48831f;
      color: #fff;
    }

    .date-calendar-nav:active {
      transform: scale(0.94);
    }

    .date-calendar-nav .material-symbols-outlined {
      font-size: 1rem;
      width: auto;
      height: auto;
    }

    .date-calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 0.125rem;
    }

    .date-weekday {
      display: flex;
      height: 1.5rem;
      align-items: center;
      justify-content: center;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.625rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #94a3b8;
    }

    .date-day {
      aspect-ratio: 1;
      height: auto;
      width: 100%;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.75rem;
      font-weight: 500;
      border: none;
      background: none;
      cursor: pointer;
      transition: all 0.12s ease;
      padding: 0;
    }

    .date-day-disabled {
      color: #cbd5e1;
      cursor: not-allowed;
    }

    .date-day-normal {
      color: #334155;
    }

    .date-day-normal:hover .date-day-content {
      background: rgba(72, 131, 31, 0.1);
      border-radius: 0.375rem;
    }

    .date-day-range {
      background: rgba(72, 131, 31, 0.08);
    }

    .date-day-start {
      border-radius: 0.375rem 0 0 0.375rem;
    }

    .date-day-end {
      border-radius: 0 0.375rem 0.375rem 0;
    }

    .date-day-selected .date-day-content {
      background: #48831f;
      color: #fff;
      border-radius: 0.375rem;
      font-weight: 600;
      box-shadow: 0 2px 6px rgba(72, 131, 31, 0.3);
    }

    .date-day-content {
      display: flex;
      width: 100%;
      height: 100%;
      min-height: 1.875rem;
      align-items: center;
      justify-content: center;
      border-radius: 0.375rem;
    }

    /* Footer */
    .date-modal-footer {
      position: relative;
      background: #fff;
      padding: 0.75rem;
      border-top: 1px solid #f1f5f9;
    }

    .date-modal-footer-container {
      margin: 0;
    }

    .date-modal-footer-buttons {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .date-button {
      display: flex;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      border-radius: 0.625rem;
      height: 2.375rem;
      padding: 0 1rem;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.8125rem;
      font-weight: 600;
      border: none;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .date-button-reset {
      min-width: 4.5rem;
      background: #f1f5f9;
      color: #64748b;
    }

    .date-button-reset:hover {
      background: #e2e8f0;
      color: #475569;
    }

    .date-button-reset:active {
      transform: scale(0.97);
    }

    .date-button-confirm {
      flex: 1;
      background: #48831f;
      color: #fff;
      box-shadow: 0 2px 8px rgba(72, 131, 31, 0.25);
    }

    .date-button-confirm:hover {
      background: #3d7319;
      box-shadow: 0 4px 12px rgba(72, 131, 31, 0.35);
    }

    .date-button-confirm:active {
      transform: scale(0.98);
    }

    .date-button-text {
      white-space: nowrap;
    }

    .date-col-start-1 { grid-column-start: 1; }
    .date-col-start-2 { grid-column-start: 2; }
    .date-col-start-3 { grid-column-start: 3; }
    .date-col-start-4 { grid-column-start: 4; }
    .date-col-start-5 { grid-column-start: 5; }
    .date-col-start-6 { grid-column-start: 6; }
    .date-col-start-7 { grid-column-start: 7; }

    .date-w-10, .date-w-12 {
      width: 1.625rem;
    }

    .date-size-10 {
      width: 1.125rem;
      height: 1.125rem;
    }

    /* Small phones */
    @media (max-width: 360px) {
      .date-modal-container {
        max-width: 290px;
      }

      .date-modal-header {
        padding: 0.75rem 0.75rem 0.625rem;
      }

      .date-calendar {
        padding: 0.5rem;
      }

      .date-day-content {
        min-height: 1.625rem;
      }

      .date-day {
        font-size: 0.6875rem;
      }

      .date-weekday {
        height: 1.25rem;
        font-size: 0.5625rem;
      }

      .date-button {
        height: 2.125rem;
        font-size: 0.75rem;
      }
    }

    /* =====================================================
       TOGGLE - Calendar / Flexible
       ===================================================== */

    .toggle-container {
      display: flex;
      padding: 0.1875rem;
      background: #f1f5f9;
      border-radius: 0.625rem;
      margin-bottom: 0.625rem;
    }

    .toggle-button {
      flex: 1;
      position: relative;
      padding: 0.5rem 0.5rem;
      border-radius: 0.5rem;
      border: none;
      background: transparent;
      color: #64748b;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
    }

    .toggle-button:hover:not(.active) {
      color: #475569;
    }

    .toggle-button.active {
      background: #fff;
      color: #48831f;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    #calendarToggle::after,
    #flexibleToggle::after {
      display: none;
    }

    /* =====================================================
       DURATION BUTTONS
       ===================================================== */

    .duration-grid {
      display: flex;
      gap: 0.375rem;
      margin-bottom: 0.625rem;
    }

    .duration-button {
      flex: 1;
      position: relative;
      padding: 0.5rem 0.25rem;
      border-radius: 0.5rem;
      border: 1.5px solid #e2e8f0;
      background: #fff;
      color: #64748b;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .duration-button::before,
    .duration-button::after {
      display: none;
    }

    .duration-button:hover {
      border-color: #48831f;
      color: #48831f;
    }

    .duration-button:active {
      transform: scale(0.97);
    }

    .duration-button.active {
      border-color: #48831f;
      background: #48831f;
      color: #fff;
      box-shadow: 0 2px 8px rgba(72, 131, 31, 0.25);
    }

    .duration-button span {
      display: block;
    }

    /* Desktop/Tablet Date Picker Modal - Only visible on tablets and desktops */
    .desktop-date-modal-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      min-height: 100%;
      background-color: transparent; /* No dark backdrop - allows normal page interaction */
      z-index: 2000;
      display: none;
      padding: 1rem;
      pointer-events: none; /* Allow clicks through overlay */
    }
    
    .desktop-date-modal-overlay.active {
      display: block;
    }
    
    /* Allow interaction with the date picker itself */
    .desktop-date-modal-overlay .desktop-date-picker {
      pointer-events: auto;
    }
    
    @media (max-width: 767px) {
      .desktop-date-modal-overlay {
        display: none !important;
      }
    }
    
    .desktop-date-picker {
      position: absolute;
      width: 100%;
      max-width: 42rem;
      margin-top: 0.5rem;
    }
    
    .desktop-date-picker::before {
      content: '';
      position: absolute;
      top: -0.75rem;
      left: var(--pointer-left, 50%);
      width: 1.5rem;
      height: 1.5rem;
      transform: rotate(45deg);
      background-color: var(--white);
      border: 3px solid #808080;
      border-radius: 0.5rem;
      box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.1);
      z-index: 1;
      margin-left: -0.75rem;
      transition: left 0.3s ease;
    }
    
    @media (min-width: 768px) and (max-width: 1279px) {
      .desktop-date-picker {
        transition: top 0.3s ease, left 0.3s ease;
      }
    }
    
    /* Desktop only: narrower, sharper pointer */
    @media (min-width: 1280px) {
      .desktop-date-picker::before {
        width: 1rem;
        height: 1rem;
        border-radius: 0.15rem;
        margin-left: -0.5rem;
      }
    }
    
    .desktop-date-card {
      width: 100%;
      background-color: var(--white);
      border-radius: 1.5rem;
      border: 3px solid #808080;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 1.5rem;
    }
    
    .desktop-date-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--border-light);
      position: relative;
    }
    
    .desktop-date-header h1 {
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--text-light-primary);
      flex: 1;
      text-align: center;
    }
    
    /* Ensure date picker header doesn't appear in navbar area on desktop */
    @media (min-width: 1280px) {
      .desktop-date-modal-overlay.active .desktop-date-picker {
        /* Force minimum top position: header (64px) + tab-bar (48px) - overlay padding (16px) + margin (40px) = 136px */
        /* This ensures the entire picker (including header) is below navbar */
      }
      
      /* Additional safeguard: ensure header text doesn't show through navbar */
      .desktop-date-modal-overlay.active .desktop-date-card {
        margin-top: 0;
      }
    }
    
    .desktop-icon-button {
      background: none;
      border: none;
      color: var(--text-light-secondary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.25rem;
      border-radius: 50%;
      transition: background-color 0.2s, color 0.2s;
    }
    
    .desktop-icon-button:hover {
      background-color: var(--background-light);
      color: var(--text-light-primary);
    }
    
    .desktop-icon-button .material-symbols-outlined.large {
      font-size: 24px;
    }
    
    /* Close button styling for calendar modal */
    .desktop-date-close-btn {
      background-color: #f3f4f6 !important;
      width: 2.5rem !important;
      height: 2.5rem !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border: 1px solid #d1d5db !important;
      color: #374151 !important;
      flex-shrink: 0 !important;
    }
    
    .desktop-date-close-btn:hover {
      background-color: #e5e7eb !important;
      color: #000000 !important;
    }
    
    .desktop-date-close-btn .material-symbols-outlined {
      font-size: 20px !important;
      color: #374151 !important;
    }
    
    .desktop-spacer {
      width: 2rem;
    }
    
    .desktop-date-summary {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      align-items: center;
      background-color: var(--background-light);
      border-radius: 0.5rem;
      padding: 0.75rem;
      margin-bottom: 1.5rem;
      position: relative;
    }
    
    .desktop-summary-close-btn {
      position: absolute;
      top: 50%;
      right: 0.5rem;
      transform: translateY(-50%);
      background-color: #000000;
      color: #ffffff;
      border: none;
      width: 1.75rem;
      height: 1.75rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .desktop-summary-close-btn:hover {
      background-color: #333333;
    }
    
    .desktop-summary-close-btn .material-symbols-outlined {
      font-size: 16px;
    }
    
    @media (min-width: 768px) {
      .desktop-date-summary {
        grid-template-columns: repeat(3, 1fr) auto;
        padding-right: 3rem;
      }
      
      .desktop-summary-item {
        border-right: 1px solid var(--border-light);
        padding-right: 1rem;
      }
      
      .desktop-summary-item:last-child {
        border-right: none;
        padding-right: 0;
        padding-left: 1rem;
      }
    }
    
    .desktop-summary-label {
      font-size: 0.75rem;
      color: var(--text-light-secondary);
      display: block;
      margin-bottom: 0.125rem;
    }
    
    .desktop-summary-value {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text-light-primary);
    }
    
    .desktop-summary-value.bold {
      font-weight: 700;
    }
    
    .desktop-calendars {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem 2rem;
      margin-bottom: 1.5rem;
    }
    
    @media (min-width: 768px) {
      .desktop-calendars {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    .desktop-calendar {
      margin-bottom: 1.5rem;
    }
    
    .desktop-calendar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.75rem;
    }
    
    .desktop-calendar-title {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text-light-primary);
    }
    
    .desktop-calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 0;
      text-align: center;
      font-size: 0.875rem;
      width: 100%;
    }
    
    .desktop-day-header {
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--text-light-secondary);
      height: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
    
    .desktop-day {
      width: 100%;
      height: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background-color 0.2s, color 0.2s;
      cursor: pointer;
      border: none;
      background: none;
      font-size: 0.875rem;
      color: #000000;
      font-weight: 500;
      margin: 0.125rem;
      box-sizing: border-box;
    }
    
    .desktop-day:hover:not(.muted):not(.selected) {
      background-color: rgba(72, 131, 31, 0.1);
    }
    
    .desktop-day.muted {
      color: #9CA3AF;
      cursor: not-allowed;
      opacity: 0.5;
    }
    
    .desktop-day.selected {
      background-color: #FFD700;
      color: #000000;
      font-weight: 600;
    }
    
    .desktop-day.in-range {
      background-color: rgba(255, 215, 0, 0.3);
      color: #000000;
    }
    
    .desktop-day.in-range.selected {
      background-color: #FFD700;
      color: #000000;
    }
    
    .desktop-day-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 1rem;
      border-top: 1px solid var(--border-light);
    }
    
    .desktop-button {
      padding: 0.5rem 1.5rem;
      border-radius: 9999px;
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: background-color 0.2s;
      font-family: inherit;
    }
    
    .desktop-button.secondary {
      background-color: var(--background-light);
      color: var(--text-light-primary);
      border: 1px solid #666666;
    }
    
    .desktop-button.secondary:hover {
      background-color: var(--border-light);
      border: 1px solid #666666;
    }
    
    .desktop-button.primary {
      background-color: var(--primary-color);
      color: white;
    }
    
    .desktop-button.primary:hover {
      background-color: rgba(72, 131, 31, 0.9);
    }
    
    /* Desktop-specific compact styles (1024px+) */
    @media (min-width: 1280px) {
      .desktop-date-picker {
        max-width: 36rem;
      }
      
      .desktop-date-card {
        padding: 0.75rem;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
      }
      
      .desktop-date-card > main {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
        padding-right: 0.25rem;
      }
      
      .desktop-date-card > main::-webkit-scrollbar {
        width: 4px;
      }
      
      .desktop-date-card > main::-webkit-scrollbar-track {
        background: var(--background-light);
        border-radius: 2px;
      }
      
      .desktop-date-card > main::-webkit-scrollbar-thumb {
        background: var(--border-light);
        border-radius: 2px;
      }
      
      .desktop-date-card > main::-webkit-scrollbar-thumb:hover {
        background: var(--text-light-secondary);
      }
      
      .desktop-date-card > header {
        flex-shrink: 0;
      }
      
      .desktop-date-card > footer {
        flex-shrink: 0;
        margin-top: auto;
      }
      
      .desktop-date-header {
        padding-bottom: 0.5rem;
      }
      
      .desktop-date-header h1 {
        font-size: 0.875rem;
        font-weight: 600;
      }
      
      .desktop-date-summary {
        padding: 0.375rem;
        margin-bottom: 0.75rem;
        gap: 0.5rem;
      }
      
      .desktop-summary-label {
        font-size: 0.625rem;
        margin-bottom: 0.0625rem;
      }
      
      .desktop-summary-value {
        font-size: 0.75rem;
      }
      
      .desktop-calendars {
        gap: 0.75rem;
        margin-bottom: 0.75rem;
      }
      
      .desktop-calendar {
        margin-bottom: 0;
      }
      
      .desktop-calendar-header {
        margin-bottom: 0.375rem;
      }
      
      .desktop-calendar-title {
        font-size: 0.75rem;
      }
      
      .desktop-calendar-grid {
        gap: 0;
        font-size: 0.75rem;
      }
      
      .desktop-day-header {
        font-size: 0.625rem;
        height: 1.5rem;
        font-weight: 500;
      }
      
      .desktop-day {
        width: 100%;
        height: 1.5rem;
        font-size: 0.75rem;
        margin: 0.0625rem;
      }
      
      .desktop-day-footer {
        padding-top: 0.5rem;
        margin-top: 0.375rem;
      }
      
      .desktop-button {
        padding: 0.375rem 1rem;
        font-size: 0.75rem;
      }
      
      .desktop-icon-button {
        padding: 0.125rem;
      }
      
      .desktop-icon-button .material-symbols-outlined.large {
        font-size: 18px;
      }
      
      .desktop-icon-button .material-symbols-outlined {
        font-size: 18px;
      }
      
      .desktop-spacer {
        width: 1.5rem;
      }
    }
    
    /* Custom Dropdown for Hire Type - Tablet and Desktop */
    @media (min-width: 768px) {
      .custom-dropdown-container {
        position: relative;
        width: 100%;
      }
      
      .custom-dropdown-button {
        position: relative;
        width: 100%;
        background-color: var(--background-light);
        border: 1px solid var(--border-light);
        border-radius: 0.5rem;
        box-shadow: 0 10px 15px -3px rgba(72, 131, 31, 0.3);
        padding: 0.5rem;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        text-align: left;
        cursor: pointer;
        outline: none;
        transition: box-shadow 0.2s, border-color 0.2s;
        font-family: inherit;
        font-size: 0.625rem;
        color: var(--text-light-primary);
        height: 2.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
      }
      
      .custom-dropdown-button-icon {
        position: absolute;
        left: 0.75rem;
        pointer-events: none;
        color: var(--text-light-secondary);
        font-size: 1rem;
        z-index: 1;
      }
      
      .custom-dropdown-button:focus .custom-dropdown-button-icon,
      .custom-dropdown-button.open .custom-dropdown-button-icon {
        color: var(--primary-color);
      }
      
      .custom-dropdown-button:hover {
        border-color: var(--primary-color);
      }
      
      .custom-dropdown-button:focus,
      .custom-dropdown-button.open {
        border-color: var(--primary-color);
        box-shadow: 0 10px 15px -3px rgba(72, 131, 31, 0.3);
      }
      
      .custom-dropdown-button-text {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--text-light-primary);
        font-weight: 500;
        flex: 1;
      }
      
      .custom-dropdown-icon {
        position: absolute;
        top: 50%;
        right: 0.75rem;
        transform: translateY(-50%);
        color: var(--text-light-secondary);
        transition: transform 0.2s;
        display: flex;
        align-items: center;
      }
      
      .custom-dropdown-icon.open {
        transform: translateY(-50%) rotate(180deg);
      }
      
      .custom-dropdown-content {
        position: absolute;
        top: calc(100% + 18px);
        left: -25%;
        right: auto;
        width: 150%;
        min-width: 200px;
        max-width: 300px;
        background-color: var(--white);
        border: none;
        border-radius: 0.75rem;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 99999;
        overflow: visible;
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity 0.2s ease, transform 0.2s ease;
        pointer-events: none;
      }
      
      .custom-dropdown-content::before {
        content: '';
        position: absolute;
        top: -0.5rem;
        left: 50%;
        width: 1rem;
        height: 1rem;
        transform: rotate(45deg);
        background-color: var(--white);
        border: none;
        box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.08);
        z-index: 1;
        margin-left: -0.5rem;
      }
      
      .custom-dropdown-content.open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
      }
      
      .custom-dropdown-list {
        list-style: none;
        margin: 0;
        padding: 0.5rem;
        background-color: var(--white);
        border-radius: 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
      }
      
      .custom-dropdown-item {
        position: relative;
        padding: 0.75rem 1rem;
        padding-right: 2.75rem;
        cursor: pointer;
        transition: all 0.15s ease;
        background-color: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
      }
      
      .custom-dropdown-item:hover {
        background-color: #fef9c3;
        border-color: #FFD700;
      }
      
      .custom-dropdown-item.selected {
        background-color: #FFD700;
        border-color: #FFD700;
      }
      
      .custom-dropdown-item-content {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1;
      }
      
      .custom-dropdown-item-title {
        font-size: 0.8125rem;
        font-weight: 500;
        color: #374151;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      
      .custom-dropdown-item.selected .custom-dropdown-item-title,
      .custom-dropdown-item-title.selected {
        font-weight: 600;
        color: #000000;
      }
      
      .custom-dropdown-item-description {
        font-size: 0.625rem;
        color: var(--text-light-secondary);
        margin-top: 0.125rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .custom-dropdown-check {
        position: absolute;
        top: 50%;
        right: 0.75rem;
        transform: translateY(-50%);
        color: #000000;
        display: none;
      }
      
      .custom-dropdown-check .material-icons-outlined {
        font-size: 1.125rem !important;
        font-weight: 600;
      }
      
      .custom-dropdown-item.selected .custom-dropdown-check {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        height: 1.25rem;
        background-color: #000000;
        border-radius: 50%;
        color: #FFD700;
      }
      
      .custom-dropdown-item.selected .custom-dropdown-check .material-icons-outlined {
        font-size: 0.875rem !important;
      }
      
      /* Hide native select on desktop */
      #hire-type-desktop {
        display: none !important;
      }
      
      /* Show custom dropdown on desktop */
      #hire-type-dropdown-container {
        display: block;
      }
    }
    
    @media (max-width: 767px) {
      .custom-dropdown-container {
        display: none !important;
      }
    }
    
    /* Increase z-index for hire type dropdown on desktop and tablet */
    @media (min-width: 768px) {
      .hero-search-form-desktop .field-group .custom-dropdown-content,
      .hero-search-form-desktop .field-group #hire-type-dropdown-content,
      #hire-type-dropdown-content,
      .custom-dropdown-content {
        z-index: 99999 !important;
        width: 150% !important;
        min-width: 200px !important;
        max-width: 300px !important;
        left: -25% !important;
        right: auto !important;
        box-sizing: border-box !important;
      }
      
      .hero-search-form-desktop .field-group .custom-dropdown-container {
        position: relative;
        z-index: 99999;
        width: 100%;
      }
      
      .hero-search-form-desktop .field-group #hire-type-dropdown-container {
        position: relative;
        z-index: 99999;
        width: 100%;
      }
      
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-container {
        position: relative;
        z-index: 99999;
      }
      
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-panel {
        z-index: 99999 !important;
      }
      
      /* Ensure available cars section has lower z-index */
      .available-cars-section {
        position: relative;
        z-index: 1 !important;
      }
    }
    
    /* Custom Dropdown for Vehicle Type - Desktop and Tablet */
    @media (min-width: 768px) {
      .vehicle-type-dropdown-container,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-container {
        position: relative;
        width: 100%;
        display: block !important;
      }
      
      .vehicle-type-dropdown-button,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-button {
        display: flex !important;
        height: auto;
        width: 100%;
        cursor: pointer;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border-radius: 0.5rem;
        border: 1px solid var(--border-light);
        background-color: var(--background-light);
        padding: 0.5rem 1rem;
        text-align: left;
        box-shadow: 0 10px 15px -3px rgba(72, 131, 31, 0.3);
        transition: box-shadow 0.2s, border-color 0.2s;
        outline: none;
        font-family: inherit;
        font-size: 0.625rem;
        color: var(--text-light-primary);
      }
      
      .vehicle-type-dropdown-button:hover,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-button:hover {
        border-color: var(--primary-color);
      }
      
      .vehicle-type-dropdown-button:focus,
      .vehicle-type-dropdown-button.open,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-button:focus,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-button.open {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(72, 131, 31, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
      }
      
      .vehicle-type-dropdown-button-content,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-button-content {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 1;
      }
      
      #vehicle-type-dropdown-text {
        white-space: nowrap;
        font-size: 0.75rem;
      }
      
      .vehicle-type-dropdown-button-content .material-symbols-outlined,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-button-content .material-symbols-outlined {
        font-size: 1rem;
      }
      
      .vehicle-type-dropdown-icon,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-icon {
        color: var(--text-light-secondary);
        transition: transform 0.2s;
        flex-shrink: 0;
        font-size: 1rem;
        display: block !important;
      }
      
      .vehicle-type-dropdown-icon.open,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-icon.open {
        transform: rotate(180deg);
      }
      
      .vehicle-type-dropdown-panel,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-panel {
        position: absolute;
        z-index: 99999;
        margin-top: 0.75rem;
        width: 180px;
        min-width: 180px;
        max-width: 180px;
        border-radius: 0.5rem;
        border: 1px solid #e5e7eb;
        background-color: #ffffff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity 0.2s ease, transform 0.2s ease;
        pointer-events: none;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(-4px);
        overflow: hidden;
        box-sizing: border-box;
      }
      
      .vehicle-type-dropdown-panel.open,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-panel.open {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: all;
      }
      
      .vehicle-type-dropdown-panel-content,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-panel-content {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.5rem;
        max-height: 280px;
        overflow-y: auto;
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
      }
      
      .vehicle-type-dropdown-option,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-option {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0.5rem;
        border-radius: 0.375rem;
        cursor: pointer;
        transition: all 0.15s ease;
        text-decoration: none;
        color: #374151;
        background-color: #f9fafb;
        border: 1px solid #e5e7eb;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
      }
      
      .vehicle-type-dropdown-option:hover,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-option:hover {
        background-color: #ecfdf5;
        border-color: #48831f;
        color: #48831f;
      }
      
      .vehicle-type-dropdown-option.selected,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-option.selected {
        background-color: #FFD700;
        color: #000000;
        border-color: #FFD700;
      }
      
      .vehicle-type-dropdown-option-name,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-option-name {
        font-size: 0.6875rem;
        font-weight: 500;
        line-height: 1.3;
        text-align: center;
        color: inherit;
      }
      
      .vehicle-type-dropdown-option.selected .vehicle-type-dropdown-option-name,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-option.selected .vehicle-type-dropdown-option-name {
        font-weight: 600;
        color: #000000;
      }
    }
    
    /* Hide vehicle type dropdown on mobile only */
    @media (max-width: 767px) {
      .vehicle-type-dropdown-container,
      .hero-search-form-desktop .field-group .vehicle-type-dropdown-container {
        display: none !important;
      }
    }
    
    /* Vehicle Type & Travellers Dropdown - Tablet Only */
    @media (min-width: 768px) and (max-width: 1279px) {
      .vehicle-travellers-dropdown-container {
        position: relative;
        width: 100%;
        display: block;
      }
      
      .vehicle-travellers-dropdown-panel {
        position: absolute;
        z-index: 1000;
        margin-top: 0.5rem;
        width: 100%;
        border-radius: 0.75rem;
        border: 1px solid var(--border-light);
        background-color: var(--white);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        opacity: 0;
        transform: scale(0.95);
        transition: opacity 0.2s, transform 0.2s;
        pointer-events: none;
      }
      
      .vehicle-travellers-dropdown-panel.open {
        opacity: 1;
        transform: scale(1);
        pointer-events: all;
      }
      
      .vehicle-travellers-dropdown-panel-content {
        display: flex;
        flex-direction: column;
        padding: 0.5rem;
        max-height: 20rem;
        overflow-y: auto;
        position: relative;
      }
      
      .vehicle-travellers-section {
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border-light);
      }
      
      .vehicle-travellers-section:first-child {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
      }
      
      .vehicle-travellers-section:last-child {
        border-bottom: none;
        position: sticky;
        bottom: 0;
        background-color: var(--white);
        z-index: 10;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        margin-top: auto;
      }
      
      .vehicle-travellers-section-title {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-light-primary);
        margin-bottom: 0.5rem;
        padding: 0 0.5rem;
      }
      
      .vehicle-travellers-option {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: background-color 0.2s;
        text-decoration: none;
      }
      
      .vehicle-travellers-option:hover {
        background-color: var(--background-light);
      }
      
      .vehicle-travellers-option-name {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--text-light-primary);
        flex: 1;
      }
      
      .travelers-controls {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
      }
      
      .travelers-controls-label {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--text-light-primary);
        width: 100%;
      }
      
      .travelers-controls-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
      }
      
      .travelers-control-btn {
        width: 3rem;
        height: 3rem;
        border-radius: 0.375rem;
        border: 1px solid var(--border-light);
        background-color: var(--white);
        color: var(--text-light-primary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        font-size: 1.5rem;
        font-weight: 500;
        flex-shrink: 0;
      }
      
      .travelers-control-btn:hover {
        background-color: var(--background-light);
        border-color: var(--primary-color);
      }
      
      .travelers-control-btn:active {
        transform: scale(0.95);
      }
      
      #travelers-increase-btn {
        background-color: #FFD700;
        border-color: #FFD700;
        color: #000000;
      }
      
      #travelers-increase-btn:hover {
        background-color: #FFC700;
        border-color: #FFC700;
      }
      
      #travelers-decrease-btn {
        background-color: var(--border-light);
        border-color: var(--border-light);
        color: var(--text-light-secondary);
        cursor: not-allowed;
        opacity: 0.5;
      }
      
      #travelers-decrease-btn.enabled {
        background-color: #000000;
        border-color: #000000;
        color: #FFFFFF;
        cursor: pointer;
        opacity: 1;
      }
      
      #travelers-decrease-btn.enabled:hover {
        background-color: #333333;
        border-color: #333333;
      }
      
      .travelers-control-value {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-light-primary);
        min-width: 1.5rem;
        text-align: center;
      }
    }
    
    /* Hide dropdown on mobile and desktop */
    @media (max-width: 767px), (min-width: 1280px) {
      .vehicle-travellers-dropdown-container {
        display: none !important;
      }
    }
    
    /* Car Details Modal - Mobile Only */
    .car-details-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--white);
      z-index: 3000;
      display: none;
      flex-direction: column;
      overflow: hidden;
    }
    
    .car-details-modal-overlay.active {
      display: flex;
    }
    
    @media (min-width: 768px) {
      .car-details-modal-overlay {
        display: none !important;
      }
    }
    
    /* Desktop Car Details Modal */
    .desktop-car-details-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 5000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      overflow: hidden;
    }
    
    .desktop-car-details-modal-overlay.active {
      display: flex;
    }
    
    /* Ensure desktop car details modal and header are above everything */
    .desktop-car-details-modal-overlay {
      z-index: 5000 !important;
    }
    
    .desktop-car-details-modal-overlay.active {
      z-index: 5000 !important;
    }
    
    .desktop-car-details-header {
      z-index: 5010 !important;
      position: sticky !important;
    }
    
    @media (max-width: 767px) {
      .desktop-car-details-modal-overlay {
        display: none !important;
      }
    }
    
    /* Desktop - keep original layout fixed */
    @media (min-width: 1280px) {
      .desktop-car-details-body {
        display: block !important;
        flex-direction: initial !important;
        padding: 2rem 3rem;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      .desktop-car-details-grid {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
      }
      
      .desktop-car-details-main {
        order: initial !important;
        width: 100% !important;
        max-width: 900px !important;
        margin: 0 auto !important;
      }
      
      .desktop-car-details-image-container {
        max-width: 100%;
      }
      
      .desktop-car-details-main-image {
        max-width: 100%;
        border-radius: 0.75rem;
      }
      
      .desktop-car-details-info {
        max-width: 100%;
      }
      
      .desktop-car-details-info h1 {
        font-size: 1.875rem;
      }
      
      .desktop-car-details-features {
        max-width: 100%;
      }
      
      .desktop-car-details-specs {
        max-width: 100%;
      }
      
      .desktop-car-details-reviews {
        order: initial !important;
        margin-top: 3rem !important;
        width: 100% !important;
        max-width: 1000px !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      
      .desktop-car-details-reviews-summary {
        max-width: 100%;
      }
      
      .desktop-car-details-reviews-list {
        max-width: 100%;
      }
      
      .desktop-car-details-contact-section {
        margin-top: 3rem !important;
        width: 100% !important;
        max-width: 900px !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      
      .desktop-car-details-booking-card {
        max-width: 100% !important;
        padding: 2rem !important;
      }
      
      .desktop-car-details-contact-form {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
      }
      
      
      .desktop-car-details-section-title {
        font-size: 1.5rem !important;
        margin-bottom: 1.5rem !important;
      }
    }
    
    /* Tablet adjustments */
    @media (min-width: 768px) and (max-width: 1279px) {
      .desktop-car-details-modal-content {
        max-width: 95%;
        max-height: 98vh;
        overflow-x: hidden;
        overflow-y: auto;
      }
      
      .desktop-car-details-modal-overlay {
        overflow: hidden;
      }
      
      .desktop-car-details-header {
        padding: 1rem 1.5rem;
      }
      
      .desktop-car-details-body {
        padding: 1.5rem;
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      
      .desktop-car-details-grid {
        display: contents !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      
      .desktop-car-details-main {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        order: 1;
      }
      
      .desktop-car-details-sidebar {
        position: relative;
        top: 0;
        order: 2;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      
      .desktop-car-details-image-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      
      .desktop-car-details-main-image {
        width: 100%;
        max-width: 100%;
      }
      
      .desktop-car-details-thumbnails {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
      }
      
      .desktop-car-details-thumbnail {
        width: 8rem;
        flex-shrink: 0;
      }
      
      .desktop-car-details-info {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      
      .desktop-car-details-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      
      .desktop-car-details-specs {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      
      .desktop-car-details-specs-grid {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      
      .desktop-car-details-reviews {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        order: 1;
      }
      
      .desktop-car-details-reviews-list {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      
      .desktop-car-details-reviews-summary {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      
      .desktop-car-details-reviews-breakdown {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
      }
      
      .desktop-car-details-booking-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      
      .desktop-car-details-contact-form {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
      }
      
      
      .desktop-car-details-booking-form {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      
      .desktop-car-details-form-input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      
      /* Reorder elements on tablet - main content, then reviews, then booking card */
      .desktop-car-details-body {
        display: flex;
        flex-direction: column;
        overflow-x: hidden !important;
      }
      
      /* Order: 1. Main content (images, features, specs) */
      .desktop-car-details-main {
        order: 1;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      
      /* Order: 2. Reviews section */
      .desktop-car-details-reviews {
        order: 2;
        margin-top: 2rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      
      /* Order: 3. Contact section (appears after reviews) */
      .desktop-car-details-contact-section {
        order: 3;
        margin-top: 2rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      
      /* Order: 3. Booking sidebar (appears after reviews) */
      .desktop-car-details-sidebar {
        order: 3;
        margin-top: 2rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        position: relative !important;
        top: 0 !important;
      }
      
      /* Ensure no scrolling on overlay - only modal content scrolls */
      .desktop-car-details-modal-overlay {
        overflow: hidden !important;
      }
      
      .desktop-car-details-modal-content {
        overflow-x: hidden !important;
        max-width: 100%;
      }
      
      .desktop-car-details-modal-overlay * {
        box-sizing: border-box;
      }
      
      /* Prevent any element from causing horizontal scroll */
      .desktop-car-details-image-container,
      .desktop-car-details-thumbnails,
      .desktop-car-details-info,
      .desktop-car-details-features,
      .desktop-car-details-specs,
      .desktop-car-details-booking-card,
      .desktop-car-details-reviews-summary,
      .desktop-car-details-reviews-list {
        max-width: 100%;
        overflow-x: hidden;
      }
    }
    
    .desktop-car-details-modal-content {
      background-color: #f6f7f8;
      width: 100%;
      max-width: 1200px;
      max-height: 95vh;
      overflow-y: auto;
      overflow-x: hidden;
      border-radius: 0.75rem;
      position: relative;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    
    /* Prevent body scroll when modal is open */
    body.modal-open {
      overflow: hidden !important;
      position: fixed !important;
      width: 100% !important;
    }
    
    html.modal-open {
      overflow: hidden !important;
    }
    
    .desktop-car-details-header {
      position: sticky;
      top: 0;
      z-index: 5010;
      background-color: #f6f7f8;
      border-bottom: 1px solid #e2e8f0;
      padding: 1rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      overflow-x: hidden;
      overflow-y: hidden;
    }
    
    .desktop-car-details-header-left {
      flex: 0 0 auto;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      min-width: 150px;
      height: 100%;
      padding-top: 0.5rem;
    }
    
    .desktop-car-details-price-header {
      font-size: 1rem;
      font-weight: 600;
      color: #1f2937;
      line-height: 1.5;
    }
    
    .desktop-car-details-breadcrumb {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      color: #64748b;
      flex: 1;
      justify-content: center;
    }
    
    .desktop-car-details-header-actions {
      flex: 0 0 auto;
      min-width: 50px;
    }
    
    .desktop-car-details-breadcrumb a {
      color: #64748b;
      text-decoration: none;
      transition: color 0.2s;
    }
    
    .desktop-car-details-breadcrumb a:hover {
      color: #137fec;
    }
    
    .desktop-car-details-header-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .desktop-car-details-close-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 0.5rem;
      background: none;
      border: none;
      cursor: pointer;
      color: #64748b;
      transition: background-color 0.2s;
    }
    
    .desktop-car-details-close-btn:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
    
    .desktop-car-details-body {
      padding: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .desktop-car-details-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 2rem;
      max-width: 100%;
    }
    
    .desktop-car-details-main {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      max-width: 100%;
    }
    
    .desktop-car-details-image-container {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    
    .desktop-car-details-main-image {
      width: 100%;
      aspect-ratio: 21/9;
      max-height: 400px;
      background-size: cover;
      background-position: center;
      border-radius: 0.75rem;
    }
    
    .desktop-car-details-thumbnails {
      display: flex;
      gap: 0.75rem;
      overflow-x: auto;
      padding-bottom: 0.5rem;
    }
    
    .desktop-car-details-thumbnails::-webkit-scrollbar {
      display: none;
    }
    
    .desktop-car-details-thumbnail {
      flex-shrink: 0;
      width: 10rem;
      aspect-ratio: 16/9;
      background-size: cover;
      background-position: center;
      border-radius: 0.5rem;
      border: 2px solid transparent;
      cursor: pointer;
      transition: border-color 0.2s;
    }
    
    .desktop-car-details-thumbnail.active {
      border-color: #137fec;
    }
    
    .desktop-car-details-info h1 {
      font-size: 2rem;
      font-weight: 900;
      color: #0f172a;
      margin-bottom: 0.25rem;
      letter-spacing: -0.033em;
      line-height: 1.2;
    }
    
    .desktop-car-details-info .subtitle {
      font-size: 1rem;
      color: #64748b;
      margin-bottom: 1rem;
    }
    
    .desktop-car-details-rating {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      margin-bottom: 1.5rem;
    }
    
    .desktop-car-details-rating .star {
      color: #137fec;
      font-size: 1.25rem;
    }
    
    .desktop-car-details-rating .rating-value {
      font-weight: 700;
      color: #0f172a;
    }
    
    .desktop-car-details-rating .rating-count {
      font-size: 0.875rem;
      color: #64748b;
    }
    
    .desktop-car-details-features-section {
      margin-bottom: 1.5rem;
    }
    
    .desktop-car-details-features-section h3 {
      font-size: 1.25rem;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 1rem;
    }
    
    .desktop-car-details-features {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      padding: 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.75rem;
      background-color: white;
    }
    
    .desktop-car-details-feature {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    
    .desktop-car-details-feature-icon {
      font-size: 1.875rem;
      color: #48831f;
    }
    
    .desktop-car-details-feature-info {
      display: flex;
      flex-direction: column;
    }
    
    .desktop-car-details-feature-label {
      font-size: 0.875rem;
      color: #64748b;
    }
    
    .desktop-car-details-feature-value {
      font-weight: 700;
      color: #1e293b;
    }
    
    .desktop-car-details-specs {
      margin-top: 1.5rem;
    }
    
    .desktop-car-details-specs h3 {
      font-size: 1.25rem;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 1rem;
    }
    
    .desktop-car-details-specs-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      padding: 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.75rem;
      background-color: white;
    }

    .desktop-car-details-spec {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .desktop-car-details-spec-icon {
      font-size: 1.875rem;
      color: #48831f;
    }

    .desktop-car-details-spec-info {
      display: flex;
      flex-direction: column;
    }

    .desktop-car-details-spec-label {
      font-size: 0.875rem;
      color: #64748b;
    }
    
    .desktop-car-details-sidebar {
      position: sticky;
      top: 6rem;
      height: fit-content;
    }
    
    .desktop-car-details-contact-section {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    
    .desktop-car-details-booking-card {
      background-color: white;
      border-radius: 0.75rem;
      padding: 1.5rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      border: 1px solid #e2e8f0;
      max-width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
    
    .desktop-car-details-booking-card > h3 {
      align-self: flex-start;
      width: 100%;
    }
    
    .desktop-car-details-booking-card > form {
      width: 100%;
    }
    
    .desktop-car-details-booking-card > button {
      align-self: center;
    }
    
    .desktop-car-details-price-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 1.5rem;
    }
    
    .desktop-car-details-price-label {
      font-size: 1.125rem;
      font-weight: 500;
      color: #1e293b;
    }
    
    .desktop-car-details-price-amount {
      font-size: 1.875rem;
      font-weight: 900;
      color: #0f172a;
    }
    
    .desktop-car-details-price-period {
      font-size: 1rem;
      font-weight: 400;
      color: #64748b;
    }
    
    .desktop-car-details-section-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 1rem;
    }
    
    .desktop-car-details-contact-form {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      margin-bottom: 2rem;
    }
    
    .desktop-car-details-form-row {
      display: flex;
      gap: 1rem;
      grid-column: span 2;
    }
    
    .desktop-car-details-form-row .desktop-car-details-form-group {
      flex: 1;
    }
    
    /* 3-column row for desktop form */
    .desktop-car-details-form-row-3 {
      display: flex;
      gap: 1rem;
      grid-column: span 2;
    }
    
    .desktop-car-details-form-row-3 .desktop-car-details-form-group {
      flex: 1;
      min-width: 0;
    }
    
    /* Responsive: stack to 1 column on smaller screens */
    @media (max-width: 900px) {
      .desktop-car-details-form-row-3 {
        flex-direction: column;
      }
    }
    
    /* Tablet only: First Name and Last Name 2 per row, Email on separate row */
    @media (min-width: 768px) and (max-width: 1279px) {
      .desktop-car-details-form-row-3 {
        flex-wrap: wrap;
        flex-direction: row;
      }
      
      .desktop-car-details-form-row-3 .desktop-car-details-form-group:first-child,
      .desktop-car-details-form-row-3 .desktop-car-details-form-group:nth-child(2) {
        flex: 0 0 calc(50% - 0.5rem);
        max-width: calc(50% - 0.5rem);
      }
      
      .desktop-car-details-form-row-3 .desktop-car-details-form-group:nth-child(3) {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 0;
      }
    }
    
    .desktop-car-details-form-group {
      display: flex;
      flex-direction: column;
    }
    
    .desktop-car-details-form-label {
      font-size: 0.875rem;
      font-weight: 600;
      color: #1e293b;
      margin-bottom: 0.5rem;
      letter-spacing: 0.01em;
    }
    
    .desktop-car-details-form-input {
      width: 100%;
      height: 2.75rem;
      padding: 0 1rem;
      border-radius: 0.625rem;
      border: 1px solid #000000;
      background-color: #ffffff;
      font-size: 0.9375rem;
      color: #0f172a;
      font-family: 'Poppins', sans-serif;
      transition: all 0.2s ease;
      box-shadow: none;
    }
    
    .desktop-car-details-form-input:hover {
      border-color: #000000;
      box-shadow: none;
    }
    
    .desktop-car-details-form-input::placeholder {
      color: #94a3b8 !important;
      opacity: 1;
      font-weight: 400;
    }

    /* ========== Hire Type Toggle Styles ========== */
    .car-details-hire-type-section,
    .desktop-hire-type-section {
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid #e2e8f0;
    }

    /* Desktop: Center the hire type section */
    .desktop-hire-type-section {
      text-align: center;
    }

    .desktop-hire-type-section .desktop-car-details-form-label {
      text-align: center;
    }

    .hire-type-toggle-container {
      display: flex;
      gap: 0.75rem;
      margin-top: 0.75rem;
      margin-bottom: 0.75rem;
    }

    /* Desktop: Center the toggle buttons */
    .desktop-hire-type-section .hire-type-toggle-container {
      justify-content: center;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
    }

    .hire-type-toggle-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 1rem 1.25rem;
      border: 2px solid #e2e8f0;
      border-radius: 0.75rem;
      background-color: #ffffff;
      color: #64748b;
      font-size: 0.9375rem;
      font-weight: 600;
      font-family: 'Poppins', sans-serif;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    /* Desktop: Limit button width */
    .desktop-hire-type-section .hire-type-toggle-btn {
      flex: 0 1 200px;
      min-width: 180px;
    }

    .hire-type-toggle-btn:hover {
      border-color: #48831f;
      color: #48831f;
      background-color: #f0fdf4;
    }

    .hire-type-toggle-btn.active {
      border-color: #48831f;
      background-color: #48831f;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(72, 131, 31, 0.3);
    }

    .hire-type-toggle-btn .material-symbols-outlined {
      font-size: 1.25rem;
    }

    .hire-type-description {
      font-size: 0.6875rem;
      color: #64748b;
      margin: 0;
      padding: 0.5rem 0.75rem;
      background-color: #f8fafc;
      border-radius: 0.5rem;
      border-left: 3px solid #48831f;
    }

    /* Desktop: Center the description */
    .desktop-hire-type-section .hire-type-description {
      display: inline-block;
      text-align: center;
      border-left: none;
      border-top: 3px solid #48831f;
      max-width: 450px;
      margin: 0 auto;
      font-size: 0.6875rem;
    }

    /* Mobile: Even smaller font size and allow wrapping */
    @media (max-width: 767px) {
      .hire-type-description {
        font-size: 0.5rem !important;
        padding: 4px 8px !important;
        gap: 3px !important;
        line-height: 1.2 !important;
        max-width: 95% !important;
        word-break: break-word !important;
        white-space: normal !important;
      }
      
      .hire-type-description .material-symbols-outlined {
        font-size: 0.625rem !important;
      }
      
      .hire-type-description-wrapper {
        margin-top: 0.5rem !important;
      }
    }

    /* ========== Driver Info Section Styles ========== */
    .driver-info-section {
      margin-top: 1.25rem;
      padding: 1.25rem;
      background-color: #fefce8;
      border: 1px solid #fde047;
      border-radius: 0.75rem;
      animation: slideDown 0.3s ease-out;
    }

    .driver-info-section.hidden {
      display: none;
    }

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

    .driver-info-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 1rem 0;
      font-size: 1rem;
      font-weight: 600;
      color: #854d0e;
    }

    .driver-info-title .material-symbols-outlined {
      font-size: 1.25rem;
      color: #ca8a04;
    }

    .driver-info-section .car-details-form-group,
    .driver-info-section .desktop-car-details-form-group {
      margin-bottom: 1rem;
    }

    .driver-info-section .car-details-form-group:last-child,
    .driver-info-section .desktop-car-details-form-group:last-child,
    .driver-info-section .desktop-car-details-form-row:last-child {
      margin-bottom: 0;
    }

    .form-hint {
      display: block;
      margin-top: 0.375rem;
      font-size: 0.75rem;
      color: #64748b;
      font-style: italic;
    }

    /* Mobile specific adjustments */
    @media (max-width: 767px) {
      .hire-type-toggle-container {
        flex-direction: column;
      }
      
      .hire-type-toggle-btn {
        padding: 0.875rem 1rem;
      }
      
      .driver-info-section {
        padding: 1rem;
      }
    }

    /* ========== Photo Upload Styles ========== */
    .photo-upload-section {
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid #fde047;
    }

    .photo-upload-item {
      margin-bottom: 1rem;
    }

    .photo-upload-item:last-child {
      margin-bottom: 0;
    }

    .photo-upload-btn {
      transition: all 0.2s ease;
    }

    .photo-upload-btn:hover {
      background: #fef3c7 !important;
      border-color: #f59e0b !important;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(202, 138, 4, 0.2);
    }

    .photo-upload-btn:active {
      transform: translateY(0);
    }

    .photo-preview {
      position: relative;
      margin-top: 0.5rem;
    }

    .photo-preview img {
      width: 100%;
      max-height: 200px;
      object-fit: contain;
      border-radius: 0.5rem;
      border: 1px solid #fde047;
      background: #ffffff;
    }

    .photo-remove-btn {
      transition: all 0.2s ease;
    }

    .photo-remove-btn:hover {
      background: rgba(220, 38, 38, 1) !important;
      transform: scale(1.1);
    }

    /* Tablet: Display photos 1 per row (stacked vertically) */
    @media (min-width: 768px) and (max-width: 1279px) {
      .photo-upload-section .desktop-car-details-form-row-3,
      .photo-upload-section .photo-upload-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
      }
      
      .photo-upload-section .desktop-car-details-form-group {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
      }
      
      .photo-upload-section .photo-upload-btn {
        padding: 0.875rem !important;
        font-size: 0.8125rem !important;
        min-height: 100px !important;
      }
      
      .photo-upload-section .photo-upload-btn .material-symbols-outlined {
        font-size: 1.5rem !important;
      }
      
      .photo-upload-section .photo-preview img {
        max-height: 150px !important;
      }
      
      .photo-upload-section .desktop-car-details-form-label {
        font-size: 0.875rem !important;
      }
    }

    /* Age input error state */
    .car-details-form-input:invalid,
    .desktop-car-details-form-input:invalid {
      border-color: #dc2626;
    }

    .age-error-message {
      animation: slideDown 0.3s ease-out;
    }

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

    /* Special Requirements Textarea Styling */
    .car-details-form-input[type="textarea"],
    .car-details-form-input textarea,
    textarea.car-details-form-input,
    textarea.desktop-car-details-form-input {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid #000000;
      border-radius: 0.5rem;
      font-size: 0.875rem;
      font-family: inherit;
      line-height: 1.5;
      color: #1e293b;
      background-color: #ffffff;
      transition: all 0.2s ease;
      box-shadow: none;
    }

    .car-details-form-input[type="textarea"]:focus,
    .car-details-form-input textarea:focus,
    textarea.car-details-form-input:focus,
    textarea.desktop-car-details-form-input:focus {
      outline: none;
      border-color: #000000;
      box-shadow: none;
    }

    .car-details-form-input[type="textarea"]::placeholder,
    .car-details-form-input textarea::placeholder,
    textarea.car-details-form-input::placeholder,
    textarea.desktop-car-details-form-input::placeholder {
      color: #94a3b8 !important;
    }

    /* Ensure placeholder is grey for special requirements textarea */
    #mobile-special-requirements::placeholder,
    #desktop-special-requirements::placeholder {
      color: #94a3b8 !important;
      opacity: 1;
    }

    /* Ensure country field placeholders are grey */
    #car-details-origin::placeholder,
    #car-details-destination::placeholder,
    #desktop-origin::placeholder,
    #desktop-destination::placeholder {
      color: #94a3b8 !important;
      opacity: 1;
    }

    /* Ensure driver license field placeholders are grey */
    #car-details-driver-age::placeholder,
    #car-details-driver-name::placeholder,
    #car-details-license-number::placeholder,
    #car-details-license-country::placeholder,
    #desktop-driver-age::placeholder,
    #desktop-driver-name::placeholder,
    #desktop-license-number::placeholder,
    #desktop-license-country::placeholder {
      color: #94a3b8 !important;
      opacity: 1;
    }

    /* Ensure country field placeholders are grey */
    #car-details-origin::placeholder,
    #car-details-destination::placeholder,
    #desktop-origin::placeholder,
    #desktop-destination::placeholder {
      color: #94a3b8 !important;
      opacity: 1;
    }
    
    .desktop-car-details-form-input:focus {
      outline: none;
      border-color: #000000;
      box-shadow: none;
      background-color: #ffffff;
    }
    
    .desktop-car-details-price-breakdown {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: 1rem 0;
      border-top: 1px solid #e2e8f0;
      border-bottom: 1px solid #e2e8f0;
      margin-bottom: 1rem;
    }
    
    .desktop-car-details-price-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #1e293b;
      font-size: 1rem;
      font-weight: 500;
    }
    
    .desktop-car-details-price-row span:last-child {
      font-size: 1.5rem;
      font-weight: 900;
      color: #0f172a;
    }
    
    .desktop-car-details-book-btn {
      width: auto;
      min-width: 280px;
      max-width: 400px;
      height: 3.5rem;
      background-color: #48831f;
      color: white;
      border: none;
      border-radius: 0.625rem;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 4px 6px -1px rgba(72, 131, 31, 0.3), 0 2px 4px -1px rgba(72, 131, 31, 0.2);
      letter-spacing: 0.02em;
      margin-top: 0.5rem;
      padding: 0 2rem;
      align-self: center;
    }
    
    .desktop-car-details-book-btn:hover {
      background-color: #3a6c19;
      box-shadow: 0 6px 12px -1px rgba(72, 131, 31, 0.4), 0 4px 6px -1px rgba(72, 131, 31, 0.3);
      transform: translateY(-1px);
    }
    
    .desktop-car-details-book-btn:active {
      transform: translateY(0);
      box-shadow: 0 2px 4px -1px rgba(72, 131, 31, 0.3), 0 1px 2px -1px rgba(72, 131, 31, 0.2);
    }
    
    .desktop-car-details-provider {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1.25rem;
      border-radius: 0.625rem;
      background-color: #f8fafc;
      margin-top: 1.5rem;
      border: 1px solid #e2e8f0;
    }
    
    .desktop-car-details-provider-logo {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .desktop-car-details-provider-info p:first-child {
      font-size: 0.875rem;
      color: #64748b;
      margin: 0;
    }
    
    .desktop-car-details-provider-info p:last-child {
      font-weight: 700;
      color: #1e293b;
      margin: 0;
    }
    
    .desktop-car-details-reviews {
      margin-top: 3rem;
      max-width: 100%;
    }
    
    .desktop-car-details-reviews h3 {
      font-size: 1.5rem;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 2rem;
    }
    
    .desktop-car-details-reviews-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 3rem;
      padding: 1.5rem;
      background-color: white;
      border: 1px solid #e2e8f0;
      border-radius: 0.75rem;
      margin-bottom: 1.5rem;
    }
    
    .desktop-car-details-reviews-rating {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    }
    
    .desktop-car-details-reviews-rating-value {
      font-size: 3rem;
      font-weight: 900;
      color: #0f172a;
      letter-spacing: -0.033em;
    }
    
    .desktop-car-details-reviews-stars {
      display: flex;
      gap: 0.125rem;
    }
    
    .desktop-car-details-reviews-stars .star {
      color: #FFA500;
      font-size: 1.25rem;
    }
    
    .desktop-car-details-reviews-count {
      font-size: 1rem;
      color: #64748b;
    }
    
    .desktop-car-details-reviews-breakdown {
      display: grid;
      grid-template-columns: 20px 1fr 40px;
      align-items: center;
      gap: 0.75rem;
      min-width: 240px;
      max-width: 400px;
      flex: 1;
    }
    
    .desktop-car-details-reviews-breakdown-star {
      font-size: 0.875rem;
      font-weight: 500;
      color: #475569;
    }
    
    .desktop-car-details-reviews-bar {
      height: 0.5rem;
      background-color: #e2e8f0;
      border-radius: 9999px;
      overflow: hidden;
    }
    
    .desktop-car-details-reviews-bar-fill {
      height: 100%;
      background-color: #FFA500;
      border-radius: 9999px;
    }
    
    .desktop-car-details-reviews-count-text {
      font-size: 0.875rem;
      color: #64748b;
      text-align: right;
    }
    
    .desktop-car-details-reviews-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      max-width: 100%;
    }
    
    .desktop-car-details-review-card {
      background-color: white;
      border: 1px solid #e2e8f0;
      border-radius: 0.75rem;
      padding: 1.5rem;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    }
    
    .desktop-car-details-review-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 1rem;
    }
    
    .desktop-car-details-reviewer {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    
    .desktop-car-details-reviewer-avatar {
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .desktop-car-details-reviewer-name {
      font-weight: 700;
      color: #1e293b;
      margin: 0;
    }
    
    .desktop-car-details-reviewer-location {
      font-size: 0.875rem;
      color: #64748b;
      margin: 0;
    }
    
    .desktop-car-details-review-stars {
      display: flex;
      gap: 0.125rem;
    }
    
    .desktop-car-details-review-stars .star {
      color: #FFA500;
      font-size: 1.125rem;
    }
    
    .desktop-car-details-review-text {
      color: #475569;
      margin-bottom: 0.5rem;
      line-height: 1.6;
    }
    
    .desktop-car-details-review-date {
      font-size: 0.875rem;
      color: #64748b;
      margin: 0;
    }
    
    .car-details-container {
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100vh;
      width: 100%;
      overflow: hidden;
    }
    
    .car-details-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: var(--white);
      padding: 1rem;
      padding-bottom: 0.5rem;
      position: sticky;
      top: 0;
      z-index: 3010;
      flex-shrink: 0;
    }
    
    .car-details-header-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-light-primary);
    }
    
    .car-details-header-btn:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
    
    .car-details-header-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    
    .car-details-header-title {
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.015em;
      margin: 0;
      color: var(--text-light-primary);
    }
    
    .car-details-header-price {
      font-size: 0.875rem;
      font-weight: 600;
      line-height: 1.2;
      margin: 0.25rem 0 0 0;
      color: var(--text-light-primary);
      opacity: 0.8;
    }
    
    .car-details-main {
      flex: 1;
      overflow-y: auto;
      overflow-x: visible; /* FIXED: Changed from hidden to visible - hidden was blocking iframe touch events */
      -webkit-overflow-scrolling: touch;
      position: relative;
    }

    /* ===== Pesapal Payment Iframe Styles ===== */
    /* Based on working implementation from special-trips.ejs */

    /* Payment Iframe Base Styles (Desktop/Tablet only - mobile uses inline styles) */
    .payment-iframe-container,
    #carRentalPaymentIframeContainerDesktop {
      width: 100%;
      margin-top: 1rem;
      padding: 0;
      position: relative;
      box-sizing: border-box;
      overflow: visible;
    }

    .pesapal-payment-frame,
    #carRentalPesapalFrameDesktop {
      width: 100%;
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      display: block;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      overflow: visible;
    }

    /* Desktop/Tablet: Allow scrolling for all fields to be accessible */
    @media (min-width: 768px) {
      #carRentalPesapalFrameDesktop {
        min-height: 600px;
        height: auto;
        overflow: auto;
      }

      #carRentalPaymentIframeContainerDesktop {
        overflow: visible;
      }
    }

    /* Payment section wrapper in modal */
    .car-rental-payment-section,
    #carRentalPaymentSectionMobile,
    #carRentalPaymentSectionDesktop {
      width: 100%;
      padding: 1rem;
      overflow: visible !important;
      position: relative;
    }

    .car-rental-payment-section h3 {
      font-size: 1.125rem;
      font-weight: 600;
      color: #1e293b;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    /* Mobile Payment Overlay - NO CSS RULES (backup uses only inline styles) */
    /* The overlay is position: fixed with inline styles, so no CSS needed */
    @media (max-width: 767px) {
      /* Remove any CSS that might interfere with the overlay */
      /* Backup uses only inline styles - no CSS overrides needed */
    }

    /* Desktop: Allow iframe to grow with content - all fields accessible */
    @media (min-width: 768px) and (max-width: 1279px) {
      #carRentalPaymentIframeContainerDesktop {
        height: auto;
        min-height: 600px;
        max-height: none;
      }

      #carRentalPesapalFrameDesktop {
        height: auto;
        min-height: 600px;
        overflow: auto;
      }
    }

    @media (min-width: 1280px) {
      #carRentalPaymentIframeContainerDesktop {
        height: auto;
        min-height: 600px;
        max-height: none;
      }

      #carRentalPesapalFrameDesktop {
        height: auto;
        min-height: 600px;
        overflow: auto;
      }
    }
    /* ===== End Pesapal Payment Iframe Styles ===== */

    .car-details-carousel-container {
      padding: 1rem;
      padding-top: 1rem;
      position: relative;
      margin-top: 4.5rem;
      width: 100%;
    }
    
    .car-details-carousel {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      border-radius: 1rem;
      -webkit-overflow-scrolling: touch;
    }
    
    .car-details-carousel::-webkit-scrollbar {
      display: none;
    }
    
    .car-details-carousel {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    
    .car-details-carousel-slide {
      flex-shrink: 0;
      width: 100%;
      scroll-snap-align: center;
    }
    
    .car-details-carousel-image {
      background-size: cover;
      background-position: center;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
      border-radius: 1rem;
      min-height: 16rem;
    }
    
    .car-details-carousel-indicators {
      position: absolute;
      bottom: 1rem;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
    }
    
    .car-details-indicator {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background-color: var(--white);
      opacity: 0.5;
      transition: opacity 0.2s;
    }
    
    .car-details-indicator.active {
      opacity: 1;
    }
    
    .car-details-thumbnail-container {
      display: flex;
      overflow-x: auto;
      gap: 0.75rem;
      padding: 1rem;
      padding-top: 0;
      padding-bottom: 0.5rem;
      -webkit-overflow-scrolling: touch;
    }
    
    .car-details-thumbnail-container::-webkit-scrollbar {
      display: none;
    }
    
    .car-details-thumbnail-container {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    
    .car-details-thumbnail {
      flex-shrink: 0;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
    }
    
    .car-details-thumbnail-image {
      width: 5rem;
      height: 5rem;
      border-radius: 1rem;
      object-fit: cover;
      border: 2px solid transparent;
      transition: border-color 0.2s;
    }
    
    .car-details-thumbnail-image.active {
      border-color: var(--primary-color);
    }
    
    .car-details-info {
      padding: 1rem;
    }
    
    .car-details-title {
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.01em;
      padding-top: 0.5rem;
      color: var(--text-light-primary);
    }
    
    .car-details-rating-container {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding-top: 0.5rem;
    }
    
    .car-details-rating-stars {
      color: #FFA500;
      font-size: 1.25rem;
    }
    
    .car-details-rating-text {
      font-size: 0.875rem;
      font-weight: 700;
      line-height: normal;
      color: var(--text-light-primary);
    }
    
    .car-details-rating-count {
      font-size: 0.875rem;
      line-height: normal;
      color: var(--text-light-secondary);
    }
    
    .car-details-specs-section {
      padding: 1rem;
      padding-top: 1.5rem;
    }
    
    .car-details-section-title {
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.015em;
      padding-bottom: 0.75rem;
      color: var(--text-light-primary);
    }
    
    .car-details-specs-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem;
    }
    
    .car-details-spec-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0.5rem 0.25rem;
      background-color: var(--white);
      border-radius: 0.75rem;
      border: 1px solid var(--border-light);
      min-width: 0;
    }
    
    .car-details-spec-icon {
      color: #48831f;
      font-size: 1.25rem;
      margin-bottom: 0.25rem;
    }
    
    .car-details-spec-text {
      font-size: 0.625rem;
      font-weight: 600;
      margin-top: 0.25rem;
      color: var(--text-light-primary);
      text-align: center;
      line-height: 1.2;
      word-wrap: break-word;
    }
    
    .car-details-features-section {
      padding: 1rem;
      padding-top: 1.5rem;
    }
    
    .car-details-features-list {
      margin-top: 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    
    .car-details-feature-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    
    .car-details-feature-icon {
      color: var(--primary-color);
      font-size: 1.25rem;
    }
    
    .car-details-feature-text {
      color: #000000;
      font-size: 0.875rem;
    }
    
    .car-details-company-section {
      padding: 1rem;
      padding-top: 1.5rem;
    }
    
    .car-details-company-card {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1rem;
      background-color: var(--white);
      border-radius: 1rem;
      border: 1px solid var(--border-light);
    }
    
    .car-details-company-logo {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .car-details-company-name {
      font-weight: 700;
      color: var(--text-light-primary);
    }
    
    .car-details-company-description {
      font-size: 0.875rem;
      color: var(--text-light-secondary);
      margin-top: 0.25rem;
    }
    
    .car-details-reviews-section {
      padding: 1rem;
      padding-top: 1.5rem;
      padding-bottom: 1rem;
    }
    
    .car-details-reviews-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 0.75rem;
    }
    
    .car-details-see-all-link {
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--primary-color);
      text-decoration: none;
    }
    
    .car-details-reviews-list {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    
    .car-details-review-card {
      padding: 1rem;
      background-color: var(--white);
      border-radius: 1rem;
      border: 1px solid var(--border-light);
    }
    
    .car-details-review-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .car-details-reviewer-info {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    
    .car-details-reviewer-avatar {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .car-details-reviewer-name {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text-light-primary);
    }
    
    .car-details-review-stars {
      display: flex;
      color: #FFA500;
      font-size: 1rem;
    }
    
    .car-details-review-date {
      font-size: 0.75rem;
      color: var(--text-light-secondary);
    }
    
    .car-details-review-text {
      font-size: 0.875rem;
      color: var(--text-light-secondary);
      margin-top: 0.75rem;
    }
    
    .car-details-contact-section {
      padding: 1rem;
      padding-top: 1.5rem;
      padding-bottom: 7rem;
    }

    .car-details-contact-form {
      margin-top: 1rem;
    }
    
    .car-details-form-row {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
    
    .car-details-form-row .car-details-form-group {
      flex: 1;
      margin-bottom: 0;
    }
    
    /* Tablet only: Display First Name and Last Name 2 per row in mobile modal */
    @media (min-width: 768px) and (max-width: 1279px) {
      .car-details-modal-overlay .car-details-form-row {
        flex-direction: row !important;
      }
      
      .car-details-modal-overlay .car-details-form-row .car-details-form-group {
        flex: 1;
        min-width: 0;
      }
    }
    
    .car-details-form-group {
      margin-bottom: 1rem;
    }
    
    .car-details-form-label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      margin-bottom: 0.25rem;
      color: var(--text-light-secondary);
    }
    
    .car-details-form-input {
      display: block;
      width: 100%;
      padding: 0.625rem 0.75rem;
      border-radius: 0.75rem;
      border: 1px solid #000000;
      background-color: var(--white);
      color: var(--text-light-primary);
      font-family: 'Poppins', sans-serif;
      font-size: 0.875rem;
      transition: border-color 0.2s, box-shadow 0.2s;
      box-shadow: none;
      min-height: 2.5rem;
    }
    
    .car-details-form-input::placeholder {
      color: #94a3b8 !important;
      opacity: 1;
    }
    
    .car-details-form-input:focus {
      outline: none;
      border-color: #000000;
      box-shadow: none;
    }
    
    .car-details-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10;
      background-color: var(--white);
      padding: 1rem;
      border-top: 1px solid var(--border-light);
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
      flex-shrink: 0;
    }
    
    .car-details-footer-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 100%;
      margin: 0 auto;
    }
    
    .car-details-price-info {
      display: flex;
      flex-direction: column;
    }
    
    .car-details-price-label {
      font-size: 0.875rem;
      color: var(--text-light-secondary);
    }
    
    .car-details-price-amount {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--text-light-primary);
    }
    
    .car-details-book-btn {
      background-color: var(--primary-color);
      color: var(--white);
      font-weight: 700;
      padding: 0.75rem 2rem;
      border-radius: 1rem;
      border: none;
      font-size: 1rem;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    
    .car-details-book-btn:hover {
      opacity: 0.9;
    }
    
    @media (max-width: 400px) {
      .car-details-title {
        font-size: 1.5rem;
      }
      
      .car-details-carousel-image {
        min-height: 14rem;
      }
      
      .car-details-thumbnail-image {
        width: 4rem;
        height: 4rem;
      }
      
      .car-details-book-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
      }
    }
    
    /* Hire Type Modal */
    .hire-type-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3000;
      display: none;
      flex-direction: column;
      background-color: var(--white);
    }
    
    .hire-type-modal-overlay.active {
      display: flex;
    }
    
    .hire-type-header {
      display: flex;
      height: 4rem;
      width: 100%;
      flex-shrink: 0;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border-light);
      padding: 0 1rem;
      position: sticky;
      top: 0;
      z-index: 3010;
      background-color: var(--white);
    }
    
    .hire-type-header h1 {
      text-align: center;
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--text-light-primary);
      flex: 1;
    }
    
    .hire-type-header-spacer {
      width: 2rem;
    }
    
    .hire-type-close-button {
      display: flex;
      height: 2rem;
      width: 2rem;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: var(--background-light);
      border: none;
      cursor: pointer;
    }
    
    .hire-type-close-button span {
      font-size: 1.25rem;
      color: var(--text-light-secondary);
    }
    
    .hire-type-selection-container {
      border-bottom: 1px solid var(--border-light);
      background-color: var(--background-light);
      padding: 1rem;
    }
    
    .hire-type-selection-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 0.75rem;
      background-color: var(--white);
      padding: 0.75rem 1rem;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    
    .hire-type-selection-card span:first-child {
      font-size: 0.875rem;
      color: var(--text-light-secondary);
    }
    
    .hire-type-selection-card span:last-child {
      font-weight: 600;
      color: var(--primary-color);
    }
    
    .hire-type-main {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1rem;
      padding: 1rem;
      overflow: hidden;
      min-height: 0;
    }
    
    .hire-type-option-card {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      border-radius: 0.75rem;
      padding: 1rem;
      cursor: pointer;
      transition: all 0.2s;
      flex-shrink: 0;
    }
    
    .hire-type-option-card.selected {
      border: 2px solid var(--primary-color);
      background-color: rgba(72, 131, 31, 0.1);
    }
    
    .hire-type-option-card:not(.selected) {
      border: 1px solid var(--border-light);
      background-color: var(--white);
    }
    
    .hire-type-option-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    
    .hire-type-icon-container {
      display: flex;
      height: 2.5rem;
      width: 2.5rem;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      flex-shrink: 0;
    }
    
    .hire-type-icon-container span {
      font-size: 1.5rem;
    }
    
    .hire-type-option-card.selected .hire-type-icon-container {
      background-color: var(--primary-color);
      color: white;
    }
    
    .hire-type-option-card:not(.selected) .hire-type-icon-container {
      background-color: var(--background-light);
      color: var(--text-light-primary);
    }
    
    .hire-type-option-title {
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.2;
    }
    
    .hire-type-option-card.selected .hire-type-option-title {
      color: var(--primary-color);
    }
    
    .hire-type-option-card:not(.selected) .hire-type-option-title {
      color: var(--text-light-primary);
    }
    
    .hire-type-option-description {
      color: var(--text-light-primary);
      font-size: 0.875rem;
      line-height: 1.4;
    }
    
    .hire-type-option-card:not(.selected) .hire-type-option-description {
      color: var(--text-light-secondary);
    }
    
    @media (max-width: 400px) {
      .hire-type-header {
        height: 3.5rem;
        padding: 0 0.75rem;
      }
      
      .hire-type-header h1 {
        font-size: 1rem;
      }
      
      .hire-type-selection-container {
        padding: 0.75rem;
      }
      
      .hire-type-selection-card {
        padding: 0.625rem 0.875rem;
      }
      
      .hire-type-selection-card span:first-child {
        font-size: 0.8125rem;
      }
      
      .hire-type-selection-card span:last-child {
        font-size: 0.875rem;
      }
      
      .hire-type-main {
        gap: 0.75rem;
        padding: 0.75rem;
      }
      
      .hire-type-option-card {
        gap: 0.625rem;
        padding: 0.875rem;
      }
      
      .hire-type-option-header {
        gap: 0.625rem;
      }
      
      .hire-type-icon-container {
        height: 2.25rem;
        width: 2.25rem;
      }
      
      .hire-type-icon-container span {
        font-size: 1.25rem;
      }
      
      .hire-type-option-title {
        font-size: 1rem;
      }
      
      .hire-type-option-description {
        font-size: 0.8125rem;
      }
      
      .hire-type-footer {
        padding: 0.75rem;
      }
      
      .hire-type-confirm-button {
        padding: 0.75rem;
        font-size: 0.9375rem;
      }
    }
    
    @media (max-height: 600px) {
      .hire-type-main {
        gap: 0.75rem;
        padding: 0.75rem;
      }
      
      .hire-type-option-card {
        gap: 0.5rem;
        padding: 0.875rem;
      }
      
      .hire-type-option-title {
        font-size: 1rem;
      }
      
      .hire-type-option-description {
        font-size: 0.8125rem;
      }
    }
    
    .hire-type-footer {
      margin-top: auto;
      width: 100%;
      flex-shrink: 0;
      border-top: 1px solid var(--border-light);
      background-color: var(--white);
      padding: 1rem;
    }
    
    .hire-type-confirm-button {
      width: 100%;
      border: none;
      border-radius: 0.75rem;
      background-color: var(--primary-color);
      padding: 0.875rem;
      color: white;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    
    .hire-type-confirm-button:hover {
      opacity: 0.9;
    }
    
    /* Filters Modal - Mobile Only */
    .filters-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3000;
      display: none;
      flex-direction: column;
      background-color: var(--white);
    }
    
    .filters-modal-overlay.active {
      display: flex;
    }
    
    @media (min-width: 768px) {
      .filters-modal-overlay {
        display: none !important;
      }
    }
    
    .filters-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 4rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border-light);
      background-color: var(--white);
      padding: 0 1rem;
      z-index: 3010;
      flex-shrink: 0;
    }
    
    .filters-header h1 {
      text-align: center;
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--text-light-primary);
      flex: 1;
    }
    
    .filters-header-spacer {
      width: 2rem;
    }
    
    .filters-close-btn {
      display: flex;
      height: 2rem;
      width: 2rem;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: var(--background-light);
      border: none;
      cursor: pointer;
    }
    
    .filters-close-btn span {
      font-size: 1.25rem;
      color: var(--text-light-secondary);
    }
    
    .filters-modal-content {
      position: fixed;
      top: 4rem;
      bottom: 5rem;
      left: 0;
      right: 0;
      overflow-y: auto;
      padding: 1.5rem;
      padding-bottom: 6rem;
    }
    
    .filters-section {
      margin-bottom: 1.5rem;
    }
    
    .filters-title {
      margin-bottom: 1rem;
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-light-primary);
    }
    
    .filters-card {
      border-radius: 0.75rem;
      background-color: var(--white);
      padding: 1rem;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    
    /* Mobile Price Slider - Desktop Style */
    .price-display-mobile {
      text-align: center;
      margin-bottom: 0.75rem;
    }

    .price-current-mobile {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--primary-color);
    }

    .price-slider-mobile {
      width: 100%;
      height: 6px;
      border-radius: 9999px;
      background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) var(--slider-value, 50%), #e5e7eb var(--slider-value, 50%), #e5e7eb 100%);
      appearance: none;
      -webkit-appearance: none;
      outline: none;
      cursor: pointer;
      margin: 0.5rem 0;
    }

    .price-slider-mobile::-webkit-slider-runnable-track {
      height: 6px;
      border-radius: 9999px;
    }

    .price-slider-mobile::-webkit-slider-thumb {
      appearance: none;
      -webkit-appearance: none;
      height: 1.5rem;
      width: 1.5rem;
      border-radius: 50%;
      background-color: #fff;
      border: 3px solid var(--primary-color);
      cursor: pointer;
      margin-top: -9px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .price-slider-mobile::-webkit-slider-thumb:hover {
      transform: scale(1.1);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }

    .price-slider-mobile::-moz-range-thumb {
      height: 1.5rem;
      width: 1.5rem;
      border-radius: 50%;
      background-color: #fff;
      border: 3px solid var(--primary-color);
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .price-slider-mobile::-moz-range-track {
      height: 6px;
      border-radius: 9999px;
      background-color: #e5e7eb;
    }

    .price-range-labels-mobile {
      display: flex;
      justify-content: space-between;
      margin-top: 0.5rem;
      font-size: 0.875rem;
      color: #6b7280;
      font-weight: 500;
    }

    .range-input::-moz-range-thumb {
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 50%;
      background: var(--primary-color);
      cursor: pointer;
      border: 2px solid white;
      box-shadow: 0 0 2px rgba(0,0,0,0.2);
      pointer-events: auto;
    }
    
    .range-summary {
      margin-top: 1rem;
      text-align: center;
      font-size: 0.875rem;
      color: var(--text-light-primary);
    }
    
    .range-summary span {
      font-weight: 600;
      color: var(--primary-color);
    }
    
    .filters-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    
    .filters-btn-group {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    
    .filters-btn {
      flex: 1;
      border-radius: 9999px;
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
      font-weight: 500;
      border: 1px solid var(--border-light);
      background-color: var(--white);
      color: var(--text-light-primary);
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .filters-btn.active {
      background-color: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
    }
    
    .filters-grid-btn-group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
    }
    
    .filters-grid-btn-group .filters-btn {
      flex: none;
    }
    
    .filters-counter {
      display: flex;
      height: 3rem;
      align-items: center;
      justify-content: space-between;
      border-radius: 9999px;
      background-color: var(--white);
      padding: 0.25rem;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    
    .filters-counter-btn {
      display: flex;
      height: 2.5rem;
      width: 2.5rem;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: var(--background-light);
      cursor: pointer;
      border: none;
    }
    
    .filters-counter-btn span {
      font-size: 1.125rem;
      color: var(--text-light-secondary);
    }
    
    .filters-counter-value {
      font-weight: 500;
      color: var(--text-light-primary);
    }
    
    .filters-specs-group {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }
    
    .filters-specs-group .filters-btn {
      flex: none;
    }
    
    .filters-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      border-top: 1px solid var(--border-light);
      background-color: var(--white);
      padding: 1rem;
      flex-shrink: 0;
      z-index: 50;
    }
    
    .filters-footer-buttons {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    
    .filters-reset-btn {
      width: 33.333%;
      border-radius: 0.75rem;
      border: 1px solid var(--primary-color);
      background-color: transparent;
      padding: 0.875rem;
      font-size: 1rem;
      font-weight: 600;
      color: var(--primary-color);
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .filters-reset-btn:hover {
      background-color: rgba(72, 131, 31, 0.1);
    }
    
    .filters-apply-btn {
      width: 66.667%;
      border-radius: 0.75rem;
      border: none;
      background-color: var(--primary-color);
      padding: 0.875rem;
      font-size: 1rem;
      font-weight: 600;
      color: white;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    
    .filters-apply-btn:hover {
      opacity: 0.9;
    }
    
    @media (max-width: 400px) {
      .filters-modal-content {
        padding: 1rem;
        padding-bottom: 5rem;
      }
      
      .filters-section {
        margin-bottom: 1.25rem;
      }
      
      .filters-title {
        font-size: 0.9375rem;
        margin-bottom: 0.75rem;
      }
      
      .filters-card {
        padding: 0.875rem;
      }
      
      .filters-grid {
        gap: 0.75rem;
      }
      
      .filters-btn {
        font-size: 0.8125rem;
        padding: 0.4375rem 0.625rem;
      }
    }
    
    /* Vehicle Type Modal - Mobile Only */
    .vehicle-type-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3000;
      display: none;
      flex-direction: column;
      background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    }

    .vehicle-type-modal-overlay.active {
      display: flex;
    }
    
    @media (min-width: 768px) and (max-width: 1279px) {
      .vehicle-type-modal-overlay {
        display: none !important;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 2rem;
        align-items: center;
        justify-content: center;
      }
      
      .vehicle-type-modal-overlay.active {
        display: flex !important;
        flex-direction: column;
        align-items: center !important;
        justify-content: center !important;
      }
      
      .vehicle-type-modal-overlay.active .vehicle-type-header {
        position: relative !important;
        width: 75% !important;
        max-width: 400px !important;
        min-width: 300px !important;
        margin: 0 auto !important;
        border-radius: 1rem 1rem 0 0 !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        height: auto !important;
      }
      
      .vehicle-type-modal-overlay.active .vehicle-type-content {
        position: relative !important;
        width: 75% !important;
        max-width: 400px !important;
        min-width: 300px !important;
        margin: 0 auto !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        flex: 1;
        overflow-y: auto;
        padding-bottom: 1rem !important;
        max-height: 60vh;
      }
      
      .vehicle-type-modal-overlay.active .vehicle-type-footer {
        position: relative !important;
        width: 75% !important;
        max-width: 400px !important;
        min-width: 300px !important;
        margin: 0 auto !important;
        border-radius: 0 0 1rem 1rem !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
      }
    }
    
    @media (min-width: 1280px) {
      .vehicle-type-modal-overlay {
        display: none !important;
      }
    }
    
    .vehicle-type-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 4rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(135deg, var(--primary-color) 0%, #3d6f1a 100%);
      padding: 0 1rem;
      z-index: 3010;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .vehicle-type-header h1 {
      text-align: center;
      font-size: 1.125rem;
      font-weight: 700;
      color: #ffffff;
      flex: 1;
      letter-spacing: 0.02em;
    }

    .vehicle-type-header-spacer {
      width: 2.5rem;
    }

    .vehicle-type-close-btn {
      display: flex;
      height: 2.5rem;
      width: 2.5rem;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.2);
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .vehicle-type-close-btn:active {
      transform: scale(0.95);
      background-color: rgba(255, 255, 255, 0.3);
    }

    .vehicle-type-close-btn span {
      font-size: 1.25rem;
      color: #ffffff;
    }
    
    .vehicle-type-content {
      position: fixed;
      top: 4rem;
      bottom: 5.5rem;
      left: 0;
      right: 0;
      overflow-y: auto;
      padding: 1.25rem;
      padding-bottom: 2rem;
      background: transparent;
    }

    .vehicle-type-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.875rem;
    }

    .vehicle-type-card {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      border-radius: 1rem;
      border: 2px solid #e5e7eb;
      background-color: #ffffff;
      padding: 1rem 0.5rem;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
      min-height: 90px;
    }

    .vehicle-type-card:active {
      transform: scale(0.97);
    }

    .vehicle-type-card.selected {
      border: 2px solid var(--primary-color);
      background: linear-gradient(135deg, rgba(72, 131, 31, 0.08) 0%, rgba(72, 131, 31, 0.15) 100%);
      box-shadow: 0 4px 12px rgba(72, 131, 31, 0.2);
    }

    .vehicle-type-card .icon {
      color: #6b7280;
      font-size: 1.75rem;
      transition: color 0.2s ease;
    }

    .vehicle-type-card.selected .icon {
      color: var(--primary-color);
    }

    .vehicle-type-card .label {
      font-size: 0.75rem;
      font-weight: 600;
      color: #374151;
      line-height: 1.2;
    }

    .vehicle-type-card.selected .label {
      color: var(--primary-color);
    }

    .vehicle-type-checkmark {
      position: absolute;
      top: -0.375rem;
      right: -0.375rem;
      display: none;
      height: 1.375rem;
      width: 1.375rem;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary-color) 0%, #3d6f1a 100%);
      box-shadow: 0 2px 6px rgba(72, 131, 31, 0.4);
    }

    .vehicle-type-card.selected .vehicle-type-checkmark {
      display: flex;
    }

    .vehicle-type-checkmark span {
      font-size: 0.875rem;
      color: white;
    }

    .vehicle-type-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #ffffff;
      padding: 1rem 1.25rem;
      padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
      flex-shrink: 0;
      z-index: 50;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    }

    .vehicle-type-done-btn {
      width: 100%;
      border-radius: 0.875rem;
      border: none;
      background: linear-gradient(135deg, var(--primary-color) 0%, #3d6f1a 100%);
      padding: 1rem;
      font-size: 1rem;
      font-weight: 700;
      color: white;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 4px 12px rgba(72, 131, 31, 0.3);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .vehicle-type-done-btn:active {
      transform: scale(0.98);
      box-shadow: 0 2px 8px rgba(72, 131, 31, 0.3);
    }
    
    /* Tablet-specific modal width reduction - Must come after base styles */
    @media (min-width: 768px) and (max-width: 1279px) {
      .vehicle-type-modal-overlay.active .vehicle-type-header {
        position: relative !important;
        width: 75% !important;
        max-width: 400px !important;
        min-width: 300px !important;
        left: auto !important;
        right: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        top: auto !important;
        height: auto !important;
        border-radius: 1rem 1rem 0 0 !important;
      }
      
      .vehicle-type-modal-overlay.active .vehicle-type-content {
        position: relative !important;
        width: 75% !important;
        max-width: 400px !important;
        min-width: 300px !important;
        left: auto !important;
        right: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        top: auto !important;
        bottom: auto !important;
        padding-bottom: 1rem !important;
        max-height: 60vh;
      }
      
      .vehicle-type-modal-overlay.active .vehicle-type-footer {
        position: relative !important;
        width: 75% !important;
        max-width: 400px !important;
        min-width: 300px !important;
        left: auto !important;
        right: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        bottom: auto !important;
        border-radius: 0 0 1rem 1rem !important;
      }
    }
    
    @media (max-width: 400px) {
      .vehicle-type-content {
        padding: 0.75rem;
        padding-bottom: 5rem;
      }
      
      .vehicle-type-grid {
        gap: 0.75rem;
      }
      
      .vehicle-type-card {
        padding: 0.875rem;
        gap: 0.375rem;
      }
      
      .vehicle-type-card .icon {
        font-size: 1.75rem;
      }
      
      .vehicle-type-card .label {
        font-size: 0.8125rem;
      }
    }
    
    /* Sort By Modal - Mobile Only */
    .sort-by-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3000;
      display: none;
      flex-direction: column;
      background-color: var(--white);
    }
    
    .sort-by-modal-overlay.active {
      display: flex;
    }
    
    @media (min-width: 768px) {
      .sort-by-modal-overlay {
        display: none !important;
      }
    }
    
    .sort-by-header {
      position: sticky;
      top: 0;
      z-index: 3010;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border-light);
      background-color: var(--white);
      padding: 1rem;
      padding-bottom: 0.5rem;
      flex-shrink: 0;
    }
    
    .sort-by-header h2 {
      flex: 1;
      text-align: center;
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.015em;
      color: var(--text-light-primary);
    }
    
    .sort-by-header-button {
      display: flex;
      width: 3rem;
      height: 3rem;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
    }
    
    .sort-by-close-btn {
      display: flex;
      height: 2.5rem;
      width: 2.5rem;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: none;
      border: none;
      color: var(--text-light-secondary);
    }
    
    .sort-by-close-btn span {
      font-size: 1.5rem;
    }
    
    .sort-by-content {
      flex-grow: 1;
      padding: 1rem;
      padding-bottom: 10rem;
      overflow-y: auto;
    }
    
    .sort-by-options {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    
    .sort-by-option {
      display: flex;
      cursor: pointer;
      align-items: center;
      justify-content: space-between;
      border-radius: 9999px;
      padding: 1rem;
      transition: background-color 0.2s;
    }
    
    .sort-by-option:hover {
      background-color: var(--background-light);
    }
    
    .sort-by-option.selected {
      background-color: rgba(72, 131, 31, 0.1);
    }
    
    .sort-by-label {
      font-size: 1rem;
      font-weight: 500;
      line-height: normal;
      color: var(--text-light-primary);
    }
    
    .sort-by-option.selected .sort-by-label {
      font-weight: 700;
      color: var(--primary-color);
    }
    
    .sort-by-radio-input {
      height: 1.5rem;
      width: 1.5rem;
      border: 2px solid var(--border-light);
      border-radius: 50%;
      background-color: transparent;
      appearance: none;
      -webkit-appearance: none;
      position: relative;
      cursor: pointer;
    }
    
    .sort-by-radio-input:checked {
      border-color: var(--primary-color);
    }
    
    .sort-by-radio-input:checked::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 0.75rem;
      height: 0.75rem;
      border-radius: 50%;
      background-color: var(--primary-color);
    }
    
    .sort-by-option.selected .sort-by-radio-input {
      border-color: var(--primary-color);
    }
    
    .sort-by-radio-input:focus {
      outline: none;
      box-shadow: 0 0 0 2px rgba(72, 131, 31, 0.3);
    }
    
    .sort-by-footer {
      display: none !important;
    }
    
    .sort-by-footer-content {
      margin: 0 auto;
      max-width: 32rem;
    }
    
    .sort-by-footer-buttons {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    
    .sort-by-footer-btn {
      display: flex;
      height: 3rem;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 9999px;
      padding: 0 1.25rem;
      font-size: 1rem;
      font-weight: 700;
      line-height: normal;
      letter-spacing: 0.015em;
      border: none;
    }
    
    .sort-by-reset-btn {
      min-width: 5.25rem;
      max-width: 30rem;
      background-color: var(--background-light);
      color: var(--text-light-primary);
      transition: background-color 0.2s;
    }
    
    .sort-by-reset-btn:hover {
      background-color: var(--border-light);
    }
    
    .sort-by-apply-btn {
      min-width: 5.25rem;
      max-width: 30rem;
      flex: 1;
      background-color: var(--primary-color);
      color: white;
      transition: opacity 0.2s;
    }
    
    .sort-by-apply-btn:hover {
      opacity: 0.9;
    }
    
    .sort-by-btn-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    @media (max-width: 400px) {
      .sort-by-content {
        padding: 0.75rem;
        padding-bottom: 9rem;
      }
      
      .sort-by-option {
        padding: 0.875rem;
      }
      
      .sort-by-label {
        font-size: 0.9375rem;
      }
    }
    
    /* Desktop and Tablet Styles - Tablets inherit desktop layout */
    @media (min-width: 768px) {
      body {
        font-family: 'Inter', sans-serif;
      }
      
      .container {
        max-width: 1200px;
        padding: 0 1rem;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin-left: auto;
        margin-right: auto;
      }
      
      @media (min-width: 1280px) {
        .container {
          max-width: 100% !important;
          padding: 0 4rem !important;
          overflow-x: visible !important;
          width: 100% !important;
          box-sizing: border-box !important;
        }

        .main {
          overflow-x: visible !important;
          width: 100% !important;
          max-width: 100% !important;
        }

        .results-section {
          width: 100% !important;
          max-width: 100% !important;
        }

        .content-grid {
          width: 100% !important;
          max-width: 100% !important;
        }

        .filters-column {
          width: 100% !important;
          max-width: 100% !important;
          margin-top: 1rem;
        }

        .available-cars-section {
          width: 100vw !important;
          max-width: 100vw !important;
          margin-left: calc(-50vw + 50%) !important;
        }
      }

      @media (min-width: 768px) and (max-width: 1279px) {
        .container {
          max-width: 100% !important;
          padding: 0 1rem !important;
          box-sizing: border-box !important;
          overflow-x: visible !important;
          width: 100% !important;
          margin-left: auto !important;
          margin-right: auto !important;
        }

        .main {
          width: 100% !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
          overflow-x: visible !important;
        }

        .results-section {
          padding-left: 0 !important;
          padding-right: 0 !important;
          overflow-x: hidden !important;
          overflow-y: visible !important;
          width: 100% !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
        }

        .content-grid {
          width: 100% !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
          overflow-x: hidden !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
        }
      }

      @media (min-width: 1280px) {
        .container {
          max-width: 100% !important;
          padding: 0 5rem !important;
        }
      }
      
      /* Hide mobile-specific elements on desktop only */
      @media (min-width: 1280px) {
        .mobile-menu-button,
        .sidebar,
        .sidebar-overlay,
        .category-filters,
        .link-buttons {
          display: none !important;
        }
        
        .logo-text {
          font-size: 1.75rem !important;
        }
      }
      
      /* Tablet - ensure logo text is correct size */
      @media (min-width: 768px) and (max-width: 1279px) {
        .logo-text {
          font-size: 1.5rem !important;
        }
      }
      
      /* Desktop Header */
      .header {
        height: 4rem;
        padding: 0 1rem;
        justify-content: space-between;
        background-color: rgba(248, 250, 252, 0.8);
        backdrop-filter: blur(4px);
      }
      
      .header-logo {
        display: flex;
        align-items: center;
        gap: 1rem;
      }
      
      .logo-icon:not(img) {
        color: var(--primary-color);
        font-size: 1.5rem;
      }
      
      .logo-icon-wrapper {
        width: 3rem !important;
        height: 3rem !important;
        padding: 0 !important;
        border: 2px solid #48831f !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        position: relative !important;
      }
      
      .logo-icon {
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        transform: scale(1.15) !important;
        border: none !important;
      }
      
      .desktop-nav {
        display: flex !important;
        align-items: center;
        gap: 2rem;
        font-size: 0.875rem;
        font-weight: 500;
      }
      
      .header-actions {
        display: flex !important;
      }
      
      .page-title {
        display: block !important;
      }
      
      .search-form[style*="display: none"] {
        display: flex !important;
      }
      
      .content-grid {
        display: grid !important;
      }
      
      /* Hide mobile elements */
      .section:has(.text-3xl.font-heading),
      .section.search-form,
      .section:has(.results-header) {
        display: none !important;
      }

      /* Show available cars section on all devices */
      .section.available-cars-section,
      .results-section .available-cars-section {
        display: block !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
      }
      
      .nav-link {
        color: var(--text-light-primary);
        text-decoration: none;
        transition: color 0.2s;
      }
      
      .nav-link:hover {
        color: var(--primary-color);
      }
      
      .nav-link-subtle {
        color: var(--text-light-secondary);
        text-decoration: none;
        transition: color 0.2s;
      }
      
      .nav-link-subtle:hover {
        color: var(--primary-color);
      }
      
      .header-actions {
        display: flex;
        align-items: center;
        gap: 1rem;
      }
      
      .btn-desktop {
        display: flex;
        height: 2.5rem;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 0.5rem;
        padding: 0 1rem;
        font-size: 0.875rem;
        font-weight: bold;
        border: none;
        transition: all 0.2s;
      }
      
      .btn-outline {
        background-color: rgba(72, 131, 31, 0.2);
        color: var(--primary-color);
      }
      
      .btn-outline:hover {
        background-color: rgba(72, 131, 31, 0.3);
      }
      
      .btn-primary-desktop {
        background-color: var(--primary-color);
        color: white;
      }
      
      .btn-primary-desktop:hover {
        background-color: rgba(72, 131, 31, 0.9);
      }
      
      .avatar {
        height: 2.5rem;
        width: 2.5rem;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAmQ_1zsTUC7vqK17xoYoNvzxqDlqF3OczUz36R6-OlTOFp5VopvSk9VtwDqQCzxwldXl_oKF2aXBnCmQG8AO4eV6uMtDe1pVgkxdM7C141gw9NvK0H7p-QHdSVsMmzTcro0C68KQMJ2iLV2kG2OSsQ7JXDNJUVhM5eEmlyX_aoue7E300vWa4iVAw5cLOXUle1Qxva46B4A6LqS3pIm80flhLEjGSk11ez1JcLTxmCMlKQKY0Lt0lNKsYGRC3uigcrm9JmgU8uv6o');
      }
      
      /* Main Content */
      .main {
        padding: 1rem 0;
        overflow-x: visible !important;
        overflow-y: visible !important;
      }
      
      .page-title {
        text-align: center;
        margin-bottom: 1.5rem;
        margin-top: 0.25rem;
      }
      
      .page-title h2 {
        font-size: 1.875rem;
        font-weight: bold;
        letter-spacing: -0.025em;
      }
      
      /* Search Form - Desktop Single Row */
      .search-form {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: flex-end;
        width: 100%;
        max-width: 100%;
      }
      
      .form-group {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
      }
      
      .form-group:has(.search-btn) {
        margin-top: 1rem;
      }
      
      .form-group-date {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
      }
      
      .form-group-full {
        flex: 1 1 100%;
      }
      
      .form-input,
      .form-select {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        height: 2.5rem;
        box-shadow: 0 10px 15px -3px rgba(72, 131, 31, 0.3);
      }
      
      .form-label {
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0.25rem;
      }
      
      label[for="destination-desktop"],
      label[for="from-desktop"] {
        white-space: nowrap;
        font-size: 0.75rem;
      }
      
      .travellers-counter {
        height: 2.5rem;
      }
      
      .btn-primary {
        height: 2.5rem;
        padding: 0 1.5rem;
        font-size: 1rem;
        white-space: nowrap;
        box-shadow: 0 10px 15px -3px rgba(72, 131, 31, 0.3);
      }
      
      .search-btn {
        display: flex;
        height: 2.5rem;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: 0.5rem;
        background-color: var(--primary-color);
        padding: 0 1.5rem;
        font-size: 1rem;
        font-weight: bold;
        color: white;
        border: none;
        cursor: pointer;
        box-shadow: 0 10px 15px -3px rgba(72, 131, 31, 0.3);
        transition: all 0.2s;
        white-space: nowrap;
        flex-shrink: 0;
      }
      
      .search-btn:hover {
        background-color: rgba(72, 131, 31, 0.9);
      }
      
      /* Tablet Layout - 3 fields per row */
      @media (min-width: 768px) and (max-width: 1279px) {
        .search-form {
          flex-wrap: wrap;
          justify-content: flex-start;
        }
        
        .form-group {
          flex: 0 0 calc(33.333% - 0.667rem);
          min-width: 0;
        }
        
        .form-group-date {
          flex: 0 0 calc(33.333% - 0.667rem);
          min-width: 0;
        }
        
        /* Hide individual vehicle type and travellers fields on tablets */
        .form-group:has(#vehicle-type-desktop),
        .form-group:has(#travelers-desktop) {
          display: none !important;
        }
        
        /* Show combined field on tablets */
        .form-group-combined {
          display: flex !important;
          flex-direction: column;
          flex: 0 0 calc(33.333% - 0.667rem);
          min-width: 0;
        }
        
        #vehicle-travellers-combined-field {
          cursor: pointer;
          position: relative;
          display: flex;
          align-items: center;
          gap: 0.75rem;
          padding: 0.75rem 1rem;
          height: 2.5rem;
          box-shadow: 0 10px 15px -3px rgba(72, 131, 31, 0.3);
          transition: all 0.2s;
        }
        
        #vehicle-travellers-combined-field:hover {
          border-color: var(--primary-color);
        }
        
        #vehicle-travellers-combined-field.open {
          border-color: var(--primary-color);
          box-shadow: 0 0 0 2px rgba(72, 131, 31, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
        }
        
        .combined-field-display {
          display: flex;
          align-items: center;
          width: 100%;
        }
        
        .combined-icon {
          font-size: 1.25rem;
          color: var(--text-light-secondary);
          flex-shrink: 0;
        }
        
        .combined-vehicle-type {
          flex: 1;
          font-size: 0.875rem;
          font-weight: 500;
          text-align: left;
          color: var(--text-color);
        }
        
        .combined-separator {
          font-size: 0.875rem;
          color: rgba(0, 0, 0, 0.4);
          margin: 0 0.5rem;
          flex-shrink: 0;
        }
        
        .combined-travelers {
          flex: 1;
          font-size: 0.875rem;
          font-weight: 500;
          text-align: right;
          color: var(--text-color);
          min-width: fit-content;
        }
        
        #vehicle-travellers-combined-field .vehicle-travellers-dropdown-icon {
          font-size: 1.25rem;
          color: var(--text-light-secondary);
          flex-shrink: 0;
          transition: transform 0.2s;
        }
        
        #vehicle-travellers-combined-field.open .vehicle-travellers-dropdown-icon {
          transform: rotate(180deg);
        }
        
        .form-group:has(.search-btn) {
          flex: 0 0 100%;
          display: flex;
          justify-content: center;
          margin-top: 1rem;
        }
        
        .search-btn {
          flex: 0 0 auto;
        }
      }
      
      /* Content Grid Layout */
      .content-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: visible !important;
        overflow-y: visible !important;
      }
      
      /* Hide combined field on desktop (1024px+) */
      @media (min-width: 1280px) {
        .form-group-combined {
          display: none !important;
        }
      }
      
      /* Tablet and Desktop Layout - Filters on left, Cards on right */
      @media (min-width: 768px) {
        .content-grid {
          grid-template-columns: 1fr 3fr;
          gap: 2rem;
          width: 100% !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
          overflow-x: visible !important;
          overflow-y: visible !important;
          align-items: start;
        }
      }
      
      /* Desktop - Allow shadows to extend beyond container */
      @media (min-width: 1280px) {
        .content-grid {
          overflow-x: visible !important;
          overflow-y: visible !important;
        }
        
        .content-grid > *:last-child {
          overflow-x: visible !important;
          overflow-y: visible !important;
        }
      }
      
      /* Tablet-specific fixes to prevent content overflow */
      @media (min-width: 768px) and (max-width: 1279px) {
        .content-grid {
          gap: 1rem !important;
          min-width: 0 !important;
          overflow-x: visible !important;
          overflow-y: visible !important;
        }
        
        .content-grid > * {
          min-width: 0 !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
        }
        
        .filters-column {
          min-width: 0 !important;
          max-width: 100% !important;
          overflow-x: visible !important;
          margin-top: 1rem;
        }
        
        .results-section {
          min-width: 0 !important;
          max-width: 100% !important;
          overflow-x: visible !important;
          overflow-y: visible !important;
          padding-top: 1rem !important;
        }

        .car-cards {
          min-width: 0 !important;
          max-width: 100% !important;
          overflow-x: visible !important;
          overflow-y: visible !important;
        }

        .car-card {
          min-width: 0 !important;
          max-width: 100% !important;
        }
      }

      @media (min-width: 1280px) {
        .search-form {
          flex-wrap: nowrap;
          width: 100%;
          max-width: 100%;
        }
        
        .form-group {
          flex: 1;
          min-width: 100px;
        }
        
        .form-group-date {
          flex: 1;
          min-width: 100px;
        }
        
        .search-btn {
          flex: 0 0 auto;
          min-width: 120px;
        }
        
        .form-label {
          font-size: 0.75rem;
          white-space: nowrap;
          font-weight: bold;
          color: #000000;
        }
      }
      
      /* Filters Sidebar - Desktop and Tablet - Expedia/Booking.com Style */
      .filters-sidebar {
        position: sticky;
        top: 1rem;
        align-self: start;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        background-color: #ffffff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      }

      .filters-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #e5e7eb;
        background-color: #f9fafb;
        border-radius: 8px 8px 0 0;
      }

      .filters-sidebar-title {
        font-size: 1rem;
        font-weight: 600;
        color: #1f2937;
        margin: 0;
        padding: 0;
        border: none;
        background: none;
        border-radius: 0;
      }

      .filters-reset-btn-desktop {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 500;
        color: #dc2626;
        background: transparent;
        border: 1px solid #dc2626;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .filters-reset-btn-desktop:hover {
        background: #dc2626;
        color: white;
      }

      .filters-reset-btn-desktop .material-symbols-outlined {
        font-size: 16px;
      }

      .filter-sections {
        padding: 0;
      }
      
      @media (min-width: 768px) and (max-width: 1279px) {
        .filters-sidebar-title {
          padding: 0.875rem 1rem;
          font-size: 0.9375rem;
        }

        .filter-sections {
          padding: 0;
        }

        .filter-section-desktop {
          padding: 0.875rem 1rem;
        }

        .filter-section-desktop h3,
        .filter-section-desktop .form-label {
          font-size: 0.75rem;
          font-weight: 700;
          color: #1f2937;
          margin-bottom: 0.625rem;
          text-transform: uppercase;
          letter-spacing: 0.03em;
        }

        .filter-option-desktop label {
          font-size: 0.8125rem;
        }

        .filter-option-desktop input {
          height: 1rem;
          width: 1rem;
        }
      }
      
      .filters-sidebar-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0;
      }

      .filter-section-desktop {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #e5e7eb;
        margin-bottom: 0;
      }

      .filter-section-desktop:last-child {
        border-bottom: none;
      }

      .filter-section-desktop h3,
      .filter-section-desktop .form-label {
        font-size: 0.875rem;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 0.75rem;
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }

      .filter-options-desktop {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
      }

      .filter-option-desktop {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 0.25rem 0;
      }

      .filter-option-desktop:hover {
        color: var(--primary-color);
      }

      .filter-option-desktop input {
        height: 1.125rem;
        width: 1.125rem;
        border-radius: 0.25rem;
        border: 2px solid #d1d5db;
        accent-color: var(--primary-color);
        cursor: pointer;
        flex-shrink: 0;
      }

      .filter-option-desktop input:checked {
        border-color: var(--primary-color);
      }

      .filter-option-desktop label {
        margin-left: 0.625rem;
        font-size: 0.875rem;
        color: #1f2937;
        cursor: pointer;
        flex: 1;
        font-weight: 500;
      }

      .filter-option-desktop:hover label {
        color: var(--primary-color);
      }

      /* Enhanced Checkbox Styling - Expedia/Booking.com Style */
      .filter-option-desktop input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        height: 1.125rem;
        width: 1.125rem;
        border-radius: 4px;
        border: 2px solid #9ca3af;
        background-color: #fff;
        cursor: pointer;
        transition: all 0.15s ease;
        position: relative;
      }

      .filter-option-desktop input[type="checkbox"]:hover {
        border-color: var(--primary-color);
      }

      .filter-option-desktop input[type="checkbox"]:checked {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
      }

      .filter-option-desktop input[type="checkbox"]:checked::after {
        content: '';
        position: absolute;
        left: 4px;
        top: 1px;
        width: 5px;
        height: 9px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }

      /* Price Range Section Styling */
      .price-display-desktop {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.75rem;
        padding: 0.625rem 1rem;
        background-color: #f9fafb;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
      }

      .price-display-desktop .price-current {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--primary-color);
      }

      .price-slider {
        width: 100%;
        height: 6px;
        border-radius: 9999px;
        background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) var(--slider-value, 50%), #e5e7eb var(--slider-value, 50%), #e5e7eb 100%);
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        cursor: pointer;
        margin: 0.5rem 0;
      }

      .price-slider::-webkit-slider-runnable-track {
        height: 6px;
        border-radius: 9999px;
      }

      .price-slider::-webkit-slider-thumb {
        appearance: none;
        -webkit-appearance: none;
        height: 1.25rem;
        width: 1.25rem;
        border-radius: 50%;
        background-color: #fff;
        border: 3px solid var(--primary-color);
        cursor: pointer;
        margin-top: -7px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
      }

      .price-slider::-webkit-slider-thumb:hover {
        transform: scale(1.1);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
      }

      .price-slider::-moz-range-thumb {
        height: 1.25rem;
        width: 1.25rem;
        border-radius: 50%;
        background-color: #fff;
        border: 3px solid var(--primary-color);
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      }

      .price-slider::-moz-range-track {
        height: 6px;
        border-radius: 9999px;
        background-color: #e5e7eb;
      }

      .price-range-labels {
        display: flex;
        justify-content: space-between;
        margin-top: 0.5rem;
        font-size: 0.8125rem;
        color: #6b7280;
        font-weight: 500;
      }
      
      .apply-filters-btn {
        display: none !important;
      }
      
      /* Filter Buttons for Desktop (for Transmission, Drive Type, Fuel Type) */
      .filter-buttons-desktop {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .filter-button-desktop {
        padding: 0.5rem 1rem;
        border-radius: 6px;
        border: 1px solid #d1d5db;
        background-color: #fff;
        color: #1f2937;
        font-size: 0.8125rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .filter-button-desktop:hover {
        background-color: #f3f4f6;
        border-color: #9ca3af;
      }
      
      /* Filters Column Container */
      .filters-column {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }
      
      /* Brand Filter Section - Desktop (Below Filters Sidebar) */
      .brand-filter-section-desktop {
        border-radius: 0.25rem;
        overflow: hidden;
        background-color: #ffffff !important;
        box-shadow: 
          0 0 0 1px rgba(0, 0, 0, 0.08),
          0 2px 4px -1px rgba(0, 0, 0, 0.12),
          0 4px 8px -2px rgba(0, 0, 0, 0.10),
          0 8px 16px -4px rgba(0, 0, 0, 0.08),
          0 12px 24px -6px rgba(0, 0, 0, 0.06),
          0 16px 32px -8px rgba(0, 0, 0, 0.04),
          0 20px 40px -10px rgba(0, 0, 0, 0.02),
          -2px 0 4px -1px rgba(0, 0, 0, 0.12),
          -4px 0 8px -2px rgba(0, 0, 0, 0.10),
          -8px 0 16px -4px rgba(0, 0, 0, 0.08),
          -12px 0 24px -6px rgba(0, 0, 0, 0.06),
          -16px 0 32px -8px rgba(0, 0, 0, 0.04),
          -20px 0 40px -10px rgba(0, 0, 0, 0.02),
          2px 0 4px -1px rgba(0, 0, 0, 0.12),
          4px 0 8px -2px rgba(0, 0, 0, 0.10),
          8px 0 16px -4px rgba(0, 0, 0, 0.08),
          12px 0 24px -6px rgba(0, 0, 0, 0.06),
          16px 0 32px -8px rgba(0, 0, 0, 0.04),
          20px 0 40px -10px rgba(0, 0, 0, 0.02) !important;
      }
      
      header.brand-filter-title {
        position: static !important;
        background-color: #000000 !important;
        color: #ffffff !important;
        font-size: 1.25rem;
        font-weight: 700;
        padding: 1rem;
        margin: 0;
        letter-spacing: 0.025em;
        height: auto !important;
        width: auto !important;
        max-width: none !important;
        border-bottom: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        display: block !important;
        overflow: visible !important;
      }
      
      .brand-filter-main {
        background-color: var(--white);
      }
      
      .brand-filter-list {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      
      .brand-filter-item {
        padding: 0.75rem;
        border-bottom: 1px solid var(--border-light);
      }
      
      .brand-filter-item:last-child {
        border-bottom: none;
      }
      
      .brand-filter-link {
        display: flex;
        align-items: center;
        gap: 1rem;
        text-decoration: none;
        color: var(--text-light-primary);
        transition: color 0.2s;
      }
      
      .brand-filter-link:hover {
        color: #f59e0b;
      }
      
      .brand-filter-link.active {
        color: #f59e0b;
      }
      
      .brand-logo {
        height: 2rem;
        width: 3rem;
        object-fit: contain;
        flex-shrink: 0;
      }
      
      .brand-name {
        flex-grow: 1;
        font-weight: 600;
        font-size: 0.875rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }
      
      .brand-count {
        color: #6b7280;
        font-size: 0.875rem;
      }
      
      .filter-button-desktop.active {
        background-color: var(--primary-color) !important;
        color: white !important;
        border-color: var(--primary-color) !important;
      }
      
      .filter-button-desktop.active:hover {
        background-color: var(--primary-hover) !important;
        border-color: var(--primary-hover) !important;
      }
      
      /* Filter Counters for Desktop - Expedia/Booking.com Style */
      .filter-counter-desktop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 2.75rem;
        border-radius: 8px;
        background-color: #f9fafb;
        border: 1px solid #e5e7eb;
        padding: 0.25rem 0.5rem;
      }

      .filter-counter-btn-desktop {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 6px;
        background-color: #fff;
        border: 1px solid #d1d5db;
        cursor: pointer;
        transition: all 0.15s ease;
        color: #374151;
      }

      .filter-counter-btn-desktop:hover {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
      }

      .filter-counter-btn-desktop:active {
        transform: scale(0.95);
      }

      .filter-counter-value-desktop {
        font-weight: 600;
        font-size: 0.9375rem;
        min-width: 3.5rem;
        text-align: center;
        color: #1f2937;
      }
      
      /* Results Section */
      .results-section {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 30px;
      }
      
      @media (min-width: 1280px) {
        .results-section {
          padding-left: 20px !important;
          padding-right: 20px !important;
          padding-top: 1rem !important;
          margin-top: 0 !important;
          overflow-x: visible !important;
          overflow-y: visible !important;
          position: relative !important;
        }
        
        .car-cards {
          width: 100% !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
          position: relative !important;
          overflow-x: visible !important;
          overflow-y: visible !important;
        }
        
        .car-card {
          width: 100% !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
        }
      }
      
      .results-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1rem;
        position: relative;
        z-index: 10;
      }

      @media (min-width: 1280px) {
        .results-header {
          margin-top: -3px !important;
        }
      }

      .results-count {
        font-size: 0.875rem;
        color: var(--text-light-secondary);
        text-align: left;
      }

      /* Custom Sort Dropdown - Desktop */
      .sort-dropdown-desktop {
        position: relative;
        display: inline-block;
        z-index: 100;
      }
      
      .sort-btn-desktop {
        display: flex;
        height: 2.5rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        border-radius: 0.5rem;
        border: 1px solid var(--border-light);
        background-color: var(--white);
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        box-shadow: 
          0 0 0 1px rgba(0, 0, 0, 0.08),
          0 2px 4px -1px rgba(0, 0, 0, 0.12),
          0 4px 8px -2px rgba(0, 0, 0, 0.10),
          0 8px 16px -4px rgba(0, 0, 0, 0.08),
          0 12px 24px -6px rgba(0, 0, 0, 0.06),
          0 16px 32px -8px rgba(0, 0, 0, 0.04),
          0 20px 40px -10px rgba(0, 0, 0, 0.02),
          -2px 0 4px -1px rgba(0, 0, 0, 0.12),
          -4px 0 8px -2px rgba(0, 0, 0, 0.10),
          -8px 0 16px -4px rgba(0, 0, 0, 0.08),
          -12px 0 24px -6px rgba(0, 0, 0, 0.06),
          -16px 0 32px -8px rgba(0, 0, 0, 0.04),
          -20px 0 40px -10px rgba(0, 0, 0, 0.02),
          2px 0 4px -1px rgba(0, 0, 0, 0.12),
          4px 0 8px -2px rgba(0, 0, 0, 0.10),
          8px 0 16px -4px rgba(0, 0, 0, 0.08),
          12px 0 24px -6px rgba(0, 0, 0, 0.06),
          16px 0 32px -8px rgba(0, 0, 0, 0.04),
          20px 0 40px -10px rgba(0, 0, 0, 0.02);
        transition: all 0.2s;
        min-width: 200px;
      }
      
      .sort-btn-desktop:hover {
        background-color: #f9fafb;
        border-color: var(--primary-color);
      }
      
      .sort-btn-desktop.active {
        border-color: var(--primary-color);
        box-shadow: 
          0 0 0 1px rgba(72, 131, 31, 0.2),
          0 0 0 2px rgba(72, 131, 31, 0.15),
          0 2px 4px -1px rgba(0, 0, 0, 0.12),
          0 4px 8px -2px rgba(0, 0, 0, 0.10),
          0 8px 16px -4px rgba(0, 0, 0, 0.08),
          0 12px 24px -6px rgba(0, 0, 0, 0.06),
          0 16px 32px -8px rgba(0, 0, 0, 0.04),
          0 20px 40px -10px rgba(0, 0, 0, 0.02),
          -2px 0 4px -1px rgba(0, 0, 0, 0.12),
          -4px 0 8px -2px rgba(0, 0, 0, 0.10),
          -8px 0 16px -4px rgba(0, 0, 0, 0.08),
          -12px 0 24px -6px rgba(0, 0, 0, 0.06),
          -16px 0 32px -8px rgba(0, 0, 0, 0.04),
          -20px 0 40px -10px rgba(0, 0, 0, 0.02),
          2px 0 4px -1px rgba(0, 0, 0, 0.12),
          4px 0 8px -2px rgba(0, 0, 0, 0.10),
          8px 0 16px -4px rgba(0, 0, 0, 0.08),
          12px 0 24px -6px rgba(0, 0, 0, 0.06),
          16px 0 32px -8px rgba(0, 0, 0, 0.04),
          20px 0 40px -10px rgba(0, 0, 0, 0.02);
      }
      
      .sort-btn-desktop .sort-btn-text {
        flex: 1;
        text-align: left;
        color: var(--text-light-primary);
      }
      
      .sort-btn-desktop .sort-btn-icon {
        color: var(--text-light-secondary);
        transition: transform 0.2s;
        font-size: 1.25rem;
      }
      
      .sort-btn-desktop.active .sort-btn-icon {
        transform: rotate(180deg);
      }
      
      .sort-dropdown-menu {
        position: absolute;
        top: calc(100% + 0.5rem);
        right: 0;
        min-width: 100%;
        background-color: var(--white);
        border: 1px solid var(--border-light);
        border-radius: 0.5rem;
        box-shadow: 
          0 0 0 1px rgba(0, 0, 0, 0.08),
          0 2px 4px -1px rgba(0, 0, 0, 0.12),
          0 4px 8px -2px rgba(0, 0, 0, 0.10),
          0 8px 16px -4px rgba(0, 0, 0, 0.08),
          0 12px 24px -6px rgba(0, 0, 0, 0.06),
          0 16px 32px -8px rgba(0, 0, 0, 0.04),
          0 20px 40px -10px rgba(0, 0, 0, 0.02),
          -2px 0 4px -1px rgba(0, 0, 0, 0.12),
          -4px 0 8px -2px rgba(0, 0, 0, 0.10),
          -8px 0 16px -4px rgba(0, 0, 0, 0.08),
          -12px 0 24px -6px rgba(0, 0, 0, 0.06),
          -16px 0 32px -8px rgba(0, 0, 0, 0.04),
          -20px 0 40px -10px rgba(0, 0, 0, 0.02),
          2px 0 4px -1px rgba(0, 0, 0, 0.12),
          4px 0 8px -2px rgba(0, 0, 0, 0.10),
          8px 0 16px -4px rgba(0, 0, 0, 0.08),
          12px 0 24px -6px rgba(0, 0, 0, 0.06),
          16px 0 32px -8px rgba(0, 0, 0, 0.04),
          20px 0 40px -10px rgba(0, 0, 0, 0.02);
        z-index: 1000;
        display: none;
        overflow: hidden;
        max-height: 400px;
        overflow-y: auto;
      }
      
      .sort-dropdown-menu.active {
        display: block;
        animation: fadeInDown 0.2s ease-out;
      }
      
      @keyframes fadeInDown {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      .sort-dropdown-item {
        display: flex;
        align-items: center;
        padding: 0.625rem 0.875rem;
        cursor: pointer;
        transition: background-color 0.2s;
        border-bottom: 1px solid var(--background-light);
        font-size: 0.75rem;
        color: var(--text-light-primary);
        white-space: nowrap;
      }
      
      .sort-dropdown-item span:first-child {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .sort-dropdown-item:last-child {
        border-bottom: none;
      }
      
      .sort-dropdown-item:hover {
        background-color: var(--background-light);
      }
      
      .sort-dropdown-item.selected {
        background-color: rgba(72, 131, 31, 0.1);
        color: var(--primary-color);
        font-weight: 600;
      }
      
      .sort-dropdown-item .sort-item-check {
        margin-left: 0.5rem;
        color: var(--primary-color);
        font-size: 1rem;
        display: none;
        flex-shrink: 0;
      }
      
      .sort-dropdown-item.selected .sort-item-check {
        display: block;
      }
      
      /* Car Cards - Desktop Layout */
      .car-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-anchor: none; /* Prevent scroll anchoring during pagination */
      }
      
      @media (min-width: 768px) {
        .car-cards {
          width: 100%;
          max-width: 100%;
          overflow-x: hidden;
        }
        
        .car-card {
          display: flex;
          flex-direction: row;
          align-items: stretch;
          gap: 1rem;
          padding: 1rem;
          border-radius: 0.75rem;
          border: 1px solid var(--border-light);
          background-color: var(--white);
          box-shadow: 
            0 0 0 1px rgba(0, 0, 0, 0.08),
            0 2px 4px -1px rgba(0, 0, 0, 0.12),
            0 4px 8px -2px rgba(0, 0, 0, 0.10),
            0 8px 16px -4px rgba(0, 0, 0, 0.08),
            0 12px 24px -6px rgba(0, 0, 0, 0.06),
            0 16px 32px -8px rgba(0, 0, 0, 0.04),
            0 20px 40px -10px rgba(0, 0, 0, 0.02),
            -2px 0 4px -1px rgba(0, 0, 0, 0.12),
            -4px 0 8px -2px rgba(0, 0, 0, 0.10),
            -8px 0 16px -4px rgba(0, 0, 0, 0.08),
            -12px 0 24px -6px rgba(0, 0, 0, 0.06),
            -16px 0 32px -8px rgba(0, 0, 0, 0.04),
            -20px 0 40px -10px rgba(0, 0, 0, 0.02),
            2px 0 4px -1px rgba(0, 0, 0, 0.12),
            4px 0 8px -2px rgba(0, 0, 0, 0.10),
            8px 0 16px -4px rgba(0, 0, 0, 0.08),
            12px 0 24px -6px rgba(0, 0, 0, 0.06),
            16px 0 32px -8px rgba(0, 0, 0, 0.04),
            20px 0 40px -10px rgba(0, 0, 0, 0.02);
          transition: none !important;
          will-change: auto !important;
          width: 100%;
          max-width: 100%;
          box-sizing: border-box;
        }
        
        .car-card:hover {
          box-shadow: 
            0 0 0 1px rgba(0, 0, 0, 0.08),
            0 2px 4px -1px rgba(0, 0, 0, 0.12),
            0 4px 8px -2px rgba(0, 0, 0, 0.10),
            0 8px 16px -4px rgba(0, 0, 0, 0.08),
            0 12px 24px -6px rgba(0, 0, 0, 0.06),
            0 16px 32px -8px rgba(0, 0, 0, 0.04),
            0 20px 40px -10px rgba(0, 0, 0, 0.02),
            -2px 0 4px -1px rgba(0, 0, 0, 0.12),
            -4px 0 8px -2px rgba(0, 0, 0, 0.10),
            -8px 0 16px -4px rgba(0, 0, 0, 0.08),
            -12px 0 24px -6px rgba(0, 0, 0, 0.06),
            -16px 0 32px -8px rgba(0, 0, 0, 0.04),
            -20px 0 40px -10px rgba(0, 0, 0, 0.02),
            2px 0 4px -1px rgba(0, 0, 0, 0.12),
            4px 0 8px -2px rgba(0, 0, 0, 0.10),
            8px 0 16px -4px rgba(0, 0, 0, 0.08),
            12px 0 24px -6px rgba(0, 0, 0, 0.06),
            16px 0 32px -8px rgba(0, 0, 0, 0.04),
            20px 0 40px -10px rgba(0, 0, 0, 0.02);
          transition: none !important;
          will-change: auto !important;
        }
        
        .car-image {
          width: 33.333%;
          aspect-ratio: 16/10;
          border-radius: 0.5rem;
          background-size: cover;
          background-position: center;
          flex-shrink: 0;
        }
        
        .car-details {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          gap: 1rem;
        }
        
        .car-title {
          font-size: 1.125rem;
          font-weight: bold;
          margin-bottom: 0.5rem;
        }
        
        .car-features {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 0.5rem 1rem;
          font-size: 0.875rem;
          color: #000000;
        }
        
        .car-feature {
          display: flex;
          align-items: center;
          gap: 0.375rem;
        }
        
        .car-feature .material-symbols-outlined {
          color: #48831f;
        }
        
        .car-feature svg path[fill="currentColor"] {
          fill: #48831f;
        }
        
        .car-features-row {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 0.5rem 1rem;
          width: 100%;
        }
        
        .car-features-row:first-child {
          margin-bottom: 0.25rem;
        }
        
        /* Tablet specific - compact features */
        @media (min-width: 768px) and (max-width: 1279px) {
          .car-features {
            font-size: 0.75rem;
            gap: 0.25rem 0.5rem;
          }
          
          .car-feature {
            gap: 0.25rem;
          }
          
          .car-features-row {
            gap: 0.25rem 0.5rem;
          }
          
          .car-features-row:first-child {
            margin-bottom: 0.125rem;
          }
        }
        
        .car-pricing {
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: space-between;
          gap: 0.5rem;
        }
        
        /* Tablet: keep pricing compact on one row */
        @media (min-width: 768px) and (max-width: 1279px) {
          .car-pricing {
            flex-wrap: nowrap !important;
            gap: 0.5rem !important;
          }
          
          .price-info {
            flex-shrink: 0;
          }
          
          .view-deal-btn {
            min-width: 5rem !important;
            padding: 0.4rem 0.75rem !important;
            font-size: 0.75rem !important;
          }
        }
        
        .price-info {
          text-align: left;
        }
        
        .total-price {
          font-size: 1.125rem;
          font-weight: bold;
          color: var(--text-light-primary);
        }
        
        .price-label {
          font-size: 0.875rem;
          font-weight: normal;
          color: var(--text-light-secondary);
        }
        
        .daily-price {
          font-size: 1.125rem;
          font-weight: bold;
          color: #1a2421;
        }
        
        .view-deal-btn {
          display: flex;
          min-width: 7.5rem;
          cursor: pointer;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          border-radius: 0.5rem;
          background-color: #00CA00;
          padding: 0.5rem 1rem;
          font-size: 0.875rem;
          font-weight: bold;
          color: white;
          border: none;
          transition: all 0.2s;
        }
        
        .view-deal-btn:hover {
          background-color: #00b300;
        }
      }
      
      /* Hide mobile filters button on desktop */
      .btn-filter {
        display: none;
      }
      
      /* Pagination */
      .pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 2rem;
      }
      
      .page-link {
        display: inline-flex;
        height: 2.5rem;
        width: 2.5rem;
        align-items: center;
        justify-content: center;
        border-radius: 0.5rem;
        color: var(--text-light-secondary);
        text-decoration: none;
        transition: all 0.2s;
      }
      
      .page-link:hover {
        background-color: #f3f4f6;
      }
      
      .page-link.active {
        background-color: var(--primary-color);
        color: white;
      }
    }

    /* ============================================
       MODERN FOOTER STYLES
       ============================================ */

    /* INSTANT FOOTER RENDERING - Prevent "bits and pieces" loading */
    /* Reserve space and ensure complete block rendering */
    .footer-modern {
      position: relative;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      color: #e2e8f0;
      font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
      width: 100%;
      overflow: hidden;
      /* Reserve minimum height to prevent layout shift */
      min-height: 450px;
      /* Contain layout to isolate rendering */
      contain: layout style;
      /* Ensure footer renders as complete block */
      content-visibility: visible;
    }

    /* Footer image placeholders - show background while images load */
    .footer-modern img {
      background-color: rgba(255, 255, 255, 0.05);
    }

    /* Logo image - fixed dimensions to prevent shift */
    .footer-logo-img {
      width: 50px;
      height: 50px;
      object-fit: contain;
    }

    /* Payment logos - fill edges */
    .payment-logo {
      object-fit: contain;
      padding: 0;
    }

    /* Banner images - responsive */
    .footer-brand-banner,
    .footer-brand-banner-desktop {
      width: 100%;
      height: auto;
      object-fit: cover;
    }

    /* Wave decoration */
    .footer-wave {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 80px;
      color: #f8fafc;
      transform: translateY(-100%);
      line-height: 0;
      pointer-events: none;
    }

    .footer-wave svg {
      width: 100%;
      height: 100%;
    }

    /* Main footer content */
    .footer-main {
      padding: 80px 0 50px;
      position: relative;
      /* Reserve minimum height for content */
      min-height: 300px;
    }

    .footer-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 24px;
      display: grid;
      grid-template-columns: 1.5fr 1fr 1.5fr;
      gap: 48px;
    }

    /* Brand column */
    .footer-brand {
      padding-right: 24px;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }

    .footer-logo-img {
      height: 50px;
      width: auto;
      object-fit: contain;
    }

    .footer-logo .logo-text {
      font-size: 1.75rem;
      font-weight: 800;
      letter-spacing: 1px;
      white-space: nowrap;
      font-family: 'Poppins', 'Nunito', 'Quicksand', sans-serif;
      text-transform: uppercase;
      overflow: visible !important;
      text-overflow: unset !important;
      max-width: none !important;
      flex-shrink: 0;
      background: linear-gradient(
        90deg,
        #ffd700,
        #22c55e,
        #16a34a,
        #15803d,
        #22c55e,
        #ffd700
      );
      background-size: 300% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradientMove 4s ease-in-out infinite;
    }

    .footer-logo .logo-accent {
      background: inherit;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    @keyframes gradientMove {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    @media (max-width: 768px) {
      .footer-logo {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
      }
      .footer-logo-img {
        height: 45px;
      }
      .footer-logo .logo-text {
        font-size: 1.5rem;
      }
    }

    @media (max-width: 480px) {
      .footer-logo-img {
        height: 40px;
      }
      .footer-logo .logo-text {
        font-size: 1.25rem;
      }
    }

    .footer-tagline {
      font-size: 0.95rem;
      line-height: 1.7;
      color: #94a3b8;
      margin-bottom: 28px;
    }

    /* Social buttons */
    .footer-social {
      display: flex;
      gap: 12px;
    }

    .social-btn {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
      font-size: 1rem;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      text-decoration: none;
    }

    .social-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    .social-icon-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
    }

    .social-btn-x {
      background: #fff;
      border-color: #fff;
    }

    .social-btn-x:hover {
      background: #f0f0f0;
      border-color: #f0f0f0;
    }

    /* Footer headings */
    .footer-heading {
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
      margin-bottom: 24px;
      text-transform: uppercase;
      letter-spacing: 1px;
      position: relative;
      padding-bottom: 12px;
    }

    .footer-heading::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 32px;
      height: 3px;
      background: linear-gradient(90deg, #22c55e, #16a34a);
      border-radius: 2px;
    }

    /* Footer links */
    .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-links li {
      margin-bottom: 14px;
    }

    .footer-links a {
      color: #94a3b8;
      text-decoration: none;
      font-size: 0.925rem;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.25s ease;
    }

    .footer-links a .link-arrow {
      color: #22c55e;
      font-size: 0.875rem;
      opacity: 0;
      transform: translateX(-8px);
      transition: all 0.25s ease;
    }

    .footer-links a:hover {
      color: #fff;
      transform: translateX(4px);
    }

    .footer-links a:hover .link-arrow {
      opacity: 1;
      transform: translateX(0);
    }

    /* Contact column */
    .footer-contact-list {
      margin-bottom: 28px;
    }

    .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 16px;
      font-size: 0.925rem;
      color: #94a3b8;
    }

    .contact-icon {
      width: 36px;
      height: 36px;
      background: rgba(34, 197, 94, 0.1);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #22c55e;
      flex-shrink: 0;
    }

    /* Newsletter */
    .footer-newsletter {
      margin-top: 8px;
    }

    .newsletter-label {
      font-size: 0.875rem;
      color: #94a3b8;
      margin-bottom: 12px;
    }

    .newsletter-form-modern {
      display: flex;
      gap: 0;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .newsletter-form-modern:focus-within {
      border-color: #22c55e;
      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
    }

    .newsletter-form-modern input {
      flex: 1;
      padding: 14px 16px;
      background: transparent;
      border: none;
      color: #fff;
      font-size: 0.9rem;
      outline: none;
    }

    .newsletter-form-modern input::placeholder {
      color: #64748b;
    }

    .newsletter-form-modern button {
      padding: 14px 20px;
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      border: none;
      color: #fff;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .newsletter-form-modern button:hover {
      background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    }

    /* Footer Banner - Desktop (inside brand section) */
    .footer-brand-banner-desktop {
      display: block;
      width: 450px;
      max-width: none !important;
      height: auto;
      margin-top: 16px;
      margin-bottom: 20px;
      border-radius: 6px;
      object-fit: contain;
    }

    .footer-brand {
      overflow: visible !important;
    }

    /* Footer Banner Wrapper - Full Width Mobile */
    .footer-banner-wrapper {
      display: none;
      width: 100%;
      padding: 0;
      margin: 0;
    }

    .footer-brand-banner {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover;
    }

    @media (max-width: 768px) {
      /* Hide desktop banner on mobile */
      .footer-brand-banner-desktop {
        display: none;
      }

      /* Show full-width banner wrapper on mobile */
      .footer-banner-wrapper {
        display: block;
      }

      .footer-brand-banner {
        width: 100%;
        border-radius: 0;
      }
    }

    /* Bottom bar */
    .footer-bottom-bar {
      background: rgba(0, 0, 0, 0.2);
      padding: 24px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      /* Reserve minimum height to prevent layout shift */
      min-height: 72px;
    }

    .footer-bottom-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      /* Reserve minimum height */
      min-height: 24px;
    }

    .copyright {
      font-size: 0.875rem;
      color: #64748b;
      margin: 0;
    }

    .footer-legal {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .footer-legal a {
      color: #64748b;
      text-decoration: none;
      font-size: 0.875rem;
      transition: color 0.25s ease;
    }

    .footer-legal a:hover {
      color: #22c55e;
    }

    .footer-legal .divider {
      color: #475569;
    }

    .footer-payment {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .payment-label {
      font-size: 0.8rem;
      color: #64748b;
    }

    .payment-icons {
      display: flex;
      gap: 10px;
      /* Reserve space for 5 payment icons (40px each + 10px gaps) */
      min-width: 240px;
      min-height: 24px;
    }

    .payment-icons i {
      font-size: 1.5rem;
      color: #64748b;
      transition: color 0.25s ease;
    }

    .payment-icons i:hover {
      color: #94a3b8;
    }

    .payment-badge {
      font-size: 0.7rem;
      font-weight: 600;
      padding: 4px 8px;
      border-radius: 4px;
      color: #fff;
      white-space: nowrap;
    }

    .payment-badge.mpesa {
      background: linear-gradient(135deg, #4CAF50, #2E7D32);
    }

    .payment-badge.mtn {
      background: linear-gradient(135deg, #FFCC00, #FFA500);
      color: #000;
    }

    .payment-badge.airtel {
      background: linear-gradient(135deg, #ED1C24, #B71C1C);
    }

    .payment-badge.visa {
      background: linear-gradient(135deg, #1A1F71, #0D47A1);
    }

    .payment-badge.mastercard {
      background: linear-gradient(135deg, #EB001B, #F79E1B);
    }

    .payment-logo {
      height: 32px;
      width: 100%;
      object-fit: contain;
      border-radius: 4px;
      background: #fff;
      padding: 0;
    }

    @media (max-width: 480px) {
      .payment-icons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        max-width: 220px;
      }

      .payment-logo {
        height: 28px;
        width: 100%;
      }

      .payment-logo:nth-child(1),
      .payment-logo:nth-child(2),
      .payment-logo:nth-child(3) {
        flex: 0 0 calc(33.33% - 6px);
      }

      .payment-logo:nth-child(4),
      .payment-logo:nth-child(5) {
        flex: 0 0 calc(50% - 4px);
      }
    }

    /* Tablet responsive */
    @media (max-width: 1024px) {
      .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
      }

      .footer-brand {
        grid-column: span 2;
        padding-right: 0;
        text-align: center;
      }

      .footer-logo {
        justify-content: center;
      }

      .footer-social {
        justify-content: center;
      }

      .footer-tagline {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
      }
    }

    /* Mobile responsive */
    @media (max-width: 768px) {
      .footer-main {
        padding: 60px 0 40px;
      }

      .footer-container {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
      }

      .footer-brand {
        grid-column: span 1;
      }

      .footer-heading::after {
        left: 50%;
        transform: translateX(-50%);
      }

      .footer-links a {
        justify-content: center;
      }

      .footer-links a .link-arrow {
        display: none;
      }

      .contact-item {
        justify-content: center;
      }

      .newsletter-form-modern {
        max-width: 320px;
        margin: 0 auto;
      }

      .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
      }

      .footer-legal {
        flex-wrap: wrap;
        justify-content: center;
      }

      .footer-payment {
        flex-direction: column;
        gap: 8px;
      }
    }

    /* Small mobile */
    @media (max-width: 480px) {
      .footer-main {
        padding: 48px 0 32px;
      }

      .footer-container {
        padding: 0 16px;
        gap: 32px;
      }

      .footer-logo .logo-text {
        font-size: 1.25rem;
      }

      .footer-tagline {
        font-size: 0.875rem;
      }

      .social-btn {
        width: 38px;
        height: 38px;
      }

      .footer-heading {
        font-size: 0.9rem;
      }

      .footer-links a {
        font-size: 0.875rem;
      }

      .contact-item {
        font-size: 0.875rem;
      }

      .footer-bottom-bar {
        padding: 20px 0;
      }

      .copyright, .footer-legal a {
        font-size: 0.8rem;
      }
    }

    /* OLD FOOTER STYLES - DEPRECATED (kept for backwards compatibility) */
    .footer {
      display: none; /* Hide old footer */
    }

    .newsletter-form {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
      }
    }

    @media (max-width: 480px) {
      .newsletter-form {
        flex-direction: column;
      }
      .newsletter-form input {
        text-align: center;
      }
      .newsletter-form button {
        width: 100%;
        justify-content: center;
      }
    }
/* =========================================
   New Search Bar Styles (Refactor)
   ========================================= */

/* Search Container */
.search-container {
  background-color: var(--white);
  border-radius: 9999px; /* Full pill shape */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* Form Layout */
.form-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (min-width: 1280px) {
  .form-wrapper {
    flex-direction: row;
    align-items: center;
  }
}

.form-grid-new {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  flex-grow: 1;
  width: 100%;
}

@media (min-width: 768px) {
  .form-grid-new {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 1280px) {
  .form-grid-new {
    grid-template-columns: repeat(7, 1fr); /* 7 columns for the layout */
    gap: 0;
  }
}

/* Form Groups */
.form-group-new {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 0;
  width: 100%;
}

.location-group {
  grid-column: 1 / -1;
}

@media (min-width: 1280px) {
  .location-group {
    grid-column: span 2;
  }
}

.date-group {
  grid-column: 1 / -1;
}

@media (min-width: 1280px) {
  .date-group {
    grid-column: span 2;
  }
}

.details-group {
  grid-column: span 1;
}

/* Form Fields */
.form-field-new {
  flex: 1;
  min-width: 0;
  position: relative;
}

.form-label-new {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-500);
  padding-left: 1rem; /* Default padding */
  padding-right: 1rem;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0; /* Override default */
}

/* Specific padding for labels with icons below them */
.form-field-new:has(.input-icon-new) .form-label-new {
  padding-left: 3rem; /* Align with input text */
}

.input-container-new {
  position: relative;
  width: 100%;
}

/* Icons */
.input-icon-new {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  z-index: 1;
  color: var(--gray-400);
  fill: var(--gray-400); /* For SVGs */
}

.material-symbols-outlined.input-icon-new {
  font-size: 20px;
}

/* Inputs */
.form-input-new {
  width: 100%;
  background: transparent;
  height: 2.5rem;
  padding-left: 3rem; /* Space for icon */
  padding-right: 1rem;
  color: var(--text-light-primary);
  border: none;
  outline: none;
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  box-shadow: none !important; /* Remove default shadow */
}

.form-input-new:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

.form-input-new.no-icon {
  padding-left: 1rem;
}

/* Dividers */
.divider-new {
  height: 2rem;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.1);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.group-divider-new {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2rem;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
  display: none; /* Hidden on mobile by default */
}

@media (min-width: 1280px) {
  .group-divider-new {
    display: block;
  }
}

.form-group-new:hover .group-divider-new {
  background-color: transparent; /* Hide on hover */
}

/* Search Button */
.search-button-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 3.5rem;
  background-color: var(--primary-color);
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 9999px;
  box-shadow: 0 10px 15px -3px rgba(19, 127, 236, 0.3);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  margin-top: 1rem;
  font-family: 'Manrope', sans-serif;
}

@media (min-width: 1280px) {
  .search-button-new {
    width: auto;
    height: 3rem;
    margin-top: 0;
    margin-left: 0.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.search-button-new:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.button-text-new {
  display: inline;
}

/* Custom Dropdown Trigger Styles to match Input */
.custom-dropdown-trigger-new {
  width: 100%;
  background: transparent;
  height: 2.5rem;
  padding-left: 3rem;
  padding-right: 2rem; /* Space for arrow */
  color: var(--text-light-primary);
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  font-size: 0.9rem;
}

.custom-dropdown-trigger-new::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--gray-400);
}

/* Hide existing elements that we are replacing */
.hero-search-form {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ================================================
   CAR DETAILS - VEHICLE INFORMATION SECTION
   Professional Styling for Mobile & Desktop
   ================================================ */

/* Mobile - Car Details Location Section */
.car-details-location-section {
  margin: 1.25rem 0;
  padding: 1.25rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.car-info-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e2e8f0;
}

.car-info-header .material-symbols-outlined {
  font-size: 1.375rem;
  color: #48831f;
  background: linear-gradient(135deg, #ecfccb 0%, #d9f99d 100%);
  padding: 0.5rem;
  border-radius: 0.625rem;
}

.car-info-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
  letter-spacing: -0.01em;
}

.car-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem;
}

@media (min-width: 480px) {
  .car-info-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.car-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem;
  background: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.car-info-item:hover {
  border-color: #48831f;
  box-shadow: 0 2px 8px rgba(72, 131, 31, 0.1);
}

.car-info-icon {
  font-size: 1.125rem;
  color: #48831f;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.car-info-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.car-info-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.car-info-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.car-info-value.price-value {
  color: #48831f;
  font-size: 1rem;
  font-weight: 700;
}

/* Status Colors */
.car-info-value.status-available,
.spec-status.status-available {
  color: #16a34a;
  background: #dcfce7;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.car-info-value.status-booked,
.spec-status.status-booked {
  color: #dc2626;
  background: #fee2e2;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.car-info-value.status-maintenance,
.spec-status.status-maintenance {
  color: #d97706;
  background: #fef3c7;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

/* ================================================
   DESKTOP - Compact Specs (Single Section)
   ================================================ */

.desktop-specs-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.spec-compact {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
}

.spec-compact .material-symbols-outlined {
  font-size: 0.9375rem;
  color: #48831f;
}

.spec-compact.status-available {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}

.spec-compact.status-booked {
  background: #fee2e2;
  border-color: #fecaca;
  color: #dc2626;
}

.spec-compact.status-maintenance {
  background: #fef3c7;
  border-color: #fde68a;
  color: #d97706;
}

/* Mobile - Status and Price cards in specs grid */
.car-details-spec-card.status-available {
  background: #dcfce7;
  border-color: #bbf7d0;
}

.car-details-spec-card.status-available .car-details-spec-icon {
  color: #16a34a;
}

.car-details-spec-card.status-available .car-details-spec-text {
  color: #166534;
  text-transform: capitalize;
}

.car-details-spec-card.status-booked {
  background: #fee2e2;
  border-color: #fecaca;
}

.car-details-spec-card.status-booked .car-details-spec-icon {
  color: #dc2626;
}

.car-details-spec-card.status-booked .car-details-spec-text {
  color: #991b1b;
  text-transform: capitalize;
}

.car-details-spec-card.status-maintenance {
  background: #fef3c7;
  border-color: #fde68a;
}

.car-details-spec-card.status-maintenance .car-details-spec-icon {
  color: #d97706;
}

.car-details-spec-card.status-maintenance .car-details-spec-text {
  color: #92400e;
  text-transform: capitalize;
}

.car-details-spec-card.price-card {
  background: linear-gradient(135deg, #ecfccb 0%, #d9f99d 100%);
  border-color: #bef264;
}

.car-details-spec-card.price-card .car-details-spec-icon {
  color: #4d7c0f;
}

.car-details-spec-card.price-card .car-details-spec-text {
  color: #365314;
  font-weight: 700;
}

/* =======================================================
   MOBILE CAROUSEL DOT INDICATORS
   ======================================================= */

/* Dot container */
.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Individual dot */
.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
}

/* Active dot */
.carousel-dot.active {
  width: 18px;
  border-radius: 4px;
  background-color: #ffffff;
}

/* Hover effect on dots (for accessibility) */
.carousel-dot:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.75);
  transform: scale(1.2);
}

/* When there are many images (6+), make dots smaller */
.carousel-dots:has(.carousel-dot:nth-child(6)) .carousel-dot {
  width: 5px;
  height: 5px;
}

.carousel-dots:has(.carousel-dot:nth-child(6)) .carousel-dot.active {
  width: 14px;
}