/* ==========================================================================
   HH AUTH PAGES — Ultimate Member login + register

   Scoped to .um.um-login and .um.um-register, which UM puts on the form
   wrapper itself. Two classes plus the element gives (0,3,1) on field rules,
   which is what's needed to beat um-old-default.css — it hardcodes #ddd
   borders and #3ba1da at (0,2,1) with !important and loads after the theme.

   Nothing here touches .um-account or .um-profile.
   ========================================================================== */

.um.um-login,
.um.um-register {
    --auth-bg: #121212;
    --auth-panel: #191919;
    --auth-accent: #ff7700;
    --auth-accent-hover: #ff9233;
    --auth-text: #E0E0E0;
    --auth-muted: rgba(255, 255, 255, 0.6);
    --auth-line: rgba(255, 255, 255, 0.18);
    --auth-field: rgba(255, 255, 255, 0.06);
    --auth-field-border: #121212;
}

/* Page background. The header's triangle flanks show whatever is painted
   behind them, so body and the layout wrappers both need to be dark — if
   either wrapper paints its own background it covers body's. */
html:has(.um-login),
html:has(.um-register),
body:has(.um-login),
body:has(.um-register),
body:has(.um-login) #main-shell,
body:has(.um-register) #main-shell,
body:has(.um-login) #main-content,
body:has(.um-register) #main-content {
    background: #121212;
}

/* ---------- PANEL ---------- */

.um.um-login,
.um.um-register {
    color: var(--auth-text);
    margin: 3rem auto !important;
    background: var(--auth-panel);
    border: 1px solid var(--auth-line);
    border-radius: 8px;
    padding: 2rem;
    box-sizing: border-box;
}

.um.um-login .um-form,
.um.um-register .um-form { margin: 0; }

/* ---------- HEADINGS & TEXT ---------- */

.um.um-login .um-field-label label,
.um.um-register .um-field-label label,
.um.um-login .um-field-value,
.um.um-register .um-field-value {
    color: var(--auth-text);
}

.um.um-login .um-field-label,
.um.um-register .um-field-label {
    border-bottom-color: var(--auth-line) !important;
}

.um.um-login .um-col-alt,
.um.um-register .um-col-alt,
.um.um-login .um-col-alt-s,
.um.um-register .um-col-alt-s { color: var(--auth-muted); }

/* ---------- FIELDS ----------
   um-old-default.css: `.um .um-form input[type=text] { border: 1px solid #ddd
   !important }`. The extra class here is what wins the tie. */

.um.um-login .um-form input[type="text"],
.um.um-register .um-form input[type="text"],
.um.um-login .um-form input[type="email"],
.um.um-register .um-form input[type="email"],
.um.um-login .um-form input[type="tel"],
.um.um-register .um-form input[type="tel"],
.um.um-login .um-form input[type="url"],
.um.um-register .um-form input[type="url"],
.um.um-login .um-form input[type="number"],
.um.um-register .um-form input[type="number"],
.um.um-login .um-form input[type="password"],
.um.um-register .um-form input[type="password"],
.um.um-login .um-form input[type="search"],
.um.um-register .um-form input[type="search"],
.um.um-login .um-form select,
.um.um-register .um-form select,
.um.um-login .um-form textarea,
.um.um-register .um-form textarea {
    background: var(--auth-field) !important;

    /* Border matches the page background rather than outlining the field.
       Switch to var(--auth-line) if they need more definition. */
    border: 1px solid var(--auth-field-border) !important;

    color: var(--auth-text) !important;
    border-radius: 4px;
    color-scheme: dark;
}

.um.um-login .um-form input:focus,
.um.um-register .um-form input:focus,
.um.um-login .um-form select:focus,
.um.um-register .um-form select:focus,
.um.um-login .um-form textarea:focus {
    border: 1px solid var(--auth-accent) !important;
}

.um.um-login .um-form select option,
.um.um-register .um-form select option { color: #000; }

.um.um-login .um-form input::placeholder,
.um.um-register .um-form input::placeholder,
.um.um-login .um-form textarea::placeholder,
.um.um-register .um-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

/* Show/hide password toggle */
.um.um-login .um-toggle-password,
.um.um-register .um-toggle-password { color: var(--auth-muted); }

.um.um-login .um-toggle-password:hover,
.um.um-register .um-toggle-password:hover { color: var(--auth-accent); }

/* ---------- CHECKBOXES & RADIOS ----------
   UM hides the real input and draws an icon font glyph. #aaa resting, and
   the active colour comes from the #3ba1da group in um-old-default.css. */

.um.um-login .um-field-checkbox-state i,
.um.um-register .um-field-checkbox-state i,
.um.um-login .um-field-radio-state i,
.um.um-register .um-field-radio-state i {
    color: var(--auth-muted);
}

.um.um-login .um-field-checkbox:hover i,
.um.um-register .um-field-checkbox:hover i,
.um.um-login .um-field-radio:hover i,
.um.um-register .um-field-radio:hover i {
    color: var(--auth-text);
}

.um.um-login .um-field-checkbox.active:not(.um-field-radio-state-disabled) i,
.um.um-register .um-field-checkbox.active:not(.um-field-radio-state-disabled) i,
.um.um-login .um-field-radio.active:not(.um-field-radio-state-disabled) i,
.um.um-register .um-field-radio.active:not(.um-field-radio-state-disabled) i {
    color: var(--auth-accent);
}

/* #888 !important on the label text — needs matching weight */
.um.um-login .um-field-checkbox-option,
.um.um-register .um-field-checkbox-option,
.um.um-login .um-field-radio-option,
.um.um-register .um-field-radio-option {
    color: var(--auth-text) !important;
}

/* Native inputs, if any form uses them */
.um.um-login input[type="checkbox"],
.um.um-register input[type="checkbox"],
.um.um-login input[type="radio"],
.um.um-register input[type="radio"] {
    accent-color: var(--auth-accent);
    color-scheme: dark;
}

/* ---------- BUTTONS ----------
   um-old-default.css sets #3ba1da at `.um input[type=submit].um-button`. */

.um.um-login input[type=submit].um-button,
.um.um-register input[type=submit].um-button,
.um.um-login input[type=submit].um-button:focus,
.um.um-register input[type=submit].um-button:focus,
.um.um-login a.um-button,
.um.um-register a.um-button,
.um.um-login .um-button,
.um.um-register .um-button {
    background: var(--auth-accent) !important;
    color: #121212 !important;
    border: none !important;
    font-weight: 700 !important;
}

.um.um-login input[type=submit].um-button:hover,
.um.um-register input[type=submit].um-button:hover,
.um.um-login a.um-button:hover,
.um.um-register a.um-button:hover,
.um.um-login .um-button:hover,
.um.um-register .um-button:hover {
    background-color: var(--auth-accent-hover) !important;
}

/* The secondary/alt button — UM ships it #eee */
.um.um-login .um-button.um-alt,
.um.um-register .um-button.um-alt,
.um.um-login input[type=submit].um-button.um-alt,
.um.um-register input[type=submit].um-button.um-alt {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--auth-text) !important;
}

.um.um-login .um-button.um-alt:hover,
.um.um-register .um-button.um-alt:hover,
.um.um-login input[type=submit].um-button.um-alt:hover,
.um.um-register input[type=submit].um-button.um-alt:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

.um.um-login input[type=submit]:disabled,
.um.um-register input[type=submit]:disabled,
.um.um-login input[type=submit]:disabled:hover,
.um.um-register input[type=submit]:disabled:hover {
    background: var(--auth-accent) !important;
    opacity: 0.5;
}

/* ---------- LINKS ---------- */

.um.um-login a.um-link,
.um.um-register a.um-link,
.um.um-login a.um-link-alt,
.um.um-register a.um-link-alt,
.um.um-login .um-col-alt a,
.um.um-register .um-col-alt a {
    color: var(--auth-accent) !important;
}

.um.um-login a.um-link:hover,
.um.um-register a.um-link:hover,
.um.um-login a.um-link-hvr:hover,
.um.um-register a.um-link-hvr:hover,
.um.um-login .um-col-alt a:hover,
.um.um-register .um-col-alt a:hover {
    color: var(--auth-accent-hover) !important;
}

/* ---------- FIELD GROUPS (register) ---------- */

.um.um-register .um-field-group-head {
    background: var(--auth-accent);
    color: #121212;
}

.um.um-register .um-field-group-head:hover {
    background: var(--auth-accent-hover);
}

.um.um-register .um-field-group { border-color: var(--auth-line); }

/* ---------- NOTICES ----------
   The error red (#C74A4A) reads fine on dark and stays. The warning notice
   is a pale yellow with #666 text, which doesn't. */

.um.um-login p.um-notice.warning,
.um.um-register p.um-notice.warning {
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #ffd97a;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 600px) {
    .um.um-login,
    .um.um-register {
        margin: 1.5rem auto !important;
        padding: 1.25rem;
    }
}