/* portal-auth.css — parte din creator-portal.css (liniile 80-229).
   Înregistrare + login: .cp-auth shell, parolă/validare inline, consimțăminte GDPR,
   fieldset-uri, repeater platforme, control tarife, panoul de succes.
   MUTARE PURĂ: conținutul de mai jos e identic cu sursa. Ordinea de încărcare
   a bucăților contează (cascada) — vezi src/components/styles/. */
/* ===================== INREGISTRARE ===================== */
.cp-auth { min-height: calc(100vh - 56px); display: grid; grid-template-columns: 1fr 1fr; }
/* minmax(0,1fr) — a bare 1fr is minmax(auto,1fr), whose `auto` min = max-content,
   so the single mobile column could grow past the card width (overflow-x:hidden
   then CLIPPED it, leaving the aside/form looking cut off, not "full"). Allowing
   the track to shrink to 0 makes the column honour the container width. */
@media (max-width: 900px) { .cp-auth { grid-template-columns: minmax(0, 1fr); } }

.cp-auth-aside {
  background: oklch(0.205 0.012 70); color: oklch(0.985 0.004 80);
  padding: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 64px);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
[data-theme="dark"] .cp-auth-aside { background: oklch(0.13 0.005 80); border-right: 1px solid var(--line); }
.cp-auth-aside .kicker { color: oklch(1 0 0 / .55); }
.cp-auth-aside .kicker .dot { background: var(--signal); }
.cp-auth-aside h1 {
  font-size: clamp(34px, 4vw, 52px); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.04; margin-top: 20px; max-width: 13ch;
}
.cp-auth-aside h1 em { font-style: normal; color: oklch(1 0 0 / .45); }
.cp-auth-aside .lead { color: oklch(1 0 0 / .72); font-size: 16px; line-height: 1.6; max-width: 38ch; margin-top: 18px; }
.cp-auth-points { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }
.cp-auth-points li { list-style: none; display: flex; gap: 12px; align-items: flex-start; color: oklch(1 0 0 / .82); font-size: 14.5px; line-height: 1.45; }
.cp-auth-points .ic {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  background: oklch(1 0 0 / .1); color: var(--signal);
  display: grid; place-items: center; font-size: 13px; margin-top: 1px;
}
.cp-auth-foot { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .06em; color: oklch(1 0 0 / .4); margin-top: 40px; }

/* Column, not the default row: the form, the (hidden) #cpDone success panel and
   the "Ai deja cont?" link must STACK. As a row, the login link became a flex
   sibling beside the form and got squeezed to a ~90px ribbon on the right that
   bled past the card — most visible on mobile, but wrong at every width. */
.cp-auth-main { padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 72px); display: flex; flex-direction: column; align-items: stretch; }
.cp-auth-form { width: 100%; max-width: 560px; margin: 0 auto; }
.cp-auth-main .cp-login-alt { width: 100%; max-width: 560px; margin-inline: auto; }

/* ---------- password reveal (eye toggle) + inline validation ---------- */
.cp-pass-wrap { position: relative; }
.cp-pass-wrap .ct-input { padding-right: 46px; }
.cp-pass-eye {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; border-radius: 8px;
  color: var(--faint); cursor: pointer; transition: color .15s, background .15s;
}
.cp-pass-eye:hover { color: var(--ink-2); }
.cp-pass-eye .eye-slash { display: none; }
.cp-pass-eye.on .eye-slash { display: block; }
/* Inline field error — shown only after the user has interacted (:user-invalid),
   never on a pristine empty field. Optional fields (no `required`) stay valid
   while empty, so an empty phone never flags. */
.ct-err-msg { display: none; font-size: 12px; color: var(--danger); margin-top: 6px; }
.ct-input:user-invalid { border-color: var(--danger); }
.ct-input:user-invalid ~ .ct-err-msg { display: block; }
/* password-mismatch line: the input lives inside .cp-pass-wrap so the sibling
   selector above can't reach it — JS toggles .show instead. */
.ct-err-msg.show { display: block; }

/* ---------- consents (GDPR) ---------- */
.cr-consents { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); }
.cr-consent { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
.cr-consent input { width: 17px; height: 17px; margin-top: 1px; flex: none; accent-color: var(--signal); }
.cr-consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.cr-consent i { color: var(--signal); font-style: normal; }
.cr-consent em { color: var(--muted); font-style: normal; }

/* ---------- login form ---------- */
.cp-login-form { max-width: 420px; align-self: center; }
.cp-auth-main:has(.cp-login-form) { align-items: center; }
.cp-login-passrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.cp-login-forgot { font-size: 13px; color: var(--signal); text-decoration: none; }
.cp-login-forgot:hover { text-decoration: underline; }
.cp-login-remember { display: flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.cp-login-remember input { width: 16px; height: 16px; accent-color: var(--signal); }
.cp-login-alt { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); text-align: center; }
.cp-login-alt a { color: var(--ink); font-weight: 600; text-decoration: none; }
.cp-login-alt a:hover { text-decoration: underline; }
.cp-auth-form > h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.cp-auth-form > .sub { color: var(--ink-2); font-size: 15px; margin-top: 6px; line-height: 1.5; }

.cp-fset { border: none; padding: 0; margin: 30px 0 0; }
.cp-fset-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.cp-fset-h .n {
  font-family: var(--ff-mono); font-size: 11px; color: var(--paper);
  background: var(--ink); width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center; flex: none;
}
.cp-fset-h h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

/* platform repeater */
.cp-plat { display: flex; flex-direction: column; gap: 10px; }
.cp-plat-row {
  display: grid; grid-template-columns: 150px 1fr 110px;
  gap: 10px; align-items: center;
}
@media (max-width: 520px) { .cp-plat-row { grid-template-columns: 1fr 1fr; } }
.cp-sel {
  width: 100%; border: 1px solid var(--line-2); border-radius: 10px;
  padding: 13px 15px; font-family: var(--ff-sans); font-size: 14.5px;
  color: var(--ink); background: var(--surface); cursor: pointer;
}
.cp-sel:focus { border-color: var(--ink); outline: none; }

/* pricing control */
.cp-price-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-price-modes label { cursor: pointer; }
.cp-price-modes input { position: absolute; opacity: 0; width: 0; height: 0; }
.cp-price-modes span {
  display: inline-flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 16px;
  transition: all .18s; min-width: 130px;
}
.cp-price-modes .t { font-size: 14px; font-weight: 600; color: var(--ink); }
.cp-price-modes .d { font-family: var(--ff-mono); font-size: 10.5px; color: var(--muted); letter-spacing: .03em; }
.cp-price-modes label:hover span { border-color: var(--ink-2); }
.cp-price-modes input:checked + span { border-color: var(--ink); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink); }

.cp-price-panel { margin-top: 16px; display: none; }
.cp-price-panel.show { display: block; animation: cpFade .25s ease; }
.cp-rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .cp-rate-grid { grid-template-columns: 1fr; } }
.cp-rate {
  display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 8px 8px 14px;
}
.cp-rate .lbl { font-size: 13.5px; color: var(--ink-2); }
.cp-rate .inp { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: var(--surface); }
.cp-rate .inp input { border: none; background: none; padding: 9px 4px 9px 11px; width: 100%; font-family: var(--ff-mono); font-size: 14px; color: var(--ink); }
.cp-rate .inp input:focus { outline: none; }
.cp-rate .inp .cur { font-family: var(--ff-mono); font-size: 13px; color: var(--muted); padding-right: 11px; }
.cp-price-note { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: 10px; }

/* success state */
.cp-done { display: none; text-align: center; max-width: 460px; margin: 0 auto; padding-top: 30px; }
.cp-done.show { display: block; }
.cp-done .seal {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 22px;
  display: grid; place-items: center; font-size: 28px;
  background: var(--signal-bg); color: var(--signal); border: 1px solid oklch(0.6 0.07 158 / .4);
}
.cp-done h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.cp-done p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin-top: 10px; }
.cp-done-steps { text-align: left; margin: 26px 0 0; display: flex; flex-direction: column; gap: 12px; }
.cp-done-steps li { list-style: none; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.cp-done-steps .ord { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 6px; width: 22px; height: 22px; display: grid; place-items: center; flex: none; }

/* ===========================================================================
   SELECTORUL DE LOCALITATE  (src/scripts/locality-picker.js)
   ---------------------------------------------------------------------------
   Lista se desenează peste conținut, deci ancora are nevoie de `position:
   relative`. Județul stă lângă nume și NU e decor: Pietroșani există în trei
   județe, Podari și Șandra în două — fără el, două rânduri arată identic și
   creatorul alege la nimereală.
   Dimensiunile textului din listă pot coborî sub 16px: nu e un câmp în care se
   tastează, deci nu declanșează zoom-ul iOS (vezi portal-responsive.css).
   =========================================================================== */
[data-locality] { position: relative; }

.cp-loc-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  margin: 6px 0 0; padding: 4px; list-style: none;
  max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 12px 28px oklch(0 0 0 / .18);
}

/* Lista TREBUIE să fie opacă, pe orice skin.
   ---------------------------------------------------------------------------
   `var(--surface)` e opac în paleta de bază, dar sub `body.cp-spatial` e
   `oklch(1 0 0 / .10)` — un alb de 10% care are sens DOAR sub un
   `backdrop-filter`, pe care lista asta nu-l are. Rezultatul, raportat de
   Sebastian: eticheta „TELEFON" și placeholderul de dedesubt se citeau PRIN
   listă, peste numele localităților.

   E aceeași greșeală pe care o făcuse widget-ul de chat, comisă aici de mine
   câteva ore mai târziu — dovada că granița pusă în spatial-tokens.css apără
   embed-urile, dar nu apără componentele proprii de tokeni al căror înțeles
   depinde de un blur aplicat în altă parte.

   Nu folosesc rețeta de sticlă a casei (`--glass-tint` + blur), deși ar fi fost
   consecventă vizual: din lista asta omul alege între „Sasca Montană" și
   „Saschiz", iar o alegere greșită intră în baza de date ca fapt. Lizibilitatea
   bate estetica pe un selector. Umbra și muchia rămân cele ale skin-ului, deci
   panoul aparține în continuare aceleiași limbi vizuale. */
body.cp-spatial .cp-loc-list {
  background: oklch(0.17 0.017 265);
  border-color: oklch(1 0 0 / .16);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}
body.cp-spatial[data-theme="light"] .cp-loc-list {
  background: oklch(0.995 0.002 250);
  border-color: oklch(0.24 0.02 265 / .12);
}
/* Rândul activ are nevoie de propriul contrast: `--line-2` e o linie, nu o
   suprafață, iar pe fundal opac se pierde. */
body.cp-spatial .cp-loc-opt:hover,
body.cp-spatial .cp-loc-opt.is-active { background: oklch(1 0 0 / .10); }
body.cp-spatial[data-theme="light"] .cp-loc-opt:hover,
body.cp-spatial[data-theme="light"] .cp-loc-opt.is-active { background: oklch(0.24 0.02 265 / .07); }
.cp-loc-opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
}
.cp-loc-opt:hover,
.cp-loc-opt.is-active { background: var(--line-2); }
.cp-loc-name { font-size: 15px; color: var(--ink); }
.cp-loc-county { font-family: var(--ff-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.cp-loc-empty { padding: 10px 12px; font-size: 14px; color: var(--muted); }
.cp-loc-hint {
  display: block; margin-top: 6px;
  font-family: var(--ff-mono); font-size: 12px; color: var(--ink-2);
}