/*
 * Grupizo - Authentication pages
 * Login, registration, password recovery and account confirmation.
 *
 * Keep selectors here only when they belong to this responsibility.
 * See ../README.md (or ../../README.md inside components/pages).
 */

.auth-body { overflow-x: hidden; }
.auth-backdrop { position: fixed; z-index: -1; inset: 0; overflow: hidden; background: radial-gradient(circle at 16% 8%, #102447 0, transparent 27rem), linear-gradient(125deg, #080c18 12%, #0b1120 57%, #080c18 100%); }
.auth-backdrop::before { content: ""; position: absolute; inset: 0; opacity: .27; background-image: linear-gradient(rgba(58, 123, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(58, 123, 255, .045) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent 70%); }
.orb { position: absolute; border-radius: 50%; filter: blur(12px); opacity: .28; }
.orb-cyan { width: 34rem; height: 34rem; top: -15rem; left: 20%; background: #0e7490; }
.orb-violet { width: 27rem; height: 27rem; right: -8rem; bottom: -8rem; background: #5b21b6; opacity: .17; }
.grid-glow { position: absolute; width: 35rem; height: 35rem; right: 15%; top: 16%; border: 1px solid rgba(58, 123, 255, .11); border-radius: 50%; box-shadow: 0 0 8rem rgba(58, 123, 255, .1); }

/* Shared brand atmosphere for authentication: the glow mirrors the visual guide
   while controls keep enough contrast for secure form use. */
.auth-backdrop {
  background:
    radial-gradient(circle at 17% 8%, rgba(58,123,255,.26), transparent 28rem),
    radial-gradient(circle at 86% 92%, rgba(123,92,255,.15), transparent 27rem),
    linear-gradient(125deg, #0e1117 12%, #111722 57%, #0e1117 100%);
}

.orb-cyan { background: #00d4ff; opacity: .16; }
.orb-violet { background: #7b5cff; opacity: .15; }

.eyebrow,
.brand-copy h1 em { color: #8eb6ff; }

.eyebrow span { background: #00d4ff; box-shadow: 0 0 8px rgba(0,212,255,.7); }

.auth-layout { min-height: 100vh; width: min(1200px, calc(100% - 48px)); margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(430px, 510px); align-items: stretch; }
.brand-panel { display: flex; flex-direction: column; padding: 54px 64px 45px 20px; min-height: 720px; }
.brand-panel > .brand { gap: 12px; font-size: 21px; font-weight: 700; letter-spacing: -.045em; }
.brand-panel > .brand .brand-mark { width: 46px; height: 46px; flex: 0 0 46px; overflow: hidden; border: 1px solid rgba(58, 123, 255, .28); border-radius: 13px; background: radial-gradient(circle at 50% 42%, rgba(58, 123, 255, .22), rgba(8, 12, 24, .82) 72%); box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 0 0 1px rgba(0, 212, 255, .04), 0 10px 30px rgba(27, 84, 255, .26); }
.brand-panel > .brand .brand-mark img { object-fit: contain; transform: scale(1.29); transform-origin: center; }
.brand-copy { margin: auto 0; max-width: 510px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; color: #93c5fd; font-size: 11px; font-weight: 700; letter-spacing: .15em; }
.eyebrow span { width: 21px; height: 1px; background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.brand-copy h1, .form-heading h2 { margin: 0; font-family: Sora, sans-serif; letter-spacing: -.055em; }
.brand-copy h1 { max-width: 580px; font-size: clamp(37px, 4.1vw, 57px); line-height: 1.16; }
.brand-copy h1 em { font-style: normal; color: #8eb6ff; }
.brand-copy > p:not(.eyebrow) { max-width: 430px; margin: 24px 0 0; color: var(--soft); font-size: 16px; line-height: 1.75; }

.form-panel { display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 30px 0; }
.form-panel-inner { width: 100%; padding: 42px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035)); box-shadow: 0 24px 80px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(18px); }
.form-heading { margin-bottom: 27px; }
.form-heading h2 { font-size: 28px; line-height: 1.25; }
.form-heading > p:not(.eyebrow) { color: var(--muted); margin: 10px 0 0; line-height: 1.6; font-size: 14px; }
.mobile-only { display: none; }
.auth-form { display: grid; gap: 18px; }
.registration-progress { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; margin-bottom: 2px; }
.registration-progress > div { display: grid; justify-items: center; gap: 5px; color: #64748b; font-size: 10px; font-weight: 600; }
.registration-progress > div span { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid rgba(148,163,184,.28); border-radius: 50%; background: rgba(2,6,23,.35); }
.registration-progress > div.is-active, .registration-progress > div.is-complete { color: #bae6fd; }
.registration-progress > div.is-active span { border-color: var(--blue); background: rgba(58,123,255,.15); box-shadow: 0 0 13px rgba(58,123,255,.22); }
.registration-progress > div.is-complete span { border-color: var(--teal); color: #042f2e; background: var(--teal); }
.registration-progress > i { height: 1px; margin-top: -16px; background: rgba(148,163,184,.22); }
.registration-step { display: grid; gap: 18px; }
.registration-step[hidden] { display: none; }
.step-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.step-actions-end { justify-content: flex-end; }
.step-actions .button { padding-inline: 18px; }
.profile-type { margin: 0; padding: 0; border: 0; }
.profile-type legend { margin: 0 0 8px; color: var(--soft); font-size: 13px; font-weight: 600; }
.profile-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.profile-options label { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 12px; border: 1px solid rgba(148,163,184,.22); border-radius: 10px; background: rgba(2, 6, 23, .3); color: var(--soft); font-size: 12px; cursor: pointer; }
.profile-options label:has(input:checked) { border-color: rgba(58,123,255,.7); background: rgba(58,123,255,.1); color: #e0f2fe; }
.profile-options input { width: 15px; height: 15px; accent-color: var(--blue); }
.profile-options small { margin-left: 3px; color: var(--muted); font-size: 10px; }
.profile-section { display: grid; gap: 18px; }
.profile-section[hidden], [data-acquisition-other][hidden] { display: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.password-strength { display: grid; gap: 9px; margin-top: -8px; padding: 12px; border: 1px solid rgba(148,163,184,.16); border-radius: 10px; background: rgba(2,6,23,.22); }
.strength-header { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.strength-header strong { color: #fca5a5; font-weight: 700; }
.strength-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.strength-bars span { height: 4px; border-radius: 99px; background: rgba(148,163,184,.2); transition: background .18s, box-shadow .18s; }
.password-strength[data-score="1"] .strength-bars .is-active { background: #ef4444; }
.password-strength[data-score="2"] .strength-bars .is-active { background: #f59e0b; }
.password-strength[data-score="3"] .strength-bars .is-active { background: #3a7bff; }
.password-strength[data-score="4"] .strength-bars .is-active { background: #00d4ff; box-shadow: 0 0 10px rgba(0,212,255,.45); }
.password-strength[data-score="2"] .strength-header strong { color: #fcd34d; }
.password-strength[data-score="3"] .strength-header strong { color: #8eb6ff; }
.password-strength[data-score="4"] .strength-header strong { color: #66e5ff; }
.password-guidance { display: grid; gap: 5px; padding: 0; margin: 0; list-style: none; color: var(--muted); font-size: 10px; line-height: 1.4; }
.password-guidance li { display: flex; gap: 6px; }
.password-guidance li::before { content: "•"; color: #64748b; }
.password-guidance li.is-passed { color: #b4f4ff; }
.password-guidance li.is-passed::before { content: "✓"; color: var(--teal); }
.breach-status { position: relative; align-items: flex-start; }
.breach-status::before { display: none; }
.breach-indicator { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #64748b; }
.breach-status.is-checking .breach-indicator { background: var(--blue); box-shadow: 0 0 8px rgba(58,123,255,.7); }
.breach-status.is-safe { color: #b4f4ff; }
.breach-status.is-safe .breach-indicator { background: var(--teal); box-shadow: 0 0 8px rgba(0,212,255,.6); }
.breach-status.is-breached, .breach-status.is-unavailable { color: #fecaca; }
.breach-status.is-breached .breach-indicator, .breach-status.is-unavailable .breach-indicator { background: #f87171; box-shadow: 0 0 8px rgba(248,113,113,.55); }
.info-button { display: inline-grid; flex: 0 0 auto; place-items: center; width: 15px; height: 15px; margin: -1px 0 0 2px; padding: 0; border: 1px solid currentColor; border-radius: 50%; color: #8eb6ff; background: transparent; font-size: 10px; font-weight: 700; line-height: 1; }
.info-button:hover, .info-button:focus-visible { color: #e0f2fe; background: rgba(58,123,255,.16); }
.info-popover { position: absolute; z-index: 4; left: 0; top: calc(100% + 7px); width: min(320px, 100%); padding: 10px; border: 1px solid rgba(58,123,255,.27); border-radius: 9px; color: var(--soft); background: #111827; box-shadow: 0 14px 30px rgba(0,0,0,.38); font-size: 10px; line-height: 1.5; }
.password-wrap { position: relative; display: block; }
.password-wrap input { padding-right: 47px; }
.password-toggle { position: absolute; width: 38px; right: 3px; inset-block: 3px; border: 0; color: var(--muted); background: transparent; font-size: 15px; }
.password-toggle:hover { color: var(--blue); }
.form-links { display: flex; justify-content: space-between; align-items: center; margin-top: -2px; font-size: 12px; }
.form-links-end { justify-content: flex-end; }
.terms { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); }
.terms input { margin: 1px 0 0; width: 15px; height: 15px; accent-color: var(--blue); }
.terms { line-height: 1.5; font-size: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 45px; border-radius: 10px; border: 1px solid transparent; font-weight: 700; font-size: 14px; transition: transform .18s, box-shadow .18s, background .18s; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: #f8fbff; background: linear-gradient(115deg, #3a7bff, #00bfe8); box-shadow: 0 10px 28px rgba(58,123,255,.24); }
.button-primary:hover { background: linear-gradient(115deg, #588fff, #00d4ff); box-shadow: 0 12px 32px rgba(58,123,255,.34); }
.button-secondary { padding: 0 18px; color: var(--text); border-color: var(--line); background: rgba(255,255,255,.04); }
.button-secondary:hover { color: white; background: rgba(255,255,255,.09); }
.form-switch { margin: 24px 0 0; color: var(--muted); text-align: center; font-size: 13px; }
.form-switch a { font-weight: 600; }
.auth-footer { margin: 18px 0 0; color: #64748b; text-align: center; font-size: 10px; }
.captcha-note { margin: -2px 0 0; color: #fcd34d; font-size: 11px; line-height: 1.4; }
.auth-form .google-recaptcha { display: flex; width: 100%; min-height: 70px; align-items: flex-start; justify-content: center; overflow: hidden; border-radius: 4px; }
.auth-form .google-recaptcha .g-recaptcha { width: 296px; height: 70px; overflow: hidden; border-radius: 4px; }
.auth-form .google-recaptcha .g-recaptcha > div { transform: translate(-4px, -4px); transform-origin: left top; }
.form-error { margin: 0; color: #fecaca; font-size: 12px; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

@media (max-width: 850px) {
  .auth-layout { width: min(510px, calc(100% - 32px)); display: block; }
  .brand-panel { min-height: auto; padding: 30px 5px 24px; }
  .brand-copy { display: none; }
  .form-panel { display: block; padding: 0 0 26px; }
  .mobile-only { display: flex; margin-bottom: 11px; }
  .form-panel-inner { padding: 29px 24px; border-radius: 16px; }
}
@media (max-width: 460px) {
  .auth-layout { width: 100%; }.brand-panel { padding-inline: 20px; }.brand-panel > .brand .brand-mark { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; }.form-panel { padding: 0 12px 20px; }.form-panel-inner { padding: 28px 20px; }.form-links { align-items: flex-start; gap: 12px; flex-direction: column; }.form-row { grid-template-columns: 1fr; }.step-actions { flex-direction: column-reverse; align-items: stretch; }.step-actions .button { width: 100%; }.cf-turnstile { transform: scale(.92); transform-origin: left top; width: 100%; height: 62px; }.auth-form .google-recaptcha { min-height: 63px; }.auth-form .google-recaptcha .g-recaptcha { transform: scale(.78); transform-origin: center top; }
}