/* =========================================
   1. Font Definitions
   ========================================= */
@font-face {
    font-family: 'PW-IRANSans';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/IRANSans-Light-web.woff2') format('woff2'),
         url('../fonts/IRANSans-Light-web.woff') format('woff');
}

@font-face {
    font-family: 'PW-IRANSans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/IRANSans-web.woff2') format('woff2'),
         url('../fonts/IRANSans-web.woff') format('woff');
}

@font-face {
    font-family: 'PW-IRANSans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/IRANSans-Bold-web.woff2') format('woff2'),
         url('../fonts/IRANSans-Bold-web.woff') format('woff');
}

@font-face {
    font-family: 'PW-FontAwesome';
    src: url('../fonts/font-awesome-4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('../fonts/font-awesome-4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
         url('../fonts/font-awesome-4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
         url('../fonts/font-awesome-4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
         url('../fonts/font-awesome-4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
         url('../fonts/font-awesome-4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

:root {
    --pw-primary: #ef4056;
    --pw-primary-hover: #d32f2f;
    --pw-text-dark: #3f4064;
    --pw-text-grey: #767790;
    --pw-border: #e0e0e2;
    --pw-bg-input: #f0f0f1;
    --pw-white: #ffffff;
    --pw-radius: 8px;
    --pw-font: 'PW-IRANSans', sans-serif;
    --pw-icon-font: 'PW-FontAwesome', sans-serif;
}

/* =========================================
   2. Utility Classes
   ========================================= */
.hidden {
    display: none !important;
}

/* =========================================
   3. Modal & Overlay
   ========================================= */
.pw-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.pw-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.pw-modal-box {
    width: 100%;
    max-width: 400px;
    margin: 15px;
    position: relative;
    animation: pwSlideUp 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* =========================================
   4. Main Container
   ========================================= */
/* استایل پیش‌فرض (حالت برگه دسکتاپ) */
.pw-auth-container {
    background: var(--pw-white);
    padding: 35px 30px;
    border-radius: var(--pw-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    
    /* تغییر مهم: استفاده از vh برای وسط‌چین عمودی */
    width: 100%;
    max-width: 400px; 
    margin: 15vh auto; /* فاصله ۱۵ درصد از بالا برای تعادل بصری */
    
    direction: rtl;
    text-align: right;
    font-family: var(--pw-font);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    line-height: normal;
}

/* اصلاح مارجین وقتی فرم داخل مودال است */
.pw-modal-box .pw-auth-container {
    margin: 0; /* حذف فاصله در حالت پاپ‌آپ */
    max-width: 100%;
    box-shadow: none;
}

/* CSS Reset داخلی */
.pw-auth-container * {
    box-sizing: border-box;
}

/* اعمال فونت فارسی */
.pw-auth-container h1, 
.pw-auth-container h2, 
.pw-auth-container h3, 
.pw-auth-container h4, 
.pw-auth-container h5, 
.pw-auth-container h6,
.pw-auth-container p,
.pw-auth-container a,
.pw-auth-container span,
.pw-auth-container label,
.pw-auth-container input,
.pw-auth-container button,
.pw-auth-container .elementor-button-text {
    font-family: var(--pw-font) !important;
}

/* اعمال فونت آیکون */
.pw-auth-container .fa,
.pw-auth-container .fas,
.pw-auth-container .far,
.pw-auth-container .fab,
.pw-auth-container i[class*="fa-"] {
    font-family: var(--pw-icon-font) !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

/* =========================================
   5. Header Elements
   ========================================= */
.pw-auth-header {
    text-align: center;
    margin-bottom: 20px;
}

.pw-site-logo {
    max-height: 40px;
    width: auto;
    margin-bottom: 15px;
    display: inline-block;
}

.pw-site-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--pw-text-dark);
    margin: 0;
    line-height: 1.4;
}

/* =========================================
   6. Steps & Typography
   ========================================= */
.step-title {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.step-desc {
    font-size: 13px;
    color: var(--pw-text-grey);
    margin: 0 0 20px 0;
    line-height: 1.6;
}

.step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fdfdfd;
    border: 1px solid #eee;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 13px;
}

.user-mobile-display {
    color: var(--pw-text-dark);
    font-weight: 500;
    letter-spacing: 1px;
    direction: ltr; 
}

.btn-edit-mobile, .btn-back-login, .btn-back-reg-info {
    cursor: pointer;
    color: var(--pw-primary);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.2s;
    text-decoration: none;
}

.btn-edit-mobile:hover {
    color: var(--pw-primary-hover);
}

/* =========================================
   7. Inputs
   ========================================= */
.input-wrapper {
    margin-bottom: 20px;
    position: relative;
}

.input-wrapper input {
    width: 100% !important;
    height: 50px !important;
    padding: 0 15px !important;
    background: var(--pw-bg-input) !important;
    border: 1px solid transparent !important;
    border-radius: var(--pw-radius) !important;
    font-size: 14px !important;
    color: var(--pw-text-dark) !important;
    transition: all 0.2s ease;
    outline: none !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.input-wrapper input:focus {
    background: var(--pw-white) !important;
    border-color: #c0c0c0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04) !important;
}

.input-wrapper input.otp-input {
    text-align: center;
    font-size: 19px !important;
    letter-spacing: 8px;
    font-weight: 700;
}

/* =========================================
   8. Buttons
   ========================================= */
.pw-btn-primary {
    width: 100% !important;
    height: 50px !important;
    background-color: var(--pw-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--pw-radius) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 10px !important;
    padding: 0 !important;
    line-height: 50px !important;
}

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

.pw-btn-primary:disabled {
    background-color: #e0e0e2 !important;
    color: #a1a3a8 !important;
    cursor: not-allowed !important;
}

/* =========================================
   9. Links & Timer
   ========================================= */
.auth-links {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 12px;
    text-align: center;
}

.auth-links a {
    color: var(--pw-text-dark);
    text-decoration: none !important;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 2px;
    display: inline-block;
    align-self: center;
    transition: 0.2s;
}

.auth-links a:hover {
    color: #000;
    border-bottom-style: solid;
}

.timer-box {
    font-size: 12px;
    color: var(--pw-text-grey);
    margin-top: -10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
}

.resend-otp-link {
    color: var(--pw-primary) !important;
    font-weight: 700;
    text-decoration: none !important;
}

/* =========================================
   10. Notifications
   ========================================= */
.pw-notification {
    margin-bottom: 20px;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    display: flex;
    align-items: center;
}

.pw-notification.error {
    background-color: #fef2f2;
    color: #ef4056;
    border: 1px solid #fecaca;
}

.pw-notification.success {
    background-color: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* =========================================
   11. Close Button & Responsive
   ========================================= */
.pw-modal-close {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #333;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: 0.2s;
    line-height: 1;
}

.pw-modal-close:hover {
    color: #d32f2f;
}

.pw-modal-overlay.locked .pw-modal-close {
    display: none;
}

body.pw-modal-open {
    overflow: hidden;
}

@keyframes pwSlideUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* =========================================
   12. Mobile Responsive Overrides
   ========================================= */
@media (max-width: 480px) {
    /* حالت برگه در موبایل: فاصله کمتر و عرض بیشتر */
    .pw-auth-container {
        margin: 20px auto; 
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
        border: 1px solid #f0f0f0;
    }

    /* حالت پاپ‌آپ در موبایل: تمام صفحه و بدون مارجین */
    .pw-modal-box {
        margin: 0;
        max-width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .pw-modal-box .pw-auth-container {
        height: 100%; /* ارتفاع کامل */
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: none;
        margin: 0; /* اطمینان از حذف مارجین */
    }

    .pw-modal-close {
        top: 20px;
        left: 20px;
        background: transparent;
        font-size: 32px;
    }
}