/* =====================================================================
   Public site: phone/tablet app chrome (<= 991px)
   Fixed top bar (.hv2-mbar) + fixed bottom tab bar (.hv2-tabbar), the same
   pattern as the customer web app and the Flutter apps. Markup:
   resources/views/layouts/landing/partials/mobile-chrome.blade.php.
   Brand colour: --hv2-blue / --hv2-blue-2 / --hv2-cyan (BrandTheme overrides them).
   Desktop (>= 992px) is untouched: everything here is hidden there.
   ===================================================================== */

:root {
    --hv2-mbar-h: 58px;
    --hv2-tabbar-h: 64px;
    --hv2-safe-top: env(safe-area-inset-top, 0px);
    --hv2-safe-bottom: env(safe-area-inset-bottom, 0px);
    --hv2-tabbar-bg: rgba(7, 17, 38, .92);
    --hv2-tabbar-solid: #071126;
    --hv2-tab-muted: #8a9bbd;
}
html[data-theme="light"] {
    --hv2-tabbar-bg: rgba(255, 255, 255, .92);
    --hv2-tabbar-solid: #ffffff;
    --hv2-tab-muted: #6b7894;
}

.hv2-mbar, .hv2-tabbar, .hv2-mprefs { display: none; }

@media (max-width: 991px) {
    /* ---------- Desktop header + drawer menu are replaced by the app chrome ---------- */
    .hv2--mchrome .hv2-header,
    .hv2--mchrome .hv2-nav-backdrop { display: none !important; }

    body.hv2--mchrome,
    body.hv2--mchrome.hv2--fixed-header {
        padding-top: calc(var(--hv2-mbar-h) + var(--hv2-safe-top));
        padding-bottom: calc(var(--hv2-tabbar-h) + var(--hv2-safe-bottom));
    }
    .hv2--mchrome [id] { scroll-margin-top: calc(var(--hv2-mbar-h) + var(--hv2-safe-top) + 12px); }
    body.hv2--mchrome { overflow-x: hidden; }
    @supports (overflow: clip) { body.hv2--mchrome { overflow-x: clip; } }

    /* ---------- Top bar ---------- */
    .hv2-mbar {
        /* always the dark navy surface, like the desktop header (the logos are made for it) */
        --hv2-text: #ffffff;
        --hv2-text-soft: #d3ddef;
        --hv2-border: rgba(96, 141, 255, .16);
        --hv2-tile-bg: rgba(255, 255, 255, .07);
        color-scheme: dark;
        display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 1035;
        padding-top: var(--hv2-safe-top);
        background: rgba(5, 13, 31, .86);
        -webkit-backdrop-filter: saturate(160%) blur(14px);
        backdrop-filter: saturate(160%) blur(14px);
        border-bottom: 1px solid var(--hv2-border);
        color: var(--hv2-text);
        transition: box-shadow .2s ease, background .2s ease;
    }
    .hv2-mbar.is-scrolled { background: rgba(5, 13, 31, .96); box-shadow: 0 6px 20px rgba(0, 0, 0, .28); }
    html[data-theme="light"] .hv2-mbar.is-scrolled { box-shadow: 0 6px 20px rgba(15, 40, 100, .18); }
    .hv2-mbar__inner {
        display: flex; align-items: center; gap: 8px;
        height: var(--hv2-mbar-h); padding: 0 12px 0 16px;
    }
    .hv2-mbar--inner .hv2-mbar__inner { padding-left: 8px; }
    .hv2-mbar__logo { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; margin-right: auto; }
    .hv2-mbar__logo img { height: 32px; width: auto; max-width: 140px; object-fit: contain; object-position: left center; }
    [dir="rtl"] .hv2-mbar__logo { margin-right: 0; margin-left: auto; }
    [dir="rtl"] .hv2-mbar__logo img { object-position: right center; }
    .hv2-mbar__title {
        flex: 1 1 auto; min-width: 0; margin: 0;
        font-size: 17px; font-weight: 600; line-height: 1.2; color: var(--hv2-text);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize;
    }
    .hv2-mbar__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; }
    [dir="rtl"] .hv2-mbar__actions { margin-left: 0; margin-right: auto; }
    .hv2 .hv2-mbar__btn,
    .hv2-mbar .hv2-theme-toggle {
        width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
        display: grid; place-items: center; font-size: 22px; line-height: 1;
        background: transparent; border: 0; color: var(--hv2-text); cursor: pointer;
        transition: background .15s ease;
    }
    .hv2 .hv2-mbar__btn:hover, .hv2 .hv2-mbar__btn:focus-visible,
    .hv2-mbar .hv2-theme-toggle:hover { background: var(--hv2-tile-bg); color: var(--hv2-text); transform: none; }
    .hv2-mbar__btn:active { background: rgba(255, 255, 255, .12); }
    [dir="rtl"] .hv2-mbar__back i { transform: scaleX(-1); }

    /* ---------- Bottom tab bar ---------- */
    .hv2-tabbar {
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
        height: calc(var(--hv2-tabbar-h) + var(--hv2-safe-bottom));
        padding: 0 4px var(--hv2-safe-bottom);
        background: var(--hv2-tabbar-bg);
        -webkit-backdrop-filter: saturate(160%) blur(14px);
        backdrop-filter: saturate(160%) blur(14px);
        border-top: 1px solid var(--hv2-border);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
    }
    html[data-theme="light"] .hv2-tabbar { box-shadow: 0 -6px 20px rgba(15, 40, 100, .08); }
    .hv2 .hv2-tabbar__item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        height: var(--hv2-tabbar-h); min-width: 0; padding: 6px 2px;
        color: var(--hv2-tab-muted); text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .hv2-tabbar__icon { display: grid; place-items: center; width: 44px; height: 28px; border-radius: 999px; font-size: 24px; line-height: 1; transition: background .15s ease; }
    .hv2-tabbar__label {
        max-width: 100%; font-size: 11.5px; font-weight: 500; line-height: 1.1;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .hv2 .hv2-tabbar__item:hover { color: var(--hv2-text); }
    .hv2 .hv2-tabbar__item.is-active { color: var(--hv2-blue-2); }
    .hv2-tabbar__item.is-active .hv2-tabbar__icon { background: rgba(31, 123, 255, .14); }
    .hv2-tabbar__item.is-active .hv2-tabbar__icon { background: color-mix(in srgb, var(--hv2-blue) 16%, transparent); }
    .hv2-tabbar__item.is-active .hv2-tabbar__label { font-weight: 600; }
    html[data-theme="light"] .hv2 .hv2-tabbar__item.is-active,
    html[data-theme="light"] .hv2-tabbar__item.is-active { color: var(--hv2-blue); }

    /* centre "Book": raised round primary button with its label underneath */
    .hv2 .hv2-tabbar__item--book { justify-content: flex-end; padding-bottom: 8px; color: var(--hv2-text); }
    .hv2-tabbar__item--book .hv2-tabbar__icon {
        width: 56px; height: 56px; margin-top: -26px; border-radius: 50%; font-size: 26px; color: #fff;
        background: linear-gradient(135deg, var(--hv2-blue), var(--hv2-blue-2));
        border: 4px solid var(--hv2-tabbar-solid);
        box-shadow: 0 8px 20px rgba(31, 123, 255, .4);
        box-shadow: 0 8px 20px color-mix(in srgb, var(--hv2-blue) 45%, transparent);
        transition: transform .15s ease;
    }
    .hv2-tabbar__item--book:active .hv2-tabbar__icon { transform: scale(.94); }
    .hv2-tabbar__item--book .hv2-tabbar__label { font-weight: 600; }

    /* ---------- Theme + language row (what the desktop header had) ---------- */
    .hv2-mprefs { display: block; background: #040a18; border-top: 1px solid var(--hv2-border); color-scheme: dark; }
    .hv2-mprefs__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 12px; padding-bottom: 14px; }
    .hv2-mprefs__item {
        display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px;
        border-radius: 999px; border: 1px solid rgba(96, 141, 255, .16); background: rgba(255, 255, 255, .05);
        color: #d3ddef; font-size: 13px; cursor: pointer;
    }
    .hv2-mprefs__item i { font-size: 18px; }
    .hv2-mprefs__item .la-sun { display: none; color: var(--hv2-amber); }
    html[data-theme="light"] .hv2-mprefs__item .la-sun { display: inline; }
    html[data-theme="light"] .hv2-mprefs__item .la-moon { display: none; }

    /* ---------- Page layouts inside the chrome ---------- */
    .hv2--mchrome .container { padding-left: 16px; padding-right: 16px; }

    /* compact inner-page head: the top bar already has the back button + title */
    .hv2-page-hero, .hv2-page-hero--gradient { padding: 22px 0 40px; }
    .hv2-page-hero .hv2-breadcrumb { display: none; }
    .hv2-page-hero__title { margin-top: 0 !important; font-size: clamp(24px, 6.6vw, 32px); line-height: 1.15; }
    .hv2-page-hero__subtitle { font-size: 14px; margin-top: 8px !important; }
    .hv2-page-hero__icon {
        width: 52px; height: 52px; margin: 0 auto 12px; font-size: 26px; border-radius: 16px;
        background: linear-gradient(135deg, var(--hv2-blue), var(--hv2-cyan));
    }
    .hv2-page-hero__meta { margin-top: 14px !important; gap: 8px; }
    .hv2-page-hero__meta li { font-size: 12px; padding: 4px 10px; }

    /* sections + headings */
    .hv2-heading { margin-bottom: 22px; }
    .hv2-heading h2 { font-size: clamp(22px, 6vw, 28px); }

    /* rounded 14-18px cards everywhere */
    .hv2-service, .hv2-city, .hv2-review, .hv2-contact-card, .hv2-module { border-radius: 16px; }
    .hv2-story__media, .hv2-story__text, .hv2-story__cta, .hv2-steps,
    .hv2-legal__toc, .hv2-legal__footer, .hv2-legal__notice,
    .hv2-prose, .hv2-page__card, .hv2-contact__info, .hv2-why, .hv2-cta { border-radius: 18px; }
    .hv2-legal__toc, .hv2-support__help, .hv2-page__aside { top: calc(var(--hv2-mbar-h) + var(--hv2-safe-top) + 12px); }
    .hv2-prose--legal h2, .hv2-prose--legal h3 { scroll-margin-top: calc(var(--hv2-mbar-h) + var(--hv2-safe-top) + 12px); }

    /* footer: compact, ends above the tab bar (body padding) */
    .hv2-newsletter { padding: 20px 0; }
    .hv2-footer { padding-top: 30px; }
    .hv2-footer__grid { gap: 22px 16px; }
    .hv2-footer__bottom { margin-top: 22px; padding-bottom: 14px; }

    /* toasts and other bottom-fixed widgets sit above the tab bar */
    #toast-container.toast-bottom-right, #toast-container.toast-bottom-left,
    #toast-container.toast-bottom-center, #toast-container.toast-bottom-full-width {
        bottom: calc(var(--hv2-tabbar-h) + var(--hv2-safe-bottom) + 12px);
    }
    #toast-container.toast-top-right, #toast-container.toast-top-left,
    #toast-container.toast-top-center, #toast-container.toast-top-full-width {
        top: calc(var(--hv2-mbar-h) + var(--hv2-safe-top) + 8px);
    }
}

@media (max-width: 767px) {
    .hv2-section { padding: 36px 0; }
    .hv2-section.pt-0 { padding-top: 0; }
    .hv2-story__text, .hv2-contact__info, .hv2-prose { padding: 20px 16px; }
    .hv2-story__cta { padding: 22px 18px; margin-top: 28px; }
    .hv2-steps { padding: 20px 18px; }
}

@media (max-width: 575px) {
    .hv2-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hv2-footer__brand { grid-column: 1 / -1; }
    .hv2-story__stats li { padding: 16px 10px; }
    .hv2-story__stats strong { font-size: 22px; }
    .hv2-story__feature { padding: 18px 12px; }
}

@media (max-width: 360px) {
    .hv2-mbar__inner { padding-right: 6px; gap: 4px; }
    .hv2-mbar__logo img { max-width: 112px; height: 28px; }
    .hv2 .hv2-mbar__btn, .hv2-mbar .hv2-theme-toggle { width: 40px; height: 44px; font-size: 21px; }
    .hv2-tabbar__label { font-size: 10.5px; }
    .hv2-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Printing: no app chrome */
@media print {
    .hv2-mbar, .hv2-tabbar, .hv2-mprefs { display: none !important; }
    body.hv2--mchrome { padding: 0 !important; }
}