/* =========================================================
   SARZAMIN DANAYI
   HEADER
   Connected to ROOT DESIGN SYSTEM
   Version: 2.1
   ========================================================= */


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);

    width: 100%;
    height: var(--header-height);

    background: var(--header-background);
    border-bottom: var(--border-width) solid var(--header-border);

    transition:
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.header-inner {
    width: min(
        calc(100% - (var(--content-padding-x) * 2)),
        var(--content-max-width)
    );

    height: 100%;
    margin-inline: auto;

    padding-block: var(--space-2);

    display: flex;
    align-items: center;

    gap: var(--space-5);
}


/* =========================================================
   BRAND
========================================================= */

.brand {
    order: 1;

    display: flex;
    align-items: center;

    gap: var(--space-3);

    flex-shrink: 0;

    color: var(--color-text);
}

.brand-logo {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    object-fit: contain;

    transition:
        transform var(--transition),
        opacity var(--transition);
}

.brand:hover .brand-logo {
    transform: translateY(-1px) scale(1.03);
}

.brand-name {
    color: var(--color-text);

    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);

    line-height: 1;
    white-space: nowrap;

    transition: color var(--transition);
}


/* =========================================================
   MAIN NAV
========================================================= */

.main-nav {
    order: 2;

    display: flex;
    align-items: center;

    gap: var(--space-1);

    margin-inline-start: var(--space-3);
    margin-inline-end: auto;
}

.main-nav .nav-link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding-inline: var(--space-4);

    color: var(--color-text-secondary);
    background: var(--color-surface-soft);

    border-radius: var(--radius-pill);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);

    white-space: nowrap;

    transition:
        color var(--transition),
        background-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.main-nav .nav-link:hover {
    color: var(--color-primary);

    background: var(--color-surface-hover);

    transform: translateY(-1px);
}

.main-nav .nav-link.active {
    color: var(--color-primary);

    background: rgba(108, 92, 231, 0.11);

    font-weight: var(--font-weight-semibold);
}

.main-nav .nav-link.active::after {
    content: "";

    position: absolute;

    bottom: 4px;
    left: 50%;

    width: 16px;
    height: 3px;

    background: var(--color-secondary);

    border-radius: var(--radius-pill);

    transform: translateX(-50%);
}


/* =========================================================
   AUTH BUTTON
========================================================= */

.auth-btn {
    order: 3;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: var(--space-2);

    width: auto;
    min-width: 150px;
    max-width: none;

    height: var(--button-height-md);

    padding-inline: var(--space-5);

    color: var(--color-text);
    background:var(--color-surface);

    border: var(--border-width) solid transparent;
    border-radius: var(--radius-pill);

    box-shadow: var(--shadow-xs);

	font-family:"Estedad", var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;

    overflow: hidden;
    isolation: isolate;

    flex-shrink: 0;

    cursor: pointer;

    transition:
        width var(--transition-slow),
        min-width var(--transition-slow),
        max-width var(--transition-slow),
        height var(--transition-slow),
        padding var(--transition-slow),
        border-radius var(--transition),
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}


/* =========================================================
   MOVING LIGHT ON BORDER
========================================================= */

.auth-btn::before {
    content: "";

    position: absolute;

    z-index: 0;

    inset: -120%;

    background:
        conic-gradient(
            from 0deg,

            transparent 0deg,
            transparent 35deg,

            var(--brand-purple) 75deg,
            var(--brand-cyan) 125deg,

            transparent 175deg,
            transparent 360deg
        );

    animation:
        authBtnLight 3.5s linear infinite;

    pointer-events: none;
}


/* =========================================================
   INNER MASK
   نور فقط روی حاشیه دیده می‌شود
========================================================= */

.auth-btn::after {
    content: "";

    position: absolute;

    z-index: 1;

    inset: 1px;

    background: var(--color-surface);

    border-radius: calc(var(--radius-pill) - 1px);

    pointer-events: none;

    transition:
        background var(--transition),
        border-radius var(--transition);
}


/* =========================================================
   CONTENT ABOVE LIGHT
========================================================= */

.auth-label,
.auth-icon {
    position: relative;
    z-index: 2;
}


/* =========================================================
   LIGHT MOTION
========================================================= */

@keyframes authBtnLight {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   AUTH ICON
========================================================= */

.auth-icon {
    display: none;

    width: 22px;
    height: 22px;

    flex: 0 0 22px;
    flex-shrink: 0;

    position: relative;
    z-index: 2;

    color: var(--color-text-light);

    /*
     * آیکن ورود به صورت line icon
     */
    fill: none;
    stroke: currentColor;

    pointer-events: none;
}


/*
 * اطمینان از اینکه اجزای SVG
 * رنگ currentColor را دریافت کنند.
 */
.auth-icon path,
.auth-icon circle,
.auth-icon line,
.auth-icon polyline,
.auth-icon polygon {
    stroke: currentColor;
    fill: none;
}


/* =========================================================
   AUTH ACTIVE
========================================================= */

.auth-btn.is-active {
    width: var(--button-height-md);
    min-width: var(--button-height-md);
    max-width: var(--button-height-md);

    height: var(--button-height-md);

    padding: 0;

    border-radius: var(--radius-round);

    aspect-ratio: 1 / 1;

    color: var(--color-text-light);

    background:
        linear-gradient(
            135deg,
            var(--brand-purple),
            var(--brand-purple-light)
        );

    border-color: var(--brand-purple);

    box-shadow:
        var(--shadow-primary),
        0 0 0 3px rgba(108, 92, 231, 0.13);
}


/* =========================================================
   ACTIVE INNER MASK
========================================================= */

.auth-btn.is-active::after {
    inset: 1px;

    border-radius: var(--radius-round);

    background:
        linear-gradient(
            135deg,
            var(--brand-purple),
            var(--brand-purple-light)
        );
}


/* =========================================================
   ACTIVE HOVER
========================================================= */

.auth-btn.is-active:hover {
    color: var(--color-text-light);

    background:
        linear-gradient(
            135deg,
            var(--brand-purple-dark),
            var(--brand-purple)
        );

    border-color: var(--brand-purple-dark);
}

.auth-btn.is-active:hover::after {
    background:
        linear-gradient(
            135deg,
            var(--brand-purple-dark),
            var(--brand-purple)
        );
}


/* =========================================================
   ACTIVE CONTENT
========================================================= */

.auth-btn.is-active .auth-ring {
    display: none;
}

.auth-btn.is-active .auth-label {
    display: none;
}

.auth-btn.is-active .auth-icon {
    display: block;

    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    color: var(--color-text-light);

    fill: none;
    stroke: currentColor;
}


/* =========================================================
   HEADER MASCOT
========================================================= */

.header-mascot {
    order: 4;

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible;

    pointer-events: none;
}

.header-mascot img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 5px 10px rgba(34, 44, 66, 0.10)
        );

    transform-origin: center bottom;

    transition:
        transform var(--transition),
        filter var(--transition);
}

.site-header:hover .header-mascot img {
    transform: translateY(-2px);
}


/* =========================================================
   MOBILE MENU TOGGLE
========================================================= */

.menu-toggle {
    order: 5;

    display: none;

    align-items: center;
    justify-content: center;

    width: var(--button-height-md);
    height: var(--button-height-md);

    flex-shrink: 0;

    color: var(--color-text);

    background: var(--color-surface);

    border: var(--border-width) solid var(--color-border);

    border-radius: var(--radius-md);

    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.menu-toggle:hover {
    color: var(--color-primary);

    background: var(--color-surface-hover);

    border-color: rgba(108, 92, 231, 0.30);

    box-shadow: var(--shadow-sm);

    transform: translateY(-1px);
}

.menu-toggle:active {
    transform: translateY(0);
}


/* =========================================================
   SUB BAR
========================================================= */

.sub-bar {
    position: relative;
    z-index: calc(var(--z-header) - 1);

    width: 100%;
    min-height: 48px;

    display: flex;
    align-items: center;

    gap: var(--space-3);

    padding-inline:
        max(
            var(--content-padding-x),
            calc((100vw - var(--content-max-width)) / 2)
        );

    padding-block: var(--space-2);

    background: var(--header-background);

    border-bottom: var(--border-width) solid var(--header-border);

    transition:
        background-color var(--transition),
        border-color var(--transition);
}

.sub-bar.is-hidden {
    display: none;
}


/* =========================================================
   THEME TOGGLE
========================================================= */

.theme-toggle {
    position: relative;

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-text-secondary);

    background: var(--color-surface-soft);

    border: var(--border-width) solid var(--color-border);

    border-radius: var(--radius-round);

    box-shadow: var(--shadow-xs);

    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.theme-toggle:hover {
    color: var(--color-primary);

    background: var(--color-surface-hover);

    border-color: rgba(108, 92, 231, 0.30);

    box-shadow: var(--shadow-sm);

    transform: translateY(-1px) rotate(8deg);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle .icon-sun {
    display: block;
}

.theme-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: block;
}


/* =========================================================
   PROMO
========================================================= */

.promo {
    flex: 1 1 auto;

    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-3);

    padding-inline: var(--space-4);
    min-height: 34px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 229, 0.72),
            rgba(45, 197, 220, 0.07)
        );

    border:
        var(--border-width)
        solid
        rgba(45, 197, 220, 0.16);

    border-radius: var(--radius-pill);

    transition:
        background-color var(--transition),
        border-color var(--transition),
        opacity var(--transition),
        transform var(--transition);
}

.promo.is-hidden {
    display: none;
}

.promo.no-content {
    background: transparent;
    border-color: transparent;
}

.promo-text {
    min-width: 0;

    overflow: hidden;

    color: var(--color-text-secondary);

    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);

    line-height: var(--line-height-normal);

    white-space: nowrap;
    text-overflow: ellipsis;
}

.promo-close {
    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--color-text-muted);

    background: transparent;

    border: 0;

    border-radius: var(--radius-round);

    font-size: var(--font-size-lg);
    line-height: 1;

    transition:
        color var(--transition),
        background-color var(--transition),
        transform var(--transition);
}

.promo-close:hover {
    color: var(--color-danger);

    background: rgba(255, 107, 107, 0.10);

    transform: rotate(90deg);
}


/* =========================================================
   SIDEBAR OVERLAY
========================================================= */

.sidebar-overlay {
    position: fixed;
    inset: 0;

    z-index: var(--z-overlay);

    background: var(--color-overlay);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    transition:
        opacity var(--transition),
        visibility var(--transition);
}

.sidebar-overlay.is-open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   MOBILE SIDEBAR
========================================================= */

.sidebar {
    position: fixed;

    top: 0;
    right: 0;

    z-index: calc(var(--z-overlay) + 1);

    width: var(--sidebar-width);
    max-width: 86vw;
    height: 100dvh;

    display: flex;
    flex-direction: column;

    padding: var(--space-5);

    color: var(--color-text);

    background: var(--sidebar-background);

    border-inline-start:
        var(--border-width)
        solid
        var(--sidebar-border);

    box-shadow: var(--shadow-xl);

    overflow-y: auto;
    overflow-x: hidden;

    visibility: hidden;

    transform: translateX(105%);

    transition:
        transform var(--transition-slow),
        visibility var(--transition-slow),
        background-color var(--transition),
        border-color var(--transition);
}

.sidebar.is-open {
    visibility: visible;

    transform: translateX(0);
}


/* =========================================================
   SIDEBAR HEADER
========================================================= */

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-3);

    min-height: 48px;

    margin-bottom: var(--space-4);

    padding-bottom: var(--space-4);

    border-bottom:
        var(--border-width)
        solid
        var(--color-border);
}

.sidebar-title {
    color: var(--color-text);

    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.sidebar-close {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-text-secondary);

    background: var(--color-surface-soft);

    border:
        var(--border-width)
        solid
        var(--color-border);

    border-radius: var(--radius-round);

    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.sidebar-close:hover {
    color: var(--color-danger);

    background: rgba(255, 107, 107, 0.08);

    border-color: rgba(255, 107, 107, 0.20);

    transform: rotate(8deg);
}


/* =========================================================
   SIDEBAR NAV
========================================================= */

.sidebar-nav {
    display: flex;
    flex-direction: column;

    gap: var(--space-1);

    margin-bottom: var(--space-4);
}

.sidebar-nav .nav-link {
    position: relative;

    min-height: 48px;

    display: flex;
    align-items: center;

    padding-inline: var(--space-4);

    color: var(--color-text-secondary);

    background: transparent;

    border-radius: var(--radius-md);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);

    transition:
        color var(--transition),
        background-color var(--transition),
        transform var(--transition);
}

.sidebar-nav .nav-link:hover {
    color: var(--color-primary);

    background: var(--color-surface-hover);

    transform: translateX(-3px);
}

.sidebar-nav .nav-link.active {
    color: var(--color-primary);

    background: rgba(108, 92, 231, 0.10);
}

.sidebar-nav .nav-link.active::before {
    content: "";

    position: absolute;

    inset-inline-end: 0;
    top: 50%;

    width: 4px;
    height: 24px;

    border-radius: var(--radius-pill);

    background: var(--color-secondary);

    transform: translateY(-50%);
}


/* =========================================================
   SIDEBAR DIVIDER
========================================================= */

.sidebar-divider {
    width: 100%;
    height: 1px;

    flex-shrink: 0;

    margin: var(--space-1) 0 var(--space-4);

    background: var(--color-border);
}


/* =========================================================
   SIDEBAR THEME TOGGLE
========================================================= */

.sidebar-theme-toggle {
    width: 100%;
    height: 48px;

    justify-content: flex-start;

    gap: var(--space-3);

    padding-inline: var(--space-4);

    margin-bottom: var(--space-4);

    border-radius: var(--radius-md);

    box-shadow: none;

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.sidebar-theme-toggle:hover {
    transform: translateY(-1px);
}

.sidebar-theme-toggle span {
    font-size: var(--font-size-sm);
}


/* =========================================================
   SIDEBAR PROMO
========================================================= */

.sidebar-promo {
    margin-bottom: var(--space-5);

    padding-block: var(--space-3);

    border-radius: var(--radius-md);
}

.sidebar-promo .promo-text {
    white-space: normal;

    line-height: var(--line-height-normal);
}


/* =========================================================
   SIDEBAR AUTH
========================================================= */

.sidebar-auth-btn {
    width: 100%;
    min-width: 0;
    max-width: none;

    margin-top: auto;

    height: var(--button-height-lg);

    border-radius: var(--radius-md);
}


/*
 * حالت فعال در سایدبار
 *
 * دکمه باید دقیقاً 52x52 باشد.
 * این بخش عمداً بعد از حالت عادی قرار گرفته
 * تا در CSS cascade اولویت داشته باشد.
 */
.sidebar-auth-btn.is-active {
    width: var(--button-height-lg);
    min-width: var(--button-height-lg);
    max-width: var(--button-height-lg);

    height: var(--button-height-lg);

    padding: 0;

    margin-inline: auto;
    margin-top: auto;

    border-radius: var(--radius-round);

    aspect-ratio: 1 / 1;
}


/* =========================================================
   SIDEBAR AUTH ACTIVE MASK
========================================================= */

.sidebar-auth-btn.is-active::after {
    inset: 1px;

    border-radius: var(--radius-round);

    background:
        linear-gradient(
            135deg,
            var(--brand-purple),
            var(--brand-purple-light)
        );
}


/* =========================================================
   SIDEBAR AUTH ACTIVE ICON
========================================================= */

.sidebar-auth-btn.is-active .auth-icon {
    display: block;

    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    color: var(--color-text-light);

    fill: none;
    stroke: currentColor;
}


/* =========================================================
   DARK THEME ADJUSTMENTS
========================================================= */

[data-theme="dark"] .main-nav .nav-link.active {
    background: rgba(108, 92, 231, 0.15);
}

[data-theme="dark"] .promo {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 229, 0.06),
            rgba(45, 197, 220, 0.07)
        );

    border-color: rgba(45, 197, 220, 0.14);
}

[data-theme="dark"] .promo-text {
    color: var(--color-text-secondary);
}


/* =========================================================
   FOCUS
========================================================= */

.site-header a:focus-visible,
.site-header button:focus-visible,
.sidebar a:focus-visible,
.sidebar button:focus-visible {
    outline:
        3px solid
        rgba(45, 197, 220, 0.45);

    outline-offset: 3px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .header-inner {
        gap: var(--space-4);
    }

    .main-nav .nav-link {
        padding-inline: var(--space-3);
    }

    .brand-name {
        font-size: var(--font-size-md);
    }

    .header-mascot {
        width: 44px;
        height: 44px;
    }

    .auth-btn {
        min-width: 140px;
    }
}


@media (max-width: 900px) {

    .main-nav,
    .auth-btn:not(.sidebar-auth-btn),
    .sub-bar {
        display: none;
    }

    .header-mascot {
        order: 3;

        display: flex;

        margin-inline-start: auto;
    }

    .brand {
        order: 1;
    }

    .menu-toggle {
        order: 4;

        display: flex;

        margin-inline-start: 0;
    }

    .header-inner {
        gap: var(--space-3);
    }
}


@media (max-width: 600px) {

    .header-inner {
        width: calc(100% - (var(--space-4) * 2));

        gap: var(--space-3);
    }

    .brand-logo {
        width: 40px;
        height: 40px;
    }

    .brand-name {
        font-size: var(--font-size-sm);
    }

    .header-mascot {
        width: 42px;
        height: 42px;
    }

    .menu-toggle {
        width: 42px;
        height: 42px;
    }
}


@media (max-width: 480px) {

    .header-inner {
        width: calc(100% - (var(--space-3) * 2));
    }

    .brand {
        gap: var(--space-2);
    }

    .brand-logo {
        width: 38px;
        height: 38px;
    }

    .header-mascot {
        width: 40px;
        height: 40px;
    }

    .sidebar {
        width: min(
            var(--sidebar-width),
            88vw
        );

        padding: var(--space-4);
    }
}


@media (max-width: 360px) {

    .brand-name {
        display: none;
    }

    .header-mascot {
        margin-inline-start: auto;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .site-header *,
    .sub-bar *,
    .sidebar *,
    .sidebar-overlay {
        animation: none !important;

        transition-duration: 0.01ms !important;
    }

    .brand:hover .brand-logo,
    .site-header:hover .header-mascot img,
    .auth-btn:hover,
    .menu-toggle:hover,
    .theme-toggle:hover,
    .promo-close:hover,
    .sidebar-close:hover {
        transform: none !important;
    }
}