/* ==========================================================================
   Mobile-only stylesheet
   - Loaded with a media query wrapper, so it only applies on small screens.
   - Hides footer / newsletter / download-apps sections on mobile.
   - Enhances header, forms (homepage + internal pages) for touch devices.
   - Provides a fixed 4-icon bottom navigation bar.

   The mobile "Find a Car" form is rendered server-side only for mobile
   user-agents (see partials/mobile-find-car-form.blade.php), so we do
   NOT need a desktop hide rule here — the form simply isn't in the HTML.
   ========================================================================== */

/* Mobile bottom menu — scoped blue color override (does NOT affect pages).
   We override the CSS variables *only* inside the bottom menu so the
   page content keeps the original theme brand color.                     */
.mobile-bottom-menu {
    --primary-color: #2563EB !important;
    --primary-color-hover: #1D4ED8 !important;
    --primary-color-rgb: 37, 99, 235 !important;
    --bs-brand-2: #2563EB !important;
    --bs-brand-2-dark: #1D4ED8 !important;
    --bs-brand-2-darken: #1E40AF !important;
    --bs-brand-2-light: #1E3A8A !important;

    color: #2563EB;
}

.mobile-bottom-menu__item--center {
    color: #2563EB !important;
}

.mobile-bottom-menu__item--center .mobile-bottom-menu__icon {
    background: #2563EB !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35) !important;
}

.mobile-bottom-menu__item--center .mobile-bottom-menu__icon svg {
    stroke: #ffffff !important;
}

/* --------------------------------------------------------------------------
   1. Header enhancements
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    body.has-mobile-bottom-menu {
        padding-bottom: 86px;
    }

    .header.sticky-bar {
        padding: 8px 0;
    }

    .header .main-header {
        min-height: 56px;
        gap: 8px;
    }

    .header-left {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 8px;
    }

    .header .header-left > .header-nav,
    .header .header-left > .header-right > .header-btn,
    .header .header-left > .header-right > .d-none.d-xxl-inline-flex {
        display: none !important;
    }

    .header .header-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .header .header-right .burger-icon,
    .header .header-right .burger-icon-2 {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        cursor: pointer;
    }

    .header .header-right .burger-icon img {
        width: 22px;
        height: 22px;
    }

    .header-home-2 .top-bar-2 {
        display: none !important;
    }

    .header .header-logo img,
    .header .header-logo svg {
        max-height: 36px;
        width: auto;
    }
}

/* --------------------------------------------------------------------------
   2. Hide full footer + newsletter + download-apps + popup on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .footer {
        display: none !important;
    }

    /* Hero / banner on the homepage — push the search form to the top.
       IMPORTANT: .box-banner-home2 is used by the CAR DETAIL page for the
       gallery wrapper, so we must NOT hide it. We use suffix matches
       ([class$="..."]) for the home banners only. */
    .block-banner-home1,
    .block-banner-home3,
    .block-banner-home7,
    .shortcode-hero-banner,
    .shortcode-slider,
    .shortcode-slider-style-1,
    .shortcode-slider-style-2,
    .box-banner-home7,
    [class$="block-banner-home1"],
    [class$="block-banner-home3"],
    [class$="block-banner-home7"],
    [class$="box-banner-home1"],
    [class$="box-banner-home3"],
    [class$="box-banner-home7"],
    [class*="shortcode-slider"],

    /* Top page-header / title banner on internal pages (and home if used) */
    .page-header,
    .box-breadcrumb,
    .breadcrumb__area,
    .breadcrumbs,
    nav.breadcrumb,
    ol.breadcrumb,
    ul.breadcrumbs,
    .page-banner,
    .page-title-banner,
    .top-banner,
    .page-header-home,
    [class*="breadcrumb"],
    [class*="page-header"],
    [class*="page-banner"],
    [class*="top-banner"] {
        display: none !important;
    }

    /* The "simple" breadcrumb variant uses no class names — hide the
       inline crumbs row + page-title heading rendered by the theme. */
    body > .pt-30 > .text-center,
    body > main > .pt-30 > .text-center,
    main > .pt-30 > .text-center,
    .pt-30 > .text-center.mb-40,
    .pt-30:has(.breadcrumb__area),
    .breadcrumb-wrap,
    .breadcrumb-wrapper,
    .breadcrumb-container,
    .page-breadcrumb,
    .section-breadcrumb,
    .auth-breadcrumb,
    .login-breadcrumb,
    [class*="breadcrumb-wrap"],
    [class*="breadcrumb-wrapper"],
    [class*="breadcrumb-container"],
    [class*="auth-breadcrumb"] {
        display: none !important;
    }

    .newsletter,
    .newsletter-form-wrapper,
    .newsletter-section,
    section.newsletter,
    .widget_newsletter,
    .download-app,
    .download-app-section,
    .apps-download,
    .apps-download-section,
    .mobile-app-download,
    .download-apps,
    .download-apps-section,
    [class*="download-app"],
    [class*="apps-download"],

    /* Install-apps / "Download our app" shortcode (style-1/2/3) */
    .widget-install-app,
    .box-app,
    .box-app-2,
    [class*="widget-install-app"],
    [class*="box-app"],

    /* "How it works" / "Why book with us" / step-by-step sections */
    .shortcode-why-us,
    .box-why-book-22,
    .how-it-works,
    .howitworks,
    .how-to-work,
    .working-process,
    .steps-section,
    [class*="how-it-works"],
    [class*="howitworks"],

    /* Rental invitation / "Rent your car" CTA section */
    .shortcode-about-us-information,
    .section-cta-4,
    .rental-invitation,
    .rental-invitations,
    [class*="rental-invitation"],

    /* Counters / statistics / achievements */
    .shortcode-our-achievements,
    .shortcode-site-statistics,
    .section-static-1,
    .section-static,
    .site-statistics,
    .our-achievements,
    .counter-section,
    .counters,
    [class*="site-statistics"],
    [class*="our-achievements"],
    [class*="counter-section"],

    /* Blog posts / news sections on the homepage */
    .shortcode-blog-posts,
    .blog-list-style-1,
    .blog-list-style-2,
    .blog-list-style-3,
    .box-news,
    .box-picked,
    .latest-news,
    .recent-posts,
    [class*="shortcode-blog-posts"],
    [class*="blog-list-style"],
    [class*="box-news"] {
        display: none !important;
    }

    /* Newsletter popup: also hide the modal element itself and its backdrop
       so it never flashes on phones (e.g. when the plugin runs anyway). */
    .newsletter-popup,
    .modal.newsletter-popup,
    .modal-backdrop.newsletter-popup-backdrop,
    #newsletter-popup {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* The Bootstrap modal backdrop the newsletter JS injects into <body>
       must also be killed — otherwise it greys out the page and blocks taps. */
    .modal-backdrop,
    .modal-backdrop.fade,
    .modal-backdrop.show,
    body > .modal-backdrop,
    body.modal-open {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html.modal-open,
    body.modal-open {
        overflow: auto !important;
        padding-right: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   3. Form enhancements (homepage + internal pages)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    textarea,
    .select2-container .select2-selection--single,
    .select2-container .select2-selection {
        min-height: 48px !important;
        font-size: 16px !important; /* prevents iOS zoom on focus */
        padding: 10px 14px !important;
        border-radius: 12px !important;
        width: 100%;
    }

    textarea {
        min-height: 110px !important;
    }

    .form-group,
    .mb-3,
    .col-form-label {
        margin-bottom: 14px;
    }

    .form-label,
    label {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 6px;
        display: inline-block;
    }

    .btn,
    button[type="submit"],
    input[type="submit"],
    .btn-search,
    .btn-submit {
        min-height: 48px !important;
        padding: 12px 18px !important;
        font-size: 15px !important;
        font-weight: 600;
        border-radius: 12px !important;
        width: 100%;
    }

    .btn-group > .btn {
        width: auto;
    }

    .select2-container .select2-selection--single .select2-selection__arrow {
        height: 46px;
        right: 8px;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 46px !important;
        padding-left: 14px !important;
    }

    /* Homepage rental search form */
    .box-form-search,
    .form-search,
    .rental-search-form,
    .homepage-search-form {
        padding: 16px !important;
        border-radius: 16px !important;
    }

    .box-form-search .row,
    .form-search .row,
    .rental-search-form .row,
    .homepage-search-form .row {
        --bs-gutter-y: 12px;
    }

    .box-form-search .btn,
    .form-search .btn,
    .rental-search-form .btn,
    .homepage-search-form .btn {
        margin-top: 6px;
    }

    /* Hero advance search — break out of container to span the full viewport */
    .shortcode-car-advance-search,
    .shortcode-car-advance-search .container,
    .box-search-advance-home10,
    .box-search-advance-home10 .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    .box-search-advance,
    .box-search-advance-home10 .box-search-advance {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 18px 14px 20px !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
        background: #ffffff !important;
    }

    [data-bs-theme="dark"] .box-search-advance,
    [data-bs-theme="dark"] .box-search-advance-home10 .box-search-advance {
        background: #1c1c1e !important;
    }

    /* Pinned to the top so the form is the first thing the user sees */
    .shortcode-car-advance-search {
        position: sticky;
        top: 56px; /* below the sticky header */
        z-index: 1000;
    }

    /* Date / time / daterangepicker trigger */
    .input-group,
    .date-picker,
    .daterangepicker-input,
    .rental-date-inputs {
        width: 100%;
    }

    .input-group .form-control {
        border-radius: 12px 0 0 12px !important;
    }

    .input-group .btn,
    .input-group .input-group-text {
        border-radius: 0 12px 12px 0 !important;
        min-height: 48px !important;
    }

    /* Contact / login / register / booking forms */
    .contact-form,
    .login-form,
    .register-form,
    .booking-form,
    .checkout-form,
    .newsletter-form {
        padding: 18px !important;
        border-radius: 16px;
    }

    .form-check-input {
        width: 1.15em;
        height: 1.15em;
        margin-top: 0.15em;
    }
}

/* --------------------------------------------------------------------------
   4. Internal page tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .page-header,
    .breadcrumbs {
        padding: 14px 0 !important;
    }

    .page-header h1,
    .page-title {
        font-size: 22px !important;
        line-height: 1.3;
    }

    .sidebar,
    .blog-sidebar,
    .page-sidebar {
        margin-top: 24px;
    }

    .card,
    .panel,
    .widget {
        border-radius: 14px !important;
    }

    .table {
        font-size: 14px;
    }

    .pagination {
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination .page-link {
        min-width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Pre-content spacing to clear the sticky header */
    main {
        padding-top: 8px;
    }
}

/* --------------------------------------------------------------------------
   5. Mobile bottom menu (4 icons)
   -------------------------------------------------------------------------- */
.mobile-bottom-menu {
    display: none;
}

@media (max-width: 991px) {
    .mobile-bottom-menu {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        background: #ffffff;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.10);
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        justify-content: space-around;
        align-items: stretch;
        height: 70px;
    }

    [data-bs-theme="dark"] .mobile-bottom-menu {
        background: #1c1c1e;
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    .mobile-bottom-menu__item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 4px 2px;
        text-decoration: none;
        color: #6b7280;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        border-radius: 10px;
        transition: color 0.2s ease, background-color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        min-width: 0;
    }

    .mobile-bottom-menu__item:hover,
    .mobile-bottom-menu__item:focus,
    .mobile-bottom-menu__item:active {
        color: var(--primary-color, #14176C);
    }

    .mobile-bottom-menu__item.is-active {
        color: var(--primary-color, #14176C);
    }

    .mobile-bottom-menu__icon {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* Critical: SVGs must fill the icon wrapper and inherit color */
    .mobile-bottom-menu__icon svg {
        width: 24px;
        height: 24px;
        display: block;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
    }

    .mobile-bottom-menu__item.is-active .mobile-bottom-menu__icon {
        color: var(--primary-color, #14176C);
    }

    /* Center "Find Cars" raised button */
    .mobile-bottom-menu__item--center .mobile-bottom-menu__icon {
        background: var(--primary-color, #14176C);
        color: #ffffff;
        border-radius: 50%;
        width: 52px;
        height: 52px;
        margin-top: -22px;
        box-shadow: 0 8px 18px rgba(20, 23, 108, 0.35);
    }

    .mobile-bottom-menu__item--center .mobile-bottom-menu__icon svg {
        stroke: #ffffff;
        width: 26px;
        height: 26px;
    }

    .mobile-bottom-menu__item--center {
        color: var(--primary-color, #14176C);
    }

    .mobile-bottom-menu__label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .mobile-bottom-menu__item--center .mobile-bottom-menu__label {
        margin-top: 2px;
    }
}

/* --------------------------------------------------------------------------
   6. Small phones
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
    .mobile-bottom-menu__label {
        font-size: 10px;
    }

    .header .header-right .burger-icon,
    .header .header-right .burger-icon-2 {
        width: 36px;
        height: 36px;
    }
}

/* ==========================================================================
   Additional mobile optimizations
   ========================================================================== */

@media (max-width: 991px) {

    /* ----------------------------------------------------------------------
       7. Global typography + spacing rhythm
       ---------------------------------------------------------------------- */
    body {
        font-size: 15px;
        line-height: 1.55;
        -webkit-text-size-adjust: 100%;
    }

    h1, .h1, .heading-1 { font-size: 28px !important; line-height: 1.2; }
    h2, .h2, .heading-2 { font-size: 24px !important; line-height: 1.25; }
    h3, .h3, .heading-3 { font-size: 20px !important; line-height: 1.3; }
    h4, .h4, .heading-4 { font-size: 18px !important; line-height: 1.35; }
    h5, .h5, .heading-5 { font-size: 16px !important; line-height: 1.4; }
    h6, .h6, .heading-6 { font-size: 15px !important; line-height: 1.4; }

    .container,
    .container-fluid {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .section-box,
    .box-section,
    .block-section {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    /* ----------------------------------------------------------------------
       8. Hero / banner
       ---------------------------------------------------------------------- */
    .block-banner-home1,
    .block-banner-home2,
    .shortcode-hero-banner,
    .box-banner-home2 {
        min-height: 320px !important;
        padding: 60px 0 80px !important;
    }

    .block-banner-home1 .heading-1,
    .shortcode-hero-banner .shortcode-title,
    .shortcode-hero-banner h1 {
        font-size: 26px !important;
        line-height: 1.2;
        margin-bottom: 16px !important;
    }

    .block-banner-home1 .text-md-bold,
    .shortcode-hero-banner .text-primary {
        font-size: 13px !important;
    }

    .list-ticks-green {
        font-size: 14px;
        gap: 6px;
    }

    .bg-shape {
        opacity: 0.4;
    }

    /* ----------------------------------------------------------------------
       9. Advance search (homepage hero search)
       ---------------------------------------------------------------------- */
    .box-search-advance,
    .box-search-advance-home10,
    .js-box-search-advance .box-search-advance {
        padding: 16px 14px !important;
        border-radius: 16px !important;
    }

    /* Section heading inside the form (rendered from $shortcode->title) */
    .box-search-advance > form > .box-top-search {
        position: relative;
    }

    .left-top-search {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
        align-items: center;
    }

    .left-top-search h6 {
        font-size: 16px !important;
        font-weight: 700 !important;
        margin: 0 0 6px !important;
        color: var(--primary-color, #14176C);
        display: block;
        width: 100%;
    }

    .category-link,
    .left-top-search a,
    .left-top-search .btn-click {
        padding: 8px 12px !important;
        font-size: 13px !important;
        border-radius: 999px !important;
        background: #f1f3f5 !important;
        color: #1f2937 !important;
        border: 1px solid transparent !important;
        transition: all 0.2s ease;
    }

    .left-top-search a.active,
    .left-top-search .btn-click.active {
        background: var(--primary-color, #14176C) !important;
        color: #fff !important;
        border-color: var(--primary-color, #14176C) !important;
        box-shadow: 0 2px 6px rgba(20, 23, 108, 0.25);
    }

    [data-bs-theme="dark"] .left-top-search a,
    [data-bs-theme="dark"] .category-link {
        background: rgba(255, 255, 255, 0.06) !important;
        color: #e5e7eb !important;
    }

    .box-top-search {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 14px;
    }

    .right-top-search {
        width: 100%;
        justify-content: flex-start;
    }

    .box-bottom-search {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 0 !important;
    }

    .box-bottom-search .item-search {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 14px !important;
        background: #f7f7f9;
        border-radius: 12px;
        box-sizing: border-box !important;
        border: 1px solid rgba(0, 0, 0, 0.04);
    }

    [data-bs-theme="dark"] .box-bottom-search .item-search {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.06);
    }

    .box-bottom-search .item-search:focus-within {
        border-color: var(--primary-color, #14176C);
        box-shadow: 0 0 0 3px rgba(20, 23, 108, 0.12);
    }

    /* Override the inline style="flex: 0 0 60%; max-width: 60%;" on the keyword field */
    .box-bottom-search .item-search[style*="flex"],
    .box-bottom-search .item-search[style*="max-width"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Submit button row: override the d-flex justify-content-end wrapper */
    .box-bottom-search .item-search.bd-none,
    .box-bottom-search .item-search[class*="justify-content"] {
        display: flex !important;
        justify-content: stretch !important;
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
    }

    .item-search label {
        margin-bottom: 4px !important;
        font-size: 11px !important;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #6b7280 !important;
        font-weight: 700 !important;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .item-search label::before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 4px;
        background: var(--primary-color, #14176C);
        border-radius: 50%;
        margin-right: 2px;
    }

    .item-search .search-input,
    .item-search .form-control,
    .item-search .form-select {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        min-height: 32px !important;
        font-size: 15px !important;
        font-weight: 600;
        color: #111827;
        width: 100% !important;
        max-width: 100% !important;
    }

    [data-bs-theme="dark"] .item-search .search-input,
    [data-bs-theme="dark"] .item-search .form-control,
    [data-bs-theme="dark"] .item-search .form-select {
        color: #f3f4f6;
    }

    .box-search-advance button[type="submit"],
    .box-search-advance .btn-search,
    .box-bottom-search .btn,
    .box-bottom-search button[type="submit"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 6px;
        border-radius: 12px !important;
        min-height: 50px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        box-shadow: 0 6px 14px rgba(20, 23, 108, 0.30);
    }

    /* ----------------------------------------------------------------------
       10. Car cards (grid + list + popular)
       ---------------------------------------------------------------------- */
    .card-journey-small,
    .card-flight,
    .card-hotel,
    .card-property,
    .card-journey-small-listing-3 {
        border-radius: 16px !important;
        overflow: hidden;
    }

    .card-journey-small .card-image,
    .card-flight .card-image,
    .card-property .card-image {
        width: 100%;
        aspect-ratio: 16 / 11;
        overflow: hidden;
    }

    .card-journey-small .card-image img,
    .card-flight .card-image img,
    .card-property .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .card-journey-small .card-info,
    .card-flight .card-info {
        padding: 14px !important;
    }

    .card-journey-small .card-title a,
    .card-flight .card-title a,
    .card-property .card-title a {
        font-size: 16px !important;
        line-height: 1.35;
    }

    .card-facilities,
    .item-facilities {
        flex-wrap: wrap;
        gap: 6px 12px !important;
    }

    .card-facilities p,
    .item-facilities p {
        font-size: 12px !important;
    }

    .endtime {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px;
    }

    .endtime .card-price,
    .endtime .heading-6,
    .car-price-text {
        font-size: 18px !important;
    }

    .endtime .btn,
    .endtime .btn-book,
    .endtime .btn-brand-2,
    .endtime a.btn {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 12px !important;
    }

    /* Card on detail page (popular-main) — keep side-by-side but tighter */
    .card-journey-small-listing-3 {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .card-journey-small-listing-3 > .card-image {
        width: 100% !important;
        aspect-ratio: 16 / 9;
    }

    .card-journey-small-listing-3 > .card-info {
        width: 100% !important;
        padding: 14px !important;
    }

    /* ----------------------------------------------------------------------
       11. Car list / search results page
       ---------------------------------------------------------------------- */
    .content-left,
    .filter-section--desktop {
        display: none !important;
    }

    .offcanvas#mobileFiltersOffcanvas {
        width: 100% !important;
    }

    .offcanvas#mobileFiltersOffcanvas .offcanvas-body {
        padding: 16px !important;
    }

    .sidebar-filter-mobile__content .row,
    .filter-section .row {
        --bs-gutter-y: 12px;
    }

    .sidebar-filter-mobile__content .form-control,
    .sidebar-filter-mobile__content .form-select {
        font-size: 15px !important;
    }

    /* Sticky filter / sort bar on listings */
    .cars-listing-toolbar,
    .listing-toolbar,
    .box-sort-by {
        position: sticky;
        top: 56px;
        z-index: 100;
        background: #fff;
        padding: 10px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        margin-bottom: 12px;
    }

    [data-bs-theme="dark"] .cars-listing-toolbar,
    [data-bs-theme="dark"] .listing-toolbar,
    [data-bs-theme="dark"] .box-sort-by {
        background: #1c1c1e;
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    /* Pagination — full width, large tap targets */
    .pagination .page-item .page-link {
        font-size: 14px;
    }

    /* ----------------------------------------------------------------------
       12. Car detail page
       ---------------------------------------------------------------------- */
    .car-detail-page .tour-title-main h4 {
        font-size: 22px !important;
        line-height: 1.25;
        margin-bottom: 6px;
    }

    .car-detail-page .tour-metas {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }

    .car-detail-page .tour-meta-left {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 4px;
    }

    .car-detail-page .tour-meta-left p,
    .car-detail-page .tour-meta-left a {
        font-size: 13px !important;
        margin: 0 !important;
    }

    /* Gallery — show car images cleanly on mobile.
       Compact single-row slider, no thumbnails (they take too much space),
       main image gets a fixed aspect ratio. */

    /* Nuclear option: force EVERY part of the car gallery to be visible.
       This overrides any other rule that might be hiding it. */
    .car-detail-page .car-detail-galleries,
    .car-detail-page .car-detail-galleries *,
    .car-detail-page .box-banner-activities,
    .car-detail-page .box-banner-activities *,
    .car-detail-page .box-banner-home2,
    .car-detail-page .box-banner-home2 *,
    .car-detail-page .banner-activities-detail,
    .car-detail-page .banner-activities-detail *,
    .car-detail-page .wrapper-image,
    .car-detail-page .wrapper-image *,
    .car-detail-page .wrapper-main-car-image,
    .car-detail-page .wrapper-main-car-image *,
    .car-detail-page .block-banner-property-detail,
    .car-detail-page .block-banner-property-detail *,
    .car-detail-page .cars-details4,
    .car-detail-page .cars-details4 *,
    .car-detail-page .swiper,
    .car-detail-page .swiper-container,
    .car-detail-page .swiper-wrapper,
    .car-detail-page .swiper-slide,
    .car-detail-page .banner-slide-activity {
        display: revert !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: auto !important;
    }

    /* Restore the original desktop layout's wrapper width so swiper
       calculates slide widths correctly */
    .car-detail-galleries .banner-activities-detail,
    .car-detail-galleries .slider-nav-thumbnails-activities-detail {
        gap: 8px;
    }

    /* Hide only the thumbnail row — too small to be useful on mobile,
       the lightbox button is the proper way to browse all photos */
    .car-detail-galleries .slider-thumnail-activities {
        display: none !important;
    }

    /* Force the main slider to be a single full-width slide on mobile */
    .car-detail-galleries .banner-activities-detail .banner-slide-activity,
    .car-detail-page .banner-activities-detail .banner-slide-activity,
    .car-detail-page .cars-details4 .banner-slide-activity {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Main hero image: clean aspect ratio with rounded corners */
    .car-detail-page .wrapper-image,
    .car-detail-page .wrapper-main-car-image {
        aspect-ratio: 16 / 10;
        border-radius: 14px;
        overflow: hidden;
        width: 100%;
        margin-bottom: 12px;
    }

    .car-detail-page .wrapper-image img,
    .car-detail-page .wrapper-main-car-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Style-2 detail page: stack the main image and the grid vertically */
    .car-detail-page .block-banner-property-detail,
    .car-detail-page .block-banner-property-detail .row {
        display: block !important;
    }

    .car-detail-page .block-banner-property-detail [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 10px !important;
    }

    /* Style-4: tighten the section padding around the gallery */
    .car-detail-page .cars-details4 {
        padding-top: 16px !important;
        padding-bottom: 0 !important;
    }

    /* Gallery-buttons ("View all photos" / "Video Clips") — hide on mobile.
       The buttons are useless here because the user can already see the
       main image inline, and the lightbox lightgallery is broken / not
       configured to show all photos on mobile. */
    .car-detail-page .gallery-buttons,
    .car-detail-galleries .gallery-buttons,
    .car-detail-page .box-button-abs,
    .car-detail-galleries .box-button-abs,
    .car-detail-page .lightbox,
    .car-detail-galleries .lightbox,
    .car-detail-page .popup-youtube,
    .car-detail-galleries .popup-youtube,
    .car-detail-page .btn-white-md,
    .car-detail-galleries .btn-white-md,
    .car-detail-page a.btn-primary.rounded-pill.lightbox,
    .car-detail-page a.popup-youtube {
        display: none !important;
    }

    /* Attributes grid → 2 columns */
    .car-detail-page .list-attributes,
    .car-detail-page .car-attributes {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .car-detail-page .list-attributes .item,
    .car-detail-page .car-attributes .item {
        padding: 10px 12px !important;
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.03);
        font-size: 13px;
    }

    [data-bs-theme="dark"] .car-detail-page .list-attributes .item,
    [data-bs-theme="dark"] .car-detail-page .car-attributes .item {
        background: rgba(255, 255, 255, 0.04);
    }

    /* Group collapse/expand — bigger tap area */
    .group-collapse-expand .btn-collapse,
    .box-collapse-expand .btn-collapse {
        min-height: 48px;
        padding: 12px 0;
        font-size: 15px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Sticky booking bar at bottom (above bottom menu) */
    .booking-form {
        position: sticky;
        bottom: 86px; /* above the bottom menu (70px + safe area) */
        z-index: 1030;
        background: #fff;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
        padding: 14px 16px !important;
        margin: 0 -14px;
    }

    [data-bs-theme="dark"] .booking-form {
        background: #1c1c1e;
    }

    .booking-form .head-booking-form {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .booking-form .head-booking-form .text-xl-bold {
        font-size: 16px !important;
    }

    .booking-form .btn,
    .booking-form .btn-book {
        width: 100% !important;
        min-height: 48px !important;
        border-radius: 12px !important;
    }

    .booking-form .form-control,
    .booking-form .form-select {
        font-size: 15px !important;
        min-height: 44px !important;
        padding: 8px 12px !important;
        border-radius: 10px !important;
    }

    /* Reviews / faqs */
    .review-item,
    .faq-item {
        padding: 14px !important;
        border-radius: 12px;
    }

    /* ----------------------------------------------------------------------
       13. Modals & offcanvas — full screen on mobile
       ---------------------------------------------------------------------- */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        min-height: 100vh;
        align-items: flex-start;
    }

    .modal-content {
        border-radius: 0 !important;
        min-height: 100vh;
    }

    .modal-header,
    .modal-footer {
        padding: 14px 16px !important;
    }

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

    /* ----------------------------------------------------------------------
       14. Tables → stacked cards
       ---------------------------------------------------------------------- */
    .table-responsive {
        border: 0;
    }

    .table thead {
        display: none;
    }

    .table tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 12px;
        padding: 10px 12px;
    }

    [data-bs-theme="dark"] .table tbody tr {
        border-color: rgba(255, 255, 255, 0.08);
    }

    .table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0 !important;
        border: 0 !important;
        text-align: right;
    }

    .table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 10px;
        text-align: left;
        color: #6b7280;
    }

    /* ----------------------------------------------------------------------
       15. Tabs → horizontally scrollable pills
       ---------------------------------------------------------------------- */
    .nav-tabs,
    .nav-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        white-space: nowrap;
        padding: 8px 14px;
        font-size: 14px;
    }

    /* ----------------------------------------------------------------------
       16. Breadcrumbs
       ---------------------------------------------------------------------- */
    .breadcrumbs {
        font-size: 12px;
        padding: 10px 0 !important;
    }

    .breadcrumbs li {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ----------------------------------------------------------------------
       17. Buttons — block on cards, inline in toolbars
       ---------------------------------------------------------------------- */
    .btn-brand-2,
    .btn-primary,
    .btn-secondary,
    .btn-success {
        font-size: 14px;
        padding: 10px 16px;
    }

    .box-tour-button .btn,
    .tour-header .btn {
        width: 100%;
    }

    /* ----------------------------------------------------------------------
       18. Swiper / sliders — give a small peek of next slide
       ---------------------------------------------------------------------- */
    .swiper-container,
    .swiper {
        overflow: hidden;
    }

    .swiper-slide {
        width: auto;
    }

    /* ----------------------------------------------------------------------
       19. Floating elements that should be hidden / repositioned
       ---------------------------------------------------------------------- */
    .scrollup,
    #scrollUp,
    .back-to-top {
        right: 14px !important;
        bottom: 100px !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* "Filters" floating button above bottom menu */
    .btn-open-mobile-filter,
    .mobile-filter-trigger {
        position: fixed;
        left: 14px;
        bottom: 100px;
        z-index: 1040;
        min-height: 44px;
        padding: 10px 16px;
        border-radius: 999px;
        background: var(--primary-color, #14176C);
        color: #fff;
        font-weight: 600;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    }

    /* Disable wow.js heavy animations on mobile for smoother scroll */
    .wow,
    .wow.fadeInUp,
    .wow.fadeInDown,
    .wow.fadeIn,
    .wow.fadeInLeft,
    .wow.fadeInRight {
        animation: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* ----------------------------------------------------------------------
       20. Image / media cleanup
       ---------------------------------------------------------------------- */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Force lazy images to have aspect ratio placeholder to avoid CLS */
    img.lazy,
    img.lazyloaded,
    img[data-src] {
        background: #f0f0f0;
    }

    /* ----------------------------------------------------------------------
       21. Login / register / account dashboard
       ---------------------------------------------------------------------- */
    .login-page .card,
    .register-page .card,
    .customer-dashboard .card {
        padding: 18px !important;
        border-radius: 16px;
    }

    .customer-dashboard .nav-pills,
    .customer-dashboard .sidebar-nav {
        flex-direction: row !important;
        overflow-x: auto;
        gap: 6px;
    }

    /* ----------------------------------------------------------------------
       22. Reduce motion for users who prefer it
       ---------------------------------------------------------------------- */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.001ms !important;
            transition-duration: 0.001ms !important;
        }
    }

    /* ----------------------------------------------------------------------
       23. Testimonials — keep centered on mobile + make sure they render
       ---------------------------------------------------------------------- */
    .shortcode-testimonial {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .shortcode-testimonial .row,
    .shortcode-testimonial .row > [class*="col-"],
    .shortcode-testimonial .col-md-9,
    .shortcode-testimonial .col-sm-9,
    .shortcode-testimonial .col-lg-6,
    .shortcode-testimonial .col-auto {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .shortcode-testimonial .box-author-testimonials {
        justify-content: center !important;
        flex-wrap: wrap;
        text-align: center !important;
    }

    .shortcode-testimonial .shortcode-title,
    .shortcode-testimonial h2,
    .shortcode-testimonial h3,
    .shortcode-testimonial h4,
    .shortcode-testimonial h5 {
        text-align: center !important;
    }

    /* Force the swiper container to render — fixes "testimonials not showing" */
    .shortcode-testimonial .swiper,
    .shortcode-testimonial .swiper-container,
    .shortcode-testimonial .block-testimonials,
    .shortcode-testimonial .container-testimonials,
    .shortcode-testimonial .container-slider,
    .shortcode-testimonial .box-swiper,
    .shortcode-testimonial .swiper-wrapper,
    .shortcode-testimonial .swiper-slide {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: 100% !important;
    }

    .shortcode-testimonial .swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap;
        transform: none !important;
    }

    .shortcode-testimonial .swiper-slide {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 8px;
    }

    .card-testimonial {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        padding: 18px !important;
        border-radius: 14px !important;
    }

    .card-testimonial .card-author,
    .card-testimonial .card-top,
    .card-testimonial .card-bottom {
        justify-content: center !important;
        text-align: center !important;
    }

    .card-testimonial .card-image,
    .card-testimonial .card-rate {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .card-testimonial .card-image img {
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    /* Space after the testimonials section so the next section has breathing room */
    .shortcode-testimonial,
    .shortcode-testimonial.section-box,
    section.shortcode-testimonial {
        margin-bottom: 48px !important;
        padding-bottom: 24px !important;
    }

    /* Add a subtle divider before the next section for visual separation */
    .shortcode-testimonial + section,
    .shortcode-testimonial + .shortcode,
    .shortcode-testimonial + [class*="shortcode-"] {
        margin-top: 16px !important;
    }

    /* ----------------------------------------------------------------------
       24. Mobile "Find a Car" form — homepage top section
       ---------------------------------------------------------------------- */

    /* Only the homepage has the form, so only there do we drop the top
       spacer — internal pages still get the 8px gap from section #4. */
    body:has(.mobile-find-car-form) main {
        padding-top: 0 !important;
    }

    /* Edge-to-edge wrapper: the form should hug the viewport and the
       sticky header, with a distinctive gradient background that
       immediately signals "this is the search section". */
    .mobile-find-car-form {
        display: block;
        margin: 0 0 24px !important;
        padding: 22px 16px 24px !important;
        background:
            radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.10) 0%, transparent 45%),
            radial-gradient(circle at 100% 0%, rgba(29, 78, 216, 0.10) 0%, transparent 50%),
            linear-gradient(180deg, #EFF4FF 0%, #F7F9FF 60%, #FFFFFF 100%);
        border-radius: 0 0 24px 24px;
        box-shadow: 0 8px 24px rgba(37, 99, 235, 0.10);
        box-sizing: border-box;
        position: relative;
        z-index: 1;
    }

    [data-bs-theme="dark"] .mobile-find-car-form {
        background:
            radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.18) 0%, transparent 45%),
            radial-gradient(circle at 100% 0%, rgba(29, 78, 216, 0.15) 0%, transparent 50%),
            linear-gradient(180deg, #131A2B 0%, #161E33 60%, #1A2138 100%);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
    }

    /* Inset card so the form fields stand out from the gradient background */
    .mobile-find-car-form__header,
    .mobile-find-car-form__grid,
    .mobile-find-car-form__submit {
        position: relative;
        z-index: 2;
    }

    .mobile-find-car-form__header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
    }

    .mobile-find-car-form__icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(37, 99, 235, 0.10);
        color: #2563EB;
        border-radius: 12px;
    }

    .mobile-find-car-form__icon svg {
        width: 20px;
        height: 20px;
    }

    .mobile-find-car-form__title {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
        min-width: 0;
    }

    .mobile-find-car-form__title strong {
        font-size: 16px;
        font-weight: 700;
        color: #111827;
    }

    [data-bs-theme="dark"] .mobile-find-car-form__title strong {
        color: #f3f4f6;
    }

    .mobile-find-car-form__title small {
        font-size: 12px;
        color: #6b7280;
        margin-top: 2px;
    }

    .mobile-find-car-form__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .mobile-find-car-form__field {
        display: flex;
        flex-direction: column;
        background: #ffffff;
        border: 1px solid rgba(37, 99, 235, 0.10);
        border-radius: 12px;
        padding: 8px 12px 10px;
        min-width: 0;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    }

    .mobile-find-car-form__field--full {
        grid-column: 1 / -1;
    }

    [data-bs-theme="dark"] .mobile-find-car-form__field {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.07);
    }

    .mobile-find-car-form__field:focus-within {
        border-color: #2563EB;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
        background: #ffffff;
    }

    [data-bs-theme="dark"] .mobile-find-car-form__field:focus-within {
        background: rgba(255, 255, 255, 0.08);
    }

    .mobile-find-car-form__label {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #6b7280;
        margin-bottom: 2px;
    }

    .mobile-find-car-form__label svg {
        width: 12px;
        height: 12px;
        stroke: currentColor;
    }

    .mobile-find-car-form__input {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 30px !important;
        border: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        font-size: 14px !important;
        font-weight: 600;
        color: #111827;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        box-shadow: none !important;
    }

    [data-bs-theme="dark"] .mobile-find-car-form__input {
        color: #f3f4f6;
        color-scheme: dark;
    }

    .mobile-find-car-form__input[type="date"] {
        min-height: 30px !important;
        padding-right: 0 !important;
    }

    /* Custom caret for the select */
    .mobile-find-car-form select.mobile-find-car-form__input {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 0 center !important;
        background-size: 10px 7px !important;
        padding-right: 18px !important;
    }

    .mobile-find-car-form__submit {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100% !important;
        margin-top: 14px;
        min-height: 50px;
        padding: 12px 16px;
        background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
        color: #ffffff;
        font-size: 15px;
        font-weight: 700;
        border: 0;
        border-radius: 12px;
        cursor: pointer;
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.32);
        transition: transform 0.1s ease, box-shadow 0.15s ease;
    }

    .mobile-find-car-form__submit:active {
        transform: translateY(1px);
        box-shadow: 0 4px 10px rgba(37, 99, 235, 0.30);
    }

    .mobile-find-car-form__submit svg {
        width: 20px;
        height: 20px;
        stroke: #ffffff;
    }

    /* ----------------------------------------------------------------------
       25. Popular vehicles — hide filters and apply a different background
       ---------------------------------------------------------------------- */
    /* Kill any horizontal scroll caused by this section */
    html, body {
        overflow-x: hidden !important;
    }

    .shortcode-cars.car-style-popular,
    .shortcode-cars.car-style-popular.section-box,
    .shortcode-cars.car-style-popular.box-flights {
        background:
            radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.08) 0%, transparent 50%),
            radial-gradient(circle at 0% 100%, rgba(29, 78, 216, 0.06) 0%, transparent 50%),
            linear-gradient(180deg, #F1F5FF 0%, #EAF1FF 100%) !important;
        padding: 28px 0 32px !important;
        border-radius: 0 !important;
        margin: 0 0 28px !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    /* Inner container — keep content inside the section's safe area */
    .shortcode-cars.car-style-popular > .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    [data-bs-theme="dark"] .shortcode-cars.car-style-popular,
    [data-bs-theme="dark"] .shortcode-cars.car-style-popular.section-box,
    [data-bs-theme="dark"] .shortcode-cars.car-style-popular.box-flights {
        background:
            radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.18) 0%, transparent 50%),
            radial-gradient(circle at 0% 100%, rgba(29, 78, 216, 0.15) 0%, transparent 50%),
            linear-gradient(180deg, #141B2E 0%, #182238 100%) !important;
    }

    /* Hide the filter dropdown row on mobile (Categories, Fuel, Review, Price) */
    .shortcode-cars.car-style-popular .popular-categories,
    .shortcode-cars.car-style-popular .dropdown.dropdown-filter,
    .shortcode-cars.car-style-popular .row > .col-lg-6:last-child,
    .shortcode-cars.car-style-popular .row > [class*="col-"]:has(.popular-categories) {
        display: none !important;
    }

    /* Make the title column take full width on mobile */
    .shortcode-cars.car-style-popular .row > .col-lg-6:first-child,
    .shortcode-cars.car-style-popular .row > [class*="col-"]:first-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 16px !important;
    }

    .shortcode-cars.car-style-popular .shortcode-title,
    .shortcode-cars.car-style-popular .shortcode-subtitle {
        text-align: center !important;
    }

    .shortcode-cars.car-style-popular .shortcode-title {
        font-size: 20px !important;
        font-weight: 700;
    }

    .shortcode-cars.car-style-popular .shortcode-subtitle {
        font-size: 13px !important;
        color: #4b5563 !important;
    }

    [data-bs-theme="dark"] .shortcode-cars.car-style-popular .shortcode-subtitle {
        color: #cbd5e1 !important;
    }
}

/* Extra-tight adjustments for very small phones */
@media (max-width: 380px) {
    .card-journey-small .card-info,
    .card-flight .card-info { padding: 12px !important; }

    .mobile-bottom-menu__item--center .mobile-bottom-menu__icon {
        width: 46px;
        height: 46px;
    }

    .block-banner-home1 .heading-1,
    .shortcode-hero-banner .shortcode-title { font-size: 22px !important; }
}