/* LOCAL (see PATCHES.md patch 285): the sign-in shell. Loaded by
 * resources/views/layouts/auth.blade.php for /login, /register, the forgot and
 * the reset password pages. Not part of the JustFans package.
 *
 * The same brand as the front page and /for-students: ink #01102F, panels
 * #011F5D, gold #FFD800, Archivo 900 headings, Manrope body. The values are
 * repeated here on purpose, as onlyoss-landing.css and for-students.css do:
 * each of those files scopes its tokens to its own root class, and loading a
 * whole landing sheet to read four colours would bring its page rules along.
 *
 * One stage in two: the brand panel (navy) and the form card (white). The card
 * is white so the vendor's Bootstrap form controls, the robot check box, the
 * radios of the sign-up form and the social buttons keep working in BOTH site
 * themes without a rewrite: everything inside .oza-card sets its own colours.
 *
 * Mobile first, LOGICAL properties only, so the right-to-left page mirrors
 * (patch 171). Everything is scoped under .oza / html.oza-page. */

html.oza-page body, body:has(#oza) { background: #01102F; }
html.oza-page footer { background: #01102F; border-top: 1px solid rgba(255,255,255,.13); }
html.oza-page footer, html.oza-page footer a, html.oza-page footer p, html.oza-page footer .text-dark-r, html.oza-page footer .text-muted, html.oza-page footer .text-link { color: rgba(255,255,255,.75) !important; }

.oza {
    --oza-ink: #01102F;
    --oza-navy: #011F5D;
    --oza-navy-up: #052A78;
    --oza-gold: #FFD800;
    --oza-gold-dim: #E6C200;
    --oza-line: rgba(255,255,255,.14);
    --oza-dim: rgba(255,255,255,.80);   /* about 11:1 on the ink, 9:1 on the panel */
    --oza-faint: rgba(255,255,255,.68);
    --oza-muted: #3E4A66;               /* on white: 8.9:1 */
    --oza-rule: #DDE2EC;
    --oza-field: #C5CCDB;
    --oza-danger: #B3261E;              /* on white: 6.4:1 */
    --oza-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --oza-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--oza-ink);
    color: var(--oza-dim);
    font-family: var(--oza-body);
    font-size: 16px;
    line-height: 1.55;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
.oza *, .oza *::before, .oza *::after { box-sizing: border-box; }
.oza ::selection { background: var(--oza-gold); color: var(--oza-navy); }
.oza a:focus-visible, .oza button:focus-visible { outline: 3px solid var(--oza-gold); outline-offset: 3px; }

/* ---- the stage ---- */
/* On a phone the brand row takes its own height and the form row the rest;
   without the explicit rows, the grid shared the spare height between the two
   and the card started 200px down. */
.oza-stage { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 100svh; }

/* ---- the brand panel ---- */
.oza-brand {
    position: relative;
    display: flex; flex-direction: column; gap: 14px;
    padding: 18px 16px 6px;
    background: linear-gradient(165deg, var(--oza-navy) 0%, var(--oza-ink) 78%);
}
.oza-brand.has-bg { background-image: linear-gradient(rgba(1,16,47,.86), rgba(1,16,47,.94)), var(--oza-bg); background-size: cover; background-position: center; }
.oza-logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; width: max-content; font: 900 24px/1 var(--oza-display); letter-spacing: -0.03em; color: #fff !important; text-decoration: none !important; }
.oza-logo img { display: block; width: 25px; height: auto; }
.oza-logo:hover span { color: var(--oza-gold); }
.oza-brand-line-m { margin: 0; font-size: 15px; color: var(--oza-dim); max-width: 40ch; }
.oza-brand-body { display: none; }

/* ---- the form side ---- */
.oza-main { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 8px 16px 40px; }
.oza-card {
    width: 100%; max-width: 460px;
    background: #fff; color: var(--oza-ink);
    border-radius: 16px;
    padding: 26px 20px 24px;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.oza-card h1 { margin: 0 0 6px; font-family: var(--oza-display); font-weight: 900; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; color: var(--oza-ink); text-wrap: balance; }
.oza-lead { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: var(--oza-muted); }
.oza-lead-tight { margin-block-end: 18px; }

/* Bootstrap's controls, coloured here so the card reads the same in the site's
   light and dark themes. Only classes the vendor forms already carry. */
.oza-card label, .oza-card .col-form-label { display: block; padding: 0; margin: 0 0 6px; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--oza-ink); }
.oza-card .form-group { margin-bottom: 16px; }
.oza-card .form-control {
    display: block; width: 100%; min-height: 50px; padding: 10px 14px;
    background: #fff; color: var(--oza-ink);
    border: 1.5px solid var(--oza-field); border-radius: 12px;
    font: 500 16px/1.4 var(--oza-body);
    box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.oza-card .form-control::placeholder { color: #6B7590; }
.oza-card .form-control:focus { border-color: var(--oza-navy); box-shadow: 0 0 0 3px rgba(255,216,0,.6); outline: none; }
.oza-card .form-control.is-invalid { border-color: var(--oza-danger); background-image: none; padding-inline-end: 14px; }
.oza-card .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(179,38,30,.25); }
.oza-card .invalid-feedback, .oza-card .text-danger { color: var(--oza-danger) !important; font-size: 13px; font-weight: 600; margin-top: 6px; }
.oza-card .password-reveal-input { padding-inline-end: 52px; }
/* The vendor pins the eye with a physical `right: 0`; logical here, and the
   start side cleared, so the RTL page puts it at the end too. */
.oza-card .password-reveal-toggle { color: var(--oza-muted); inset-inline-end: 0; inset-inline-start: auto; }
.oza-card .password-reveal-toggle:hover, .oza-card .password-reveal-toggle:focus { color: var(--oza-navy); }
.oza-card .password-reveal-toggle:focus-visible { outline: 3px solid var(--oza-navy); outline-offset: -4px; border-radius: 10px; }
.oza-card .custom-control { min-height: 24px; padding-inline-start: 1.75rem; }
.oza-card .custom-control-label { margin: 0; font-size: 15px; font-weight: 500; color: var(--oza-ink); cursor: pointer; }
.oza-card .custom-control-label::before { background: #fff; border: 1.5px solid var(--oza-field); width: 1.15rem; height: 1.15rem; inset-inline-start: -1.75rem; top: .15rem; }
.oza-card .custom-control-label::after { width: 1.15rem; height: 1.15rem; inset-inline-start: -1.75rem; top: .15rem; }
.oza-card .custom-checkbox .custom-control-label::before { border-radius: 5px; }
.oza-card .custom-control-input:checked ~ .custom-control-label::before { background: var(--oza-navy); border-color: var(--oza-navy); }
.oza-card .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px rgba(255,216,0,.6); }
.oza-card .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--oza-navy); }
.oza-card .custom-control-label small, .oza-card .text-muted { color: var(--oza-muted) !important; font-size: 13px; font-weight: 500; line-height: 1.4; }
.oza-card .custom-control-input.is-invalid ~ .custom-control-label { color: var(--oza-ink); }
.oza-card .custom-control-input.is-invalid ~ .custom-control-label::before { border-color: var(--oza-danger); }

/* The one button on each form: gold, navy words (11:1). The vendor's classes
   stay on the element so the ajax dialog keeps its own look; the gradient the
   theme paints is switched off only here. */
.oza-card .btn-primary, .oza-card .btn-primary.bg-gradient-primary {
    display: flex; width: 100%; align-items: center; justify-content: center;
    min-height: 52px; padding: 12px 22px;
    background: var(--oza-gold) !important; background-image: none !important;
    border: 1px solid var(--oza-gold); border-radius: 999px;
    color: var(--oza-navy) !important;
    font: 700 16px/1.2 var(--oza-body); text-transform: none; letter-spacing: 0;
    box-shadow: none; transition: background-color .15s, transform .15s;
}
.oza-card .btn-primary:hover, .oza-card .btn-primary.bg-gradient-primary:hover { background: var(--oza-gold-dim) !important; border-color: var(--oza-gold-dim); }
.oza-card .btn-primary:focus-visible { outline: 3px solid var(--oza-navy); outline-offset: 2px; box-shadow: none; }
.oza-card .btn-primary:active { transform: translateY(1px); }
/* The founding hand-off inside the sign-up form keeps a navy button, so the
   card has one gold action at a time. */
.oza-card .alert .btn-primary { background: var(--oza-navy) !important; border-color: var(--oza-navy); color: #fff !important; display: inline-flex; width: auto; min-height: 46px; }
.oza-card .alert .btn-primary:hover { background: var(--oza-navy-up) !important; border-color: var(--oza-navy-up); }

.oza-card a:not(.btn) { color: var(--oza-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.oza-card a:not(.btn):hover { color: var(--oza-navy-up); }
.oza-card a:focus-visible { outline: 3px solid var(--oza-navy); outline-offset: 2px; }
/* The theme paints "Sign up" as transparent text over a gradient; a plain link here. */
.oza-card .text-gradient, .oza-card .text-primary.text-gradient { background: none !important; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; color: var(--oza-navy) !important; }
.oza-card p:not(.oza-lead) { margin: 0; color: var(--oza-ink); }
/* Inline links in a sentence: a 24px tall target, without moving the line. */
.oza-card p a:not(.btn), .oza-card .custom-control-label a { display: inline-block; padding-block: 3px; }
.oza-card hr { margin: 22px 0 16px; border: 0; border-top: 1px solid var(--oza-rule); }
.oza-card .clearfix { display: none; }

/* Keep me signed in / forgot password, one row. */
.oza-card .loginHelpers { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 4px; }
.oza-card .loginHelpers .pull-right { float: none; }
.oza-card .loginHelpers a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }

/* Alerts the forms show: the reset link sent, the academy hand-off. */
.oza-card .alert { border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; font-size: 15px; }
.oza-card .alert-success { background: #0B6B45; border: 0; color: #fff !important; }
.oza-card .alert-info { background: #EEF2FA; border: 1px solid var(--oza-field); color: var(--oza-ink); }
.oza-card .alert-info p, .oza-card .alert-info strong { color: var(--oza-ink); }

/* The social sign-in box, when a provider is configured. */
.oza-card .strike { margin-top: 20px !important; }
.oza-card .strike > span { color: var(--oza-muted); font-size: 13px; font-weight: 600; }
.oza-card .strike > span::before, .oza-card .strike > span::after { background: var(--oza-rule); }
.oza-card .btn-outline-primary { display: flex; min-height: 48px; margin-bottom: 8px; border: 1.5px solid var(--oza-field); border-radius: 999px; color: var(--oza-ink); background: #fff; font: 600 15px/1.2 var(--oza-body); align-items: center; }
.oza-card .btn-outline-primary:hover { background: #EEF2FA; border-color: var(--oza-navy); color: var(--oza-ink); }
.oza-card .social-media-icon { width: 22px; height: 22px; }

/* The robot check box, centred, with room to breathe. */
.oza-card .captcha-field { margin: 0 0 16px; }

/* ---- the standards line under the panel ---- */
.oza-brand-foot { margin: 0; font-size: 13px; line-height: 1.5; color: var(--oza-faint); max-width: 44ch; }

/* ---- phones: the sample belt and the doors stay out of the way ---- */
@media (max-width: 991.98px) {
    .oza-brand-foot { display: none; }
}

/* ---- wide: the split stage ---- */
@media (min-width: 992px) {
    .oza-stage { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: minmax(0, 1fr); }
    .oza-brand { position: sticky; top: 0; height: 100svh; min-height: 640px; justify-content: space-between; gap: 32px; padding: 40px 48px 36px; }
    .oza-brand::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 1px; background: linear-gradient(to bottom, transparent, rgba(255,216,0,.35) 30%, rgba(255,216,0,.35) 70%, transparent); }
    .oza-brand-line-m { display: none; }
    .oza-brand-body { display: flex; flex-direction: column; gap: 28px; max-width: 460px; }
    .oza-main { justify-content: center; padding: 48px 40px; }
    .oza-card { padding: 36px 36px 32px; }
    .oza-card h1 { font-size: 32px; }
}
@media (min-width: 1200px) {
    .oza-brand { padding: 48px 64px 40px; }
    .oza-brand-body { max-width: 520px; }
}

/* ---- the brand panel's words ---- */
.oza-eyebrow { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--oza-gold); }
.oza-brand-h { margin: 0; font-family: var(--oza-display); font-weight: 900; font-size: clamp(34px, 3.2vw, 46px); line-height: 1.02; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.oza-doors { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.oza-door { display: grid; gap: 2px; padding: 14px 16px 15px; border: 1px solid var(--oza-line); border-radius: 16px; background: rgba(255,255,255,.04); }
.oza-door-k { font-family: var(--oza-display); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--oza-gold); }
.oza-door-s { font-size: 16px; line-height: 1.45; color: #fff; }

/* The drawn rank chip: the belt and the "Confirmed by" pill from the athlete
   card (elements.profile.athlete-belt / athlete-shield, styled by
   athlete-styles), on a small panel. A sample, and labelled as one. */
.oza-chip { --ap-ink: #01102F; --ap-navy: #011F5D; --ap-gold: #FFD800; --ap-text: rgba(255,255,255,.82); --ap-dim: rgba(255,255,255,.70); position: relative; margin: 0; display: grid; gap: 10px; padding: 18px 18px 16px; border-radius: 16px; background: var(--oza-navy); border: 1px solid var(--oza-line); max-width: 360px; }
.oza-chip-tag { position: absolute; inset-block-start: 12px; inset-inline-end: 14px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--oza-faint); }
.oza-chip-art { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--oza-dim); }
.oza-chip-rank { font-family: var(--oza-display); font-weight: 900; font-size: 22px; line-height: 1.1; color: #fff; }
.oza-chip .oz-ap-belt-lg { width: min(100%, 240px); }
.oza-chip .oz-ap-pill { margin-block-start: 2px; width: max-content; max-width: 100%; }

/* ---- motion, only for people who allow it ---- */
@media (prefers-reduced-motion: no-preference) {
    .oza-card { animation: oza-rise .45s cubic-bezier(0.16, 1, 0.3, 1) both; }
    @keyframes oza-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ---- /start: pay first, set up after (LOCAL, see PATCHES.md patch 286) ---- */
.oza-start-paid { display: flex; align-items: center; gap: 8px; margin: 0 0 10px !important; padding: 8px 12px; width: max-content; max-width: 100%; border-radius: 999px; background: #E7F4EE; color: #0B5A3B !important; font-size: 14px; font-weight: 700; }
.oza-start-tick { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0B6B45; color: #fff; font-size: 12px; }
.oza-card .form-control.oza-start-ro, .oza-card .form-control.oza-start-ro[readonly] { background: #F2F4F8; color: var(--oza-ink); border-style: dashed; cursor: default; }
.oza-start-group { margin: 6px 0 4px; padding: 16px 16px 4px; border: 1px solid var(--oza-rule); border-radius: 14px; }
.oza-start-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
@media (min-width: 576px) { .oza-start-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.oza-card fieldset { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
.oza-card legend { font-size: 14px; }
.oza-card p.oza-start-note { margin: 0 0 16px; font-size: 13px; line-height: 1.45; color: var(--oza-muted); }
.oza-start-wait { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; background: #EEF2FA; color: var(--oza-ink); font-weight: 700; }
.oza-start-spinner { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 3px solid var(--oza-field); border-top-color: var(--oza-navy); }
@media (prefers-reduced-motion: no-preference) {
    .oza-start-spinner { animation: oza-spin .8s linear infinite; }
    @keyframes oza-spin { to { transform: rotate(360deg); } }
}
.oza-start-late { display: grid; gap: 14px; }
.oza-start-late[hidden], .oza-start-wait[hidden] { display: none; }