/*:root {*/
    /* 🎨 رنگ‌های اصلی */
    /*--color-primary: #4c31a6;*/ /* بنفش اصلی */
    /*--color-primary-hover: #4c31a6;*/ /* رنگ hover - فعلاً همونه */
    /*--color-border: #DBDEE6;
    --color-border-focus: #c2c3c38f;
    --color-placeholder: #9aa0a6;
    --color-footer-text: #777;
    --color-link: #007bff;
    --color-link-hover: #0056b3;*/ /* رنگ تیره‌تر برای hover */
    /* ⚪ رنگ‌های عمومی پس‌زمینه و متن */
    /*--color-bg: #fff;
    --color-input-bg: white;
    --color-input-text: var(--bs-body-color, #000);
    --color-shadow: rgba(0, 0, 0, 0.1);
}*/

:root {
    /* 🎨 رنگ اصلی تم (زرد طلایی) */
    --color-primary: rgb(254, 216, 19);
    --color-primary-hover: rgb(230, 195, 17); /* کمی تیره‌تر برای hover */
    --color-primary-light: rgb(255, 230, 80); /* برای حالت روشن‌تر */
    /* ⚫ رنگ‌های متنی و پس‌زمینه‌ای مکمل */
    --color-bg: #ffffff;
    --color-text: #222222;
    --color-muted: #6c757d;
    --color-border: #ddd;
    --color-shadow: rgba(0, 0, 0, 0.08);
    /* 🔗 لینک‌ها */
    --color-link: #007bff;
    --color-link-hover: #0056b3;
    /* 🧱 المان‌های خاص */
    --color-input-bg: #fff;
    --color-input-border: #ccc;
    --color-placeholder: #9aa0a6;
    /* ✨ دکمه‌ها */
    --btn-bg: var(--color-primary);
    --btn-bg-hover: var(--color-primary-hover);
    --btn-text: #000;
}

@font-face {
    font-family: 'LoginFont';
    src: url('/content/fonts/login/regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'LoginFont';
    src: url('/content/fonts/login/medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'LoginFont';
    src: url('/content/fonts/login/bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

body, .auth-card, .form-control, .btn-main, .auth-footer {
    font-family: 'LoginFont', sans-serif;
}

.auth-card {
    width: 440px;
    margin: 0 auto;
    background: var(--color-bg);
    border-radius: 16px;
    box-shadow: 0 6px 24px var(--color-shadow);
    padding: 45px 32px 30px 32px;
    text-align: center;
    max-width: 100%;
}

    .auth-card img {
        width: 96px;
        height: 96px;
        object-fit: contain;
        margin-bottom: 35px;
        display: none;
    }

    .auth-card h2 {
        font-weight: bold;
        font-size: 1.4rem;
        margin-bottom: 40px;
    }

    .auth-card .label {
        font-weight: bold;
        font-size: 0.75rem;
        margin-bottom: 40px;
    }

    .auth-card .form-control {
        height: 49px;
        border-radius: 5px;
        border: solid 2px var(--color-border);
        background-color: var(--color-input-bg);
        text-indent: 10px;
        direction: rtl;
    }

        .auth-card .form-control:focus {
            color: var(--color-input-text);
            background-color: var(--color-input-bg);
            border-color: var(--color-border-focus);
            outline: 0;
            box-shadow: 0 0 0 .05rem rgb(159 169 164 / 42%);
        }

        .auth-card .form-control::placeholder,
        .auth-card .form-control::-moz-placeholder,
        .auth-card .form-control:-ms-input-placeholder,
        .auth-card .form-control::-webkit-input-placeholder {
            color: var(--color-placeholder);
            opacity: 1;
        }

    .auth-card .btn-main {
        height: 49px;
        background: var(--color-primary);
        color: white !important;
        transition: .2s;
        border-radius: 5px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        width: 100%;
        box-shadow: none;
        color: var(--btn-text) !important;
    }

.btn-main:hover, .btn-main:active {
    background-color: var(--color-primary-hover) !important;
}

.auth-footer {
    font-size: 0.75rem;
    margin-top: 90px;
    font-weight: bold;
    color: var(--color-footer-text);
}

    .auth-footer a {
        color: var(--color-link);
        text-decoration: none;
    }

        .auth-footer a:hover {
            text-decoration: underline;
            color: var(--color-link-hover);
        }

.auth-card .otp-input {
    width: 56px;
    height: 56px;
    border: 1.5px solid var(--color-primary);
    border-radius: 8px;
    text-align: center;
    font-size: 1.5rem;
    margin: 0 6px;
    outline: none;
    transition: all .2s ease;
}

    .auth-card .otp-input:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 5px rgb(76 49 166 / 58%);
    }

.auth-card .countdown {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 8px;
}

.auth-card .change-number {
    display: inline-block;
    margin-top: 16px;
    font-size: 0.9rem;
    color: var(--color-link);
    text-decoration: none;
}

    .auth-card .change-number:hover {
        text-decoration: underline;
    }