@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/vazirmatn/Vazirmatn-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/vazirmatn/Vazirmatn-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/vazirmatn/Vazirmatn-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/vazirmatn/Vazirmatn-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/vazirmatn/Vazirmatn-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Storefront default: dark. Light overrides via :root[data-theme="light"]. */
:root {
    --bg-primary: #0b0f16;
    --text-main: #dbe7f4;
    --inv-glass: rgba(18, 24, 34, 0.58);
    --border-color: rgba(159, 190, 222, 0.22);
    --inv-bg: var(--bg-primary);
    --inv-text: var(--text-main);
    --inv-surface: rgba(16, 24, 39, 0.62);
    --inv-border: var(--border-color);
    /* Accent for hero / coming-soon glows (readable on dark backgrounds). */
    --inv-accent: #38bdf8;
    /* Hover: blend accent toward white so links brighten on dark UIs. */
    --inv-link-hover-mix: #ffffff;
    --posh-dropdown-bg: var(--inv-surface);
    --posh-dropdown-border: color-mix(in oklab, var(--inv-border) 88%, transparent);
    --posh-dropdown-shadow:
        0 18px 48px -28px color-mix(in oklab, var(--inv-text) 22%, transparent),
        inset 0 1px 0 color-mix(in oklab, var(--inv-text) 10%, transparent);
    --posh-dropdown-fallback-bg: color-mix(in oklab, var(--inv-bg) 88%, transparent);
    --posh-bp-nav: 768px;
    --posh-header-z: 1020;
    --posh-overlay-z: 1040;
    --posh-dropdown-z: 1060;
    --posh-mobile-nav-backdrop-z: 2000;
    --posh-mobile-nav-drawer-z: 2010;
    --posh-admin-bp: 768px;
    --posh-safe-inline: max(0.75rem, env(safe-area-inset-right, 0px), env(safe-area-inset-left, 0px));

    /* Admin design system (MD3 palette — see redesign DESIGN.md) */
    --posh-admin-background: #131315;
    --posh-admin-on-background: #e5e1e4;
    --posh-admin-surface: #131315;
    --posh-admin-surface-dim: #131315;
    --posh-admin-surface-bright: #39393b;
    --posh-admin-surface-container-lowest: #0e0e10;
    --posh-admin-surface-container-low: #1c1b1d;
    --posh-admin-surface-container: #201f21;
    --posh-admin-surface-container-high: #2a2a2c;
    --posh-admin-surface-container-highest: #353437;
    --posh-admin-surface-variant: #353437;
    --posh-admin-on-surface: #e5e1e4;
    --posh-admin-on-surface-variant: #bdc8cf;
    --posh-admin-outline: #889299;
    --posh-admin-outline-variant: #3e484e;
    --posh-admin-primary: #a7e0ff;
    --posh-admin-on-primary: #003548;
    --posh-admin-primary-container: #5ac8fa;
    --posh-admin-on-primary-container: #00526e;
    --posh-admin-primary-fixed: #c1e8ff;
    --posh-admin-primary-fixed-dim: #74d1ff;
    --posh-admin-on-primary-fixed: #001e2b;
    --posh-admin-secondary: #c6c6cb;
    --posh-admin-on-secondary: #2f3034;
    --posh-admin-secondary-container: #46464b;
    --posh-admin-on-secondary-container: #b5b4ba;
    --posh-admin-tertiary: #d7d8dd;
    --posh-admin-on-tertiary-container: #4a4c50;
    --posh-admin-error: #ffb4ab;
    --posh-admin-on-error: #690005;
    --posh-admin-error-container: #93000a;
    --posh-admin-on-error-container: #ffdad6;
    --posh-admin-success: #b9efc8;
    --posh-admin-success-container: #2b7a45;
    --posh-admin-success-outline: #5fc57a;
    --posh-admin-warning: #fde68a;
    --posh-admin-warning-container: #78350f;
    --posh-admin-warning-outline: #fbbf24;
    --posh-admin-space-base: 4px;
    --posh-admin-space-xs: 8px;
    --posh-admin-space-sm: 16px;
    --posh-admin-space-md: 24px;
    --posh-admin-space-lg: 40px;
    --posh-admin-space-xl: 64px;
    --posh-admin-gutter: 24px;
    --posh-admin-margin-mobile: 16px;
    --posh-admin-margin-desktop: 48px;
    --posh-admin-radius-sm: 0.25rem;
    --posh-admin-radius: 0.5rem;
    --posh-admin-radius-md: 0.75rem;
    --posh-admin-radius-lg: 1rem;
    --posh-admin-radius-xl: 1.5rem;
    --posh-admin-radius-full: 9999px;
    --posh-admin-sidebar-width: 16rem;
    --posh-admin-font: 'Vazirmatn', system-ui, sans-serif;
    --posh-admin-text-display-lg-size: 3rem;
    --posh-admin-text-display-lg-weight: 600;
    --posh-admin-text-display-lg-line: 1.1;
    --posh-admin-text-display-lg-tracking: -0.02em;
    --posh-admin-text-headline-lg-size: 2rem;
    --posh-admin-text-headline-lg-weight: 600;
    --posh-admin-text-headline-lg-line: 1.2;
    --posh-admin-text-headline-lg-tracking: -0.01em;
    --posh-admin-text-headline-md-size: 1.5rem;
    --posh-admin-text-headline-md-weight: 500;
    --posh-admin-text-headline-md-line: 1.3;
    --posh-admin-text-headline-sm-size: 1.25rem;
    --posh-admin-text-headline-sm-weight: 500;
    --posh-admin-text-headline-sm-line: 1.4;
    --posh-admin-text-body-lg-size: 1.125rem;
    --posh-admin-text-body-lg-weight: 400;
    --posh-admin-text-body-lg-line: 1.6;
    --posh-admin-text-body-md-size: 1rem;
    --posh-admin-text-body-md-weight: 400;
    --posh-admin-text-body-md-line: 1.5;
    --posh-admin-text-body-sm-size: 0.875rem;
    --posh-admin-text-body-sm-weight: 400;
    --posh-admin-text-body-sm-line: 1.5;
    --posh-admin-text-label-md-size: 0.75rem;
    --posh-admin-text-label-md-weight: 500;
    --posh-admin-text-label-md-line: 1.2;
    --posh-admin-text-label-md-tracking: 0.05em;
}

/* Admin shell: lock viewport scroll (mobile nav bars / drawer) */
body:has(.admin-shell) {
    overflow: hidden;
    background-color: var(--posh-admin-background);
    color: var(--posh-admin-on-surface);
}

body:has(.admin-shell) .admin-shell::-webkit-scrollbar,
body:has(.admin-shell) .admin-main::-webkit-scrollbar {
    width: 6px;
}

body:has(.admin-shell) .admin-shell::-webkit-scrollbar-track,
body:has(.admin-shell) .admin-main::-webkit-scrollbar-track {
    background: var(--posh-admin-background);
}

body:has(.admin-shell) .admin-shell::-webkit-scrollbar-thumb,
body:has(.admin-shell) .admin-main::-webkit-scrollbar-thumb {
    background: var(--posh-admin-outline-variant);
    border-radius: 3px;
}

/* Admin typography utilities (scoped to shell) */
.admin-shell .posh-text-display-lg {
    font-family: var(--posh-admin-font);
    font-size: var(--posh-admin-text-display-lg-size);
    font-weight: var(--posh-admin-text-display-lg-weight);
    line-height: var(--posh-admin-text-display-lg-line);
    letter-spacing: var(--posh-admin-text-display-lg-tracking);
}

.admin-shell .posh-text-headline-lg {
    font-family: var(--posh-admin-font);
    font-size: var(--posh-admin-text-headline-lg-size);
    font-weight: var(--posh-admin-text-headline-lg-weight);
    line-height: var(--posh-admin-text-headline-lg-line);
    letter-spacing: var(--posh-admin-text-headline-lg-tracking);
}

.admin-shell .posh-text-headline-md {
    font-family: var(--posh-admin-font);
    font-size: var(--posh-admin-text-headline-md-size);
    font-weight: var(--posh-admin-text-headline-md-weight);
    line-height: var(--posh-admin-text-headline-md-line);
}

.admin-shell .posh-text-headline-sm {
    font-family: var(--posh-admin-font);
    font-size: var(--posh-admin-text-headline-sm-size);
    font-weight: var(--posh-admin-text-headline-sm-weight);
    line-height: var(--posh-admin-text-headline-sm-line);
}

.admin-shell .posh-text-body-lg {
    font-family: var(--posh-admin-font);
    font-size: var(--posh-admin-text-body-lg-size);
    font-weight: var(--posh-admin-text-body-lg-weight);
    line-height: var(--posh-admin-text-body-lg-line);
}

.admin-shell .posh-text-body-md {
    font-family: var(--posh-admin-font);
    font-size: var(--posh-admin-text-body-md-size);
    font-weight: var(--posh-admin-text-body-md-weight);
    line-height: var(--posh-admin-text-body-md-line);
}

.admin-shell .posh-text-body-sm {
    font-family: var(--posh-admin-font);
    font-size: var(--posh-admin-text-body-sm-size);
    font-weight: var(--posh-admin-text-body-sm-weight);
    line-height: var(--posh-admin-text-body-sm-line);
}

.admin-shell .posh-text-label-md {
    font-family: var(--posh-admin-font);
    font-size: var(--posh-admin-text-label-md-size);
    font-weight: var(--posh-admin-text-label-md-weight);
    line-height: var(--posh-admin-text-label-md-line);
    letter-spacing: var(--posh-admin-text-label-md-tracking);
}

/* Admin routes: suppress storefront layout/islands if both shells coexist */
body:has(.admin-shell) .shop-page,
body:has(.admin-shell) .shop-navbar {
    display: none !important;
}

body:has(.admin-shell) .shop-nav-toggle,
body:has(.admin-shell) .shop-mobile-nav-backdrop,
body:has(.admin-shell) .shop-mobile-nav,
body:has(.admin-shell) .shop-whatsapp-fab {
    display: none !important;
}

/* Admin layout: hide desktop sidebar on mobile (unscoped — pierces Blazor CSS isolation) */
@media (max-width: 768px) {
    .admin-shell .admin-sidebar,
    .admin-shell aside.admin-sidebar {
        display: none !important;
    }
}

/* Admin mobile nav overlay — global so it sits above page chrome (not scoped to header) */
.admin-mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--posh-mobile-nav-backdrop-z);
    margin: 0;
    padding: 0;
    border: none;
    background: color-mix(in oklab, var(--posh-admin-background) 55%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

.admin-mobile-nav {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(var(--posh-admin-sidebar-width), calc(100vw - (2 * var(--posh-safe-inline))));
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: var(--posh-admin-space-md) var(--posh-admin-space-sm) var(--posh-admin-space-sm);
    padding-block-start: calc(var(--posh-admin-space-md) + 3.5rem);
    z-index: var(--posh-mobile-nav-drawer-z);
    display: flex;
    flex-direction: column;
    gap: var(--posh-admin-space-xs);
    overflow-y: auto;
    isolation: isolate;
    border-radius: 0;
    border-inline-end: 1px solid var(--posh-admin-outline-variant);
    background-color: var(--posh-admin-surface-container);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    color: var(--posh-admin-on-surface);
}

.admin-shell:has(.admin-mobile-nav-backdrop) .admin-mobile-chrome .admin-user-menu {
    visibility: hidden;
}

.admin-shell:has(.admin-mobile-nav-backdrop) .admin-main {
    pointer-events: none;
}

/* Storefront mobile nav — global fixed layers (escape navbar stacking context) */
.shop-mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--posh-mobile-nav-backdrop-z);
}

.shop-mobile-nav {
    position: fixed;
    z-index: var(--posh-mobile-nav-drawer-z);
}

:root[data-theme="light"] {
    --bg-primary: #f4f5f8;
    --text-main: #1a2332;
    --inv-glass: rgba(255, 255, 255, 0.82);
    --border-color: rgba(30, 41, 55, 0.2);
    --inv-bg: var(--bg-primary);
    --inv-text: var(--text-main);
    --inv-surface: rgba(255, 255, 255, 0.9);
    --inv-border: var(--border-color);
    /* Slightly deeper cyan for contrast on light surfaces. */
    --inv-accent: #0ea5e9;
    /* Hover: blend toward body text for a deeper blue on pale backgrounds. */
    --inv-link-hover-mix: var(--inv-text);
    --posh-dropdown-bg: var(--inv-surface);
    --posh-dropdown-border: color-mix(in oklab, var(--inv-border) 90%, transparent);
    --posh-dropdown-shadow:
        0 18px 48px -28px color-mix(in oklab, var(--inv-text) 14%, transparent),
        inset 0 1px 0 color-mix(in oklab, #ffffff 55%, transparent);
    --posh-dropdown-fallback-bg: color-mix(in oklab, var(--inv-bg) 94%, transparent);
    --posh-admin-background: #f4f5f8;
    --posh-admin-on-background: #1a1b1f;
    --posh-admin-surface: #ffffff;
    --posh-admin-surface-container-lowest: #f8fafc;
    --posh-admin-surface-container-low: #f1f5f9;
    --posh-admin-surface-container: #e8ecf1;
    --posh-admin-surface-container-high: #dde3ea;
    --posh-admin-surface-container-highest: #cbd5e1;
    --posh-admin-surface-variant: #e2e8f0;
    --posh-admin-on-surface: #1e293b;
    --posh-admin-on-surface-variant: #475569;
    --posh-admin-outline: #64748b;
    --posh-admin-outline-variant: #cbd5e1;
    --posh-admin-primary: #006687;
    --posh-admin-on-primary: #ffffff;
    --posh-admin-primary-container: #c1e8ff;
    --posh-admin-on-primary-container: #004d67;
    --posh-admin-primary-fixed-dim: #0284c7;
    --posh-admin-secondary-container: #e2e8f0;
    --posh-admin-on-secondary-container: #334155;
    --posh-admin-error: #b42318;
    --posh-admin-on-error: #ffffff;
    --posh-admin-error-container: #fee2e2;
    --posh-admin-on-error-container: #7f1d1d;
    --posh-admin-success: #166534;
    --posh-admin-success-container: #dcfce7;
    --posh-admin-success-outline: #16a34a;
    --posh-admin-warning: #92400e;
    --posh-admin-warning-container: #fef3c7;
    --posh-admin-warning-outline: #d97706;
}

html, body {
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl;
    text-align: right;
    background-color: var(--inv-bg);
    color: var(--inv-text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    background-color: var(--inv-bg);
}

a, .btn-link {
    color: color-mix(in oklab, var(--inv-accent) 82%, var(--inv-text) 18%);
    text-decoration-color: color-mix(in oklab, var(--inv-accent) 45%, transparent);
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover, .btn-link:hover {
    color: color-mix(in oklab, var(--inv-accent) 62%, var(--inv-link-hover-mix) 38%);
    text-decoration-color: color-mix(in oklab, var(--inv-accent) 72%, transparent);
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: right;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: right;
}

/* Auth greeting: username span shared by MainLayout + AdminLayout */
.shop-greeting-name {
    font-weight: 700;
}

.admin-auth-cluster .admin-greeting {
    margin: 0;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* --- Storefront mesh + glass (MainLayout + shop pages) --- */
.shop-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    isolation: isolate;
    background:
        radial-gradient(
            120% 80% at 50% 0%,
            color-mix(in oklab, var(--inv-accent) 14%, transparent) 0%,
            transparent 55%
        ),
        radial-gradient(
            90% 60% at 50% 100%,
            color-mix(in oklab, var(--inv-text) 8%, transparent) 0%,
            transparent 50%
        ),
        linear-gradient(
            165deg,
            color-mix(in oklab, var(--inv-bg) 94%, var(--inv-text) 3%) 0%,
            var(--inv-bg) 42%,
            color-mix(in oklab, var(--inv-bg) 90%, var(--inv-text) 5%) 100%
        );
}

.shop-atmosphere-layer {
    position: absolute;
    inset: -35%;
    will-change: transform;
}

.shop-atmosphere-layer--halftone {
    opacity: 0.14;
    mix-blend-mode: soft-light;
    background-image: radial-gradient(
        circle at 50% 50%,
        color-mix(in oklab, var(--inv-text) 55%, transparent) 0 0.65px,
        transparent 0.66px 100%
    );
    background-size: 3.25px 3.25px;
    animation: shop-atmosphere-halftone 6.5s ease-in-out infinite alternate;
}

.shop-atmosphere-layer--mesh {
    opacity: 0.1;
    mix-blend-mode: overlay;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 2px,
            color-mix(in oklab, var(--inv-text) 42%, transparent) 2px,
            color-mix(in oklab, var(--inv-text) 42%, transparent) 3px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 2px,
            color-mix(in oklab, var(--inv-accent) 38%, transparent) 2px,
            color-mix(in oklab, var(--inv-accent) 38%, transparent) 3px
        );
    background-size:
        100% 3px,
        3px 100%;
    animation: shop-atmosphere-mesh 8s ease-in-out infinite alternate;
}

.shop-atmosphere-layer--accent {
    opacity: 0.1;
    mix-blend-mode: soft-light;
    background-image: repeating-linear-gradient(
        -18deg,
        transparent 0,
        transparent 5px,
        color-mix(in oklab, var(--inv-accent) 50%, transparent) 5px,
        color-mix(in oklab, var(--inv-accent) 50%, transparent) 5.5px
    );
    background-size: 100% 11px;
    animation: shop-atmosphere-accent 12s ease-in-out infinite alternate-reverse;
}

.shop-atmosphere-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 95% 75% at 50% 38%,
        transparent 0%,
        transparent 35%,
        color-mix(in oklab, var(--inv-bg) 45%, transparent) 100%
    );
}

@keyframes shop-atmosphere-halftone {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(5.5px, -4px, 0);
    }
}

@keyframes shop-atmosphere-mesh {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-4.5px, 5px, 0);
    }
}

@keyframes shop-atmosphere-accent {
    from {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    to {
        transform: translate3d(7px, -6px, 0) rotate(0.35deg);
    }
}

.shop-surface-dither {
    position: relative;
    overflow: hidden;
}

.shop-surface-dither::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.08;
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(
        circle at 50% 50%,
        color-mix(in oklab, var(--inv-text) 55%, transparent) 0 0.55px,
        transparent 0.56px 100%
    );
    background-size: 2.75px 2.75px;
    animation: shop-surface-dither-move 4s ease-in-out infinite alternate;
}

.shop-surface-dither > * {
    position: relative;
    z-index: 1;
}

@keyframes shop-surface-dither-move {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(3px, -2.5px, 0);
    }
}

.shop-glow-line {
    width: min(12rem, 55vw);
    height: 1px;
    border-radius: 999px;
    margin: 0 auto;
    flex-shrink: 0;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in oklab, var(--inv-text) 12%, transparent) 35%,
        color-mix(in oklab, var(--inv-accent) 55%, transparent) 50%,
        color-mix(in oklab, var(--inv-text) 12%, transparent) 65%,
        transparent
    );
    box-shadow:
        0 0 12px color-mix(in oklab, var(--inv-accent) 35%, transparent),
        0 0 28px color-mix(in oklab, var(--inv-accent) 14%, transparent);
}

/* Account dropdown panels (shop + admin user menus). */
.posh-dropdown-glass {
    isolation: isolate;
    background: var(--posh-dropdown-bg);
    border: 1px solid var(--posh-dropdown-border);
    border-radius: 0.9rem;
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    box-shadow: var(--posh-dropdown-shadow);
}

.posh-dropdown-panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.45rem);
    min-width: 12.5rem;
    max-width: min(20rem, calc(100vw - (2 * var(--posh-safe-inline))));
    z-index: var(--posh-dropdown-z);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .posh-dropdown-glass {
        background: var(--posh-dropdown-fallback-bg);
    }
}

/* Keep dropdown panels in viewport on mobile widths (matches --posh-bp-nav: 768px). */
@media (max-width: 767.98px) {
    .posh-dropdown-panel {
        position: fixed;
        top: var(--posh-dropdown-top, 4.25rem);
        inset-inline-start: var(--posh-safe-inline);
        inset-inline-end: var(--posh-safe-inline);
        width: auto;
        min-width: 0;
        max-width: none;
    }
}

.shop-glass-panel {
    background: var(--inv-glass);
    border: 1px solid var(--inv-border);
    border-radius: 0.9rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 24px 48px -28px color-mix(in oklab, var(--inv-text) 22%, transparent),
        inset 0 1px 0 color-mix(in oklab, var(--inv-text) 10%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .shop-atmosphere-layer--halftone,
    .shop-atmosphere-layer--mesh,
    .shop-atmosphere-layer--accent,
    .shop-surface-dither::before {
        animation: none;
    }
}

/* Global pre-hydration loader (static markup in App.razor) */
.posh-preload {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in oklab, var(--inv-accent, #38bdf8) 12%, transparent), transparent 55%),
        var(--inv-bg, #0f172a);
    color: var(--inv-text, #e2e8f0);
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

.posh-preload__spinner {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
}

.posh-preload__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    box-sizing: border-box;
}

.posh-preload__ring--outer {
    border-top-color: var(--inv-accent, #38bdf8);
    border-right-color: color-mix(in oklab, var(--inv-accent, #38bdf8) 35%, transparent);
    animation: posh-preload-spin 2.4s linear infinite;
}

.posh-preload__ring--inner {
    inset: 0.65rem;
    border-bottom-color: var(--inv-accent, #38bdf8);
    border-left-color: color-mix(in oklab, var(--inv-accent, #38bdf8) 35%, transparent);
    animation: posh-preload-spin-reverse 1.8s linear infinite;
    opacity: 0.85;
}

.posh-preload__brand {
    margin: 0;
    font-family: 'Vazirmatn', system-ui, sans-serif;
    font-weight: 200;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    color: inherit;
    opacity: 0;
    animation: posh-preload-fade-in 1.2s ease forwards;
}

@keyframes posh-preload-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes posh-preload-spin-reverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes posh-preload-fade-in {
    to {
        opacity: 0.7;
    }
}

body:has(.shop-navbar, .admin-shell, .auth-shell, h1.text-danger) .posh-preload {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .posh-preload__ring--outer,
    .posh-preload__ring--inner {
        animation: none;
    }

    .posh-preload__brand {
        animation: none;
        opacity: 0.7;
    }
}

/* External sale thermal slip (Dashboard + Orders) */
.external-sale-print-slip {
    display: none;
    position: relative;
    width: 80mm;
    margin: 0 auto;
    padding: 12px;
    background: #fff;
    color: #000;
    box-sizing: border-box;
    font-family: "Vazirmatn", system-ui, sans-serif;
    direction: rtl;
    text-align: right;
}

.stitch-slip__brand-block,
.stitch-slip__order-head,
.stitch-slip__items,
.stitch-slip__customer,
.stitch-slip__verify {
    position: relative;
}

.stitch-slip__logo-box {
    width: 72px;
    height: 72px;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    background: #000;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
}

.stitch-slip__tagline {
    margin: 0;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}

.stitch-slip__dashed {
    border-top: 2px dashed #000;
    margin: 10px 0;
}

.stitch-slip__solid {
    border-top: 2px solid #000;
    margin: 10px 0;
}

.stitch-slip__order-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.stitch-slip__meta {
    margin: 6px 0 0;
    font-size: 12px;
    color: #333;
}

.stitch-slip__item-block + .stitch-slip__item-block {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dotted #000;
}

.stitch-slip__item-name {
    margin: 0;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.45;
}

.stitch-slip__qty {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
}

.stitch-slip__customer-row,
.stitch-slip__postal-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
}

.stitch-slip__field-label {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

.stitch-slip__field-value {
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

.stitch-slip__address-wrap {
    margin-top: 8px;
}

.stitch-slip__address {
    margin: 4px 0 0;
    white-space: pre-line;
    font-size: 13px;
    line-height: 1.45;
}

.stitch-slip__verify {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 2px dashed #000;
    text-align: center;
}

.stitch-slip__qr {
    display: inline-block;
    line-height: 0;
}

.stitch-slip__qr svg {
    width: 112px;
    height: 112px;
    display: block;
}

.stitch-slip__site-url {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

@media print {
    @page {
        margin: 8mm;
        size: auto;
    }

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
    }

    body * {
        visibility: hidden !important;
    }

    .external-sale-print-slip,
    .external-sale-print-slip * {
        visibility: visible !important;
    }

    .external-sale-print-slip {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        left: 0 !important;
        top: 0 !important;
        width: 80mm !important;
        max-width: 80mm !important;
        min-height: auto !important;
        padding: 10px !important;
        margin: 0 auto !important;
        direction: rtl !important;
        text-align: right !important;
        background: #fff !important;
        color: #000 !important;
        box-sizing: border-box !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        z-index: 2147483647 !important;
    }

    .stitch-slip__address {
        white-space: pre-line !important;
    }

    .stitch-slip__logo-box {
        margin: 0 auto 10px !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}