/* UI fixes (next) — loaded LAST so it overrides. Keep additive & isolated. */

/* ============================================================
   #3 — Prevent iOS "zoom on focus": any focusable text field
   must render at >= 16px on mobile, otherwise Safari zooms in.
   ============================================================ */
@media (max-width: 767px) {
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input:not([type]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ============================================================
   #2 — Mobile content width ~98% on the BOOKING page.
   The real width cap lives on these inner shells (max-width:384px),
   not on .booking-checkout — so we widen the shells directly.
   ============================================================ */
@media (max-width: 767px) {
    body:has(.booking-checkout) {
        --booking-checkout-page-width: 98% !important;
        --booking-checkout-footer-width: 98% !important;
    }

    /* outer width container + page header/footer → 98% of viewport */
    body:has(.booking-checkout) .booking-checkout,
    body:has(.booking-checkout) .public-header.is-home-shell .container,
    body:has(.booking-checkout) .public-footer.is-home-shell > .container {
        width: 98% !important;
        max-width: 98% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* inner shells fill the 98% container (avoid 98%-of-98% = 96%) */
    body:has(.booking-checkout) .booking-checkout__shell,
    body:has(.booking-checkout) .booking-checkout__progress-shell {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* thank-you / booking-success page content (capped at 391px) */
    .booking-success__container {
        width: 98% !important;
        max-width: 98% !important;
    }
}

/* ============================================================
   #5 — Mobile content width ~98% in the personal CABINET.
   The caps live on .cabinet-next (391px) + hero (384px) + tabs (375px).
   ============================================================ */
@media (max-width: 767px) {
    .cabinet-next {
        width: 98% !important;
        max-width: 98% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .cabinet-next__hero,
    .cabinet-next-mobile-tabs {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   #3b — Thank-you ROUTE block on mobile: render as the horizontal
   "search card" style (dates on top, big times, cities, stations
   below, dashed line + bus marker in the centre, duration above)
   instead of the old fixed-width absolute layout that overlapped
   ("склеилось"). A flexible 3-column grid (depart | centre | arrive)
   fits cleanly down to 320px.
   DOM order inside .booking-success__route-body: depart → center → arrive.
   ============================================================ */
@media (max-width: 767px) {
    .booking-success__route-body {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(96px, 32%) minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 4px !important;
        position: static !important;
        min-height: 0 !important;
        padding: 18px 12px !important;
    }

    .booking-success__route-point {
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }

    /* arrival column right-aligned (mirror of departure) */
    .booking-success__route-point:last-child {
        text-align: right !important;
    }

    .booking-success__route-center {
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        order: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* show the horizontal dashed line + bus marker again */
    .booking-success__route-line {
        display: block !important;
    }

    /* prominent outline dots at both ends of the line (match the search card) */
    .booking-success__route-line::before,
    .booking-success__route-line::after {
        width: 12px !important;
        height: 12px !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 2px solid #40a6ff !important;
        border-radius: 50% !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 3 !important;
    }

    .booking-success__route-line::before {
        left: -4px !important;
        right: auto !important;
    }

    .booking-success__route-line::after {
        right: -4px !important;
        left: auto !important;
    }

    .booking-success__route-duration {
        transform: none !important;
        white-space: nowrap !important;
    }

    /* scale type so the two columns + centre fit narrow screens */
    .booking-success__route-time {
        font-size: 23px !important;
    }

    .booking-success__route-city {
        font-size: 17px !important;
    }

    .booking-success__route-day,
    .booking-success__route-station,
    .booking-success__route-duration {
        font-size: 11px !important;
    }
}

/* ============================================================
   #4 — Thank-you page: the "Отменить бронирование" CTA was glued
   to the footer (mobile rule sets padding-bottom:0). Add breathing room.
   ============================================================ */
@media (max-width: 767px) {
    .booking-success {
        padding-bottom: 28px !important;
    }

    .booking-success__cancel-cta {
        margin-bottom: 6px !important;
    }
}

/* ============================================================
   #1 — Homepage date calendar: bind it to the field & fix z-index.
   On mobile the desktop rule (left:573px) + conflicting bottom-sheet
   rules left it mispositioned with content showing through. Force a
   clean centered modal above everything, with a backdrop.
   Scoped to body.is-public-home so the schedule/ticket page (which
   works and is body.is-public-inner) is untouched.
   ============================================================ */
@media (max-width: 767px) {
    /* dim backdrop while the date calendar is open */
    body.is-public-home .figma-home-search.is-panel-date::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(13, 27, 62, 0.5);
        z-index: 2147483640;
    }

    /* the calendar itself — centered, opaque, on top of everything */
    body.is-public-home .figma-home-search__panel[data-home-search-panel="date"].is-open {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(360px, 92vw) !important;
        max-width: 360px !important;
        max-height: 86vh !important;
        overflow: auto !important;
        z-index: 2147483646 !important;
        background: #fff !important;
        border-radius: 18px !important;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45) !important;
        padding: 18px !important;
    }
}

/* ============================================================
   #6 — Login/Register promo: the phone-mockup image was absolutely
   positioned on the right and overlapped the text/tabs on mobile
   (the 3rd tab "Поездки" was hidden). Stack the image below the
   content (in-flow, centered) and keep it above the gradient overlay
   (relative + z-index, since a static element ignores z-index).
   ============================================================ */
@media (max-width: 767px) {
    .customer-login__promo {
        min-height: 0 !important;
        padding-bottom: 14px !important;
    }

    .customer-login__promo-content {
        width: 100% !important;
    }

    .customer-login__promo-visual {
        position: relative !important;
        z-index: 2 !important;
        width: min(230px, 70%) !important;
        margin: 14px auto 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
    }
}