/* ===========================================================
   Sign-in / Sign-up theme

   Loaded AFTER login.css and registration.css so it restyles
   those pages onto the same dark surface as the entry screen,
   rather than each page having its own look.

   The three pages a signed-out visitor can reach -- the
   chooser, Sign In and Create Account -- now share one
   background, one card, one button and one set of motions.
   =========================================================== */

:root {
    --auth-red: #c41e3a;
    --auth-deep: #8b0000;
    --auth-ink: #f2f4f7;
    --auth-muted: rgba(255, 255, 255, .58);
    --auth-line: rgba(255, 255, 255, .14);
    --auth-field: rgba(255, 255, 255, .06);
}

body.auth-page {
    margin: 0;
    min-height: 100vh;
    color: var(--auth-ink);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    background: radial-gradient(1200px 600px at 20% -10%, #5e0000 0%, transparent 60%),
                radial-gradient(900px 500px at 110% 110%, #7d0014 0%, transparent 55%),
                linear-gradient(160deg, #1a0306 0%, #2b0000 55%, #12060a 100%);
    background-attachment: scroll;
}

/* Slow drift so the page has some life without pulling focus. */
body.auth-page::before {
    content: '';
    position: fixed;
    inset: -40%;
    background: radial-gradient(closest-side, rgba(196, 30, 58, .2), transparent 70%);
    animation: authDrift 22s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes authDrift {
    from { transform: translate3d(-8%, -6%, 0) scale(1); }
    to   { transform: translate3d(8%, 6%, 0) scale(1.12); }
}

/* --- card ------------------------------------------------------------- */
body.auth-page .login-container,
body.auth-page .registration-container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 20px;
    background: none;
}

body.auth-page .login-card,
body.auth-page .registration-card {
    width: 100%;
    max-width: 440px;
    background: rgba(24, 10, 14, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--auth-line);
    border-radius: 18px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
    padding: 40px 34px;
    transform-origin: center;
    animation: authWindowOpen .34s cubic-bezier(.16, 1, .3, 1) both;
}

body.auth-page .registration-card { max-width: 520px; }

/* Window motion, the way a desktop opens and closes a panel: a short
   scale from just under full size with the easing front-loaded, so it
   settles rather than drifting. Replaces the press ripple. */
@keyframes authWindowOpen {
    from { opacity: 0; transform: scale(.955) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes authWindowClose {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(.97) translateY(-6px); }
}

body.auth-page.is-leaving .login-card,
body.auth-page.is-leaving .registration-card,
body.auth-page.is-leaving .rd-shell {
    animation: authWindowClose .18s cubic-bezier(.4, 0, 1, 1) both;
}

body.auth-page.is-leaving .back-button { opacity: 0; transition: opacity .18s ease; }

@media (prefers-reduced-motion: reduce) {
    body.auth-page::before { animation: none; }
    body.auth-page .login-card,
    body.auth-page .registration-card,
    body.auth-page.is-leaving .login-card,
    body.auth-page.is-leaving .registration-card,
    body.auth-page.is-leaving .rd-shell { animation: none; }
}

/* --- header ----------------------------------------------------------- */
body.auth-page .login-header,
body.auth-page .registration-header { text-align: center; margin-bottom: 28px; }

body.auth-page .login-header h1,
body.auth-page .registration-header h1 {
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0 0 8px;
    letter-spacing: -.01em;
}

body.auth-page .login-header p,
body.auth-page .registration-header p {
    color: var(--auth-muted);
    font-size: .9rem;
    margin: 0;
}

/* The wordmark is dark ink on transparency, so it disappears on this
   background. A light disc behind it keeps the brand colours instead of
   flattening the logo to white with a filter. */
/* The wordmark is dark ink on transparency. A white plate behind it was
   legible but sat on the page like a sticker. brightness(0) invert(1)
   flattens the artwork to solid white instead, so the mark reads as part
   of the surface, and a soft red glow keeps the brand colour present. */
body.auth-page .login-logo,
body.auth-page .auth-logo {
    width: 178px;
    height: auto;
    object-fit: contain;
    margin: 0 auto 22px;
    display: block;
    background: none;
    filter: brightness(0) invert(1)
            drop-shadow(0 0 18px rgba(196, 30, 58, .55))
            drop-shadow(0 6px 18px rgba(0, 0, 0, .5));
    opacity: .96;
}

/* --- fields ----------------------------------------------------------- */
body.auth-page .form-group { margin-bottom: 18px; }

body.auth-page .form-group label,
body.auth-page .password-header label {
    display: block;
    color: #e7eaee;
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: 7px;
    letter-spacing: .01em;
}

body.auth-page input[type="text"],
body.auth-page input[type="email"],
body.auth-page input[type="password"],
body.auth-page input[type="tel"],
body.auth-page select,
body.auth-page textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--auth-field);
    border: 1px solid var(--auth-line);
    border-radius: 10px;
    color: #fff;
    font-size: .95rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

body.auth-page input::placeholder,
body.auth-page textarea::placeholder { color: rgba(255, 255, 255, .38); }

body.auth-page input:focus,
body.auth-page select:focus,
body.auth-page textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, .1);
    border-color: var(--auth-red);
    box-shadow: 0 0 0 3px rgba(196, 30, 58, .28);
}

/* Chrome paints its own colour over autofilled inputs; an inset shadow is
   the only way to keep them on-theme. */
body.auth-page input:-webkit-autofill,
body.auth-page input:-webkit-autofill:hover,
body.auth-page input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #2a1116 inset;
    caret-color: #fff;
    transition: background-color 9999s ease-in-out 0s;
}

body.auth-page .password-input-wrapper { position: relative; }

body.auth-page .toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    font-size: 1.05rem;
}

body.auth-page .toggle-password:hover { color: #fff; }

/* --- buttons ---------------------------------------------------------- */
body.auth-page .btn-submit {
    position: relative;
    width: 100%;
    margin-top: 6px;
    padding: 14px 22px;
    border: none;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--auth-red), var(--auth-deep));
    color: #fff;
    font-size: .98rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(196, 30, 58, .34);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

body.auth-page .btn-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(196, 30, 58, .46);
}

body.auth-page .btn-submit:active:not(:disabled) {
    transform: translateY(1px) scale(.995);
    box-shadow: 0 6px 16px rgba(196, 30, 58, .34);
}

body.auth-page .btn-submit:disabled { filter: grayscale(.4); opacity: .7; cursor: default; }

/* --- links and footers ------------------------------------------------ */
body.auth-page .signup-link,
body.auth-page .login-link,
body.auth-page .login-info {
    text-align: center;
    color: var(--auth-muted);
    font-size: .86rem;
}

/* One divider, above the sign-up line. login.css also puts a border on
   .login-info, which stacked a second rule immediately under it. */
body.auth-page .signup-link,
body.auth-page .login-link {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--auth-line);
    border-bottom: none;
}

body.auth-page .login-info {
    margin-top: 14px;
    padding-top: 0;
    border-top: none;
    font-size: .78rem;
    color: rgba(255, 255, 255, .4);
}

body.auth-page a { color: #ff8a9a; }
body.auth-page a:hover { color: #ffb3bd; }

body.auth-page .forgot-password { font-size: .8rem; font-weight: 600; }
body.auth-page .password-header { display: flex; justify-content: space-between; align-items: baseline; }

/* --- back button ------------------------------------------------------ */
body.auth-page .back-button {
    position: fixed;
    top: 22px;
    left: 22px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--auth-line);
    color: #fff;
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .16s ease, transform .16s ease;
}

body.auth-page .back-button:hover { background: rgba(255, 255, 255, .14); color: #fff; }
body.auth-page .back-button:active { transform: translateY(1px); }

/* --- validation ------------------------------------------------------- */
body.auth-page .error-message {
    color: #ff9aa2;
    font-size: .78rem;
    margin-top: 6px;
    display: block;
}

/* An empty slot still reserved a line, which left a gap under every field. */
body.auth-page .error-message:empty { display: none; }
body.auth-page input.error { border-color: #ff6b7a; }

/* --- password strength meter ------------------------------------------ */
body.auth-page .strength-bar,
body.auth-page .password-strength-bar { background: rgba(255, 255, 255, .12); }

body.auth-page .requirement { color: rgba(255, 255, 255, .5); font-size: .78rem; }
body.auth-page .requirement.valid { color: #7ee2a8; }

/* --- ID upload dropzone ----------------------------------------------- */
body.auth-page .upload-area,
body.auth-page .id-dropzone,
body.auth-page [id*="idScanZone"],
body.auth-page [id*="dropZone"] {
    background: var(--auth-field) !important;
    border-color: var(--auth-line) !important;
    color: var(--auth-muted) !important;
}

@media (max-width: 480px) {
    body.auth-page .login-card,
    body.auth-page .registration-card { padding: 30px 22px; }
    body.auth-page .back-button { top: 14px; left: 14px; padding: 8px 14px; }
}

/* --- password requirements panel -------------------------------------- */
body.auth-page .password-requirements {
    background: var(--auth-field);
    border: 1px solid var(--auth-line);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 10px;
}

body.auth-page .password-requirements p {
    color: #e7eaee;
    font-size: .82rem;
    font-weight: 700;
    margin: 0 0 8px;
}

body.auth-page .password-requirements li,
body.auth-page .requirement {
    color: rgba(255, 255, 255, .5);
    font-size: .8rem;
    list-style: none;
}

body.auth-page .requirement.valid { color: #7ee2a8; }

body.auth-page .strength-text { color: rgba(255, 255, 255, .55); font-size: .78rem; }

/* --- Digital ID dropzone ----------------------------------------------
   Built with an inline style attribute, so these need !important to win. */
body.auth-page #idScanDropZone {
    background: var(--auth-field) !important;
    border-color: rgba(255, 255, 255, .28) !important;
    color: var(--auth-muted) !important;
}

body.auth-page #idScanDropZone:hover {
    background: rgba(255, 255, 255, .1) !important;
    border-color: var(--auth-red) !important;
}

body.auth-page #idScanDropZone [style*="color:#374151"],
body.auth-page #idScanDropZone [style*="color:#6b7280"],
body.auth-page #idScanDropZone [style*="color:#9ca3af"],
body.auth-page #idScanPrompt div {
    color: #e7eaee !important;
}

body.auth-page #idScanFileName { color: var(--auth-muted) !important; }

/* --- AppNotice on the signed-out pages ---------------------------------
   app-notice.js injects its own <style> at runtime, which lands after our
   stylesheets, so these are qualified with body.auth-page to win on
   specificity rather than order. A white dialog on this surface read as a
   different application dropped on top of the page. */
body.auth-page .rd-notice-window {
    background: rgba(28, 12, 16, .96) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .6) !important;
}

body.auth-page .rd-notice-body { color: #e7eaee !important; }

body.auth-page .rd-notice-foot { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 16px; }

body.auth-page .rd-notice-btn-secondary {
    background: rgba(255, 255, 255, .08) !important;
    color: #e7eaee !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
}

body.auth-page .rd-notice-btn-secondary:hover {
    background: rgba(255, 255, 255, .14) !important;
}

body.auth-page .rd-notice-overlay { background: rgba(8, 2, 4, .66) !important; }

/* The dialog's header icon is a translucent white chip on the red bar; at
   18% it was too faint to read. */
body.auth-page .rd-notice-icon {
    background: rgba(255, 255, 255, .3) !important;
    color: #fff !important;
}