/* ============================================================
   LOGIN MODAL — کاملاً هماهنگ با استایل اصلی سایت
   ============================================================ */

/* ---------- پس‌زمینه مودال ---------- */
#loginModalOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 14, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: var(--z-modal, 1050);
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: opacity 0.35s var(--ease, cubic-bezier(.22,.9,.3,1));
}

    #loginModalOverlay.show {
        display: flex;
        opacity: 1;
    }

    /* ---------- جعبه اصلی مودال ---------- */
    #loginModalOverlay .modal-dialog {
        max-width: 480px;
        width: 100%;
        margin: 0 auto;
        animation: slideDown 0.4s var(--ease) both;
    }

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#loginModalOverlay .modal-content {
    background: var(--surface, #ffffff);
    border-radius: var(--radius-l, 14px);
    padding: 32px 28px 28px;
    box-shadow: var(--shadow-lg, 0 30px 60px -20px rgba(20,24,27,.24));
    border: 1px solid var(--line, #e6e2d8);
    position: relative;
    overflow: hidden;
}

    /* خط مورب تزئینی در هدر (هماهنگ با تم صنعتی) */
    #loginModalOverlay .modal-content::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 3px;
        background: var(--primary, #ed5518);
        clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
    }

/* ---------- هدر مودال ---------- */
#loginModalOverlay .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 18px 0;
    border-bottom: 1px solid var(--line, #e6e2d8);
    margin-bottom: 20px;
}

#loginModalOverlay .modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink, #14181b);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

    #loginModalOverlay .modal-title i {
        color: var(--primary, #ed5518);
        font-size: 24px;
    }

#loginModalOverlay .close {
    background: none;
    border: none;
    font-size: 26px;
    color: var(--muted, #6d6f6b);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s var(--ease);
}

    #loginModalOverlay .close:hover {
        background: var(--bg-light, #f8f9fa);
        color: var(--ink, #14181b);
    }

/* ---------- سوئیچ روش ورود (موبایل / رمز ثابت) ---------- */
.login-switch {
    position: relative;
    display: flex;
    background: var(--bg-light, #f1f2f4);
    border-radius: 30px;
    padding: 4px;
    margin: 0 0 24px 0;
    user-select: none;
    cursor: pointer;
    height: 50px;
    border: 1px solid var(--line, #e6e2d8);
}

    .login-switch input[type="radio"] {
        display: none;
    }

    .login-switch .switch-label {
        flex: 1;
        text-align: center;
        padding: 10px 0;
        border-radius: 26px;
        font-weight: 600;
        font-size: 14px;
        color: var(--muted, #6d6f6b);
        transition: all 0.3s var(--ease);
        z-index: 2;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

        .login-switch .switch-label i {
            font-size: 18px;
        }

    .login-switch .switch-slider {
        position: absolute;
        top: 4px;
        right: 4px; /* RTL */
        width: calc(50% - 4px);
        height: calc(100% - 8px);
        background: var(--surface, #ffffff);
        border-radius: 26px;
        box-shadow: var(--shadow-sm, 0 2px 6px -2px rgba(20,24,27,.10));
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
    }

/* حالت فعال برای گزینه موبایل */
#methodMobile:checked ~ .switch-slider {
    transform: translateX(0%);
}

/* حالت فعال برای گزینه رمز ثابت (RTL) */
#methodPassword:checked ~ .switch-slider {
    transform: translateX(-100%);
}

#methodMobile:checked ~ .switch-label[for="methodMobile"],
#methodPassword:checked ~ .switch-label[for="methodPassword"] {
    color: var(--ink, #14181b);
    font-weight: 700;
}

/* ---------- تب‌های محتوا ---------- */
.tab-content {
    display: none;
    animation: fadeIn 0.3s var(--ease) both;
}

    .tab-content.active {
        display: block;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- فرم‌ها ---------- */
#loginModalOverlay .form-group {
    margin-bottom: 18px;
}

    #loginModalOverlay .form-group label {
        display: block;
        font-weight: 600;
        font-size: 13px;
        color: var(--ink-2, #1d2327);
        margin-bottom: 6px;
    }

#loginModalOverlay .form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--line, #e6e2d8);
    border-radius: var(--radius-m, 8px);
    font-size: 14px;
    color: var(--ink, #14181b);
    background: var(--bg-light, #f8f9fa);
    transition: all 0.25s var(--ease);
    box-sizing: border-box;
    direction: rtl;
}

    #loginModalOverlay .form-control:focus {
        border-color: var(--primary, #ed5518);
        background: var(--surface, #ffffff);
        box-shadow: 0 0 0 4px rgba(237, 85, 24, 0.12);
        outline: none;
    }

    #loginModalOverlay .form-control::placeholder {
        color: var(--muted-2, #97998f);
        font-size: 13px;
    }

/* ---------- چک‌باکس "مرا به خاطر بسپار" ---------- */
.remember-me {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 20px 0;
}

    .remember-me input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--primary, #ed5518);
        cursor: pointer;
        margin: 0;
    }

    .remember-me label {
        font-size: 14px;
        color: var(--ink-2, #1d2327);
        cursor: pointer;
        margin: 0;
        font-weight: 500;
    }

/* ---------- دکمه‌ها ---------- */
.btn-block {
    width: 100%;
    display: block;
    padding: 14px;
    border: none;
    border-radius: var(--radius-m, 8px);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    text-align: center;
}

.btn-primary {
    background: var(--primary, #ed5518);
    color: #fff;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

    .btn-primary:hover {
        background: #d44a14;
        transform: translateY(-2px);
        box-shadow: var(--shadow-orange, 0 14px 28px -12px rgba(255,90,31,.38));
    }

.btn-success {
    background: var(--green, #0e5c3f);
    color: #fff;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

    .btn-success:hover {
        background: var(--green-dark, #0a4530);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(14, 92, 63, 0.3);
    }

/* دکمه‌های لینک (تغییر شماره / ارسال مجدد) */
.btn-link {
    background: none;
    border: none;
    color: var(--primary, #ed5518);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--radius-s, 4px);
    transition: all 0.2s var(--ease);
}

    .btn-link:hover {
        background: rgba(237, 85, 24, 0.08);
        text-decoration: underline;
    }

/* ---------- پیغام‌های خطا و موفقیت ---------- */
.error-message {
    color: #dc2626;
    font-size: 13px;
    margin-top: 8px;
    display: none;
    padding: 8px 14px;
    background: #fef2f2;
    border-radius: var(--radius-s, 4px);
    border-right: 3px solid #dc2626;
}

    .error-message.show {
        display: block;
    }

.success-message {
    text-align: center;
    padding: 30px 20px;
}

    .success-message i {
        font-size: 52px;
        color: var(--green, #0e5c3f);
        display: block;
        margin-bottom: 16px;
    }

    .success-message p {
        font-size: 18px;
        color: var(--ink, #14181b);
        font-weight: 600;
        margin: 0;
    }

/* ---------- دکمه‌های اکشن (تغییر شماره / ارسال مجدد) ---------- */
.action-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    gap: 12px;
}

    .action-buttons .btn-link {
        font-size: 13px;
        color: var(--muted, #6d6f6b);
    }

        .action-buttons .btn-link:hover {
            color: var(--primary, #ed5518);
        }

/* ---------- فوتر مودال ---------- */
#loginModalOverlay .modal-footer {
    padding: 18px 0 0 0;
    border-top: 1px solid var(--line, #e6e2d8);
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 16px;
}

    #loginModalOverlay .modal-footer small {
        font-size: 12px;
        color: var(--muted-2, #97998f);
    }

    #loginModalOverlay .modal-footer a {
        color: var(--primary, #ed5518);
        text-decoration: none;
    }

        #loginModalOverlay .modal-footer a:hover {
            text-decoration: underline;
        }

/* ---------- ریسپانسیو ---------- */
@media (max-width: 576px) {
    #loginModalOverlay .modal-content {
        padding: 24px 16px 20px;
        border-radius: var(--radius-m, 8px);
    }

    #loginModalOverlay .modal-title {
        font-size: 17px;
    }

    .login-switch {
        height: 44px;
    }

        .login-switch .switch-label {
            font-size: 13px;
            padding: 8px 0;
        }

    #loginModalOverlay .form-control {
        padding: 10px 14px;
        font-size: 13px;
    }

    .btn-block {
        padding: 12px;
        font-size: 14px;
    }

    .action-buttons {
        flex-direction: column;
        gap: 6px;
    }

    #loginModalOverlay .modal-footer {
        flex-wrap: wrap;
        text-align: center;
    }
}

/* ---------- پنهان‌سازی اسکرول‌بار هنگام باز بودن مودال ---------- */
body.modal-open {
    overflow: hidden;
}

/* ---------- استایل فرم تکمیل پروفایل (بارگذاری داینامیک) ---------- */
#profileFormContainer .form-group {
    margin-bottom: 16px;
}

#profileFormContainer .form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--line, #e6e2d8);
    border-radius: var(--radius-m, 8px);
    font-size: 14px;
    transition: all 0.25s var(--ease);
    box-sizing: border-box;
    background: var(--bg-light, #f8f9fa);
}

    #profileFormContainer .form-control:focus {
        border-color: var(--primary, #ed5518);
        box-shadow: 0 0 0 4px rgba(237, 85, 24, 0.12);
        outline: none;
        background: var(--surface, #ffffff);
    }

#profileFormContainer select.form-control {
    appearance: auto;
    -webkit-appearance: auto;
}

#profileError {
    color: #dc2626;
    font-size: 13px;
    margin-top: 8px;
    display: none;
    padding: 8px 14px;
    background: #fef2f2;
    border-radius: var(--radius-s, 4px);
    border-right: 3px solid #dc2626;
}

    #profileError.show {
        display: block;
    }