/* ---------- WCAF CSS (applies only inside .wcaf-page-wrapper) ---------- */

/* page wrapper centers the card both vertically and horizontally */
/* .wcaf-page-wrapper فقط زمانی در DOM هست که شورتکد افزونه رندر شده باشد */
.wcaf-page-wrapper {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* اگر می‌خواهی یک پس‌زمینه نیمه‌تیره اضافه شود، اینجا تغییر بده */
    z-index: 99999; /* بالا نگه داشتن روی محتوا */
    padding: 12px; /* جلوگیری از چسبیدن به لبه‌ها روی موبایل */
}

/* wrapper / card (same visual as before) */
.wcaf-page-wrapper #wcaf-auth-wrapper,
.wcaf-page-wrapper .wcaf-card {
    max-width: 440px;
    width: 100%;
    box-sizing: border-box;
    padding: 18px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    direction: rtl;
    text-align: right;
    position: relative;
    font-family: inherit;
}

/* close button: keep on left side as exception to RTL */
.wcaf-page-wrapper .wcaf-close-btn,
.wcaf-page-wrapper #wcaf-close-btn {
    position: absolute;
    left: 10px;
    top: 8px;
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #444;
}

/* logo */
.wcaf-page-wrapper .wcaf-logo-wrap { text-align:center; margin-bottom:8px; }
.wcaf-page-wrapper .wcaf-logo { width:48px; height:48px; object-fit:contain; border-radius:6px; display:inline-block; }

/* title */
.wcaf-page-wrapper .wcaf-title { margin:4px 0 12px 0; font-size:18px; text-align:center; }

/* inputs */
.wcaf-page-wrapper .wcaf-form input[type="text"],
.wcaf-page-wrapper .wcaf-form input[type="password"],
.wcaf-page-wrapper .wcaf-form textarea {
    width: 100%;
    padding: 10px;
    margin: 6px 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    direction: ltr;
    text-align: left;
}

/* button color uses CSS variable so it can be set inline from PHP */
.wcaf-page-wrapper .wcaf-btn {
    display:block;
    width:100%;
    padding:10px;
    margin-top:10px;
    background: var(--wcaf-btn-color, #1769aa); /* default fallback */
    color: #fff;
    border:none;
    border-radius:6px;
    cursor:pointer;
}

/* actions and back */
.wcaf-page-wrapper .wcaf-actions { display:flex; gap:10px; align-items:center; justify-content:center; margin-top:6px; }
.wcaf-page-wrapper .wcaf-back { padding:6px 10px; min-width:40px; background:#eee; color:#333; border-radius:6px; border:1px solid #ddd; cursor:pointer; }

/* messages and switches */
.wcaf-page-wrapper .wcaf-switch { margin-top:6px; font-size:0.95em; text-align:center; }
.wcaf-page-wrapper .wcaf-switch a { color: var(--wcaf-btn-color, #1769aa); text-decoration:underline; margin:0 6px; }
.wcaf-page-wrapper .wcaf-message, .wcaf-page-wrapper #wcaf-register-note { text-align:center; margin-top:8px; }

/* forgot link under card */
.wcaf-page-wrapper .wcaf-forgot-wrap { margin-top:10px; text-align:center; }

/* responsive */
@media (max-width: 420px) {
    .wcaf-page-wrapper #wcaf-auth-wrapper, .wcaf-page-wrapper .wcaf-card { padding:14px; margin:0 6px; width: calc(100% - 12px); }
    .wcaf-page-wrapper .wcaf-logo { width:40px; height:40px; }
    .wcaf-page-wrapper .wcaf-title { font-size:16px; }
}

/* focus */
.wcaf-page-wrapper .wcaf-form input:focus,
.wcaf-page-wrapper .wcaf-btn:focus,
.wcaf-page-wrapper .wcaf-back:focus,
.wcaf-page-wrapper .wcaf-close-btn:focus {
    outline: 2px solid rgba(23,105,170,0.18);
    outline-offset: 2px;
}