/* =========================================================================
   Saathora mobile app shell — native-feeling UI under ~1024px
   ========================================================================= */

:root {
    --app-vh: 1vh;
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-tabbar-h: 4.25rem;
    --app-emerald: #059669;
    --app-emerald-dark: #064e3b;
}

html.saathora-app {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

body.saathora-app-body {
    min-height: 100svh;
    min-height: calc(var(--app-vh, 1vh) * 100);
    overscroll-behavior-y: none;
}

/* ---------- Mobile-only chrome ---------- */
@media (max-width: 1023.98px) {
    body.saathora-app-body {
        padding-bottom: calc(var(--app-tabbar-h) + var(--app-safe-bottom) + 0.5rem);
    }

    /* Collapse noisy top utility strip into a slim app status bar */
    .saathora-topbar {
        padding-top: max(0.35rem, var(--app-safe-top));
        padding-bottom: 0.35rem;
        font-size: 10px !important;
    }

    .saathora-topbar .saathora-topbar__contacts {
        display: none !important;
    }

    .saathora-topbar .saathora-topbar__inner {
        justify-content: space-between;
        gap: 0.5rem;
    }

    /* Compact sticky app header */
    .saathora-app-header {
        position: sticky;
        top: 0;
        z-index: 40;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: saturate(1.2) blur(14px);
        -webkit-backdrop-filter: saturate(1.2) blur(14px);
        border-bottom: 1px solid #e7e5e4;
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .saathora-app-header__row {
        min-height: 3.5rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .saathora-app-header img {
        height: 2.5rem !important;
        max-width: 140px !important;
    }

    .saathora-app-header .saathora-header-ctas {
        display: none !important;
    }

    /* Touch-friendlier hamburger */
    .saathora-app-header button[aria-label="Toggle menu"] {
        min-width: 2.75rem;
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Hero search stays usable above the tab bar */
    .saathora-hero {
        padding-bottom: 0.75rem;
    }

    .saathora-hero__stage {
        min-height: 0 !important;
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }

    .saathora-hero__search-row {
        border-radius: 1rem;
    }

    .saathora-hero__submit {
        min-height: 2.85rem;
        width: calc(100% - 1.1rem);
        align-self: stretch;
    }

    .saathora-path__inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Soften long marketing footer on phones */
    footer.saathora-site-footer {
        padding-top: 1.5rem;
        padding-bottom: 1.25rem;
        margin-bottom: 0;
    }

    footer.saathora-site-footer .saathora-footer-grid {
        gap: 1.25rem;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    /* Bottom tab bar */
    .saathora-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: end;
        height: calc(var(--app-tabbar-h) + var(--app-safe-bottom));
        padding: 0.35rem 0.35rem calc(0.35rem + var(--app-safe-bottom));
        background: rgba(255, 255, 255, 0.94);
        border-top: 1px solid rgba(231, 229, 228, 0.95);
        box-shadow: 0 -8px 28px rgba(28, 25, 23, 0.08);
        backdrop-filter: saturate(1.25) blur(16px);
        -webkit-backdrop-filter: saturate(1.25) blur(16px);
    }

    .saathora-tabbar__item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        min-height: 3.1rem;
        padding: 0.25rem 0.15rem;
        color: #78716c;
        text-decoration: none;
        font-family: 'Outfit', sans-serif;
        border-radius: 0.85rem;
        transition: color 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
        -webkit-user-select: none;
        user-select: none;
    }

    .saathora-tabbar__item:active {
        transform: scale(0.96);
        background: rgba(16, 185, 129, 0.08);
    }

    .saathora-tabbar__item.is-active {
        color: var(--app-emerald);
    }

    .saathora-tabbar__icon {
        display: inline-flex;
        width: 1.45rem;
        height: 1.45rem;
    }

    .saathora-tabbar__icon svg {
        width: 100%;
        height: 100%;
    }

    .saathora-tabbar__label {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        line-height: 1;
    }

    .saathora-tabbar__item--book {
        transform: translateY(-0.55rem);
    }

    .saathora-tabbar__item--book:active {
        transform: translateY(-0.55rem) scale(0.96);
    }

    .saathora-tabbar__book {
        width: 3rem;
        height: 3rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #10b981 0%, #059669 100%);
        color: #ffffff;
        box-shadow: 0 10px 22px rgba(5, 150, 105, 0.35);
        border: 3px solid #ffffff;
    }

    .saathora-tabbar__book svg {
        width: 1.35rem;
        height: 1.35rem;
    }

    .saathora-tabbar__item--book .saathora-tabbar__label {
        color: var(--app-emerald-dark);
        margin-top: 0.15rem;
    }

    /* Full-screen sheet feel for booking modal on phones */
    body.saathora-app-body .fixed.inset-0.z-50 > .bg-white.max-w-2xl {
        max-width: 100%;
        width: 100%;
        min-height: 100%;
        border-radius: 0;
        margin: 0;
    }
}

/* Desktop: never show tab bar */
@media (min-width: 1024px) {
    .saathora-tabbar {
        display: none !important;
    }
}

/* Installed PWA / Add to Home Screen */
html.saathora-standalone body.saathora-app-body,
body.is-standalone.saathora-app-body {
    /* Extra breathing room under notch / home indicator */
    padding-top: 0;
}

@media (max-width: 1023.98px) {
    html.saathora-standalone .saathora-topbar {
        padding-top: max(0.5rem, var(--app-safe-top));
    }
}