/* static/css/common.css */

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F;
    /* Persian/Arabic */
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F;
    /* Persian/Arabic */
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F;
    /* Persian/Arabic */
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F;
    /* Persian/Arabic */
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F;
    /* Persian/Arabic */
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F;
    /* Persian/Arabic */
}


@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF;
    /* Latin */
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF;
    /* Latin */
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF;
    /* Latin */
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF;
    /* Latin */
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF;
    /* Latin */
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF;
    /* Latin */
}



*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}



:root {
    /* === Spacing === */
    --gap: 26px;
    --gap-xs: calc(var(--gap) * 0.3);
    --gap-sm: calc(var(--gap) - 2px);
    --gap-smm: calc(var(--gap) - 6px);
    --gap-smmm: calc(var(--gap) - 12px);
    --gap-smmmm: calc(var(--gap) - 16px);
    --gap-md: calc(var(--gap) * 0.75);
    --gap-lg: calc(var(--gap) + 2px);
    --gap-lgg: calc(var(--gap) + 6px);
    --gap-lggg: calc(var(--gap) + 12px);
    --gap-xl: calc(var(--gap) * 2);
    --gap-2xl: calc(var(--gap) * 3);
    --gap-3xl: calc(var(--gap) * 4);

    /* === Typography === */
    --text: 8px;
    --text-xs: calc(var(--text) + 0px);
    --text-sm: calc(var(--text) + 1px);
    --text-base: calc(var(--text) + 2px);
    --text-lg: calc(var(--text) + 3px);
    --text-xl: calc(var(--text) + 4px);
    --text-2xl: calc(var(--text) + 5px);
    --text-3xl: calc(var(--text) + 7px);
    --text-4xl: calc(var(--text) + 9px);
    --text-5xl: calc(var(--text) + 11px);
    --text-6xl: calc(var(--text) + 15px);
    --text-7xl: calc(var(--text) + 20px);

    /* === Base Colors === */
    --bg-page: #eef0f5;
    --card: #ffffff;
    --card-soft: #f5f6fa;
    --card-soft-2: #fbfcfd;
    --line: #dbdada80;
    --bg: #F7F9FC;
    --white: #FFFFFF;
    --black: #111111;
    --paper: #f7f9fb;

    /* === Ink / Text === */
    --ink: #20233F;
    --ink-900: #171b2e;
    --ink-700: #383d52;
    --ink-600: #5c6170;
    --ink-mid: #3a4a5a;
    --ink-400: #9498a6;
    --ink-200: #d7dae3;
    --ink-100: #eef0f5;
    --ink-muted: #8a9bac;
    --muted: #767b98;
    --text-1: #2D3748;
    --text-2: #3e4147;
    --text-muted: #595e66;

    /* === Primary === */
    --primary: #2f5cf5;
    --primary-ink: #1f3fc9;
    --primary-soft: #dee6ff;
    --primary-softer: #eef1ff;
    --primary-light: #EBF1FD;
    --primary-dark: var(--primary-ink);
    --primary-hover: var(--primary-ink);

    /* === Accent === */
    --accent: #7EC8C8;
    --accent-2: #00b89c;
    --accent-light: #E8F7F7;

    /* === Blue === */
    --blue: #3E63DD;
    --blue-soft: #7C93F5;

    /* === Green === */
    --green: #1ea672;
    --green-soft: #dbf3ea;

    /* === Red === */
    --red: #e0553f;
    --red-soft: #fbe2de;
    --red-deep: #B91C1C;
    --danger: #e84040;

    /* === Amber === */
    --amber: #c98a1e;
    --amber-soft: #faedd6;

    /* === Purple === */
    --purple: #cb2ac2;
    --purple-deep: #5B21B6;
    --purple-soft: rgba(172, 99, 234, 0.12);

    /* === Gold === */
    --gold: #b8873a;
    --gold-soft: #f6ecda;

    /* === Backgrounds === */
    --bg-1: #eef1ff;
    --bg-2: #f3eefc;
    --bg-card: var(--card);
    --card-bg: var(--card);
    --page-bg: var(--bg-page);
    --sidebar-bg: #FFFFFF;

    /* === Border === */
    --border: #E2E8F0;
    --rule: #dde4ec;

    /* === Radius === */
    --radius: 10px;
    --radius-sm: 8px;
    --radius-card: 22px;
    --radius-lg: 26px;
    --radius-md: 16px;
    --sd-radius-lg: 20px;
    --sd-radius-md: 14px;
    --sd-radius-sm: 9px;

    /* === Shadows === */
    --shadow-box: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 4px 10px rgba(20, 26, 46, .02);
    --shadow: 0 2px 8px rgba(91, 141, 239, 0.10);
    --shadow-md: 0 10px 30px rgba(20, 26, 46, .08);
    --shadow-card: 0 2px 12px rgba(47, 92, 245, .07), 0 1px 3px rgba(23, 27, 46, .06);
    --shadow-btn: 0 2px 8px rgba(47, 92, 245, .25);
    --shadow-elevated: 0 6px 24px rgba(47, 92, 245, .12), 0 2px 6px rgba(47, 92, 245, .06);
    --shadow-hover: 0 12px 32px rgba(47, 92, 245, .14);
    --shadow-lg: 0 20px 48px rgba(47, 92, 245, 0.14);
    --shadow-glow: 0 0 0 6px var(--primary-softer);
    --sd-shadow: 0 2px 12px rgba(47, 92, 245, .07);
    --sd-shadow-md: 0 4px 24px rgba(47, 92, 245, .11);

    /* === Transitions === */
    --transition: 0.15s ease;
    --ease: cubic-bezier(.22, 1, .36, 1);

    /* === SD Aliases === */
    --sd-primary: var(--primary);
    --sd-primary-soft: var(--primary-soft);
    --sd-green: var(--green);
    --sd-green-soft: var(--green-soft);
    --sd-amber: var(--amber);
    --sd-amber-soft: var(--amber-soft);
    --sd-red: var(--red);
    --sd-red-soft: var(--red-soft);
    --sd-ink-900: var(--ink-900);
    --sd-ink-600: var(--ink-600);
    --sd-ink-400: var(--ink-400);
    --sd-ink-200: var(--ink-200);
    --sd-bg: var(--bg-page);
    --sd-white: var(--card);
}



body {
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
}



html,
body,
p,
span,
div,
h1,
td,
h2,
h3,
h4,
h5,
h6,
a,
li,
ul,
ol,
label,
small,
medium,
strong,
em,
b,
i,
blockquote,
q,
cite,
code,
pre,
button,
input,
textarea,
select,
option {
    font-family: "Vazirmatn", "Roboto", sans-serif;
}




::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--ink-200);
    border-radius: 99px;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--ink-200) transparent;
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}


.page {
    width: 100%;
    padding: var(--gap-lgg);
}

a {
    color: inherit;
}






/* ─── Tags / Badges ─── */
.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    white-space: nowrap;
    font-weight: 500;
    border-radius: 999px;
    padding: 2px 10px;
    height: fit-content;
}

.tag-sm {
    padding: 1px 8px;
    font-size: var(--text-base);
}

.tag-md {
    padding: 2px 10px;
    font-size: var(--text-lg);
}

.tag-lg {
    padding: 4px 14px;
    font-size: var(--text-xl);
}

.tag-green {
    background: var(--green-soft);
    color: var(--green);
}

.tag-red {
    background: var(--red-soft);
    color: var(--red);
}

.tag-amber {
    background: var(--amber-soft);
    color: var(--amber);
}

.tag-blue {
    background: var(--primary-soft);
    color: var(--primary);
}

.tag-purple {
    background: var(--purple-soft);
    color: var(--purple);
}

.tag-gray {
    background: var(--ink-100);
    color: var(--ink-600);
}

.tag-teal {
    background: var(--accent-light);
    color: var(--accent-2);
}

.tag-gold {
    background: var(--gold-soft);
    color: var(--gold);
}

/* solid variants */
.tag-green.solid {
    background: var(--green);
    color: #fff;
}

.tag-red.solid {
    background: var(--red);
    color: #fff;
}

.tag-amber.solid {
    background: var(--amber);
    color: #fff;
}

.tag-blue.solid {
    color: rgb(from var(--primary) r g b / 0.6);
}

.tag-purple.solid {
    background: var(--purple);
    color: #fff;
}

.tag-gray.solid {
    background: var(--ink-400);
    color: #fff;
}

.tag-teal.solid {
    background: var(--accent-2);
    color: #fff;
}

.tag-gold.solid {
    background: var(--gold);
    color: #fff;
}


/* ─── Buttons (extends .btn) ─── */

.btn {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* 

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}


.btn-danger {
    background: var(--white);
    color: var(--danger);
    border-color: var(--border);
}

.btn-danger:hover {
    background: var(--danger-light);
    border-color: var(--danger);
}

.btn-xs {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
} 
 */

.btn-sm {
    padding: 3px 10px;
    font-size: var(--text-lg);
    font-weight: 500;
}

.btn-md {
    padding: 5px 14px;
    font-size: var(--text-xl);
    font-weight: 500;
}


.btn-lg {
    padding: 7px 18px;
    font-size: var(--text-2xl);
    font-weight: 600;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

.btn-limited {
    max-width: 200px;
}

.btn-fit {
    width: fit-content;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

.btn-secondary {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: var(--primary-soft);
}

.btn-secondary:hover {
    background: var(--primary-light);
    border-color: var(--primary);
}

.btn-green {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}

.btn-green:hover {
    filter: brightness(0.95);
    box-shadow: var(--shadow-box);
}

.btn-red {
    color: var(--red);
    background: var(--red-soft);
}

.btn-red:hover {
    filter: brightness(0.95);
    box-shadow: var(--shadow);
}

.btn-amber {
    background: var(--amber);
    color: #fff;
    border-color: var(--ink-200);
}

.btn-amber:hover {
    filter: brightness(0.95);
}

.btn-purple {
    background: var(--purple);
    color: #fff;
    border-color: var(--purple);
}

.btn-purple:hover {
    filter: brightness(0.95);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline:hover {
    background: var(--primary-soft);
}

.btn-outline-gray {
    background: transparent;
    color: var(--ink-600);
    border-color: var(--border);
}

.btn-outline-gray:hover {
    background: var(--ink-100);
}

.btn-ghost {
    background: transparent;
    color: var(--ink-600);
    border: 2px solid var(--border);
}

.btn-ghost:hover {
    border-color: var(--primary);
    color: var(--primary);
}






.sd-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sd-white);
    box-shadow: var(--sd-shadow);
    color: var(--sd-ink-600);
    text-decoration: none;
    transition: box-shadow .15s, color .15s;
    flex-shrink: 0;
}

.sd-back-btn svg {
    width: 24px;
    height: 24px;
}

.sd-back-btn:hover {
    box-shadow: var(--sd-shadow-md);
    color: var(--sd-primary);
}


.margin-right {
    margin-right: auto;
}

.margin-top {
    margin-top: auto;
}






.img-wrapper img {
    width: 200px;
    mix-blend-mode: multiply;
    display: block;
    margin-top: -40px;
}






/* ════════════════════════════════════════════
       ALERTS
       ════════════════════════════════════════════ */


.rs-toast-container {
    position: fixed !important;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 90vw;
    z-index: 1055;
    pointer-events: none;
    /* container کلیک نمی‌گیره */
}

.rs-alert {
    pointer-events: all;
    /* ← alert و دکمه‌هاش کلیک می‌گیرن */
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;

    /* انیمیشن */
    transform: translateY(-120%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.rs-alert.rs-alert-show {
    transform: translateY(0);
    opacity: 1;
}

.rs-alert.rs-alert-hide {
    transform: translateY(-120%);
    opacity: 0;
    transition: transform 0.4s ease-in, opacity 0.4s ease-in;
}

.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid var(--primary);
    color: #1e40af;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--success);
    color: #065f46;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--warning);
    color: #92400e;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--danger);
    color: #7f1d1d;
}

.alert-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.btn-close-alert {
    background: none;
    border: none;
    font-size: 19px;
    color: #065f46;
    margin-top: -12px;
    margin-left: -2px;
    cursor: pointer;
}

.loading {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--gray-300);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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