/* =========================================================
   EDUCATION AUTH
========================================================= */

.education-auth-page {

    --education-gold: #b99352;
    --education-gold-light: #d5b878;

    --education-green: #59634e;
    --education-green-dark: #34372e;

    --education-cream: #f8f5ed;
    --education-white: #ffffff;

    --education-text: #3c3c35;
    --education-muted: #8c8b82;

    min-height: 100vh;

    padding: 70px 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(185,147,82,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(89,99,78,.10),
            transparent 30%
        ),
        var(--education-cream);

    direction: rtl;
}


/* =========================================================
   DECORATIONS
========================================================= */

.education-auth-decoration {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(1px);

}


.education-auth-decoration-one {

    width: 360px;

    height: 360px;

    top: -180px;

    right: -140px;

    background:
        rgba(185,147,82,.08);

}


.education-auth-decoration-two {

    width: 300px;

    height: 300px;

    bottom: -150px;

    left: -100px;

    background:
        rgba(89,99,78,.08);

}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.education-auth-container {

    width: min(1120px, 100%);

    min-height: 650px;

    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(430px, 1.05fr);

    background:
        rgba(255,255,255,.75);

    border:
        1px solid rgba(255,255,255,.8);

    border-radius: 32px;

    overflow: hidden;

    box-shadow:
        0 30px 80px rgba(40,42,34,.14);

    backdrop-filter: blur(18px);

    position: relative;

    z-index: 2;

}


/* =========================================================
   INTRO
========================================================= */

.education-auth-intro {

    position: relative;

    padding: 58px 55px;

    color: white;

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #3d4035,
            #555b4a
        );

}


.education-auth-intro::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    left: -230px;

    bottom: -250px;

    border:
        1px solid rgba(255,255,255,.10);

}


.education-auth-intro::after {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    right: -150px;

    top: -130px;

    border:
        1px solid rgba(255,255,255,.08);

}


.education-auth-intro-pattern {

    position: absolute;

    inset: 0;

    opacity: .05;

    background-image:
        radial-gradient(
            rgba(255,255,255,.8) 1px,
            transparent 1px
        );

    background-size: 24px 24px;

}


/* =========================================================
   EMBLEM
========================================================= */

.education-auth-emblem {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    color: var(--education-gold-light);

    border:
        1px solid rgba(213,184,120,.3);

    background:
        rgba(213,184,120,.10);

    font-size: 24px;

    margin-bottom: 24px;

    position: relative;

    z-index: 2;

}


/* =========================================================
   BADGE
========================================================= */

.education-auth-badge {

    width: fit-content;

    padding: 8px 15px;

    margin-bottom: 20px;

    border-radius: 50px;

    color: #e3c98f;

    background:
        rgba(213,184,120,.10);

    border:
        1px solid rgba(213,184,120,.20);

    font-size: 11px;

    position: relative;

    z-index: 2;

}


/* =========================================================
   INTRO TITLE
========================================================= */

.education-auth-intro h1 {

    margin: 0 0 20px;

    font-family:
        "Amiri",
        serif;

    font-size: clamp(34px, 4vw, 48px);

    line-height: 1.25;

    font-weight: 700;

    position: relative;

    z-index: 2;

}


.education-auth-intro h1 span {

    display: block;

    color: var(--education-gold-light);

}


.education-auth-intro > p {

    max-width: 480px;

    margin: 0;

    color: rgba(255,255,255,.72);

    font-size: 14px;

    line-height: 2;

    position: relative;

    z-index: 2;

}


/* =========================================================
   FEATURES
========================================================= */

.education-auth-features {

    display: flex;

    flex-direction: column;

    gap: 14px;

    margin-top: 32px;

    position: relative;

    z-index: 2;

}


.education-auth-feature {

    display: flex;

    align-items: center;

    gap: 14px;

}


.education-auth-feature-icon {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: #d9bd80;

    background:
        rgba(255,255,255,.07);

    border:
        1px solid rgba(255,255,255,.08);

}


.education-auth-feature strong {

    display: block;

    margin-bottom: 3px;

    font-size: 12px;

    color: white;

}


.education-auth-feature span {

    display: block;

    color: rgba(255,255,255,.55);

    font-size: 10px;

}


/* =========================================================
   QUOTE
========================================================= */

.education-auth-quote {

    margin-top: 34px;

    display: flex;

    align-items: center;

    gap: 12px;

    color: rgba(255,255,255,.65);

    position: relative;

    z-index: 2;

}


.education-auth-quote i {

    color: var(--education-gold-light);

}


.education-auth-quote p {

    margin: 0;

    font-family:
        "Amiri",
        serif;

    font-size: 17px;

}


/* =========================================================
   CARD
========================================================= */

.education-auth-card {

    padding: 45px 52px;

    background:
        rgba(255,255,255,.92);

    display: flex;

    flex-direction: column;

    justify-content: center;

}


/* =========================================================
   BACK
========================================================= */

.education-auth-back {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    width: fit-content;

    color: var(--education-muted);

    text-decoration: none;

    font-size: 11px;

    margin-bottom: 28px;

    transition: .25s ease;

}


.education-auth-back:hover {

    color: var(--education-gold);

    transform: translateX(3px);

}


/* =========================================================
   HEADER
========================================================= */

.education-auth-header {

    margin-bottom: 25px;

}


.education-auth-small-label {

    display: block;

    color: var(--education-gold);

    font-size: 11px;

    font-weight: 700;

    margin-bottom: 6px;

}


.education-auth-header h2 {

    margin: 0;

    color: var(--education-text);

    font-family:
        "Amiri",
        serif;

    font-size: 34px;

    line-height: 1.3;

}


.education-auth-header p {

    margin: 7px 0 0;

    color: var(--education-muted);

    font-size: 11px;

}


/* =========================================================
   ALERT
========================================================= */

.education-auth-alert {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 13px;

    margin-bottom: 18px;

    border-radius: 11px;

    color: #9a5d50;

    background: rgba(154,93,80,.07);

    border: 1px solid rgba(154,93,80,.12);

    font-size: 10px;

}


/* =========================================================
   FORM
========================================================= */

.education-auth-form {

    display: flex;

    flex-direction: column;

    gap: 15px;

}


/* =========================================================
   FIELD
========================================================= */

.education-auth-field {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.education-auth-field label {

    color: #56564f;

    font-size: 11px;

    font-weight: 700;

}


/* =========================================================
   INPUT
========================================================= */

.education-auth-input-wrapper {

    position: relative;

}


.education-auth-input {

    width: 100%;

    height: 46px;

    padding:
        0 42px
        0 42px;

    border:
        1px solid #e7e4db;

    border-radius: 12px;

    outline: none;

    background: #fcfbf8;

    color: #42423d;

    font-family: inherit;

    font-size: 11px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;

    box-sizing: border-box;

}


.education-auth-input::placeholder {

    color: #b4b1a8;

}


.education-auth-input:focus {

    background: white;

    border-color:
        rgba(185,147,82,.65);

    box-shadow:
        0 0 0 4px
        rgba(185,147,82,.08);

}


.education-auth-input.is-invalid {

    border-color: #bd776a;

}


.education-auth-input-icon {

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    color: #aaa79e;

    font-size: 13px;

    pointer-events: none;

}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.education-auth-password-toggle {

    position: absolute;

    left: 10px;

    top: 50%;

    transform: translateY(-50%);

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    background: transparent;

    color: #aaa79e;

    cursor: pointer;

    border-radius: 8px;

    transition: .2s ease;

}


.education-auth-password-toggle:hover {

    color: var(--education-gold);

    background:
        rgba(185,147,82,.07);

}


/* =========================================================
   ERROR
========================================================= */

.education-auth-error {

    display: flex;

    align-items: center;

    gap: 5px;

    color: #a46156;

    font-size: 9px;

}


/* =========================================================
   WHATSAPP NOTE
========================================================= */

.education-register-whatsapp-note {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 12px;

    border:
        1px solid rgba(103,126,88,.13);

    border-radius: 12px;

    background:
        rgba(103,126,88,.055);

}


.education-register-whatsapp-icon {

    width: 34px;

    height: 34px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color: #6f855f;

    background:
        rgba(111,133,95,.10);

    font-size: 16px;

}


.education-register-whatsapp-note strong {

    display: block;

    margin-bottom: 3px;

    color: #59654f;

    font-size: 10px;

}


.education-register-whatsapp-note span {

    display: block;

    color: #929187;

    font-size: 9px;

    line-height: 1.7;

}


/* =========================================================
   TERMS
========================================================= */

.education-auth-remember {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #8b8980;

    font-size: 9px;

    cursor: pointer;

}


.education-auth-remember input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


.education-auth-checkbox {

    width: 17px;

    height: 17px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid #ddd9ce;

    border-radius: 5px;

    background: white;

    color: white;

    transition: .2s ease;

}


.education-auth-remember input:checked
+ .education-auth-checkbox {

    background:
        var(--education-gold);

    border-color:
        var(--education-gold);

}


.education-auth-checkbox i {

    font-size: 9px;

    opacity: 0;

}


.education-auth-remember input:checked
+ .education-auth-checkbox i {

    opacity: 1;

}


.education-register-terms {

    align-items: flex-start;

    line-height: 1.7;

}


.education-register-terms a {

    color: #a27c3e;

    font-weight: 700;

    text-decoration: none;

}


.education-register-terms a:hover {

    text-decoration: underline;

}


/* =========================================================
   SUBMIT
========================================================= */

.education-auth-submit {

    width: 100%;

    height: 48px;

    margin-top: 2px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border: 0;

    border-radius: 13px;

    cursor: pointer;

    color: white;

    background:
        linear-gradient(
            135deg,
            #b99352,
            #a27d42
        );

    box-shadow:
        0 10px 25px
        rgba(162,125,66,.20);

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.education-auth-submit:hover {

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(162,125,66,.28);

}


.education-auth-submit i {

    transition: transform .25s ease;

}


.education-auth-submit:hover i {

    transform: translateX(-4px);

}


/* =========================================================
   LOGIN LINK
========================================================= */

.education-auth-register {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 6px;

    margin-top: 20px;

    color: #99968d;

    font-size: 10px;

}


.education-auth-register a {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: var(--education-gold);

    text-decoration: none;

    font-weight: 700;

}


.education-auth-register a:hover {

    text-decoration: underline;

}


/* =========================================================
   SECURITY
========================================================= */

.education-auth-security {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 6px;

    margin-top: 18px;

    color: #b0ada4;

    font-size: 9px;

}


.education-auth-security i {

    color: #849176;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .education-auth-container {

        grid-template-columns: 1fr;

        max-width: 600px;

    }


    .education-auth-intro {

        padding: 40px;

    }


    .education-auth-intro > p {

        max-width: none;

    }


    .education-auth-features {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

    }


    .education-auth-feature {

        align-items: flex-start;

        flex-direction: column;

    }


    .education-auth-quote {

        display: none;

    }

}


@media (max-width: 600px) {

    .education-auth-page {

        padding: 25px 14px;

    }


    .education-auth-container {

        border-radius: 22px;

    }


    .education-auth-intro {

        padding: 32px 25px;

    }


    .education-auth-intro h1 {

        font-size: 34px;

    }


    .education-auth-features {

        display: flex;

    }


    .education-auth-feature {

        flex-direction: row;

        align-items: center;

    }


    .education-auth-card {

        padding: 32px 24px;

    }


    .education-auth-header h2 {

        font-size: 30px;

    }

}


@media (max-width: 420px) {

    .education-auth-card {

        padding: 28px 18px;

    }


    .education-register-whatsapp-note {

        align-items: flex-start;

    }

}

/* =========================================================
   LOGIN OPTIONS
========================================================= */

.education-login-options {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: -2px;

}


.education-login-forgot {

    color: var(--education-gold);

    font-size: 9px;

    text-decoration: none;

    transition: .2s ease;

}


.education-login-forgot:hover {

    color: #8f6c36;

    text-decoration: underline;

}


/* =========================================================
   SUCCESS
========================================================= */

.education-auth-success {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 11px 13px;

    margin-bottom: 18px;

    border-radius: 11px;

    color: #667657;

    background: rgba(103,126,88,.07);

    border: 1px solid rgba(103,126,88,.13);

    font-size: 10px;

}


/* =========================================================
   LOGIN RESPONSIVE
========================================================= */

@media (max-width: 600px) {

    .education-login-options {

        gap: 15px;

    }

}