/* ------------------------------------------------------------------
   Site header: large organic candy-cloud navigation that floats over
   the hero. Mobile/tablet keep a slide-in drawer (behaviour lives in
   static/js/base.js, untouched here — only ids/classes are reused).
------------------------------------------------------------------ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    height: 74px;
    overflow: visible;
}

.site-header__cloud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 92px;
    display: block;
    z-index: 0;
    pointer-events: none;
}

.site-header__cloud path {
    fill: #ffffff;
    filter:
        drop-shadow(0 6px 20px rgba(255, 255, 255, 0.6))
        drop-shadow(0 14px 32px rgba(186, 222, 252, 0.4))
        drop-shadow(0 20px 40px rgba(226, 198, 250, 0.16));
}

.site-header__row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 74px;
    padding: 0 10px;
}

/* Decorative balloon + stars: hidden on mobile/tablet (added back at the
   desktop tier below) so they never compete with the compact mobile bar. */
.site-header__balloon,
.site-header__star {
    display: none;
}

/* ===== Logo cloud (top-right, own soft blob, sun peeks past its edge) === */
.site-logo-cloud {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 6px 12px 6px 8px;
}

.site-logo-cloud__bg {
    position: absolute;
    inset: 2px 0 2px -10px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    backdrop-filter: blur(12px) saturate(130%);
    clip-path: url(#nav-logo-cloud);
    filter: drop-shadow(0 6px 14px rgba(27, 58, 99, 0.12));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), inset 0 2px 3px rgba(255, 255, 255, 0.6);
    z-index: 0;
}

.site-logo-cloud__sun {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.site-logo-cloud__text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

/* Stage 7.48.1: the brand name is the one thing every page must read
   clearly at a glance — bumped from 0.82rem (~13px, too small once the
   desktop search form stopped wrongly squeezing this space) to a size
   that reads as a real wordmark on mobile. */
.site-logo-cloud__text strong {
    font-size: 1.05rem;
    color: var(--blue-900);
    font-weight: 800;
}

.site-logo-cloud__text small {
    font-size: 0.6rem;
    color: var(--gray-400);
    font-weight: 500;
    display: none;
}

/* ===== Nav (mobile/tablet: slide-in drawer; desktop tier restyles it) === */
.site-nav__mobile-search {
    display: none;
}

/* Stage 7.48.1: scoped to their actual parent, not just the bare class —
   .site-search below redeclares `display: flex` unconditionally, and two
   single-class selectors of equal specificity resolve by source order, so
   a bare `.site-search--desktop { display: none }` here was silently
   losing to that later rule and showing the full desktop search FORM
   inline in the mobile header (squeezing the logo into a sliver). This
   compound selector has higher specificity and wins regardless of order. */
.site-header__actions .site-search--desktop,
.site-header__actions .site-auth-btn--desktop {
    display: none;
}

.site-nav__home-icon,
.site-nav__icon-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55), 0 3px 6px rgba(15, 40, 70, 0.14);
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .site-nav__home-icon,
    .site-nav__icon-bubble {
        transition: none;
    }
}

.site-nav__home-icon .icon,
.site-nav__icon-bubble .icon {
    width: 14px;
    height: 14px;
}

.site-nav__home-icon {
    background: rgba(255, 255, 255, 0.5);
    color: var(--white);
}

.site-nav__icon-bubble--party { background: linear-gradient(155deg, #FFC1DE, #FF8FB8); color: #B4266E; }
.site-nav__icon-bubble--flower { background: linear-gradient(155deg, #D6F5DD, #9FE3B3); color: #1E7A43; }
.site-nav__icon-bubble--grad { background: linear-gradient(155deg, #CFE6FF, #9CC8F5); color: #1E63A8; }
.site-nav__icon-bubble--heart { background: linear-gradient(155deg, #FFD3E2, #FF9FBE); color: #B4266E; }
.site-nav__icon-bubble--phone { background: linear-gradient(155deg, #CFF3E8, #9AE0C9); color: #157A56; }

.site-nav__link,
.site-nav__home {
    position: relative;
    display: flex;
    align-items: center;
    transition: transform 0.28s ease-out;
}

.site-nav__label {
    transition: color 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .site-nav__link,
    .site-nav__home {
        transition: none;
    }
}

/* Glossy candy-pink treatment for the register/login control(s), scoped to
   the header so the shared .btn-primary class elsewhere (hero CTA) is
   untouched. */
.site-header .btn-primary {
    background: linear-gradient(155deg, var(--pink-500), var(--pink-600));
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55), 0 8px 18px rgba(240, 80, 140, 0.35);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.site-header .btn-primary:hover {
    background: linear-gradient(155deg, var(--pink-500), #e2417d);
    transform: translateY(-3px) scale(1.025);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 12px 22px rgba(240, 80, 140, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    .site-header .btn-primary:hover {
        transform: none;
    }
}

.site-auth-btn span {
    white-space: nowrap;
}

/* ===== Authenticated customer state (Stage 7.5) =====
   No `display` here on purpose: this class is only ever combined with
   .site-auth-btn--desktop (display:none by default, inline-flex at the
   1200px breakpoint below) — declaring inline-flex here too would win by
   source order and show it under 1200px, overflowing the mobile header. */
.site-auth-account {
    align-items: center;
    gap: 10px;
}

/* ===== Customer notification bell (Stage 7.12) ===== */
.site-notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-600);
    flex-shrink: 0;
}

.site-notif-bell:hover {
    color: var(--pink-600);
}

.site-notif-bell .icon {
    width: 16px;
    height: 16px;
}

.site-notif-bell__badge {
    position: absolute;
    top: -3px;
    left: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 50%;
    background: var(--pink-600);
    color: var(--white);
    font-size: 0.62rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.site-auth-account__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    /* Stage 7.54.1: this now always holds a fixed label ("حساب کاربری من"
       or "پنل مدیریت"), not a variable-length first name — widened from
       120px so "حساب کاربری من" never gets ellipsis-truncated. */
    max-width: 180px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--gray-900);
}

.site-auth-account__name .icon {
    flex-shrink: 0;
}

.site-auth-account__name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-auth-logout {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 4px;
    color: var(--gray-400);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.site-auth-logout:hover {
    color: var(--pink-600);
}

.site-auth-logout .icon {
    width: 16px;
    height: 16px;
}

.site-nav__auth-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    background: var(--gray-100);
}

/* ===== Search ===== */
.site-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(235, 247, 255, 0.75);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    border-radius: var(--radius-pill);
    padding: 9px 16px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.7),
        inset 0 1px 2px rgba(255, 255, 255, 0.6),
        0 6px 16px rgba(27, 58, 99, 0.08);
}

.site-search .icon {
    width: 17px;
    height: 17px;
    color: var(--blue-600);
    flex-shrink: 0;
}

.site-search input {
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 0.85rem;
    width: 100%;
    color: var(--gray-900);
}

.site-search input::placeholder {
    color: var(--gray-400);
}

/* ===== Icon buttons (mobile/tablet toggles) ===== */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    backdrop-filter: blur(12px) saturate(130%);
    color: var(--blue-900);
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65), 0 6px 14px rgba(27, 58, 99, 0.10);
    transition: transform 0.2s ease-out;
}

.icon-btn:hover {
    transform: translateY(-2px);
}

.icon-btn .icon {
    width: 17px;
    height: 17px;
}

.icon-btn--candy {
    background: linear-gradient(155deg, var(--pink-500), var(--pink-600));
    color: var(--white);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55), 0 8px 16px rgba(240, 80, 140, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .icon-btn { transition: none; }
    .icon-btn:hover { transform: none; }
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Mobile inline quick-search row (toggled independently of the drawer) */
.mobile-search {
    padding: 8px 12px 0;
}

.mobile-search .site-search {
    width: 100%;
}

/* ===== Mobile/tablet drawer (<1440px) ===== */
.site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border-radius: 30px 0 0 30px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 80;
    overflow-y: auto;
    padding: 18px 18px 18px 26px;
}

.site-nav.is-open {
    transform: translateX(0);
}

.site-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.site-nav .site-nav__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.site-nav .site-nav__link,
.site-nav .site-nav__home {
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--gray-600);
}

/* Stage 7.54.14e.1: the pink "active" treatment only applies when this
   link is the current page (`.is-active`, set server-side alongside
   `aria-current="page"` — see templates/partials/header.html). Home kept
   its own organic blob shape (its established visual identity); the
   other links reuse the same pink gradient as a plain pill so "selected"
   reads consistently across all three without new colors or a layout
   shift (same padding/gap/radius as the inactive state above). */
.site-nav .site-nav__link.is-active {
    color: var(--white);
    font-weight: 700;
    background: linear-gradient(155deg, var(--pink-500), var(--pink-600));
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55), 0 6px 14px rgba(240, 80, 140, 0.32);
}

.site-nav .site-nav__home.is-active {
    color: var(--white);
    font-weight: 700;
    background: linear-gradient(155deg, var(--pink-500), var(--pink-600));
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55), 0 6px 14px rgba(240, 80, 140, 0.32);
    border-radius: 46% 54% 52% 48% / 62% 58% 42% 38%;
}

.site-nav__auth {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-100);
}

.site-nav__mobile-search {
    display: block;
    margin-top: 10px;
}

.site-header__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(27, 58, 99, 0.35);
    /* Below .site-header's own z-index (60), not above it: .site-header
       is `position: sticky` + z-index, so it creates its own stacking
       context, and everything inside it (including .site-nav's
       z-index: 80 above) is only ever compared *within* that context —
       never against this backdrop, which is a sibling of <header> at
       the <body> level. A z-index here higher than .site-header's own
       (as 70 was) therefore painted this backdrop over the ENTIRE
       header box, drawer included, silently swallowing every tap on
       the open drawer's links/buttons (confirmed: document.elementFromPoint
       over a drawer link returned this backdrop, not the link). It only
       needs to sit above ordinary page content (which has no z-index of
       its own), so anything below 60 works; still far above `<main>`. */
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.site-header__backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

body.nav-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .site-nav,
    .site-header__backdrop {
        transition: none;
    }
}

/* ===== Tablet tier: a little more breathing room ===== */
@media (min-width: 768px) {
    .site-header {
        height: 84px;
    }
    .site-header__cloud {
        height: 104px;
    }
    .site-header__row {
        height: 84px;
        padding: 0 18px;
    }
    .site-logo-cloud__sun {
        width: 32px;
        height: 32px;
    }
    .site-logo-cloud__text strong {
        font-size: 0.92rem;
    }
    .site-logo-cloud__text small {
        display: block;
        font-size: 0.66rem;
    }
}

/* ===== Desktop tier (>=1440px): full organic cloud navigation =====
   Pushed to 1440px on purpose: this nav carries real weight now (icon
   bubbles, a large home pill, a separate logo-cloud blob, search AND a
   login pill) and a 1200px "cramped" tier was measured to overflow once
   all of that is on one row, so tablet keeps the drawer a bit longer in
   exchange for the desktop row never wrapping or clipping.

   Sizing below restores the original (approved) content scale — nav
   font/icon sizes, the home pill, the logo, search/login — and only
   trims the shared header/cloud HEIGHT by 14px versus that version, to
   sit slightly higher without shrinking anything inside it. */
@media (min-width: 1440px) {
    .site-header {
        height: 112px;
    }
    .site-header__cloud {
        height: 140px;
    }
    .site-header__row {
        height: 112px;
        padding: 0 30px;
        align-items: stretch;
    }

    .site-logo-cloud {
        align-items: center;
    }

    .site-nav {
        align-items: center;
    }

    .site-header__actions {
        align-items: center;
    }

    .site-header__balloon {
        display: block;
        position: absolute;
        top: -6px;
        left: 9%;
        width: 34px;
        height: 44px;
        z-index: 3;
        animation: siteHeaderBalloon 6s ease-in-out infinite;
    }

    .site-header__star {
        display: block;
        position: absolute;
        z-index: 3;
    }

    .site-header__star--a {
        top: -3px;
        left: 27%;
        width: 16px;
        height: 16px;
        animation: siteHeaderStarPulse 4.2s ease-in-out infinite;
    }

    .site-header__star--b {
        top: 20px;
        left: 42%;
        width: 13px;
        height: 13px;
        animation: siteHeaderStarPulse 5s ease-in-out 0.6s infinite;
    }

    @keyframes siteHeaderBalloon {
        0%, 100% { transform: translateY(0) rotate(-2deg); }
        50% { transform: translateY(-7px) rotate(2deg); }
    }

    @keyframes siteHeaderStarPulse {
        0%, 100% { transform: scale(1); opacity: 0.75; }
        50% { transform: scale(1.18); opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
        .site-header__balloon,
        .site-header__star {
            animation: none;
        }
    }

    /* Logo cloud grows and its bg blob overlaps the nav-cloud's right end */
    .site-logo-cloud {
        gap: 10px;
        padding: 8px 16px 10px 10px;
    }
    .site-logo-cloud__bg {
        inset: 4px -6px 0 -34px;
    }
    .site-logo-cloud__sun {
        width: 46px;
        height: 46px;
        margin-top: -24px;
    }
    .site-logo-cloud__text strong {
        font-size: 1rem;
    }
    .site-logo-cloud__text small {
        font-size: 0.7rem;
    }

    /* Drawer becomes the horizontal cloud-ribbon nav */
    .site-nav {
        position: static;
        inset: auto;
        width: auto;
        clip-path: none;
        box-shadow: none;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        transform: none;
        padding: 0;
        overflow: visible;
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .site-nav__head,
    .site-nav__auth,
    .site-nav__mobile-search {
        display: none;
    }

    .site-nav .site-nav__list {
        flex-direction: row;
        align-items: center;
        gap: 1px;
        padding-inline: 12px;
    }

    .site-nav .site-nav__link {
        padding: 9px 9px;
        font-size: 0.97rem;
        font-weight: 600;
        color: var(--gray-600);
        gap: 6px;
        white-space: nowrap;
        border-radius: var(--radius-pill);
        transition: background-color 0.22s ease-out;
    }

    .site-nav .site-nav__icon-bubble {
        width: 30px;
        height: 30px;
    }

    .site-nav .site-nav__icon-bubble .icon {
        width: 16px;
        height: 16px;
    }

    .site-nav .site-nav__link:hover,
    .site-nav .site-nav__link:focus-visible {
        background: rgba(255, 255, 255, 0.55);
    }

    .site-nav .site-nav__link:hover .site-nav__label,
    .site-nav .site-nav__link:focus-visible .site-nav__label {
        color: var(--blue-700);
    }

    .site-nav .site-nav__link:hover .site-nav__icon-bubble,
    .site-nav .site-nav__link:focus-visible .site-nav__icon-bubble {
        transform: translateY(-3px) scale(1.05) rotate(4deg);
    }

    @media (prefers-reduced-motion: reduce) {
        .site-nav .site-nav__link {
            transition: none;
        }
        .site-nav .site-nav__link:hover .site-nav__icon-bubble,
        .site-nav .site-nav__link:focus-visible .site-nav__icon-bubble {
            transform: none;
        }
    }

    /* Home: special organic candy bubble, not a plain rounded rectangle —
       Stage 7.54.14e.1: only while it is actually the active page (the
       pink fill/glow/nub below used to render unconditionally, which
       made Home look "selected" even while viewing Festivals or
       Seasonal Events). Inactive Home falls back to the same plain pill
       its siblings use (base rule above). */
    .site-nav .site-nav__home {
        gap: 8px;
        margin-inline-start: 6px;
        padding: 11px 22px 11px 18px;
        font-size: 1rem;
        white-space: nowrap;
    }

    .site-nav .site-nav__home.is-active {
        font-weight: 700;
        color: var(--white);
        background: linear-gradient(155deg, var(--pink-500), var(--pink-600));
        border-radius: 44% 56% 58% 42% / 62% 55% 45% 38%;
        box-shadow:
            inset 0 1px 2px rgba(255, 255, 255, 0.6),
            inset 0 -6px 10px rgba(178, 40, 96, 0.18),
            0 10px 22px rgba(240, 80, 140, 0.38);
        animation: siteHeaderHomeGlow 5s ease-in-out infinite;
    }

    .site-nav .site-nav__link.is-active {
        color: var(--white);
        background: linear-gradient(155deg, var(--pink-500), var(--pink-600));
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55), 0 6px 14px rgba(240, 80, 140, 0.32);
    }

    .site-nav .site-nav__home .site-nav__home-icon {
        width: 28px;
        height: 28px;
    }

    .site-nav .site-nav__home .site-nav__home-icon .icon {
        width: 15px;
        height: 15px;
    }

    .site-nav .site-nav__home.is-active::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -9px;
        width: 16px;
        height: 4px;
        border-radius: var(--radius-pill);
        background: var(--pink-500);
        opacity: 0.55;
        transform: translateX(-50%);
    }

    .site-nav .site-nav__home:hover {
        transform: translateY(-2px) scale(1.03);
    }

    @keyframes siteHeaderHomeGlow {
        0%, 100% { box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), inset 0 -6px 10px rgba(178,40,96,0.18), 0 10px 20px rgba(240,80,140,0.35); }
        50% { box-shadow: inset 0 1px 2px rgba(255,255,255,0.75), inset 0 -6px 10px rgba(178,40,96,0.18), 0 10px 26px rgba(240,80,140,0.48); }
    }

    @media (prefers-reduced-motion: reduce) {
        .site-nav .site-nav__home { animation: none; }
        .site-nav .site-nav__link:hover,
        .site-nav .site-nav__link:focus-visible,
        .site-nav .site-nav__home:hover {
            transform: none;
        }
    }

    /* Stage 7.54.1: these two must out-specificity the compound
       `.site-header__actions .site-search--desktop` /
       `.site-header__actions .site-auth-btn--desktop` hide rule above
       (line ~120) — a bare single-class selector here loses to that
       two-class selector regardless of media query or source order, which
       silently kept BOTH the desktop search box and the desktop
       login/account entry point permanently hidden at every viewport
       width (verified: `display: none` even at 1920px). Same root-cause
       pattern as the Stage 7.48.1 fix just above this block. */
    .site-header__actions .site-search--desktop {
        display: flex;
        width: clamp(150px, 13vw, 210px);
    }

    .site-nav-toggle,
    .site-search-toggle,
    .mobile-search {
        display: none;
    }

    .site-header__actions .site-auth-btn--desktop {
        display: inline-flex;
    }
}

@media (min-width: 1600px) {
    .site-nav .site-nav__list {
        gap: 4px;
        padding-inline: 26px;
    }
    .site-nav .site-nav__link {
        padding: 9px 14px;
        font-size: 1rem;
    }
    .site-search--desktop {
        width: clamp(170px, 14vw, 230px);
    }
}

/* Stage 7.23: visible keyboard focus for the header search. The input's own
   outline is hidden, so the pill shows an equivalent ring when it is focused. */
.site-search:focus-within {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.7),
        0 0 0 3px rgba(31, 95, 191, 0.55);
}

/* Stage 7.23: at 360–400px the top-bar search pill has little room beside the
   menu and logo. Tighten its inner spacing so the short placeholder fits. */
@media (max-width: 400px) {
    .site-search {
        gap: 6px;
        padding: 8px 10px;
        min-width: 0;
    }

    .site-search input {
        font-size: 0.8rem;
        min-width: 0;
    }
}