/*
 * Mobile dock — floating pill
 *
 * Soft surface bar (card-adjacent, not a second brand block). Inactive slots are quiet
 * ink icons; the current one expands into a pale primary tint — enough to read, not a
 * saturated chip fighting the page. Dark mode lifts one step above the canvas without a
 * heavy black halo.
 *
 * Two states beyond resting:
 *   .saf-dock--condensed  while the page is scrolling — the bar shrinks toward its own
 *                         centre so it covers less of what is moving past. One transform,
 *                         so a scroll listener never touches layout.
 *   .saf-dock--hidden     for overlays that own the screen.
 *
 * The nav itself is click-through; only the bar takes pointer events, so the gutters beside
 * it belong to the page.
 */

.saf-dock {
    pointer-events: none;
}

.saf-dock-viewport {
    padding-inline: 0.75rem;
    padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
}

.saf-dock-bar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.125rem;
    box-sizing: border-box;
    height: 3.5rem;
    padding-inline: 0.3125rem;
    border-radius: 9999px;

    /* Soft white — lighter lift than cards so the dock floats without shouting. */
    background: rgb(255 255 255 / 92%);
    border: 1px solid rgb(226 232 240 / 80%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 6px 18px -8px rgb(15 23 42 / 12%),
        0 1px 3px rgb(15 23 42 / 4%);

    transform-origin: bottom center;
    transition:
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 220ms ease;
    will-change: transform;
}

.dark .saf-dock-bar {
    /* safline-surface-dark family — quieter than secondary-700 slate. */
    background: rgb(21 32 51 / 92%);
    border-color: rgb(255 255 255 / 9%);
    box-shadow:
        0 8px 22px -10px rgb(0 0 0 / 40%),
        inset 0 0 0 1px rgb(255 255 255 / 4%);
}

/* ── Slots ─────────────────────────────────────────────────────────────────── */

.saf-dock-slot {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 2.75rem;
    height: 2.75rem;
    padding-inline: 0.5rem;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    /* safline-ink-400 — quieter resting icons */
    color: #94A3B8;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color 220ms ease,
        color 220ms ease,
        padding-inline 300ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 150ms ease;
}

.saf-dock-slot:hover {
    /* safline-ink-500 */
    color: #64748B;
    background: rgb(245 248 250 / 80%);
}

.saf-dock-slot:focus-visible {
    outline: none;
    /* Ring inside the bar — an outside ring is clipped by the pill's own radius. */
    box-shadow: inset 0 0 0 2px rgb(0 126 168 / 35%);
}

.saf-dock-slot:active {
    transform: scale(0.94);
}

.saf-dock-slot-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.saf-dock-slot-label {
    min-width: 0;
    max-width: 0;
    margin-inline-start: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: 'Vazirmatn', 'VazirmatnNums', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    transition:
        max-width 300ms cubic-bezier(0.22, 1, 0.36, 1),
        margin-inline-start 300ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 200ms ease;
}

.saf-dock-slot--active,
.saf-dock-slot--primary:focus {
    /* The only slot allowed to give width back. Five slots plus a long label would otherwise
       push the bar wider than the screen rather than trimming the one label that can spare it. */
    flex: 0 1 auto;
    padding-inline: 0.875rem;
}

.saf-dock-slot--active .saf-dock-slot-label,
.saf-dock-slot--primary:focus .saf-dock-slot-label {
    max-width: 8rem;
    margin-inline-start: 0.4rem;
    opacity: 1;
}

/* Active place: pale primary wash — readable, not a saturated brand block. */
.saf-dock-slot--active {
    background: rgb(0 126 168 / 8%);
    color: #007EA8;
}

.saf-dock-slot--active:hover {
    background: rgb(0 126 168 / 12%);
    color: #006B8F;
}

/* Primary action: brand-coloured icon only — no filled circle behind it. */
.saf-dock-slot--primary {
    background: transparent;
    color: #007EA8;
}

.saf-dock-slot--primary:hover {
    background: transparent;
    color: #006B8F;
}

.dark .saf-dock-slot {
    color: rgb(148 163 184 / 75%);
}

.dark .saf-dock-slot:hover {
    color: #E2E8F0;
    background: rgb(255 255 255 / 5%);
}

.dark .saf-dock-slot--active {
    background: rgb(255 255 255 / 8%);
    color: #C5EFF6;
}

.dark .saf-dock-slot--active:hover {
    background: rgb(255 255 255 / 11%);
    color: #E6F8FB;
}

.dark .saf-dock-slot--primary {
    background: transparent;
    color: #26BDD4;
}

.dark .saf-dock-slot--primary:hover {
    background: transparent;
    color: #8FDEEB;
}

/* ── Scroll + overlay states ───────────────────────────────────────────────── */

.saf-dock--condensed .saf-dock-bar {
    transform: scale(0.84);
}

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

.saf-dock--hidden .saf-dock-bar {
    transform: translateY(150%);
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .saf-dock-bar,
    .saf-dock-slot,
    .saf-dock-slot-label {
        transition: none !important;
    }

    /* Shrinking on every scroll tick is motion, and the scroll listener already opts out —
       this keeps the resting size even if a stale class survives a re-render. */
    .saf-dock--condensed .saf-dock-bar {
        transform: none;
    }
}

/*
 * Discovery hero chips (location / manager / theme).
 *
 * Hero art stays light in both themes — chip surfaces must NOT follow page dark mode
 * (slate glass on pastel illustration washes out). Always frosted white + ink.
 */
.saf-hero-chip {
    background: rgb(255 255 255 / 90%);
    color: #1A2332;
    box-shadow:
        0 1px 2px rgb(15 23 42 / 6%),
        0 0 0 1px rgb(15 23 42 / 5%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.saf-hero-chip:hover {
    background: #FFFFFF;
}

.dark .saf-hero-chip {
    /* Same glass — hero image does not invert with the page canvas. */
    background: rgb(255 255 255 / 90%);
    color: #1A2332;
    box-shadow:
        0 1px 3px rgb(15 23 42 / 12%),
        0 0 0 1px rgb(15 23 42 / 8%);
}

.dark .saf-hero-chip:hover {
    background: #FFFFFF;
}

/*
 * Shared mobile search overlay motion (admin «جست‌وجوی مشتری»).
 */
.mobile-search-overlay-content {
    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));
}

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

@media (prefers-reduced-motion: reduce) {
    .mobile-search-overlay-content {
        transition: none;
    }
}