/* =========================================================
   NOT FOUND PAGE
   Uses the global variables from app.css
========================================================= */
/*
   A :root token block lived here. Blazor CSS isolation
   rewrote it to ::root[b-...], which is invalid, so it never
   applied. It is dropped rather than promoted to a real
   :root rule, which would override the site-wide tokens
   defined in app.css on every page.
*/



.not-found-page {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: clamp( 620px, calc(100svh - 120px), 820px );
    display: grid;
    place-items: center;
    /*
     * در app.css برای page-content مقدار margin-top منفی
     * وجود دارد. این مقدار آن را برای صفحه 404 خنثی می‌کند.
     */

    margin-top: 44px;
    padding: clamp(72px, 8vw, 120px) clamp(22px, 5vw, 72px) clamp(54px, 7vw, 92px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    color: var(--text);
    background: radial-gradient(circle at 90% 8%, rgba(241, 215, 149, 0.34), transparent 30%), radial-gradient(circle at 8% 88%, rgba(184, 115, 82, 0.13), transparent 31%), radial-gradient(circle at 55% 100%, rgba(140, 137, 96, 0.12), transparent 30%), linear-gradient(135deg, #fdfbf7 0%, #f8f2e7 45%, #f5ecdc 100%) !important;
    box-shadow: var(--shadow);
    top:-40px;
}


    /* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

    .not-found-page::before,
    .not-found-page::after {
        content: "";
        position: absolute;
        z-index: -1;
        width: clamp(250px, 32vw, 520px);
        height: clamp(250px, 32vw, 520px);
        border-radius: 50%;
        pointer-events: none;
    }

    .not-found-page::before {
        top: -24%;
        left: -14%;
        background: radial-gradient(circle at 90% 8%, rgba(241, 215, 149, 0.34), transparent 30%), radial-gradient(circle at 8% 88%, rgba(184, 115, 82, 0.13), transparent 31%), radial-gradient(circle at 55% 100%, rgba(140, 137, 96, 0.12), transparent 30%), linear-gradient(135deg, #fdfbf7 0%, #f8f2e7 45%, #f5ecdc 100%) !important;
    }

    .not-found-page::after {
        right: -16%;
        bottom: -28%;
        background: radial-gradient( circle, color-mix( in srgb, var(--brand) 16%, transparent ), transparent 70% );
    }


/* =========================================================
   INNER PANEL
========================================================= */

.not-found-page__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 920px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    text-align: center;
}


/* =========================================================
   LARGE 404 NUMBER
========================================================= */

.not-found-page__code {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.12em 0 0.08em;
    color: transparent;
    font-size: clamp( 116px, 17vw, 238px );
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.095em;
    background: linear-gradient( 110deg, color-mix( in srgb, var(--gold) 72%, var(--surface-solid) ) 0%, var(--gold) 32%, color-mix( in srgb, var(--gold) 82%, var(--text) ) 68%, var(--gold) 100% );
    background-size: 220% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow( 0 18px 30px color-mix( in srgb, var(--gold) 22%, transparent ) );
    animation: not-found-gold-motion 9s ease-in-out infinite alternate;
}

    .not-found-page__code span {
        display: block;
        padding:10px;
    }


/* =========================================================
   EYEBROW
========================================================= */

.not-found-page__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: clamp(12px, 2vw, 24px);
    padding: 10px 16px;
    border: 1px solid color-mix( in srgb, var(--gold) 36%, var(--line) );
    border-radius: 999px;
    color: color-mix( in srgb, var(--gold) 72%, var(--text) );
    background: color-mix( in srgb, var(--gold) 9%, var(--surface-solid) );
    box-shadow: inset 0 1px 0 color-mix( in srgb, var(--surface-solid) 80%, transparent );
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.not-found-page__eyebrow-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 5px color-mix( in srgb, var(--gold) 16%, transparent );
}


/* =========================================================
   TITLE AND DESCRIPTION
========================================================= */

.not-found-page__title {
    max-width: 820px;
    margin: clamp(28px, 4vw, 44px) auto 0;
    color: var(--text);
    font-size: clamp( 36px, 5.2vw, 68px );
    font-weight: 950;
    line-height: 1.12;
    letter-spacing: -0.045em;
    text-align: center;
    text-wrap: balance;
}

.not-found-page__description {
    max-width: 700px;
    margin: clamp(18px, 2.5vw, 26px) auto 0;
    color: var(--muted);
    font-size: clamp( 15px, 1.45vw, 19px );
    font-weight: 600;
    line-height: 1.85;
    text-align: center;
    text-wrap: pretty;
}


/* =========================================================
   BUTTONS
========================================================= */

.not-found-page__actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(30px, 4vw, 42px);
}

.not-found-page__button {
    min-width: 188px;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 26px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

    .not-found-page__button:hover {
        transform: scale(1.025);
    }

    .not-found-page__button:focus-visible {
        outline: 3px solid color-mix( in srgb, var(--gold) 30%, transparent );
        outline-offset: 4px;
    }


/* Primary button automatically follows the global theme */

.not-found-page__button--primary {
    color: #382b20;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(243, 231, 208, 0.68)) !important;
    box-shadow: 0 12px 26px rgba(74, 52, 31, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

    .not-found-page__button--primary:hover {
        background: linear-gradient( 145deg, rgba(255, 250, 239, 0.96), rgba(241, 215, 149, 0.36) ) !important;
        box-shadow: 0 18px 34px rgba(74, 52, 31, 0.11), 0 0 0 5px rgba(200, 154, 66, 0.08) !important;
    }


/* Secondary button automatically follows the global theme */

.not-found-page__button--secondary {
    color: var(--text);
    border-color: rgba(149, 103, 44, 0.20) !important;
    color: #382b20 !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(243, 231, 208, 0.68)) !important;
    box-shadow: 0 12px 26px rgba(74, 52, 31, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

    .not-found-page__button--secondary:hover {
        background: linear-gradient( 145deg, rgba(255, 250, 239, 0.96), rgba(241, 215, 149, 0.36) ) !important;
        box-shadow: 0 18px 34px rgba(74, 52, 31, 0.11), 0 0 0 5px rgba(200, 154, 66, 0.08) !important;
    }


/* =========================================================
   PERSIAN VERSION
========================================================= */

.not-found-page[dir="rtl"] {
    font-family: Vazirmatn, Tahoma, Arial, sans-serif;
}

    .not-found-page[dir="rtl"]
    .not-found-page__eyebrow {
        letter-spacing: 0;
        text-transform: none;
    }

    .not-found-page[dir="rtl"]
    .not-found-page__title {
        letter-spacing: -0.03em;
        line-height: 1.35;
        text-align: center !important;
    }

    .not-found-page[dir="rtl"]
    .not-found-page__description {
        line-height: 2;
    }


/* =========================================================
   GOLD ANIMATION
========================================================= */

@keyframes not-found-gold-motion {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}


/* =========================================================
   RESPONSIVE
========================================================= */
@media (min-width: 721px) and (max-width: 1499px) {


    .not-found-page {
        top:-40px;
    }










@media (max-width: 720px) {
    .not-found-page {
        min-height: 600px;
        margin-top: 28px;
        padding: 66px 20px 52px;
        border-radius: 26px;
        top: -64px;
    }

    .not-found-page__code {
        font-size: clamp( 108px, 35vw, 170px );
        letter-spacing: -0.08em;
    }

    .not-found-page__title {
        font-size: clamp( 31px, 9vw, 46px );
    }

    .not-found-page__actions {
        flex-direction: column;
    }

    .not-found-page__button {
        width: min(100%, 330px);
    }
}


@media (max-width: 420px) {
    .not-found-page {
        min-height: 560px;
        padding-inline: 16px;
    }

    .not-found-page__eyebrow {
        font-size: 11px;
    }

    .not-found-page__description {
        font-size: 14px;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .not-found-page__code {
        animation: none;
    }

    .not-found-page__button {
        transition: none;
    }
}