@import url('https://fonts.googleapis.com/css2?family=Markazi+Text:wght@400;500;600;700&display=swap');

:root {
    --engplus-auth-blue-950: #061b47;
    --engplus-auth-blue-900: #082d63;
    --engplus-auth-blue-700: #086fae;
    --engplus-auth-blue-600: #0b86c4;
    --engplus-auth-cyan: #26c9e8;
    --engplus-auth-text: #1c405f;
    --engplus-auth-muted: #70869a;
    --engplus-auth-border: #dfeaf3;
    --engplus-auth-bg: #eef4f9;
    --engplus-auth-white: #ffffff;
    --engplus-auth-danger: #a63b4c;
    --engplus-auth-danger-bg: #fff0f2;
    --engplus-auth-info: #176d98;
    --engplus-auth-info-bg: #edf9ff;
}

* {
    box-sizing: border-box;
}

html {
    direction: rtl;
}

body.engplus-auth-page {
    margin: 0;
    min-height: 100vh;
    font-family: 'Markazi Text', serif;
    background:
        radial-gradient(circle at 90% 5%, rgba(38, 201, 232, .13), transparent 24%),
        radial-gradient(circle at 5% 92%, rgba(19, 119, 192, .11), transparent 25%),
        linear-gradient(145deg, #f6f9fc 0%, var(--engplus-auth-bg) 100%);
    color: var(--engplus-auth-text);
}

.engplus-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 16px;
}

.engplus-auth-card {
    width: min(100%, 790px);
    position: relative;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(24, 104, 165, .10);
    border-radius: 27px;
    padding: 28px 30px 25px;
    box-shadow: 0 24px 70px rgba(13, 57, 95, .11);
    overflow: hidden;
}

.engplus-auth-card::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    top: -155px;
    left: -120px;
    border-radius: 50%;
    background: rgba(38, 201, 232, .14);
    filter: blur(12px);
    pointer-events: none;
}

.engplus-auth-brand {
    text-align: center;
    max-width: 590px;
    margin: 0 auto 23px;
}

/* إصلاح تباين الشعار الأصفر الأصلي بدون تغيير ألوانه */
.engplus-auth-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    margin-bottom: 10px;
    min-width: 176px;
    min-height: 65px;
    border-radius: 18px;
    text-decoration: none;
    background:
        radial-gradient(circle at 50% 15%, rgba(34, 139, 196, .35), transparent 55%),
        linear-gradient(135deg, #082d63, #0b4d82);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 9px 22px rgba(8, 45, 99, .15);
}

.engplus-auth-logo {
    width: 145px;
    max-width: 46vw;
    height: auto;
    display: block;
    margin: 0 auto;
}

.engplus-auth-eyebrow {
    display: inline-block;
    padding: 4px 13px;
    border-radius: 50px;
    background: #eaf8ff;
    border: 1px solid #d4eefb;
    color: #0a77ae;
    font-size: 15px;
    margin-bottom: 7px;
}

.engplus-auth-brand h1 {
    margin: 0 0 5px;
    color: #163d61;
    font-size: 30px;
    line-height: 1.3;
    font-weight: 700;
}

.engplus-auth-brand p {
    margin: 0;
    color: var(--engplus-auth-muted);
    font-size: 18px;
    line-height: 1.65;
}

.engplus-auth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 15px;
}

.engplus-auth-field-full {
    grid-column: 1 / -1;
}

.engplus-auth-field label {
    display: block;
    margin: 0 4px 6px;
    font-size: 17px;
    color: #274d6c;
    font-weight: 600;
}

.engplus-auth-field label span {
    margin-right: 3px;
    color: #93a4b3;
    font-size: 14px;
    font-weight: 400;
}

.engplus-auth-input-wrap {
    position: relative;
}

.engplus-auth-input-wrap > i {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #6d9cba;
    font-size: 16px;
    pointer-events: none;
}

.engplus-auth-input-wrap input,
.engplus-auth-input-wrap select {
    width: 100%;
    height: 48px;
    border: 1px solid var(--engplus-auth-border);
    border-radius: 13px;
    background: #fbfdff;
    outline: 0;
    padding: 8px 42px 8px 13px;
    color: #1d415e;
    font-family: 'Markazi Text', serif;
    font-size: 17px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.engplus-auth-input-wrap select {
    cursor: pointer;
}

.engplus-auth-input-wrap input:focus,
.engplus-auth-input-wrap select:focus {
    border-color: rgba(11, 134, 196, .50);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(38, 201, 232, .08);
}

.engplus-password-toggle {
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #7f94a6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.engplus-auth-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f6fafc;
    color: #6f8496;
    text-align: center;
    font-size: 15px;
}

.engplus-auth-security-note i {
    color: #168a6b;
}

.engplus-auth-submit {
    width: 100%;
    min-height: 49px;
    margin-top: 15px;
    border: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
    background: linear-gradient(135deg, #086eb4, #0c9bcf);
    box-shadow: 0 12px 27px rgba(8, 122, 181, .22);
    font-family: 'Markazi Text', serif;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.engplus-auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(8, 122, 181, .28);
}

.engplus-auth-submit:disabled {
    opacity: .65;
    cursor: wait;
    transform: none;
}

.engplus-auth-submit-link {
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
}

.engplus-auth-secondary-link {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 5px;
    color: #0b75ad;
    font-size: 18px;
    text-decoration: none;
}

.engplus-auth-footer-links {
    margin-top: 18px;
    text-align: center;
    color: #8496a5;
    font-size: 16px;
}

.engplus-auth-footer-links a {
    color: #0b75ad;
    text-decoration: none;
    font-weight: 600;
}

.engplus-auth-dot {
    margin: 0 7px;
    color: #c3ccd4;
}

.engplus-auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 16px;
    padding: 11px 13px;
    border-radius: 12px;
    font-size: 16px;
    line-height: 1.55;
}

.engplus-auth-alert-error {
    color: var(--engplus-auth-danger);
    background: var(--engplus-auth-danger-bg);
    border: 1px solid #f3d0d7;
}

.engplus-auth-alert-info {
    color: var(--engplus-auth-info);
    background: var(--engplus-auth-info-bg);
    border: 1px solid #d4edf8;
}

.engplus-verify-card,
.engplus-success-card,
.engplus-login-card {
    width: min(100%, 570px);
}

.engplus-login-card .engplus-auth-field + .engplus-auth-field {
    margin-top: 14px;
}

.engplus-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 13px 3px 0;
    font-size: 14px;
}

.engplus-login-security {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #168465;
}

.engplus-login-forgot-coming {
    color: #8a9ca9;
}

.engplus-login-forgot-link {
    color: #0b75ad;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}

.engplus-login-forgot-link:hover {
    color: #095c89;
    text-decoration: underline;
}

.engplus-verify-icon,
.engplus-success-icon {
    width: 68px;
    height: 68px;
    margin: 5px auto 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf8ff;
    color: #0c7eb7;
    border: 1px solid #d3edf9;
    font-size: 31px;
}

.engplus-success-icon {
    border-radius: 50%;
    color: #118363;
    background: #eaf9f4;
    border-color: #ccecdf;
}

.engplus-code-label {
    text-align: center;
    color: #46647c;
    font-size: 17px;
    margin-bottom: 7px;
}

.engplus-code-input {
    display: block;
    width: min(100%, 340px);
    height: 64px;
    margin: 0 auto;
    border: 1px solid #cae2ef;
    border-radius: 15px;
    outline: 0;
    background: #f8fcff;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 10px;
    color: #0b71aa;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.engplus-code-input:focus {
    border-color: #2aa8d5;
    box-shadow: 0 0 0 4px rgba(42, 168, 213, .09);
}

.engplus-resend-area {
    margin-top: 16px;
    text-align: center;
    font-size: 16px;
    color: #7c8f9f;
}

.engplus-resend-area button {
    border: 0;
    background: transparent;
    color: #0b75ad;
    font-family: 'Markazi Text', serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.engplus-resend-area button:disabled {
    color: #9aabb8;
    cursor: wait;
}

.engplus-resend-status {
    min-height: 22px;
    margin-top: 5px;
    color: #6d8294;
    font-size: 14px;
}

@media (max-width: 680px) {
    .engplus-auth-shell {
        align-items: flex-start;
        padding: 18px 11px;
    }

    .engplus-auth-card {
        border-radius: 21px;
        padding: 22px 15px 20px;
    }

    .engplus-auth-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .engplus-auth-field-full {
        grid-column: auto;
    }

    .engplus-auth-brand h1 {
        font-size: 27px;
    }

    .engplus-auth-brand p {
        font-size: 17px;
    }

    .engplus-auth-logo-link {
        min-width: 160px;
        min-height: 61px;
        padding: 9px 14px;
    }

    .engplus-auth-logo {
        width: 128px;
    }

    .engplus-login-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}


/* =========================================================
   EngPlus Password Recovery V8
   ========================================================= */

.engplus-recovery-card {
    width: min(100%, 570px);
}

.engplus-recovery-email-box {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    align-items: center;
    gap: 11px;
    margin-bottom: 15px;
    padding: 13px;
    border-radius: 14px;
    background: #f4faff;
    border: 1px solid #dcecf6;
}

.engplus-recovery-email-box > i {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #e4f7ff;
    color: #0b7bb6;
    font-size: 21px;
}

.engplus-recovery-email-box span,
.engplus-recovery-email-box strong {
    display: block;
}

.engplus-recovery-email-box span {
    color: #7c8f9f;
    font-size: 14px;
}

.engplus-recovery-email-box strong {
    margin-top: 2px;
    color: #284f6c;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.engplus-recovery-password-field {
    margin-top: 17px;
}

.engplus-recovery-attempts {
    width: fit-content;
    margin: 8px auto 15px;
    padding: 4px 11px;
    border-radius: 50px;
    background: #f6fafc;
    color: #7a8d9d;
    font-size: 14px;
}

.engplus-recovery-attempts strong {
    color: #0b75ad;
}

.engplus-recovery-resend-form {
    margin-top: 11px;
    text-align: center;
}

.engplus-recovery-resend-button {
    border: 0;
    background: transparent;
    color: #0b75ad;
    font-family: 'Markazi Text', serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 10px;
}

.engplus-recovery-resend-button:hover {
    text-decoration: underline;
}

@media (max-width: 520px) {
    .engplus-login-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}