/*
 * Split auth layout shared by the standalone pages outside template.html
 * (login, register, reset password, confirm account), with templates/fragments/auth.html.
 * Figma ShJHhr4FYAJZsQqu8q8HGv: Auth · Log in v2 197:1833, Sign-up 1–3 v2 200:2151 / 200:2535 / 200:2895,
 * EN 202:*, and the mobile rows beside them.
 * Needs design-tokens.css first. Logical properties throughout, so the EN (LTR) pages mirror the AR design.
 */
html, body { height: 100%; }
[v-cloak] { display: none; }
body {
    margin: 0;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
}

:root {
    --auth-ink: #042f2e;
    --auth-teal-100: #ccfbf1;
    --auth-teal-200: #99f6e4;
    --auth-teal-300: #5eead4;
    --auth-teal-500: #14b8a6;
    --auth-teal-700: #0f766e;
    --auth-amber: linear-gradient(90deg, #fbbf24, #f59e0b);
    --auth-amber-ink: #451a03;
    --auth-panel:
        radial-gradient(420px 320px at 50% 78%, rgba(20, 184, 166, .40), transparent 70%),
        radial-gradient(240px 210px at 20% 10%, rgba(245, 158, 11, .16), transparent 70%),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(135deg, #042f2e 0%, #0b3f3c 60%, #115e59 100%);
}

.auth { display: flex; min-height: 100vh; padding: 16px; gap: 16px; }

/* ===================== Form side (inline-start: right in RTL) ===================== */
.auth-form-side {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 24px 56px 16px;
}
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-logo img { height: 40px; width: auto; display: block; }
.auth-lang {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
    font-size: 12px; font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: border-color .2s, color .2s;
}
.auth-lang:hover { color: var(--color-primary-ink); border-color: var(--color-primary-default); text-decoration: none; }

.auth-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 0; }
.auth-card { width: 100%; max-width: 456px; display: flex; flex-direction: column; }
.auth-card > form { display: flex; flex-direction: column; }
/* A Vue step inside the card (v-if/v-else): lays out like the card itself */
.auth-pane, .auth-pane > form { display: flex; flex-direction: column; }
.auth-card-wide { max-width: 560px; }
.auth-title { font-size: 34px; line-height: 1.25; font-weight: 700; margin: 0 0 8px; color: var(--color-text-primary); }
.auth-desc { font-size: 15px; line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 28px; }

.auth-grid-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.auth-grid-2 > .auth-span-2 { grid-column: 1 / -1; }

.auth-field { margin-bottom: 18px; }
.auth-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--color-text-primary); }
.auth-field .form-control {
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: 14px;
    box-shadow: none;
    transition: border-color .2s, box-shadow .2s;
}
.auth-field .form-control:focus {
    border-color: var(--color-primary-default);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}
.auth-field .form-control.error,
.auth-field .form-control.is-invalid { border-color: var(--color-danger-default); }
.auth-field label.error,
.auth-field .invalid-feedback { font-size: 12px; font-weight: 500; color: var(--color-danger-default); margin: 6px 0 0; }
.auth-field .auth-hint { font-size: 12px; color: var(--color-text-secondary); margin-top: 6px; }

/* an input with fixed text before it (academy link, phone code) and a state icon after it: one box */
.auth-affix {
    display: flex; align-items: center; height: 48px; padding: 0 14px; gap: 6px;
    border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-surface);
    transition: border-color .2s, box-shadow .2s;
}
.auth-affix:focus-within { border-color: var(--color-primary-default); box-shadow: 0 0 0 4px var(--color-focus-ring); }
.auth-affix.is-ok { border-color: var(--color-success-default, #16a34a); }
.auth-affix.is-bad, .auth-affix:has(.form-control.error) { border-color: var(--color-danger-default); }
.auth-field .auth-affix .form-control { flex: 1; min-width: 0; height: 46px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.auth-affix-pre { flex: none; font-size: 14px; color: var(--color-text-secondary); white-space: nowrap; }
.auth-affix-state { flex: none; color: var(--color-text-disabled); font-size: 14px; }
.auth-affix.is-ok .auth-affix-state { color: var(--color-success-default, #16a34a); }
.auth-field .auth-hint.auth-bad, .auth-bad { color: var(--color-danger-default); }
.auth-ok { color: var(--color-success-default, #16a34a); }
.auth-field select.auth-select { appearance: auto; padding-inline-end: 10px; }

/* radio/checkbox choice rows (gender, terms) */
.auth-choices { display: flex; flex-wrap: wrap; gap: var(--space-16); min-height: 40px; align-items: center; font-size: 14px; }
.auth-choices label { display: inline-flex; align-items: center; gap: var(--space-8); margin: 0; font-weight: 500; cursor: pointer; }
.auth-choices input { width: 16px; height: 16px; accent-color: var(--color-primary-default); }

.auth-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 22px; font-size: 13px; }
.auth-row label { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; color: var(--color-text-primary); }
.auth-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--color-primary-default); }

.auth-link { color: var(--color-primary-default); font-weight: 600; }
.auth-link:hover { color: var(--color-primary-ink); }

.auth-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 52px; padding: 0 20px;
    border-radius: 14px;
    font-size: 15px; font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: transform .2s, box-shadow .2s, filter .2s, background-color .2s;
}
.auth-btn:hover { text-decoration: none; }
.auth-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--color-focus-ring); }
.auth-btn-primary {
    border: 0;
    background: linear-gradient(90deg, var(--auth-teal-500), var(--auth-teal-700));
    color: #fff;
    box-shadow: 0 10px 28px -6px rgba(20, 184, 166, .35);
}
.auth-btn-primary:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 32px -6px rgba(20, 184, 166, .45); }
.auth-btn-primary:disabled { opacity: .6; transform: none; cursor: default; }
.auth-btn-secondary { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); color: var(--color-text-primary); min-height: 48px; font-size: 14px; }
.auth-btn-secondary:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.auth-btn-dark { border: 0; background: var(--color-text-primary); color: #fff; }
.auth-btn-dark:hover { color: #fff; filter: brightness(1.15); }
/* "Create your academy" on the log-in page */
.auth-btn-create {
    gap: 10px;
    border: 1px solid var(--color-border-default);
    background: linear-gradient(90deg, #f0fdfa, #fffbeb);
    color: var(--color-text-primary);
}
.auth-btn-create:hover { color: var(--color-text-primary); border-color: var(--auth-teal-300); transform: translateY(-1px); }
.auth-pill-amber { padding: 2px 8px; border-radius: var(--radius-full); background: var(--auth-amber); color: var(--auth-amber-ink); font-size: 12px; font-weight: 600; }

.auth-or { display: flex; align-items: center; gap: 12px; margin: 22px 0; font-size: 12px; color: var(--color-text-secondary); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border-default); }

.auth-social { display: flex; gap: 12px; }
.auth-social .auth-btn { flex: 1; }

.auth-signup { margin-top: 20px; text-align: center; font-size: 14px; color: var(--color-text-secondary); }

.auth-alert {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--color-danger-soft);
    color: var(--color-danger-default);
    font-size: 13px;
}
.auth-alert-info { background: var(--color-primary-soft); color: var(--color-primary-ink); }

/* single-message pages (confirm account, check your email) */
.auth-status { text-align: center; align-items: center; }
.auth-status-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 96px; height: 96px; margin-bottom: 24px;
    border-radius: 28px;
    background: linear-gradient(135deg, #ccfbf1, #fef3c7);
    color: var(--color-primary-default);
    font-size: 40px;
    box-shadow: 0 16px 40px -8px rgba(20, 184, 166, .2);
}
.auth-status-icon.is-warning { background: linear-gradient(135deg, #fef3c7, #fee2e2); color: var(--color-warning-default); }
.auth-status .auth-btn { margin-top: 8px; }
/* the "check your email" step keeps the form's start alignment, like the design */
.auth-status.is-start { text-align: start; align-items: stretch; }
.auth-status.is-start .auth-status-icon { align-self: flex-start; }
.auth-note {
    display: flex; flex-direction: column; gap: 4px;
    margin-top: 14px; padding: 14px 16px;
    border-radius: 14px;
    background: var(--color-bg-subtle);
    font-size: 13px; color: var(--color-text-secondary);
}
.auth-note.auth-note-center { flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 0; background: none; font-size: 12px; text-align: center; }
.auth-inline { margin-top: 18px; text-align: center; font-size: 14px; color: var(--color-text-secondary); }

.auth-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 13px; }
[dir=rtl] .auth-back .fa { transform: scaleX(-1); }

.auth-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--color-text-secondary); }
.auth-footer-links { display: inline-flex; gap: 16px; }
.auth-footer a { color: var(--color-text-secondary); }
.auth-footer a:hover { color: var(--color-primary-default); text-decoration: none; }

/* sign-up stepper: account → confirm email → academy */
.auth-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 26px; }
.auth-steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--color-text-disabled); }
.auth-steps li + li::before { content: ""; width: 32px; height: 2px; border-radius: 1px; background: var(--color-border-default); margin-inline-end: 2px; }
.auth-steps li.is-on::before, .auth-steps li.is-done::before { background: var(--color-primary-default); }
.auth-step-n {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 26px; height: 26px; border-radius: 50%;
    border: 1.5px solid var(--color-border-strong);
    font-size: 12px;
}
.auth-steps .is-on { color: var(--color-text-primary); }
.auth-steps .is-on .auth-step-n { background: var(--color-text-primary); border-color: var(--color-text-primary); color: #fff; }
.auth-steps .is-done { color: var(--color-primary-default); }
.auth-steps .is-done .auth-step-n { background: var(--color-primary-default); border-color: var(--color-primary-default); color: #fff; font-size: 11px; }

/* The plan chip (fragments/signup-plan.html) is the phone version of the plan panel on the register page */
.auth-m-only { display: none; }
.auth .su-plan { margin-bottom: 22px; }

/* Forgot-password pane uses Bootstrap tabs */
.auth-card .tab-pane { display: none; }
.auth-card .tab-pane.active { display: block; }

/* ===================== Brand side (inline-end: left in RTL) ===================== */
.auth-brand-side {
    flex: 0 0 53%;
    position: sticky; top: 16px;
    height: calc(100vh - 32px); min-height: 640px;
    overflow: hidden;
    border-radius: 28px;
    background: var(--auth-panel);
    color: #fff;
}
.auth-brand-m-top { display: none; }

.auth-brand-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 72px 56px 0; }
.auth-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(94, 234, 212, .3);
    font-size: 12px; font-weight: 600; color: var(--auth-teal-200);
}
.auth-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--auth-teal-300); box-shadow: 0 0 0 4px rgba(94, 234, 212, .18); }
.auth-hl { margin: 0; font-size: 48px; line-height: 1.25; font-weight: 700; color: #fff; }
.auth-hl-sm { font-size: 38px; }
.auth-hl-grad {
    background: linear-gradient(90deg, var(--auth-teal-300), var(--auth-teal-200) 50%, #fcd34d);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.auth-brand-sub { margin: 0; max-width: 520px; font-size: 17px; line-height: 1.65; color: rgba(204, 251, 241, .75); }

/* Product side: copy on top, the learning scene (static/img/auth/learning-gulf.svg) fills what is left,
   anchored to the bottom. Drawn for LTR; mirrored in Arabic so the people stay on the start side. */
.auth-brand-side:not(.is-plan) { display: flex; flex-direction: column; }
.auth-ill { flex: 1 1 0; min-height: 0; display: flex; padding: 8px 16px 0; }
.auth-ill img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
[dir="rtl"] .auth-ill img { transform: scaleX(-1); }

/* sign-up: the chosen plan instead of the product */
.auth-brand-side.is-plan { overflow-y: auto; scrollbar-width: none; }
.auth-plan-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; max-width: 600px; margin: 0 auto; padding: 64px 48px 40px; }
.auth-plan-card {
    display: flex; flex-direction: column; gap: 18px;
    padding: 24px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.auth-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-plan-cap { font-size: 12px; font-weight: 500; color: rgba(204, 251, 241, .7); }
.auth-plan-change { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--auth-teal-300); text-decoration: none; }
.auth-plan-change .fa { font-size: 11px; }
.auth-plan-change:hover { color: var(--auth-teal-200); text-decoration: none; }
.auth-plan-np { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.auth-plan-name { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.auth-plan-name strong { font-size: 24px; font-weight: 700; line-height: 1.3; }
.auth-plan-badge { padding: 3px 10px; border-radius: var(--radius-full); background: var(--auth-amber); color: var(--auth-amber-ink); font-size: 12px; font-weight: 600; }
.auth-plan-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: end; }
.auth-plan-amt { display: inline-flex; align-items: baseline; gap: 6px; }
.auth-plan-amt strong, .auth-plan-price > strong { font-size: 36px; font-weight: 700; line-height: 1.1; }
.auth-plan-amt small { font-size: 13px; color: rgba(204, 251, 241, .65); }
.auth-plan-billed { font-size: 12px; color: var(--auth-teal-300); }

.auth-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.auth-seg a {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 12px; border-radius: 9px;
    font-size: 13px; font-weight: 600;
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    transition: background-color .2s, color .2s;
}
.auth-seg a:hover { color: #fff; text-decoration: none; }
.auth-seg a.is-on { background: #fff; color: var(--auth-ink); }
.auth-save { padding: 1px 6px; border-radius: var(--radius-full); background: var(--auth-amber); color: var(--auth-amber-ink); font-size: 11px; }

.auth-modes { display: flex; flex-direction: column; gap: 10px; }
.auth-mode {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    text-decoration: none;
    transition: background-color .2s, border-color .2s;
}
a.auth-mode:hover { color: #fff; text-decoration: none; border-color: rgba(94, 234, 212, .5); }
.auth-mode.is-on { background: rgba(45, 212, 191, .14); border: 1.5px solid rgba(94, 234, 212, .8); }
.auth-mode > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.auth-mode strong { font-size: 14px; font-weight: 600; }
.auth-mode small { font-size: 12px; line-height: 1.5; color: rgba(204, 251, 241, .65); }
.auth-radio { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); }
.auth-mode.is-on .auth-radio { border: 5px solid var(--auth-ink); background: var(--auth-teal-300); box-shadow: 0 0 0 1.5px var(--auth-teal-300); }

.auth-incl { display: flex; flex-direction: column; gap: 10px; }
.auth-incl ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; list-style: none; margin: 0; padding: 0; }
.auth-incl li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .88); }
.auth-tick {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: rgba(45, 212, 191, .2); color: var(--auth-teal-300); font-size: 8px;
}
.auth-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; font-size: 12px; color: rgba(204, 251, 241, .7); }
.auth-trust .fa { color: var(--auth-teal-300); margin-inline-end: 4px; }

/* the long registration forms scroll; the panel stays in view (sticky above) */
.auth-form-wide { flex-basis: 58%; }

/* ===================== Motion ===================== */
@keyframes auth-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }
@keyframes auth-pop { from { opacity: 0; translate: 0 24px; scale: .96; } to { opacity: 1; translate: none; scale: 1; } }
.auth-card > * { animation: auth-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.auth-card > *:nth-child(2) { animation-delay: .05s; }
.auth-card > *:nth-child(3) { animation-delay: .1s; }
.auth-card > *:nth-child(4) { animation-delay: .15s; }
.auth-card > *:nth-child(n+5) { animation-delay: .2s; }
.auth-brand-copy > *, .auth-plan-col > * { animation: auth-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.auth-brand-copy > :nth-child(2), .auth-plan-col > :nth-child(2) { animation-delay: .1s; }
.auth-brand-copy > :nth-child(3), .auth-plan-col > :nth-child(3) { animation-delay: .2s; }
.auth-ill { animation: auth-pop .9s .25s cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) {
    .auth-card > *, .auth-brand-copy > *, .auth-plan-col > *, .auth-ill { animation: none; }
    .auth-btn { transition: none; }
}

/* ===================== Tablet / phone: hero on top, form as a sheet ===================== */
@media (max-width: 1199.98px) {
    .auth-form-side { padding: 24px 32px 16px; }
    .auth-brand-copy { padding: 56px 40px 0; }
    .auth-hl { font-size: 40px; }
    .auth-plan-col { padding: 48px 32px 32px; }
}
@media (max-width: 991.98px) {
    .auth { flex-direction: column; padding: 0; gap: 0; }
    .auth-brand-side {
        order: -1;
        position: relative; top: 0;
        flex: none; height: auto; min-height: 0;
        overflow: hidden;
        border-radius: 0;
        padding: 16px 20px 52px;
        display: flex; flex-direction: column; gap: 22px;
    }
    .auth-brand-side.is-plan { overflow: hidden; }
    .auth-brand-m-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .auth-brand-m-top .auth-logo img { height: 34px; filter: brightness(0) invert(1); }
    .auth-brand-m-top .auth-lang { color: #fff; border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1); }
    .auth-brand-copy, .auth-plan-col { padding: 0; gap: 14px; margin: 0; max-width: none; }
    .auth-brand-sub, .auth-ill, .auth-plan-card, .auth-trust { display: none; }
    .auth-hl, .auth-hl-sm { font-size: 28px; line-height: 1.3; }

    .auth-form-side {
        position: relative; z-index: 1;
        margin-top: -28px;
        border-radius: 28px 28px 0 0;
        background: var(--color-bg-surface);
        padding: 28px 20px 24px;
    }
    .auth-form-side > .auth-top { display: none; }
    .auth-body { align-items: flex-start; padding: 0 0 32px; }
    .auth-card { max-width: none; }
    .auth-title { font-size: 26px; }
    .auth-steps { gap: 6px; margin-bottom: 18px; }
    .auth-steps li + li::before { width: 16px; }
    .auth-m-only { display: block; }
}
@media (max-width: 575.98px) {
    .auth-grid-2 { grid-template-columns: 1fr; }
    .auth-steps .auth-step-label { font-size: 12px; }
    .auth-footer { justify-content: center; }
}