/* ============================================================
   CINDER TV — UNIFIED AUTH SHELL (.cinder-auth / .cinder-auth__*)
   ------------------------------------------------------------
   One shared split-panel shell for BOTH login (a form) and
   register (an "account created at checkout" info page), so the
   two surfaces are visual twins. Replaces the old isolated
   .cinder-login-* (local --login-* tokens) and .cinder-register-*
   (legacy --cinder-* tokens) islands. Everything resolves against
   the canonical --cinder-site-* tokens; loaded globally + version-
   busted in head.tpl but scoped to .cinder-auth so it's inert
   elsewhere.

   Layout: a left brand panel (logo + promise + points, carrying the
   blue-hot core glow) and a right content card. Collapses to a
   single column under 880px (brand panel hidden).
   ============================================================ */

.cinder-auth {
    position: relative;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto !important;
    float: none !important;
    padding: clamp(32px, 6vh, 64px) 24px;
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    align-items: center;
    gap: 56px;
    min-height: calc(100vh - 200px);
}
.cinder-auth * { box-sizing: border-box; }

/* ── Brand panel ─────────────────────────────────────────── */
.cinder-auth__brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 44px;
    border-radius: var(--r-lg);
    border: 1px solid var(--cinder-site-border);
    background:
        linear-gradient(180deg, rgba(17, 22, 28, 0.6), rgba(12, 15, 20, 0.6));
}
/* Blue-hot core glow — breathing, the auth-side echo of the homepage motif. */
.cinder-auth__brand::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 12%;
    top: 18%;
    width: 460px;
    height: 360px;
    transform: translate(-30%, -20%);
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(var(--cinder-site-glow-rgb), 0.20),
        rgba(var(--cinder-site-glow-rgb), 0.05) 48%,
        transparent 72%);
    filter: blur(8px);
    animation: cinderAuthGlow 7.5s ease-in-out infinite;
}
@keyframes cinderAuthGlow {
    0%, 100% { opacity: 0.7; transform: translate(-30%, -20%) scale(1); }
    50%      { opacity: 1;   transform: translate(-30%, -20%) scale(1.08); }
}
.cinder-auth__brand-logo { height: 48px; width: auto; max-width: 240px; align-self: flex-start; object-fit: contain; margin-bottom: 30px; }
.cinder-auth__brand-title {
    margin: 0 0 24px;
    font-family: var(--font-heading);
    font-size: clamp(26px, 3vw, 32px);
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}
.cinder-auth__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.cinder-auth__points li {
    position: relative;
    padding-left: 30px;
    color: var(--cinder-site-copy-soft);
    font-size: 15px;
    line-height: 1.5;
}
.cinder-auth__points li::before {
    content: "";
    position: absolute;
    left: 0; top: 1px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(var(--cinder-site-glow-rgb), 0.16);
    box-shadow: inset 0 0 0 1px rgba(var(--cinder-site-glow-rgb), 0.42);
}
.cinder-auth__points li::after {
    content: "";
    position: absolute;
    left: 6px; top: 6px;
    width: 6px; height: 3px;
    border-left: 2px solid var(--cinder-site-accent-soft);
    border-bottom: 2px solid var(--cinder-site-accent-soft);
    transform: rotate(-45deg);
}

/* ── Content panel + card ────────────────────────────────── */
.cinder-auth__panel { position: relative; z-index: 1; width: 100%; max-width: 520px; justify-self: center; }
.cinder-auth__card {
    position: relative;
    overflow: hidden;
    padding: 44px 40px 32px;
    border-radius: var(--r-lg);
    border: 1px solid var(--cinder-site-border);
    background: var(--cinder-site-surface-strong);
    box-shadow: var(--cinder-site-shadow);
}
.cinder-auth__card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(360px 180px at 0% 0%, rgba(var(--cinder-site-glow-rgb), 0.10), transparent 72%);
}
.cinder-auth__card > * { position: relative; }
.cinder-auth__card--center { text-align: center; }

.cinder-auth__head { text-align: center; margin-bottom: 28px; }
.cinder-auth__kicker {
    display: inline-block;
    margin: 0 0 12px;
    color: var(--cinder-site-accent-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.cinder-auth__title {
    margin: 0 0 10px;
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}
.cinder-auth__subtitle {
    max-width: 40ch;
    margin: 0 auto;
    color: var(--cinder-site-copy-soft);
    font-size: 14.5px;
    line-height: 1.6;
}

/* ── Form fields ─────────────────────────────────────────── */
.cinder-auth__form { margin-top: 24px; }
.cinder-auth__field { position: relative; margin-bottom: 20px; }
.cinder-auth__label {
    display: block;
    margin-bottom: 8px;
    color: var(--cinder-site-copy-soft);
    font-size: 13px;
    font-weight: 600;
}
.cinder-auth__input {
    width: 100%;
    height: 54px;
    padding: 0 18px;
    border: 1.5px solid var(--cinder-site-border);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 15px;
    transition: border-color var(--cs-transition), background var(--cs-transition), box-shadow var(--cs-transition);
}
.cinder-auth__field--pw .cinder-auth__input { padding-right: 56px; }
.cinder-auth__input:hover { background: rgba(255, 255, 255, 0.055); border-color: var(--cinder-site-border-strong); }
.cinder-auth__input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(var(--cinder-site-glow-rgb), 0.5);
    box-shadow: 0 0 0 4px rgba(var(--cinder-site-glow-rgb), 0.13);
}
.cinder-auth__input::placeholder { color: rgba(237, 241, 246, 0.3); }

.cinder-auth__reveal {
    position: absolute;
    right: 14px; top: 36px;
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 0; border-radius: var(--r-xs);
    background: transparent;
    color: var(--cinder-site-copy-muted);
    cursor: pointer;
    transition: color var(--cs-transition), background var(--cs-transition);
}
.cinder-auth__reveal:hover { color: var(--cinder-site-copy); background: rgba(255, 255, 255, 0.05); }

/* ── Remember checkbox ───────────────────────────────────── */
.cinder-auth__remember { margin: 4px 0 22px; }
.cinder-auth__check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.cinder-auth__checkbox {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cinder-auth__checkmark {
    position: relative;
    width: 18px; height: 18px; flex-shrink: 0;
    border-radius: 5px;
    border: 1.5px solid var(--cinder-site-border-strong);
    background: rgba(255, 255, 255, 0.05);
    transition: all var(--cs-transition);
}
.cinder-auth__checkmark::after {
    content: "\2713";
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: #fff; font-size: 11px; font-weight: 700;
    transition: transform 0.2s ease;
}
.cinder-auth__check:hover .cinder-auth__checkmark { border-color: var(--cinder-site-border-strong); background: rgba(255, 255, 255, 0.08); }
.cinder-auth__checkbox:focus-visible + .cinder-auth__checkmark { outline: 2px solid rgba(var(--cinder-site-glow-rgb), 0.5); outline-offset: 3px; }
.cinder-auth__checkbox:checked + .cinder-auth__checkmark { border-color: var(--cinder-site-accent); background: var(--cinder-site-accent); }
.cinder-auth__checkbox:checked + .cinder-auth__checkmark::after { transform: translate(-50%, -50%) scale(1); }
.cinder-auth__check-text { color: var(--cinder-site-copy-muted); font-size: 13px; }

.cinder-auth__captcha { margin-bottom: 22px; }

/* ── Buttons (primary submit + secondary actions) ────────── */
.cinder-auth__submit {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 54px; margin-bottom: 18px;
    border: 0; border-radius: var(--r-sm);
    background: linear-gradient(135deg, var(--cinder-site-accent) 0%, var(--cinder-site-accent-dark) 100%);
    color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
    box-shadow: 0 8px 22px rgba(var(--cinder-site-glow-rgb), 0.22);
    transition: transform var(--cs-transition), box-shadow var(--cs-transition);
    overflow: hidden;
}
.cinder-auth__submit:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(var(--cinder-site-glow-rgb), 0.32); }
.cinder-auth__submit:active { transform: translateY(0); }
.cinder-auth__submit .btn-loading { position: absolute; opacity: 0; transition: opacity 0.2s ease; }
.cinder-auth__submit.loading .btn-text { opacity: 0; }
.cinder-auth__submit.loading .btn-loading { opacity: 1; }

.cinder-auth__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; padding: 0 24px;
    border-radius: var(--r-sm);
    font-size: 14px; font-weight: 800; text-decoration: none !important;
    border: 1px solid transparent; cursor: pointer;
    transition: transform var(--cs-transition), box-shadow var(--cs-transition), background var(--cs-transition);
}
.cinder-auth__btn--primary {
    background: linear-gradient(135deg, var(--cinder-site-accent), var(--cinder-site-accent-dark));
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(var(--cinder-site-glow-rgb), 0.22);
}
.cinder-auth__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(var(--cinder-site-glow-rgb), 0.32); }
.cinder-auth__btn--ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--cinder-site-border-strong);
    color: var(--cinder-site-copy) !important;
}
.cinder-auth__btn--ghost:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(var(--cinder-site-glow-rgb), 0.3); }

/* ── Secondary actions (login support links) ─────────────── */
.cinder-auth__secondary { margin-top: 6px; text-align: center; }
.cinder-auth__support-copy { margin: 0 0 12px; color: var(--cinder-site-copy-muted); font-size: 13px; }
.cinder-auth__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cinder-auth__link {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 10px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--cinder-site-border);
    background: transparent;
    color: var(--cinder-site-copy); text-decoration: none;
    font-size: 13px; font-weight: 600;
    transition: background var(--cs-transition), border-color var(--cs-transition), color var(--cs-transition);
}
.cinder-auth__link:hover { text-decoration: none; color: #fff; background: rgba(255, 255, 255, 0.03); border-color: rgba(var(--cinder-site-glow-rgb), 0.24); }
.cinder-auth__link--primary { border-color: rgba(var(--cinder-site-glow-rgb), 0.24); background: rgba(var(--cinder-site-glow-rgb), 0.07); color: var(--cinder-site-accent-soft); }

/* ── Linked-account disclosure (login) ───────────────────── */
.cinder-auth__linked { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cinder-site-border); text-align: center; }
.cinder-auth__linked summary {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--cinder-site-copy-muted); font-size: 12px; font-weight: 600;
    cursor: pointer; list-style: none; user-select: none;
}
.cinder-auth__linked summary::-webkit-details-marker { display: none; }
.cinder-auth__linked summary::before {
    content: "+";
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.03); color: var(--cinder-site-copy-muted); font-size: 11px; line-height: 1;
}
.cinder-auth__linked[open] summary::before { content: "\2212"; }
.cinder-auth__linked-panel {
    margin-top: 10px; padding: 10px 12px 2px;
    border-radius: var(--r-sm); border: 1px solid var(--cinder-site-border);
    background: rgba(255, 255, 255, 0.015); text-align: left;
}
.cinder-auth__linked-note { margin: 0 0 10px; color: var(--cinder-site-copy-muted); font-size: 12px; line-height: 1.45; }

/* ── Register info variant (feature rows / actions / note) ─ */
.cinder-auth__features { display: grid; gap: 12px; margin: 4px 0 26px; text-align: left; }
.cinder-auth__feature {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--cinder-site-border);
}
.cinder-auth__feature-icon {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 11px;
    background: rgba(var(--cinder-site-glow-rgb), 0.12);
    color: var(--cinder-site-accent-strong); font-size: 16px;
}
.cinder-auth__feature h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: #fff; }
.cinder-auth__feature p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--cinder-site-copy-muted); }
.cinder-auth__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 18px; }
.cinder-auth__note { margin: 0; font-size: 12.5px; color: var(--cinder-site-copy-muted); }
.cinder-auth__note a { color: var(--cinder-site-accent-strong); }
/* Risk-reversal line directly under the primary CTA. */
.cinder-auth__note--trust { margin: 0 0 12px; color: var(--cinder-site-copy-soft); font-weight: 600; }

/* ── Compact mobile trust chips (shown when brand panel collapses) ─ */
.cinder-auth__brand--compact { display: none; }
.cinder-auth__chip {
    display: inline-flex; align-items: center;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(var(--cinder-site-glow-rgb), 0.24);
    background: rgba(var(--cinder-site-glow-rgb), 0.07);
    color: var(--cinder-site-accent-soft);
    font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cinder-auth__brand::before { animation: none; }
}
@media (max-width: 880px) {
    .cinder-auth { grid-template-columns: 1fr; gap: 0; justify-items: center; min-height: auto; }
    .cinder-auth__brand { display: none; }
    /* Replace the hidden brand panel with a slim centered row of trust chips
       above the form card so mobile signup keeps its reassurance. */
    .cinder-auth__brand--compact {
        display: flex; flex-wrap: wrap; justify-content: center;
        gap: 8px;
        width: 100%; max-width: 520px;
        margin: 0 0 20px;
    }
}
@media (max-width: 640px) {
    .cinder-auth { padding: 24px 16px 36px; }
    .cinder-auth__card { padding: 32px 22px 26px; }
    .cinder-auth__links { flex-direction: column; }
    .cinder-auth__link { width: 100%; }
    .cinder-auth__input, .cinder-auth__submit { height: 52px; }
    .cinder-auth__field--pw .cinder-auth__input { padding-right: 52px; }
}

/* ============================================================
   AUTH-FAMILY UTILITY CARDS — password-reset (×4) + two-factor (×2).
   These don't use the split-panel shell; they're single centred
   cards. The body carries .primary-bg-color even logged-out, so the
   Bootstrap bridge already darkens the .card — here we elevate the
   pre-wired hooks (.password-reset-card from password-reset-container.tpl,
   plus a .cinder-auth-box class added to the two two-factor templates)
   to the bespoke login look: corner glow, deeper shadow, heading type.
   Reuses the global .account-section-kicker + the .btn-* bridges.
   NOTE: the inline header.tpl .card bridge loads after this sheet and
   sets radius !important, so radius is intentionally left to the bridge;
   box-shadow there is NOT !important, so ours wins, and ::before is new.
   ============================================================ */
.password-reset-card,
.cinder-auth-box {
    position: relative;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--cinder-site-shadow) !important;
}

/* Corner glow — the auth-side echo of login's .cinder-auth__card::before */
.password-reset-card::before,
.cinder-auth-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(360px 180px at 0% 0%, rgba(var(--cinder-site-glow-rgb), 0.10), transparent 72%);
}

/* Keep content above the glow */
.password-reset-card .card-body,
.password-reset-card .card-footer,
.cinder-auth-box .card-body,
.cinder-auth-box .card-footer {
    position: relative;
    z-index: 1;
}

/* Heading typography to match the auth titles */
.password-reset-prompt-head .h3,
.password-reset-prompt-head h6,
.cinder-auth-box .card-title {
    font-family: var(--font-heading);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
}
.cinder-auth-box .card-title {
    margin-bottom: 18px;
    font-size: clamp(22px, 3vw, 28px);
}
.password-reset-prompt-head {
    margin-bottom: 22px;
}

/* A little more presence for the primary action on the reset pages */
.password-reset-actions .btn {
    min-width: 170px;
}

/* ============================================================
   PASSWORD RESET ON THE SHELL
   ------------------------------------------------------------
   password-reset-*.tpl now compose the .cinder-auth split-shell
   (twin of login), so the legacy .password-reset-card / -prompt-head
   utilities above apply only to the two-factor .cinder-auth-box now.
   These rules cover the bits unique to the reset flow: the gated
   submit (disabled until the new password is valid), the WHMCS
   strength meter, and per-field validation states.
   ============================================================ */
.cinder-auth__submit:disabled,
.cinder-auth__submit[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Strength meter — rebrand the Bootstrap .progress the WHMCS JS drives. */
.cinder-auth__strength { margin-bottom: 18px; }
.cinder-auth__strength .progress {
    height: 8px;
    margin: 6px 0 0;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.cinder-auth__strength .progress-bar {
    background: var(--cinder-site-accent);
    transition: width var(--cs-transition), background var(--cs-transition);
}
.cinder-auth__strength .progress-bar.bg-danger  { background: var(--cinder-site-danger) !important; }
.cinder-auth__strength .progress-bar.bg-warning { background: var(--cinder-site-warning) !important; }
.cinder-auth__strength .progress-bar.bg-success { background: var(--cinder-site-success) !important; }
.cinder-auth__strength .alert { margin-bottom: 0; font-size: 12px; line-height: 1.5; }

/* Confirm-password mismatch message rendered by the strength JS. */
#inputNewPassword2Msg .form-text {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--cinder-site-danger);
}

/* Field validation states the strength JS toggles on the password input. */
.cinder-auth__input.is-invalid { border-color: rgba(255, 107, 107, 0.55); }
.cinder-auth__input.is-warning { border-color: rgba(240, 178, 77, 0.55); }
.cinder-auth__input.is-valid   { border-color: rgba(51, 194, 127, 0.55); }

/* The "cancel" reset control is a <button>; normalise it to the link look. */
button.cinder-auth__link {
    font-family: var(--font-body);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}