/*
 * Mobile bottom dock
 * Edit only this file, save, then hard-refresh (Ctrl+F5) / reinstall PWA if needed.
 *
 * Edge-to-edge: the dock runs flush to the physical bottom of the screen. Safe-area
 * grows the shell height and paints a flat band under the 3D glass. Icons live in a
 * fixed 4.5rem row pinned to the top of that band (bottom: inset) — never items-start
 * on the full tall shell, which left an empty stretch under the icons in PWA mode.
 *
 * The glass platform is 3D-rotated and therefore keeps a constant height; the
 * home-indicator band below it is painted by a flat sibling so the rotation renders
 * the same with and without an inset. Do not fold the inset back into the glass.
 *
 * Main controls:
 *   --dock-height        glass platform height (above the safe-area band)
 *   --dock-perspective   perspective depth
 *   --dock-tilt          larger = shorter top edge
 *   --dock-width-scale   overall trapezoid width (1 = flush with screen sides)
 */

.mobile-dock-nav {
    padding-bottom: 0;
}

.mobile-dock-shell {
    position: relative;
    /* Grow into the home-indicator band so the dock never floats above it. */
    height: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    --dock-count: 5;
    --dock-stagger: 70ms;
    --dock-glass-ms: 300ms;
    --dock-item-ms: 320ms;
}

.mobile-dock-glass-motion {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    transition:
        transform var(--dock-glass-ms) cubic-bezier(0.33, 1, 0.68, 1),
        opacity calc(var(--dock-glass-ms) * 0.9) ease;
    will-change: transform, opacity;
}

/*
 * Home-indicator band. The glass platform is 3D-rotated, so it cannot also cover
 * the safe area: growing a rotateX'd box changes how far its top edge foreshortens,
 * which is why the dock looked squashed and mis-stacked in standalone mode and fine
 * in Safari (where the inset is 0 and the box never grew). This flat, untransformed
 * sibling fills the band instead, in the glass gradient's bottom colour, and rides
 * the same hide/show transform as the platform. Collapses to nothing when the inset
 * is 0.
 */
.mobile-dock-glass-motion::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: env(safe-area-inset-bottom, 0px);
    background: rgb(15 23 42 / 48%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    backdrop-filter: blur(28px) saturate(150%);
}

.dark .mobile-dock-glass-motion::after {
    background: rgb(2 6 23 / 72%);
}

.mobile-dock-glass {
    --dock-height: 3.55rem;
    --dock-perspective: 220px;
    --dock-tilt: 22deg;
    --dock-width-scale: 1;

    position: absolute;
    right: 0;
    left: 0;
    /* Sits on top of the safe-area band, at a fixed height, so the 3D rotation below
       renders identically in browser and standalone mode. The band itself is painted
       by .mobile-dock-glass-motion::after. */
    bottom: env(safe-area-inset-bottom, 0px);
    height: var(--dock-height);
    transform: perspective(var(--dock-perspective))
               rotateX(var(--dock-tilt))
               scaleX(var(--dock-width-scale));
    transform-origin: bottom;

    background: linear-gradient(
        to top,
        rgb(15 23 42 / 48%) 0%,
        rgb(30 64 175 / 25%) 55%,
        rgb(186 230 253 / 10%) 100%
    );

    -webkit-backdrop-filter: blur(28px) saturate(150%);
    backdrop-filter: blur(28px) saturate(150%);

    border: 1px solid rgb(255 255 255 / 22%);
    border-bottom: none;
    border-radius: 14px 14px 0 0;

    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 18%),
        0 -4px 20px rgb(37 99 235 / 12%),
        0 12px 30px rgb(15 23 42 / 16%);
}

.dark .mobile-dock-glass {
    background: linear-gradient(
        to top,
        rgb(2 6 23 / 72%) 0%,
        rgb(30 41 59 / 55%) 50%,
        rgb(51 65 85 / 28%) 100%
    );
    border-color: rgb(148 163 184 / 28%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 10%),
        0 -4px 24px rgb(15 23 42 / 45%),
        0 12px 30px rgb(0 0 0 / 35%);
}

.mobile-dock-items {
    position: absolute;
    inset-inline: 0;
    /* Pin the icon row to the glass band (above the home-indicator). Do not use
       align-items:end — that shoved labels under the physical bottom in browser
       mode (inset 0). start keeps icons+text on the platform like pre-PWA. */
    bottom: env(safe-area-inset-bottom, 0px);
    height: 4.5rem;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    justify-items: center;
    box-sizing: border-box;
    padding-inline: max(0.65rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    padding-bottom: 0.35rem;
    padding-top: 0.2rem;
    column-gap: 0.15rem;
}

.mobile-dock-item {
    display: flex;
    min-width: 0;
    justify-content: center;
    transition:
        transform var(--dock-item-ms) cubic-bezier(0.33, 1, 0.68, 1),
        opacity calc(var(--dock-item-ms) * 0.85) ease;
    will-change: transform, opacity;
}

.mobile-dock-primary-item {
    /* Lift the center FAB above the side icons (larger circle + raised). */
    position: relative;
    top: -14px;
}

.mobile-dock-button {
    display: flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(255 255 255 / 60%);
    border-radius: 9999px;
    color: rgb(51 65 85);
    background: radial-gradient(
        circle at 32% 24%,
        rgb(255 255 255 / 100%) 0%,
        rgb(255 255 255 / 94%) 24%,
        rgb(241 245 249 / 88%) 58%,
        rgb(203 213 225 / 78%) 100%
    );
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    backdrop-filter: blur(12px) saturate(130%);
    box-shadow:
        inset 3px 3px 5px rgb(255 255 255 / 95%),
        inset -3px -4px 6px rgb(100 116 139 / 18%),
        0 1px 1px rgb(255 255 255 / 75%),
        0 5px 12px rgb(15 23 42 / 16%);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.mobile-dock-button i {
    font-size: 1.25rem !important;
}

.mobile-dock-button--primary {
    width: 3.5rem;
    height: 3.5rem;
    color: rgb(15 23 42);
    background: radial-gradient(
        circle at 32% 22%,
        rgb(255 255 255 / 100%) 0%,
        rgb(248 250 252 / 96%) 28%,
        rgb(226 232 240 / 88%) 62%,
        rgb(148 163 184 / 72%) 100%
    );
    border-color: rgb(255 255 255 / 75%);
    box-shadow:
        inset 4px 4px 7px rgb(255 255 255 / 100%),
        inset -4px -5px 8px rgb(71 85 105 / 20%),
        0 1px 1px rgb(255 255 255 / 80%),
        0 7px 18px rgb(15 23 42 / 22%);
}

.mobile-dock-button--primary i {
    font-size: 1.4rem !important;
}

.dark .mobile-dock-button {
    color: rgb(226 232 240);
    border-color: rgb(148 163 184 / 35%);
    background: radial-gradient(
        circle at 32% 24%,
        rgb(71 85 105 / 100%) 0%,
        rgb(51 65 85 / 96%) 28%,
        rgb(30 41 59 / 92%) 62%,
        rgb(15 23 42 / 88%) 100%
    );
    box-shadow:
        inset 2px 2px 4px rgb(255 255 255 / 18%),
        inset -3px -4px 6px rgb(0 0 0 / 35%),
        0 1px 1px rgb(255 255 255 / 12%),
        0 5px 14px rgb(0 0 0 / 40%);
}

.dark .mobile-dock-button--primary {
    color: rgb(255 255 255);
    border-color: rgb(165 180 252 / 45%);
    background: radial-gradient(
        circle at 32% 22%,
        rgb(99 102 241 / 100%) 0%,
        rgb(79 70 229 / 96%) 30%,
        rgb(67 56 202 / 90%) 65%,
        rgb(49 46 129 / 88%) 100%
    );
    box-shadow:
        inset 3px 3px 6px rgb(255 255 255 / 28%),
        inset -3px -4px 7px rgb(0 0 0 / 30%),
        0 1px 1px rgb(255 255 255 / 16%),
        0 8px 20px rgb(79 70 229 / 35%);
}

.mobile-dock-button:active {
    transform: translateY(2px) scale(0.95);
    box-shadow:
        inset 0 2px 3px rgb(15 23 42 / 10%),
        0 1px 4px rgb(15 23 42 / 10%);
}

.mobile-dock-label {
    max-width: 100%;
    overflow: hidden;
    color: rgb(30 27 75);
    font-family: 'Vazirmatn', 'VazirmatnNums', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    /* Thin stroke only — no soft blur halo (blur looked like a white rectangle). */
    text-shadow:
        0 1px 0 rgb(255 255 255 / 70%),
        0 -1px 0 rgb(255 255 255 / 45%),
        1px 0 0 rgb(255 255 255 / 45%),
        -1px 0 0 rgb(255 255 255 / 45%);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .mobile-dock-label {
    color: rgb(248 250 252);
    text-shadow:
        0 1px 2px rgb(2 6 23 / 75%),
        0 0 1px rgb(2 6 23 / 55%);
}

/* ── Auto-hide wave motion ─────────────────────────────────────────────────── */

.mobile-dock--hiding .mobile-dock-glass-motion,
.mobile-dock--hidden .mobile-dock-glass-motion {
    transform: translateY(145%);
    opacity: 0;
}

.mobile-dock--hiding .mobile-dock-item,
.mobile-dock--hidden .mobile-dock-item {
    transform: translateY(160%);
    opacity: 0;
    pointer-events: none;
}

/* Hide & show use the same visual left → right wave (not mirrored on return).
   RTL: DOM index 0 sits on the visual right, so stagger is reversed. */
[dir="rtl"] .mobile-dock--hiding .mobile-dock-item,
.rtl .mobile-dock--hiding .mobile-dock-item,
[dir="rtl"] .mobile-dock--showing .mobile-dock-item,
.rtl .mobile-dock--showing .mobile-dock-item {
    transition-delay: calc(var(--dock-glass-ms) * 0.55 + var(--i, 0) * var(--dock-stagger));
}

[dir="ltr"] .mobile-dock--hiding .mobile-dock-item,
.ltr .mobile-dock--hiding .mobile-dock-item,
[dir="ltr"] .mobile-dock--showing .mobile-dock-item,
.ltr .mobile-dock--showing .mobile-dock-item {
    transition-delay: calc(var(--dock-glass-ms) * 0.55 + (var(--dock-count) - 1 - var(--i, 0)) * var(--dock-stagger));
}

.mobile-dock--showing .mobile-dock-glass-motion {
    transition-delay: 0ms;
}

.mobile-dock--hidden {
    pointer-events: none;
}

.mobile-dock-nav.mobile-dock-nav--inert {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-dock-glass-motion,
    .mobile-dock-item {
        transition: none !important;
        transition-delay: 0ms !important;
    }
}

/*
 * Shared mobile search overlay motion.
 */
.mobile-search-overlay-content,
div:has(> .relative > #mobile-booking-search-input) {
    transform: translateY(0);
    transition:
        transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 220ms ease;
    will-change: transform;
}

.mobile-search-overlay-content--raised {
    transform: translateY(calc(-50dvh + env(safe-area-inset-top) + 5.75rem));
}

div:has(> .relative > #mobile-booking-search-input):has(> .absolute.top-full) {
    transform: translateY(calc(-50dvh + env(safe-area-inset-top) + 5.75rem));
}

.mobile-search-results {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-search-overlay-content,
    div:has(> .relative > #mobile-booking-search-input) {
        transition: none;
    }
}