/**
 * 15-login.css — wp-login.php styling for arabdown.net
 * يُحمَّل فقط على wp-login.php عبر login_enqueue_scripts hook.
 *
 * المراجع البصرية:
 *   - Linear.app login    → بطاقة مدمجة على gradient ناعم
 *   - GitHub signup       → input fields نظيفة + submit واضح
 *   - Medium signup       → focus state بحلقة لونية لطيفة
 *
 * بنية wp-login.php الافتراضية:
 *   body.login
 *     #login
 *       h1 > a              ← logo (background-image)
 *       form#loginform | #registerform | #lostpasswordform
 *         p > label + input.input
 *         p.forgetmenot > input + label
 *         p.submit > input#wp-submit
 *       p#nav   (links register / lost password)
 *       p#backtoblog (back to site)
 *       div#login_error / div.message
 *
 * ملاحظة: لتغيير صورة اللوغو، أضف hook login_head في functions.php
 *         بدلاً من تثبيت مسار في CSS (يكسر لو نُقل الملف).
 *
 * هذا الملف: للصفحات الأصلية wp-login.php فقط.
 * للصفحة المخصصة page-writer-auth.php → انظر 13-custom-pages.css (.adc-auth-page).
 */

/* ════════════════════════════════════════════════════════════════════════
   1. BODY — Gradient Background + Center Layout
   ════════════════════════════════════════════════════════════════════════ */
body.login {
    background: linear-gradient(135deg, #f0f7e8 0%, #fafff7 60%, #eef5e6 100%) !important;
    min-height: 100vh;
    margin: 0;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "IBM Plex Sans Arabic", "Tajawal", "Readex Pro", system-ui, -apple-system, sans-serif;
    direction: rtl;
}

/* WordPress يضع رسائل خارج #login (مثل language switcher) — نتأكد من المركزة */
body.login > * {
    margin-inline: auto;
}

/* ════════════════════════════════════════════════════════════════════════
   2. LOGIN BOX (#login) — Card Container
   ════════════════════════════════════════════════════════════════════════ */
body.login #login {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 40px 36px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10);
}

/* ════════════════════════════════════════════════════════════════════════
   3. LOGO — h1 > a
   ──────────────────────────────────────────────────────────────────────
   لتغيير الصورة، استخدم login_head hook في functions.php.
   هنا فقط نضبط الأبعاد والمسافات حسب البرومت.
   ════════════════════════════════════════════════════════════════════════ */
body.login h1 {
    margin: 0 0 32px;
    text-align: center;
}
body.login h1 a {
    display: block;
    width: 100%;
    max-width: 160px;
    height: 60px;
    margin: 0 auto;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    text-indent: -9999px;
    overflow: hidden;
    outline: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   4. FORM TITLE — اختياري لو كان موجوداً
   ──────────────────────────────────────────────────────────────────────
   wp-login.php لا يحقن عنواناً افتراضياً، لكن plugins قد تفعل.
   نمنح أي h2/h3 داخل #login نمطاً موحداً.
   ════════════════════════════════════════════════════════════════════════ */
body.login #login h2,
body.login #login h3,
body.login #login .login-form-title {
    font-size: 24px;
    font-weight: 800;
    color: #111;
    text-align: center;
    margin: 0 0 24px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* ════════════════════════════════════════════════════════════════════════
   5. FORM (loginform / registerform / lostpasswordform)
   ════════════════════════════════════════════════════════════════════════ */
body.login form {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.login form p {
    margin: 0 0 16px !important;
}
body.login form p.submit {
    margin: 24px 0 0 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   6. LABELS
   ════════════════════════════════════════════════════════════════════════ */
body.login form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    line-height: 1.4;
}

/* "بريد إلكتروني / اسم مستخدم" — WP يضع label نصاً متبوعاً بـ <br> ثم input.
   نلغي الـ br المرئي ونعتمد على display:block للـ label */
body.login form label br {
    display: none;
}

/* ════════════════════════════════════════════════════════════════════════
   7. INPUTS
   ════════════════════════════════════════════════════════════════════════ */
body.login form input[type="text"],
body.login form input[type="email"],
body.login form input[type="password"],
body.login form input[type="tel"],
body.login form input[type="url"],
body.login form input.input {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    color: #111 !important;
    background: #fafafa !important;
    box-shadow: none !important;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
    margin: 0 !important;
    box-sizing: border-box;
    height: auto !important;
    line-height: 1.5;
}

body.login form input[type="text"]:focus,
body.login form input[type="email"]:focus,
body.login form input[type="password"]:focus,
body.login form input[type="tel"]:focus,
body.login form input[type="url"]:focus,
body.login form input.input:focus {
    border-color: #6e9f44 !important;
    box-shadow: 0 0 0 3px rgba(110, 159, 68, 0.15) !important;
    background: #ffffff !important;
    outline: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   8. CHECKBOX (Remember Me)
   ════════════════════════════════════════════════════════════════════════ */
body.login form .forgetmenot,
body.login form p.forgetmenot {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #555;
    margin: 12px 0 8px !important;
    line-height: 1.5;
}
body.login form .forgetmenot label {
    display: inline;
    margin: 0;
    font-weight: 500;
    color: #555;
    cursor: pointer;
}
body.login form input[type="checkbox"] {
    accent-color: #6e9f44;
    width: 16px;
    height: 16px;
    margin: 0 !important;
    cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════════
   9. SUBMIT BUTTON
   ════════════════════════════════════════════════════════════════════════ */
body.login form .submit {
    margin-top: 24px !important;
}

body.login form #wp-submit,
body.login form input[type="submit"],
body.login form button[type="submit"],
body.login form .button-primary {
    width: 100% !important;
    padding: 14px !important;
    background: #6e9f44 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: background 150ms ease, transform 80ms ease !important;
    box-shadow: none !important;
    text-shadow: none !important;
    height: auto !important;
    line-height: 1.4 !important;
    float: none !important;
    margin: 0 !important;
    letter-spacing: 0;
}

body.login form #wp-submit:hover,
body.login form input[type="submit"]:hover,
body.login form button[type="submit"]:hover,
body.login form .button-primary:hover {
    background: #3d6420 !important;
    color: #fff !important;
    transform: none;
}

body.login form #wp-submit:active,
body.login form input[type="submit"]:active,
body.login form button[type="submit"]:active {
    transform: scale(0.98);
}

body.login form #wp-submit:focus {
    box-shadow: 0 0 0 3px rgba(110, 159, 68, 0.30) !important;
    outline: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   10. NAV LINKS (#nav) — register / lost password
   ════════════════════════════════════════════════════════════════════════ */
body.login #nav,
body.login p#nav {
    text-align: center !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: #5c6356;
    text-shadow: none !important;
}
body.login #nav a,
body.login p#nav a {
    color: #6e9f44 !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: color 150ms ease;
}
body.login #nav a:hover,
body.login p#nav a:hover {
    color: #3d6420 !important;
    text-decoration: underline !important;
    text-decoration-color: #c8e0a8 !important;
    text-underline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════════════════
   11. BACK TO SITE LINK (#backtoblog)
   ════════════════════════════════════════════════════════════════════════ */
body.login #backtoblog,
body.login p#backtoblog {
    text-align: center !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: #5c6356;
    text-shadow: none !important;
}
body.login #backtoblog a,
body.login p#backtoblog a {
    color: #5c6356 !important;
    text-decoration: none !important;
    transition: color 150ms ease;
}
body.login #backtoblog a:hover,
body.login p#backtoblog a:hover {
    color: #6e9f44 !important;
    text-decoration: underline !important;
    text-decoration-color: #c8e0a8 !important;
    text-underline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════════════════
   12. ERROR / MESSAGE BOXES
   ══════════════════════════════════════════════════════════════════════ */
body.login #login_error,
body.login .login .message,
body.login #login .message {
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin: 0 0 20px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-color: #ffffff !important;
}

body.login #login_error {
    background: #fff0f0 !important;
    border: 1px solid #ffcdd2 !important;
    color: #c0392b !important;
    border-inline-start: 1px solid #ffcdd2 !important;
}
body.login #login_error a {
    color: #c0392b !important;
    font-weight: 600;
}

body.login .message,
body.login #login .message {
    background: #f0f7e8 !important;
    border: 1px solid #d4e8c0 !important;
    color: #3d6420 !important;
    border-inline-start: 1px solid #d4e8c0 !important;
}

/* رسالة "تم إرسال البريد" بعد lost password */
body.login .message strong {
    color: inherit;
}

/* ════════════════════════════════════════════════════════════════════════
   13. PRIVACY POLICY LINK (يظهر لـ register عادةً)
   ════════════════════════════════════════════════════════════════════════ */
body.login .privacy-policy-page-link,
body.login .login-action-register .privacy-policy-page-link {
    margin-top: 20px !important;
    text-align: center;
    font-size: 12px;
    color: #6f7868;
}
body.login .privacy-policy-page-link a {
    color: #5c6356;
    text-decoration: underline;
    text-decoration-color: #ddd;
    text-underline-offset: 2px;
}
body.login .privacy-policy-page-link a:hover {
    color: #6e9f44;
    text-decoration-color: #c8e0a8;
}

/* ════════════════════════════════════════════════════════════════════════
   14. LANGUAGE SWITCHER (إن ظهر — WP 5.9+)
   ════════════════════════════════════════════════════════════════════════ */
body.login .language-switcher {
    margin: 24px auto 0 !important;
    text-align: center;
}
body.login .language-switcher select {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    background: #fff;
}

/* ════════════════════════════════════════════════════════════════════════
   15. REGISTER PAGE — إضافات
   ──────────────────────────────────────────────────────────────────────
   لو plugin أضاف حقولاً إضافية، نمنحها نفس الستايل عبر selectors عامة.
   ════════════════════════════════════════════════════════════════════════ */
body.login.login-action-register #login {
    max-width: 460px; /* قليلاً أوسع لاستيعاب حقول إضافية */
}
body.login form .login-username,
body.login form .login-email,
body.login form .login-password {
    margin-bottom: 16px !important;
}

/* رسالة "كلمة المرور قوية / ضعيفة" — wp pwd strength meter */
body.login #pass-strength-result {
    width: 100% !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    margin: 8px 0 0 !important;
    border-width: 1px !important;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    box-shadow: none !important;
}
body.login #pass-strength-result.short {
    background: #fff0f0 !important;
    border-color: #ffcdd2 !important;
    color: #c0392b !important;
}
body.login #pass-strength-result.bad {
    background: #fff8e1 !important;
    border-color: #ffe082 !important;
    color: #b26a00 !important;
}
body.login #pass-strength-result.good {
    background: #f0f7e8 !important;
    border-color: #d4e8c0 !important;
    color: #3d6420 !important;
}
body.login #pass-strength-result.strong {
    background: #e8f5dc !important;
    border-color: #6e9f44 !important;
    color: #2d4a1e !important;
}

/* "Generate Password" button (WP register flow) */
body.login .wp-generate-pw,
body.login .pw-weak {
    margin-top: 8px;
}
body.login button.wp-generate-pw,
body.login button.wp-hide-pw {
    background: transparent !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    color: #555 !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
    box-shadow: none !important;
    text-shadow: none !important;
    height: auto !important;
}
body.login button.wp-generate-pw:hover,
body.login button.wp-hide-pw:hover {
    border-color: #6e9f44 !important;
    color: #6e9f44 !important;
}

/* File upload zones (إن استخدمها plugin) */
body.login form input[type="file"] {
    width: 100%;
    padding: 16px;
    border: 2px dashed #d4e8c0;
    background: #fafff8;
    border-radius: 8px;
    cursor: pointer;
    color: #555;
    font-size: 14px;
}
body.login form input[type="file"]:hover {
    border-color: #6e9f44;
    background: #f0f7e8;
}

/* Multi-step form (إن استخدمها plugin) — fade transition */
body.login .step-indicator {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}
body.login .step-indicator .step {
    width: 32px;
    height: 4px;
    background: #e5e5e5;
    border-radius: 2px;
    transition: background 200ms ease;
}
body.login .step-indicator .step.active {
    background: #6e9f44;
}
body.login .form-step {
    animation: adc-login-fade 250ms ease;
}
@keyframes adc-login-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════════
   16. RESPONSIVE — Mobile
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    body.login {
        padding: 0;
        align-items: stretch;
    }
    body.login #login {
        max-width: none;
        width: 100%;
        min-height: 100vh;
        padding: 24px 20px;
        border-radius: 0;
        box-shadow: none;
        border: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    body.login h1 {
        margin-bottom: 24px;
    }
    body.login h1 a {
        max-width: 130px;
        height: 50px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   17. ADMIN BAR — إخفاء على wp-login.php (لا يظهر افتراضياً، احتياطي)
   ══════════════════════════════════════════════════════════════════════ */
body.login #wpadminbar {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   18. RTL — تأكيد الاتجاه (WP يحقن أحياناً LTR على wp-login)
   ══════════════════════════════════════════════════════════════════════ */
body.login,
body.login #login,
body.login form,
body.login form p,
body.login form label {
    direction: rtl;
    text-align: start;
}
body.login form .forgetmenot label {
    direction: rtl;
}