/* ============================================================
   GTC Forum — Auth skin for the Grav Login plugin.
   Covers login / forgot / reset (#grav-login) AND register
   (.form-wrapper, rendered via the Form plugin).
   Loaded ONLY on auth routes by the plugin, so form-generic
   selectors are safe here. Colors via --gtcf-* (config) with
   neon fallbacks.
   ============================================================ */
:root {
    --gtcf-bg:       #0b0a10;
    --gtcf-surface:  #16131f;
    --gtcf-surface-2:#1d1929;
    --gtcf-line:     #2a2438;
    --gtcf-magenta:  #ff2e88;
    --gtcf-cyan:     #38e1d6;
    --gtcf-text:     #efeaf4;
    --gtcf-muted:    #a99fb8;
    --gtcf-mono: "JetBrains Mono","Fira Code",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---- Card wrapper (login/forgot/reset = #grav-login, register = .form-wrapper) ---- */
#grav-login,
.form-wrapper {
    max-width: 440px;
    margin: 3rem auto;
    background: var(--gtcf-surface);
    border: 1px solid var(--gtcf-line);
    border-radius: 12px;
    padding: 2.2rem 2rem 2rem;
    color: var(--gtcf-text);
    box-shadow: 0 24px 60px -28px rgba(0,0,0,.8), 0 0 0 1px rgba(255,46,136,.06);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
#grav-login::before,
.form-wrapper::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--gtcf-magenta), var(--gtcf-cyan));
}
/* the inner <form> of login must not become a second card */
#grav-login .login-form,
#grav-login form,
.form-wrapper form {
    max-width: none; margin: 0; background: none; border: none;
    padding: 0; box-shadow: none; border-radius: 0;
}
#grav-login .login-form::before,
.form-wrapper form::before { content: none; }

/* ---- Headings inside the card (e.g. "User Login") ---- */
#grav-login h1, #grav-login h2, #grav-login h3,
.form-wrapper h1, .form-wrapper h2, .form-wrapper h3 {
    text-align: center; margin: 0 0 1.4rem; font-weight: 800; letter-spacing: -.4px;
    background: linear-gradient(92deg, var(--gtcf-magenta), #c95bff 45%, var(--gtcf-cyan));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Field rows ---- */
#grav-login .form-field,
.form-wrapper .form-field { margin-bottom: 1.1rem; }

/* ---- Labels ---- */
#grav-login .form-label, #grav-login label,
.form-wrapper .form-label, .form-wrapper label {
    display: block; font-family: var(--gtcf-mono); font-size: .72rem;
    text-transform: uppercase; letter-spacing: .12em; color: var(--gtcf-muted);
    margin-bottom: .4rem;
}

/* ---- Inputs ---- */
#grav-login input[type="text"], #grav-login input[type="email"], #grav-login input[type="password"], #grav-login textarea, #grav-login select,
.form-wrapper input[type="text"], .form-wrapper input[type="email"], .form-wrapper input[type="password"], .form-wrapper textarea, .form-wrapper select {
    width: 100%; padding: .7rem .85rem; border-radius: 7px;
    background: var(--gtcf-bg); border: 1px solid var(--gtcf-line);
    color: var(--gtcf-text); font: inherit; box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
#grav-login input:focus, #grav-login textarea:focus, #grav-login select:focus,
.form-wrapper input:focus, .form-wrapper textarea:focus, .form-wrapper select:focus {
    outline: none; border-color: var(--gtcf-magenta);
    box-shadow: 0 0 0 1px rgba(255,46,136,.35), 0 0 18px -4px rgba(255,46,136,.55);
}
#grav-login input::placeholder, .form-wrapper input::placeholder { color: var(--gtcf-muted); opacity: .7; }

/* ---- Input addon pills (prepend/append) ---- */
#grav-login .form-input-addon-wrapper,
.form-wrapper .form-input-addon-wrapper { display: flex; }
#grav-login .form-input-addon,
.form-wrapper .form-input-addon {
    display: flex; align-items: center; padding: 0 .7rem;
    background: var(--gtcf-surface-2); border: 1px solid var(--gtcf-line);
    color: var(--gtcf-muted); border-radius: 7px;
}

/* ---- Help / description text ---- */
#grav-login .form-field .form-help, #grav-login .form-extra-wrapper,
.form-wrapper .form-field .form-help, .form-wrapper .form-extra-wrapper {
    font-size: .78rem; color: var(--gtcf-muted); margin-top: .35rem;
}

/* ---- Checkboxes (remember me, ToS accept) ---- */
#grav-login .rememberme, .form-wrapper .form-field-checkbox .form-input-wrapper { display: flex; align-items: center; }
#grav-login .rememberme label, #grav-login label.inline,
.form-wrapper .form-field-checkbox label.inline {
    text-transform: none; letter-spacing: 0; font-family: inherit; font-size: .9rem;
    color: var(--gtcf-muted); margin: 0 0 0 .45rem; display: inline;
}
#grav-login input[type="checkbox"],
.form-wrapper input[type="checkbox"] { accent-color: var(--gtcf-magenta); width: 16px; height: 16px; }

/* ---- Actions row ---- */
#grav-login .form-actions,
.form-wrapper .buttons, .form-wrapper .form-actions {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--gtcf-line);
}
#grav-login .form-actions .rememberme { margin-right: auto; }

/* ---- Buttons ---- */
#grav-login .button, #grav-login button,
.form-wrapper button, .form-wrapper .button {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    font-family: var(--gtcf-mono); font-size: .85rem; font-weight: 600; line-height: 1;
    padding: .7rem 1.2rem; border-radius: 7px; cursor: pointer;
    border: 1px solid var(--gtcf-line); background: var(--gtcf-surface-2);
    color: var(--gtcf-text); text-decoration: none;
    transition: box-shadow .15s, border-color .15s, transform .05s;
}
#grav-login .button:hover, #grav-login button:hover,
.form-wrapper button:hover, .form-wrapper .button:hover {
    border-color: var(--gtcf-cyan); box-shadow: 0 0 18px -4px var(--gtcf-cyan);
}
#grav-login .button:active, #grav-login button:active,
.form-wrapper button:active { transform: translateY(1px); }

/* primary = submit (login, send instructions, register) */
#grav-login .button.primary, #grav-login button[type="submit"],
.form-wrapper button[type="submit"], .form-wrapper .buttons button {
    border-color: transparent; color: #0b0a10; font-weight: 700;
    background: linear-gradient(92deg, var(--gtcf-magenta), #ff5fb4);
}
#grav-login .button.primary:hover, #grav-login button[type="submit"]:hover,
.form-wrapper button[type="submit"]:hover, .form-wrapper .buttons button:hover {
    border-color: transparent; box-shadow: 0 0 18px -4px var(--gtcf-magenta);
}
#grav-login .button.secondary { background: transparent; color: var(--gtcf-cyan); }

/* ---- Links ---- */
#grav-login a, .form-wrapper a { color: var(--gtcf-cyan); }
#grav-login a.button { color: var(--gtcf-cyan); }

/* ---- Hide FontAwesome glyphs (often unloaded → empty boxes); labels are clear ---- */
#grav-login .fa, .form-wrapper .fa { display: none; }

/* ---- Messages / validation ---- */
.alert, .messages .alert,
.form-messages, .form-message,
#grav-login .form-errors, .form-wrapper .form-errors {
    max-width: 440px; margin: 1rem auto; padding: .7rem .95rem; border-radius: 7px;
    font-family: var(--gtcf-mono); font-size: .85rem;
    border: 1px solid var(--gtcf-line); background: var(--gtcf-surface); color: var(--gtcf-text);
}
.alert.error, .form-message.error,
#grav-login .form-errors, .form-wrapper .form-errors { border-color: rgba(255,59,107,.4); color: #ff6b8a; }
.alert.success, .form-message.success { border-color: rgba(56,225,214,.4); color: var(--gtcf-cyan); }

@media (prefers-reduced-motion: reduce) {
    #grav-login *, .form-wrapper * { transition: none !important; }
}