/* ============================================================
   assets/wrl-style.css  —  نموذج تسجيل الدخول
   يستخدم نفس متغيّرات wrg-style.css تماماً
   ============================================================ */

/* ── الحاوية (مشتركة مع نموذج التسجيل) ─────────────────── */
.wrg-form-container {
    max-width: 500px;           /* أضيق قليلاً لأن الدخول أبسط */
    margin: 30px auto;
    background: #fff;
    padding: 35px 40px;
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(0,0,0,.10);
    font-family: Arial, sans-serif;
    direction: rtl;
}
.page-title{display:none}
/* ── العنوان ─────────────────────────────────────────────── */
.wrg-form-header {
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    color: #1a1a1a;
    margin-bottom: 28px;
}

/* ── النموذج ─────────────────────────────────────────────── */
#wrl-login-form,
#wrl-forgot-form {
    display: grid;
    gap: 16px;
}

/* ── مجموعة الحقل ────────────────────────────────────────── */
.wrg-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wrg-form-group label {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.wrg-req { color: #e53935; }

/* ── حقول الإدخال ────────────────────────────────────────── */
.wrg-form-group input[type="text"],
.wrg-form-group input[type="email"],
.wrg-form-group input[type="password"] {
    height: 52px;
    border-radius: 10px;
    border: 1.8px solid #4caf50;
    padding: 0 14px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    color: #222;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.wrg-form-group input:focus {
    border-color: #1b8c20;
    box-shadow: 0 0 0 3px rgba(76,175,80,.18);
}

/* ── كلمة المرور ─────────────────────────────────────────── */
.wrg-pass-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.wrg-pass-wrap input {
    padding-left: 48px !important;
    width: 100%;
    box-sizing: border-box;
}

.wrg-eye {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    display: flex;
    align-items: center;
    transition: color .2s;
}

.wrg-eye:hover { color: #4caf50; }
.wrg-eye svg   { pointer-events: none; }

/* ── صف تذكّرني + نسيت كلمة المرور ─────────────────────── */
.wrl-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -4px;
}

.wrl-remember {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    color: #444;
    cursor: pointer;
    user-select: none;
}

.wrl-remember input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #4caf50;
    cursor: pointer;
}

/* ── أزرار نصية (نسيت؟ / عودة) ──────────────────────────── */
.wrl-link-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 15px;
    color: #4caf50;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
    transition: color .2s;
}

.wrl-link-btn:hover { color: #1b8c20; }

/* ── رسالة الحالة ────────────────────────────────────────── */
.wrg-msg {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}

.wrg-msg.success { background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7; }
.wrg-msg.error   { background:#ffebee; color:#c62828; border:1px solid #ef9a9a; }

/* ── أزرار الإرسال ───────────────────────────────────────── */
#wrl-submit,
#wrl-forgot-submit {
    height: 54px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
    letter-spacing: .5px;
    width: 100%;
}

#wrl-submit:hover,
#wrl-forgot-submit:hover    { opacity: .92; transform: translateY(-1px); }

#wrl-submit:disabled,
#wrl-forgot-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* ── رابط إنشاء حساب / عودة ─────────────────────────────── */
.wrl-switch-text {
    text-align: center;
    font-size: 15px;
    color: #555;
    margin: 18px 0 0;
}

.wrl-link {
    color: #4caf50;
    font-weight: bold;
    text-decoration: none;
}

.wrl-link:hover { color: #1b8c20; text-decoration: underline; }

/* ── تلميح لوحة نسيت كلمة المرور ───────────────────────── */
.wrl-forgot-hint {
    font-size: 15px;
    color: #555;
    text-align: center;
    margin: -12px 0 8px;
    line-height: 1.6;
}

/* ── انتقال اللوحتين ─────────────────────────────────────── */
#wrl-login-panel,
#wrl-forgot-panel {
    animation: wrlFadeIn .25s ease;
}

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

/* ── جوال ────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .wrg-form-container { padding: 24px 18px; margin: 15px; }
    .wrg-form-header    { font-size: 22px; }
    .wrl-meta-row       { flex-direction: column; align-items: flex-start; gap: 8px; }
}