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

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

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

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

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

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

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

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

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

/* =========================================
       ROOT
    ========================================= */

:root {
    --primary: #7c3aed;
    --primary-light: #8b5cf6;
    --secondary: #a855f7;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --radius-lg: 28px;
    --radius-md: 20px;
    --radius-sm: 16px;
    --transition: .3s ease;
}

/* =========================================
       LIGHT THEME
    ========================================= */

body {
    --bg: #f5f3ff;
    --surface: rgba(255,255,255,.72);
    --surface-solid: #ffffff;
    --text: #1e1b4b;
    --text-muted: #6b7280;
    --border: rgba(124,58,237,.12);
    --input-bg: rgba(255,255,255,.9);
    --table-hover: rgba(124,58,237,.05);
    --toast-bg: rgba(255,255,255,.98);
    --navbar-bg: rgba(255,255,255,.75);
    --shadow: 0 10px 40px rgba(124,58,237,.12);
    background: radial-gradient( circle at top right, rgba(139,92,246,.30), transparent 28% ), radial-gradient( circle at bottom left, rgba(168,85,247,.20), transparent 30% ), linear-gradient( 135deg, #f5f3ff, #ede9fe );
    color: var(--text);
    --bs-body-bg: #ffffff;
    --bs-popover-header-bg: #e9ecef;
    --bs-emphasis-color: #212423;
}

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

    body.dark-theme {
        --bg: #140f2d;
        --surface: rgba(30,27,75,.72);
        --surface-solid: #1e1b4b;
        --text: #f8fafc;
        --text-muted: #c4b5fd;
        --border: rgba(255,255,255,.08);
        --input-bg: rgba(255,255,255,.05);
        --table-hover: rgba(255,255,255,.04);
        --toast-bg: rgba(30,27,75,.96);
        --navbar-bg: rgba(30,27,75,.72);
        --shadow: 0 10px 45px rgba(0,0,0,.35);
        background: radial-gradient( circle at top right, rgba(139,92,246,.32), transparent 28% ), radial-gradient( circle at bottom left, rgba(168,85,247,.18), transparent 30% ), linear-gradient( 135deg, #140f2d, #1e1b4b );
        --bs-body-bg: #28244e;
        --bs-popover-header-bg: #464454;
        --bs-emphasis-color: #dbddcf;
        --bs-secondary-bg: #534f7c;
    }

/* =========================================
       GENERAL
    ========================================= */

* {
    font-family: 'Vazirmatn', sans-serif;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    transition: background .35s ease, color .35s ease;
}

.muted {
    color: var(--text-muted);
}

/* =========================================
       NAVBAR
    ========================================= */

.modern-navbar {
    background: var(--navbar-bg);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}

.navbar-brand {
    color: var(--text) !important;
    font-weight: 800;
    font-size: 1.25rem;
}

.nav-link {
    color: var(--text-muted) !important;
    border-radius: 14px;
    padding: .75rem 1rem !important;
    transition: var(--transition);
}

    .nav-link:hover {
        background: rgba(124,58,237,.10);
        color: var(--text) !important;
    }

/* =========================================
       CARD
    ========================================= */

.glass-card {
    background: var(--surface);
    backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.card-title-modern {
    font-weight: 700;
}

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

.btn-modern {
    border: none;
    border-radius: 18px;
    padding: .85rem 1.4rem;
    font-weight: 600;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

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

.btn-primary-modern {
    background: linear-gradient( 135deg, #7c3aed, #8b5cf6 );
    color: white;
    box-shadow: 0 10px 25px rgba(124,58,237,.28);
}

.btn-success-modern {
    background: linear-gradient( 135deg, #10b981, #059669 );
    color: white;
}

.btn-danger-modern {
    background: linear-gradient( 135deg, #ef4444, #dc2626 );
    color: white;
}

/* =========================================
       FORMS
    ========================================= */

.form-control,
.form-select {
    background: var(--input-bg);
    background-color: var(--bs-body-bg) !important;
    border: 1px solid var(--border);
    color: var(--text);
    min-height: 55px;
    border-radius: 18px;
    transition: var(--transition);
}



    .form-control::placeholder {
        color: var(--text-muted);
    }

    .form-control:focus,
    .form-select:focus {
        background: var(--input-bg);
        color: var(--text);
        border-color: rgba(124,58,237,.5);
        box-shadow: 0 0 0 .25rem rgba(124,58,237,.12);
    }

label {
    margin-bottom: .55rem;
    font-weight: 600;
}

/* =========================================
       TABLE
    ========================================= */

.table-wrapper {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.table-modern {
    margin-bottom: 0;
    color: var(--text);
    background: transparent !important;
}

    .table-modern thead {
        background: rgba(124,58,237,.10);
    }

        .table-modern thead th {
            color: var(--text);
            border: none;
            padding: 1rem;
            font-weight: 700;
        }

    .table-modern tbody tr {
        background: transparent !important;
        transition: var(--transition);
    }

        .table-modern tbody tr:hover {
            background: var(--table-hover) !important;
        }

    .table-modern td {
        border-color: var(--border);
        padding: 1rem;
        background: transparent !important;
    }

/* =========================================
       BADGE
    ========================================= */

.badge-modern {
    border-radius: 999px;
    padding: .55rem .95rem;
    font-size: .8rem;
}

/* =========================================
       TOAST
    ========================================= */

.toast-modern {
    background: var(--toast-bg);
    border: 1px solid var(--border);
    border-radius: 22px;
    backdrop-filter: blur(18px);
    color: var(--text);
    overflow: hidden;
}

    .toast-modern .toast-header {
        background: transparent !important;
        color: var(--text);
        border-bottom: 1px solid var(--border);
    }

    .toast-modern .toast-body {
        color: var(--text);
        font-weight: 500;
    }

.toast-success {
    border-right: 5px solid #10b981;
}

.toast-error {
    border-right: 5px solid #ef4444;
}

.toast-warning {
    border-right: 5px solid #f59e0b;
}

.toast-info {
    border-right: 5px solid #0dcaf0;
}

/* =========================================
       THEME BUTTON
    ========================================= */

.theme-toggle-btn {
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 58px;
    height: 58px;
    border-radius: 50% !important;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(124,58,237,.35);
}

    .theme-toggle-btn i {
        font-size: 1.3rem;
    }

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

@media(max-width:768px) {

    .btn-modern {
        width: 100%;
    }

    .mobile-column {
        flex-direction: column;
    }

    .theme-toggle-btn {
        width: 52px;
        height: 52px;
        left: 14px;
        bottom: 14px;
    }
}


/* =========================================
FOOTER
========================================= */

.footer-copy {
    color: var(--text-muted);
    font-size: .95rem;
}
.center-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    font-size: 1rem;
}

    .center-content > * {
        margin: 5px 0;
    }

    .center-content a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-decoration: none;
        margin-top: 10px;
        color: var(--text-muted);
    }

        .center-content a img {
            width: 1.5rem;
            height: 1.5rem;
        }

/* استایل برای موبایل */
@media (max-width: 768px) {
    .center-content {
        padding: 20px;
        text-align: center;
        font-size: 0.9rem;
    }

        .center-content > * {
            margin: 4px 0;
        }

        .center-content a {
            font-size: 0.8rem;
            gap: 6px;
            margin-top: 8px;
        }

            .center-content a img {
                width: 1.2rem;
                height: 1.2rem;
            }
}

/* استایل برای موبایل کوچک */
@media (max-width: 480px) {
    .center-content {
        padding: 15px;
        font-size: 0.8rem;
    }

        .center-content > * {
            margin: 3px 0;
        }

        .center-content a {
            font-size: 0.7rem;
            gap: 4px;
            margin-top: 6px;
        }

            .center-content a img {
                width: 1rem;
                height: 1rem;
            }
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.blinking-text {
    animation: blink 1s infinite;
    text-align: center;
    color: red;
    margin-top: 20px;
    font-size: 20px;
}






/* =========================================
   ACCORDION
========================================= */

.modern-accordion-item {
    background: var(--surface);
    border: 1px solid var(--border) !important;
    border-radius: 28px !important;
    overflow: hidden;
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
}

.modern-accordion-btn {
    background: transparent !important;
    color: var(--text) !important;
    padding: 1.3rem 1.5rem;
    font-size: 1.05rem;
    border: none !important;
    box-shadow: none !important;
}

    .modern-accordion-btn:not(.collapsed) {
        background: rgba(124,58,237,.08) !important;
    }

.accordion-button::after {
    filter: brightness(0) invert(1);
}

body:not(.dark-theme)
.accordion-button::after {
    filter: none;
}

/* =========================================
   INFO BOX
========================================= */

.info-box {
    background: rgba(124,58,237,.06);
    border: 1px solid rgba(124,58,237,.10);
    border-radius: 22px;
    padding: 1.2rem;
    height: 100%;
    transition: .3s;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .info-box::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 135deg, rgba(255,255,255,.06), transparent );
        pointer-events: none;
    }

    .info-box:hover {
        transform: translateY(-5px);
        background: rgba(124,58,237,.10);
    }

.info-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    background: linear-gradient( 135deg, #7c3aed, #8b5cf6 );
    box-shadow: 0 10px 22px rgba(124,58,237,.25);
}

.info-title {
    color: var(--text-muted);
    margin-bottom: 10px;
    font-size: .92rem;
    font-weight: 600;
}

.info-value {
    color: var(--text);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.8;
}

/* =========================================
   ALERT
========================================= */

.modern-alert-danger {
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.18);
    color: #ef4444;
    border-radius: 18px;
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

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

.register-btn {
    min-height: 100%;
    font-size: 1rem;
}

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

@media(max-width:768px) {

    .modern-accordion-btn {
        padding: 1rem;
    }

    .info-box {
        border-radius: 20px;
    }
}