/* ============================================================
   responsive.css — Mobile & tablet fixes for London Wheels Limo
   Loaded after custom.css to override where needed.
   Breakpoints: 991px | 767px | 480px (new) | 375px (new)
   ============================================================ */

/* ── Global base fixes ───────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { overflow-x: hidden; max-width: 100%; }

img { max-width: 100%; height: auto; }

/* Prevent any fixed-width element from causing horizontal scroll */
.container { padding-left: 16px; padding-right: 16px; }

/* intl-tel-input always block-level */
.iti { display: block !important; width: 100% !important; }
.iti .form-control { width: 100% !important; }

/* Fleet pricing table scrollable on all screen sizes */
.fleet-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Inline car image heights — override rigid values */
.fleet-car-img img {
    max-height: 130px;
    width: auto;
    margin: 0 auto;
    display: block;
}

/* Blog body images always full width */
.page-single-image,
.blogbodyimg {
    width: 100%;
}
.page-single-image figure,
.blogbodyimg figure {
    width: 100%;
    margin: 0;
}


/* Booking tabs — base */
.booking-tabs { flex-wrap: wrap; }

/* Contact form button row */
.contact-form-btn {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* ── 1024px — hide desktop nav when SlickNav is active ──────── */
@media only screen and (max-width: 1024px) {
    .main-menu { display: none !important; }
}

/* ── 991px — Tablets / small desktops ───────────────────────── */
@media only screen and (max-width: 991px) {

    /* Page banner */
    .page-header {
        min-height: 340px;
        padding: 120px 0 60px !important;
    }
    .page-header h1 { font-size: 32px; }
    .page-header .lead { font-size: 15px; }

    /* Blog / event / tour body — full-width column */
    .page-service-single .col-lg-10 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* Blog meta row — wrap on tablet */
    .blog-meta {
        flex-wrap: wrap !important;
        gap: 8px 16px !important;
        font-size: 0.88rem !important;
    }

    /* Booking tabs */
    .booking-tabs { gap: 0; }
    .booking-tab { font-size: 0.88rem; padding: 10px 12px; }

    /* Get-a-quote sidebar spacing */
    .contact-us-box { margin-top: 40px; }

    /* Section title adjustments for mid-size */
    .section-title h2 { font-size: 32px; }

    /* Services tab — ensure content visible */
    .how-work-tab-content { padding: 20px 0; }

    /* Services tab nav — horizontal scroll on tablet */
    .how-work-nav-elite {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px;
    }
    .how-work-nav-elite ul {
        flex-wrap: nowrap;
        min-width: max-content;
        gap: 8px;
    }
    .how-work-nav-elite ul li {
        width: auto;
        flex: 0 0 auto;
        margin-bottom: 0;
    }
    .how-work-nav-elite ul li .nav-link {
        font-size: 14px;
        padding: 10px 14px;
        white-space: nowrap;
    }
    .how-work-nav-elite .sertab { margin-top: 10px; display: block; text-align: center; }

    /* Footer */
    .main-footer { padding: 60px 0 0; }
    .footer-logo { border-right: none !important; padding-right: 0 !important; }
    .footer-links { max-width: 100% !important; }
    .footer-contact-links { max-width: 100% !important; }
}

/* ── 767px — Mobile ──────────────────────────────────────────── */
@media only screen and (max-width: 767px) {

    /* ── Topbar ── */
    .topbar { padding: 8px 0; }
    .topbar .row { flex-direction: column; align-items: flex-start !important; }
    .topbar .col-md-6,
    .topbar .col-lg-7,
    .topbar .col-lg-5 { width: 100%; max-width: 100%; flex: 0 0 100%; }
    .topbar-contact-info ul {
        gap: 4px 12px;
        flex-wrap: wrap;
    }
    .topbar-contact-info ul li { font-size: 12px; }
    .topbar-social-links { display: none !important; }

    /* ── Page banner ── */
    .page-header {
        min-height: 260px;
        padding: 100px 0 50px !important;
    }
    .page-header h1 { font-size: 26px !important; }
    .page-header .lead { font-size: 14px; margin-top: 8px !important; }
    .lead { width: 100% !important; }

    /* ── Navigation ── */
    .navbar-brand img { max-height: 60px; }
    .header-btn { display: none !important; }
    .navbar { padding-top: 8px !important; padding-bottom: 8px !important; }

    /* ── Hero section (homepage) ── */
    .hero-metal { padding: 100px 0 40px !important; }
    .hero-metal .hero-image-metal { margin-top: 24px; }
    .hero-metal .contact-form { margin-top: 0; }
    #contactForm .row { gap: 0; }

    /* ── Blog / service single pages ── */
    .page-service-single { padding: 40px 0; }
    .page-service-single .col-lg-10 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding: 0 8px;
    }
    .blog-meta {
        flex-direction: column !important;
        gap: 4px !important;
        font-size: 0.80rem !important;
        margin-bottom: 20px !important;
    }
    .blog-meta span { display: flex; align-items: center; gap: 5px; }

    /* ── Fleet carousel ── */
    .fleet-car-img img { max-height: 110px; }
    .fleet-table td,
    .fleet-table th {
        font-size: 0.78rem !important;
        padding: 6px 8px !important;
        white-space: nowrap;
    }
    .fleet-table-wrap { border-radius: 4px; }
    .fleet-nav { width: 36px; height: 36px; font-size: 14px; }

    /* ── Section titles ── */
    .section-title h2 { font-size: 26px; }
    .section-title h3 { font-size: 14px; }
    .section-title p  { font-size: 14px; }

    /* ── Buttons ── */
    .btn-default {
        font-size: 14px;
        padding: 14px 40px 14px 18px;
    }

    /* ── Forms ── */
    .form-control,
    .form-control:focus {
        font-size: 15px;
        padding: 10px 14px;
    }
    select.form-control { font-size: 15px; }
    .form-label { font-size: 13px; margin-bottom: 4px; }

    /* intl-tel-input phone field */
    .iti { width: 100% !important; }
    .iti input[type=tel] { padding-left: 52px !important; }

    /* Booking type tabs */
    .booking-tabs { border-radius: 6px; overflow: hidden; }
    .booking-tab {
        flex: 1 1 45%;
        font-size: 0.82rem;
        padding: 9px 8px;
        text-align: center;
    }

    /* Checkbox labels */
    .checkbox-label { align-items: flex-start; gap: 8px; }
    .checkbox-text  { font-size: 13px; }

    /* Contact preference radios */
    .selc { font-size: 13px; }
    .custom-radio { font-size: 14px; margin-right: 10px; }

    /* Contact sidebar */
    .contact-us-box { margin-top: 30px; }
    .contact-info-item { gap: 12px; margin-bottom: 16px; }
    .contact-info-item h3 { font-size: 15px; margin-bottom: 2px; }
    .contact-info-item p  { font-size: 13px; margin-bottom: 0; }
    .contact-us-box-content h3 { font-size: 17px; }

    /* Submit button row */
    .contact-form-btn {
        flex-direction: column;
        align-items: flex-start;
    }
    .contact-form-btn .btn-default,
    .contact-form-btn .whatsapp-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* ── Tour destination cards ── */
    .team-item-image figure img {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
        object-fit: cover;
    }

    /* ── Event cards ── */
    .event-card-img img,
    .blog-post-image img {
        width: 100%;
        height: auto;
    }

    /* ── FAQ accordion ── */
    .accordion-button { font-size: 14px; padding: 12px 14px; }
    .accordion-body    { font-size: 14px; padding: 12px 14px; }

    /* ── Footer ── */
    .main-footer { padding: 40px 0 20px; }
    .footer-logo { margin-bottom: 20px; border-right: none !important; padding-right: 0 !important; }
    .footer-links { max-width: 100% !important; }
    .footer-contact-links { max-width: 100% !important; }
    .footer-links ul li { margin-bottom: 6px; }
    .footer-links h3  { font-size: 16px; margin-bottom: 10px; }
    .footer-links a   { font-size: 13px; }
    .footer-copyright {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding: 20px 0;
        margin-top: 20px;
        font-size: 12px;
    }
    .footer-privacy-policy ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 16px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* ── Pricing benefit list ── */
    .pricing-benefit-list-elite ul {
        flex-direction: column;
        gap: 10px;
    }
    .pricing-benefit-list-elite ul li { font-size: 13px; }

    /* ── Services tab nav — stack vertically on mobile ── */
    .how-work-nav-elite { overflow-x: visible; padding: 16px; }
    .how-work-nav-elite ul {
        flex-direction: column;
        flex-wrap: wrap;
        min-width: 0;
        gap: 6px;
    }
    .how-work-nav-elite ul li {
        width: 100%;
        flex: 0 0 100%;
    }
    .how-work-nav-elite ul li .nav-link {
        font-size: 14px !important;
        padding: 10px 16px !important;
        white-space: normal;
    }
    .how-work-nav-elite .sertab { margin-top: 12px; display: block; }

    /* ── Services footer list — wrap ── */
    .how-work-footer-elite {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: flex-start !important;
    }
    .how-work-footer-list-elite ul {
        flex-wrap: wrap;
        gap: 8px 16px;
    }
    .how-work-footer-list-elite ul li { font-size: 12px; }

    /* ── Why choose us — stack cards ── */
    .why-choose-item-elite { width: 100%; }
}

/* ── 480px — Small phones (NEW) ─────────────────────────────── */
@media only screen and (max-width: 480px) {

    /* Global typography */
    body { font-size: 14px; }

    h1 { font-size: 24px !important; }
    h2 { font-size: 21px; }
    h3 { font-size: 17px; }

    /* Section titles */
    .section-title h2,
    h2.text-anime-style-3 { font-size: 21px !important; }
    .section-title h3 { font-size: 13px; }
    .section-title p  { font-size: 13px; }

    /* Page banner */
    .page-header {
        min-height: 220px;
        padding: 85px 0 40px !important;
    }
    .page-header .page-header-box { padding: 20px 0 !important; }
    .page-header h1 { font-size: 22px !important; line-height: 1.25; }
    .page-header .lead { font-size: 13px !important; }

    /* Banner CTA (bannercts) buttons */
    .bannercts { flex-direction: column; align-items: center; gap: 12px; margin: 20px 0; }
    .bannercts .hero-btn,
    .bannercts .btn-default { width: 100%; text-align: center; justify-content: center; }

    /* Buttons */
    .btn-default {
        font-size: 13px !important;
        padding: 12px 36px 12px 14px !important;
    }
    .btn-default::before { right: 14px; }

    /* Topbar */
    .topbar { padding: 6px 0; }
    .topbar-contact-info ul { gap: 3px 8px; }
    .topbar-contact-info ul li { font-size: 11px; }
    .topbar-contact-info ul li img { max-width: 14px; margin-right: 5px; }

    /* Booking tabs — stack vertically on small phones */
    .booking-tabs { flex-direction: column; border-radius: 6px; }
    .booking-tab {
        flex: 1 1 100%;
        border-right: none !important;
        border-bottom: 1px solid #ddd;
        border-radius: 0;
        font-size: 14px;
        padding: 11px 14px;
        text-align: left;
    }
    .booking-tab:last-child { border-bottom: none; }
    .booking-tab.active { border-bottom: 1px solid transparent; }

    /* Forms */
    .form-group { margin-bottom: 14px !important; }
    .form-label { font-size: 12px; }
    .form-control,
    select.form-control,
    textarea.form-control {
        font-size: 14px;
        padding: 9px 12px;
    }
    .iti input[type=tel] { font-size: 14px; }

    /* Checkboxes */
    .quote-checkbox { width: 16px; height: 16px; }
    .checkbox-text  { font-size: 12px; }

    /* Custom radio */
    .custom-radio { font-size: 13px; padding-left: 22px; margin-right: 8px; }
    .custom-radio::before { width: 16px; height: 16px; }
    .custom-radio::after  { width: 7px; height: 7px; left: 4.5px; top: 5.5px; }

    /* Fleet table */
    .fleet-table td,
    .fleet-table th {
        font-size: 0.72rem !important;
        padding: 5px 6px !important;
    }
    .table-note, .vat-note { font-size: 0.65rem !important; }

    /* Contact info items */
    .contact-info-item { gap: 10px; }
    .contact-info-item h3 { font-size: 14px; }
    .contact-info-item p  { font-size: 12px; }

    /* Blog/event/tour body text */
    .service-entry p,
    .service-entry li { font-size: 14px; line-height: 1.65; }
    .service-entry h2 { font-size: 19px; margin-top: 24px; }

    /* FAQ */
    .accordion-button { font-size: 13px; padding: 10px 12px; }
    .accordion-body    { font-size: 13px; padding: 10px 12px; }

    /* Footer */
    .footer-links h3  { font-size: 15px; }
    .footer-links a   { font-size: 12px; }
    .footer-copyright { font-size: 11px; }

    /* Services tab — smaller font on small phones */
    .how-work-nav-elite ul li .nav-link { font-size: 13px !important; padding: 9px 12px !important; }
}

/* ── 375px — Very small phones (NEW) ────────────────────────── */
@media only screen and (max-width: 375px) {

    .container { padding-left: 12px; padding-right: 12px; }

    /* Navbar logo */
    .navbar-brand img { max-height: 45px !important; }

    /* Page banner */
    .page-header { min-height: 200px; padding: 75px 0 35px !important; }
    .page-header h1 { font-size: 19px !important; }
    .page-header .lead { font-size: 12px !important; }

    /* Buttons */
    .btn-default {
        font-size: 12px !important;
        padding: 11px 30px 11px 13px !important;
    }

    /* Section title */
    .section-title h2,
    h2.text-anime-style-3 { font-size: 18px !important; }

    /* Fleet */
    .fleet-table td,
    .fleet-table th { font-size: 0.68rem !important; padding: 4px 5px !important; }

    /* Forms */
    .form-control,
    select.form-control { font-size: 13px; padding: 8px 10px; }
    .form-label { font-size: 11px; }

    /* Topbar */
    .topbar-contact-info ul li { font-size: 10.5px; }
}