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

:root {
    --ink: #101c49;
    --muted: #7584a7;
    --blue: #2769eb;
    --line: #dce4f3;
    --hero: #0d3977;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
    min-height: 100vh;
    color: var(--ink);
    background: #f5f7ff;
    font-family: 'Inter', 'Almarai', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body[dir="rtl"] { font-family: 'Almarai', 'Inter', Arial, sans-serif; }

button, input { font: inherit; }

.login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
    direction: rtl;
    min-height: 100vh;
    overflow: hidden;
    background: #f8faff;
}

body[dir="rtl"] .login-layout { direction: ltr; }

.brand-side {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: clamp(30px, 4vw, 64px) clamp(32px, 5vw, 80px) 0;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(ellipse at 64% 75%, #438fe8 0, transparent 34%), linear-gradient(145deg, #285da8 0%, #123f7f 45%, #082b60 100%);
    isolation: isolate;
    direction: ltr;
    text-align: left;
}

body[dir="rtl"] .brand-side {
    direction: ltr;
    text-align: left;
    background: radial-gradient(ellipse at 36% 75%, #438fe8 0, transparent 34%), linear-gradient(215deg, #285da8 0%, #123f7f 45%, #082b60 100%);
}
body:not([dir="rtl"]) .brand-side { direction: rtl; text-align: right; }

.brand-side::before {
    position: absolute;
    z-index: -1;
    right: -16%;
    bottom: -23%;
    width: 115%;
    height: 47%;
    border-radius: 53% 47% 0 0 / 35% 40% 0 0;
    background: linear-gradient(135deg, rgba(170, 210, 255, .92), rgba(46, 129, 228, .2) 63%, transparent);
    content: "";
    transform: rotate(-5deg);
}

body[dir="rtl"] .brand-side::before { right: -16%; left: auto; transform: rotate(-5deg); }

.brand-side::after { display: none; }

.hero-glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.hero-glow-one { top: 8%; right: 15%; width: 7px; height: 7px; background: #fff; box-shadow: 0 0 22px 7px rgba(255,255,255,.16); }
.hero-glow-two { top: 27%; left: 12%; width: 5px; height: 5px; background: #c8e2ff; box-shadow: 0 0 0 6px rgba(255,255,255,.05); }
body:not([dir="rtl"]) .hero-glow-one { right: auto; left: 15%; }
body:not([dir="rtl"]) .hero-glow-two { left: auto; right: 12%; }
.hero-glow-one { animation: glow-pulse 4.8s ease-in-out infinite; }
.hero-glow-two { animation: glow-pulse 5.6s 1.2s ease-in-out infinite; }

.flight-art { position: absolute; z-index: 2; top: 18%; inset-inline-end: 20%; width: min(250px, 27%); height: 220px; pointer-events: none; }
body:not([dir="rtl"]) .flight-art { transform: scaleX(-1); }
.flight-trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flight-trail path { stroke: rgba(255, 255, 255, .88); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 9; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .25)); animation: trail-drift 5s linear infinite; }
.paper-plane { position: absolute; top: 2%; inset-inline-end: 0; width: 64px; height: 48px; fill: #fff; filter: drop-shadow(0 5px 10px rgba(4, 34, 80, .28)); animation: plane-bob 4.2s ease-in-out infinite; }
.paper-plane .plane-silhouette { fill: #fff; }
.paper-plane .plane-wing-light { fill: #fff; }
.paper-plane .plane-wing-shade { fill: url(#paper-plane-wing); }
.paper-plane .plane-crease { fill: none; stroke: rgba(39, 105, 180, .48); stroke-width: 1; stroke-linecap: round; }
body:not([dir="rtl"]) .paper-plane { inset-inline-end: auto; right: 0; }
.sparkle { position: absolute; color: #fff; font-size: 18px; line-height: 1; text-shadow: 0 0 12px rgba(255, 255, 255, .8); animation: sparkle 2.6s ease-in-out infinite; }
.sparkle-one { top: 10%; left: 15%; }
.sparkle-two { top: 42%; left: 47%; font-size: 13px; animation-delay: .7s; }
.sparkle-three { top: 59%; left: 5%; font-size: 11px; animation-delay: 1.3s; }

.brand-topline { display: flex; align-items: center; gap: 14px; position: relative; z-index: 2; animation: fade-up .65s cubic-bezier(.2,.7,.2,1) both; }
.brand-logo { width: 46px; height: 58px; padding: 4px; border-radius: 9px; background: rgba(255, 255, 255, .94); object-fit: contain; }
.brand-name { max-width: 72%; overflow: hidden; color: #fff; font-size: clamp(21px, 2vw, 29px); font-weight: 700; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }

.hero-copy { position: relative; z-index: 3; width: min(460px, 86%); margin-top: clamp(50px, 7vh, 88px); animation: fade-up .75s .12s cubic-bezier(.2,.7,.2,1) both; }
body:not([dir="rtl"]) .hero-copy { direction: ltr; text-align: right; }
body[dir="rtl"] .hero-copy { direction: rtl; text-align: left; }
.hero-eyebrow { margin: 0 0 13px; color: #c2dcff; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero-copy h2 { max-width: 350px; margin: 0; color: #fff; font-size: clamp(42px, 4.8vw, 64px); font-weight: 800; letter-spacing: -.055em; line-height: 1.04; }
body[dir="rtl"] .hero-copy h2 { max-width: 440px; font-size: clamp(38px, 4.2vw, 58px); letter-spacing: normal; line-height: 1.25; }
.hero-copy h2 span { display: block; }
.hero-copy h2 .hero-title-accent { color: #82a8ff; }
.hero-description { max-width: 360px; margin: 22px 0 0; color: rgba(255,255,255,.88); font-size: clamp(15px, 1.35vw, 19px); line-height: 1.65; }
.hero-rule { display: block; width: 58px; height: 4px; margin-top: 22px; border-radius: 5px; background: #7aa5ff; }

.learning-art { position: absolute; z-index: 1; right: -2%; bottom: -3%; width: min(103%, 860px); height: auto; max-height: 59%; object-fit: contain; object-position: center bottom; animation: art-fade .9s .2s ease-out both, art-float 7s 1.1s ease-in-out infinite; }
body:not([dir="rtl"]) .learning-art { right: auto; left: -2%; }
.hero-bottom-wave { position: absolute; z-index: 0; right: -16%; bottom: -41%; width: 115%; height: 44%; border-radius: 50% 50% 0 0; background: linear-gradient(120deg, #c3ddff, #78b8ff 50%, #4d91e6); transform: rotate(-5deg); }
body:not([dir="rtl"]) .hero-bottom-wave { right: auto; left: -16%; transform: rotate(5deg); }

.form-side {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 84px clamp(34px, 6vw, 88px) 76px;
    background: radial-gradient(ellipse at 50% 48%, #fff 0, #fff 44%, #f8faff 100%);
    direction: ltr;
}

body[dir="rtl"] .form-side { direction: rtl; }
body[dir="rtl"] .form-wrap { direction: rtl; text-align: right; }

.form-side::before {
    position: absolute;
    z-index: -1;
    top: -7%;
    bottom: -7%;
    right: -105px;
    left: auto;
    width: 210px;
    border-radius: 0 52% 50% 0 / 0 20% 28% 0;
    background: #f8faff;
    box-shadow: 15px 0 0 rgba(202, 222, 255, .74), 24px 0 34px rgba(10, 48, 107, .08);
    content: "";
    transform: rotate(2deg);
}

body[dir="rtl"] .form-side::before {
    right: auto;
    left: -105px;
    border-radius: 52% 0 0 50% / 20% 0 0 28%;
    box-shadow: -15px 0 0 rgba(202, 222, 255, .74), -24px 0 34px rgba(10, 48, 107, .08);
    transform: rotate(-2deg);
}

.language-switcher { position: absolute; z-index: 5; top: 30px; left: clamp(26px, 3.5vw, 52px); animation: fade-in .5s .18s ease-out both; }
body[dir="rtl"] .language-switcher { right: clamp(28px, 4vw, 60px); left: auto; }
.lang-dropdown { position: relative; }
.language-switcher { direction: inherit; }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; color: #61718f; border: 0; border-radius: 10px; background: transparent; cursor: pointer; transition: background .2s, color .2s; }
.lang-btn:hover, .lang-btn:focus-visible { color: var(--blue); background: #edf3ff; outline: none; }
.flag-icon { width: 19px; height: 19px; border-radius: 50%; object-fit: cover; }
.lang-btn-text { font-size: 13px; font-weight: 600; }
.lang-btn-arrow { font-size: 10px; }
.lang-menu { position: absolute; top: calc(100% + 8px); left: 0; display: block; min-width: 155px; padding: 6px; border: 1px solid #e5ebf6; border-radius: 12px; background: #fff; box-shadow: 0 14px 36px rgba(27, 53, 105, .14); opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s; }
body[dir="rtl"] .lang-menu { right: 0; left: auto; }
.lang-menu.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.lang-menu a { display: flex; align-items: center; gap: 9px; padding: 10px; color: #52627e; border-radius: 8px; text-decoration: none; }
.lang-menu a:hover, .lang-menu a.is-active { color: var(--blue); background: #f0f5ff; }
.lang-menu-text { flex: 1; font-size: 13px; }
.check-icon { font-size: 12px; }

.form-wrap { width: min(100%, 505px); animation: fade-in .6s .12s ease-out both; }
.form-heading-mark { display: none; }
.form-wrap h1 { margin: 0; color: #111e4e; font-size: clamp(32px, 3vw, 44px); font-weight: 800; letter-spacing: -.045em; line-height: 1.2; }
.form-subtitle { max-width: 410px; margin: 12px 0 32px; color: #8190b0; font-size: 16px; line-height: 1.6; }
.alert-error { display: block; margin: 0 0 18px; padding: 12px 14px; color: #a83240; border: 1px solid #f2c3c9; border-radius: 10px; background: #fff3f4; font-size: 13px; }
.form-group { display: grid; gap: 22px; }
.input-field label { display: block; margin: 0 0 10px; color: #17244e; font-size: 15px; font-weight: 600; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-icon { position: absolute; inset-inline-start: 19px; color: #7588ad; font-size: 19px; pointer-events: none; }
.input-wrap input { width: 100%; height: 60px; padding: 0 52px; color: #17244e; border: 1.5px solid var(--line); border-radius: 12px; outline: none; background: rgba(255,255,255,.48); box-shadow: 0 1px 2px rgba(16, 38, 84, .02); font-size: 15px; transition: border-color .2s, box-shadow .2s, background .2s; }
body[dir="rtl"] .input-wrap input { direction: rtl; text-align: right; }
.input-wrap input::placeholder { color: #8492af; opacity: 1; }
.input-wrap input:focus { border-color: #6b94ed; background: #fff; box-shadow: 0 0 0 4px rgba(39, 105, 235, .09); }
.password-toggle { position: absolute; inset-inline-end: 15px; display: grid; width: 32px; height: 36px; place-items: center; color: #7588ad; border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-size: 18px; }
.password-toggle:hover { color: var(--blue); }
.check-field { display: flex; align-items: center; gap: 10px; margin: 18px 0 24px; color: #52627e; font-size: 13px; }
.check-field input { width: 17px; height: 17px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.check-field label { cursor: pointer; }
.submit-btn { display: flex; align-items: center; justify-content: center; gap: 13px; width: 100%; min-height: 60px; padding: 15px 22px; color: #fff; border: 0; border-radius: 12px; background: linear-gradient(100deg, #2868e8, #2d70ed); box-shadow: 0 12px 25px rgba(39, 105, 235, .21); cursor: pointer; font-size: 17px; font-weight: 700; transition: transform .2s, box-shadow .2s, filter .2s; }
body[dir="rtl"] .submit-btn { direction: rtl; }
.submit-btn:hover { box-shadow: 0 15px 30px rgba(39, 105, 235, .3); filter: brightness(1.03); transform: translateY(-1px); }
.submit-btn:active { transform: translateY(0); }
.submit-btn .margin { font-size: 17px; }
body[dir="rtl"] .submit-btn .margin { transform: rotate(180deg); }
.footer { position: absolute; right: 24px; bottom: 24px; left: 24px; display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0; color: #9aa6bd; font-size: 11px; text-align: center; }
.footer a { display: inline-flex; align-items: center; }
.footer-logo { width: 39px; max-height: 16px; object-fit: contain; }

@keyframes fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes art-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes art-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes glow-pulse {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

@keyframes plane-bob {
    0%, 100% { transform: translate(0, 0) rotate(-4deg); }
    50% { transform: translate(7px, -6px) rotate(2deg); }
}

@keyframes trail-drift {
    to { stroke-dashoffset: -52; }
}

@keyframes sparkle {
    0%, 100% { opacity: .4; transform: scale(.75) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.12) rotate(24deg); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 900px) {
    .login-layout { grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr); }
    .brand-side { padding-inline: 38px; }
    .hero-copy { margin-top: 52px; }
    .hero-copy h2 { font-size: clamp(38px, 5vw, 52px); }
    .learning-art { right: -12%; width: 116%; max-height: 54%; }
    body:not([dir="rtl"]) .learning-art { right: auto; left: -12%; }
    .form-side { padding-inline: 34px; }
}

@media (max-width: 700px) {
    .login-layout { display: flex; flex-direction: column; min-height: 100vh; overflow: visible; background: #f7f9ff; }
    .brand-side { min-height: 345px; padding: 25px 27px 0; border-radius: 0 0 28px 28px; }
    .form-side::before { display: none; }
    body[dir="rtl"] .form-side::before { display: none; }
    .flight-art { display: none; }
    .brand-logo { width: 40px; height: 50px; }
    .brand-name { font-size: 21px; }
    .hero-copy { width: 60%; margin-top: 34px; }
    body[dir="rtl"] .hero-copy { width: 60%; text-align: left; }
    body:not([dir="rtl"]) .hero-copy { text-align: right; }
    .hero-eyebrow { margin-bottom: 8px; font-size: 10px; }
    .hero-copy h2 { max-width: 185px; font-size: clamp(31px, 8vw, 43px); line-height: .98; }
    body[dir="rtl"] .hero-copy h2 { max-width: 240px; font-size: clamp(30px, 7vw, 39px); line-height: 1.22; }
    .hero-description { margin-top: 11px; font-size: 12px; line-height: 1.5; }
    .hero-rule { width: 44px; height: 3px; margin-top: 13px; }
    .learning-art { right: -16%; bottom: -4%; width: 70%; max-height: 66%; }
    body:not([dir="rtl"]) .learning-art { right: auto; left: -16%; }
    .hero-bottom-wave { bottom: -42%; }
    .form-side { align-items: flex-start; min-height: auto; padding: 58px 27px 64px; background: #f7f9ff; }
    .language-switcher { top: 15px; left: 18px; }
    body[dir="rtl"] .language-switcher { right: 18px; left: auto; }
    .lang-btn { padding: 7px 9px; }
    .form-wrap { width: min(100%, 470px); margin: 0 auto; }
    .form-wrap h1 { font-size: 33px; }
    .form-subtitle { margin: 8px 0 24px; font-size: 14px; }
    .form-group { gap: 17px; }
    .input-wrap input { height: 54px; }
    .check-field { margin: 14px 0 20px; }
    .submit-btn { min-height: 54px; }
    .footer { position: static; margin-top: 36px; }
}

@media (max-width: 390px) {
    .brand-side { min-height: 320px; padding-inline: 21px; }
    .hero-copy { width: 63%; margin-top: 28px; }
    .hero-copy h2 { font-size: 28px; }
    .hero-description { font-size: 11px; }
    .learning-art { right: -16%; width: 72%; }
    body:not([dir="rtl"]) .learning-art { right: auto; left: -16%; }
    .form-side { padding-inline: 21px; }
}