/* ============================================================
   forms.css — box-model formular (.ct-*) pentru portal + auth.
   Extras din shopify-page.css (regulile de formular, lin. 992-1010)
   ca să fie încărcabil independent de pagina-contact moștenită.
   Folosește tokenii din creator-portal-spatial.css (--line-2, --surface,
   --ink, --signal-bg, --ff-*); încarcă ÎNAINTE de creator-portal.css
   ca spatial-ul / spacing-ul portalului să poată face override.
   ============================================================ */

.ct-form { display:flex; flex-direction:column; gap:18px; }
.ct-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:520px){ .ct-row { grid-template-columns:1fr; } }
.ct-field { display:flex; flex-direction:column; gap:7px; }
/* .ct-field sets display:flex, which beats the UA [hidden]{display:none};
   restore it so `hidden` actually collapses a field (ex. CNP/CUI toggle). */
.ct-field[hidden] { display:none; }
.ct-label { font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.ct-input { width:100%; border:1px solid var(--line-2); border-radius:10px; padding:13px 15px; font-family:var(--ff-sans); font-size:15px; color:var(--ink); background:var(--surface); transition:border-color .18s; }
.ct-input::placeholder { color:var(--faint); }
.ct-input:focus { border-color:var(--ink); outline:none; }
textarea.ct-input { min-height:130px; resize:vertical; }
/* compact variant — repeater-ul de platforme din profil */
.ct-input-sm { padding:10px 12px; font-size:14px; }
.ct-svc { display:flex; flex-wrap:wrap; gap:8px; }
.ct-svc label { cursor:pointer; }
.ct-svc input { position:absolute; opacity:0; width:0; height:0; }
.ct-svc span { display:inline-block; font-family:var(--ff-mono); font-size:12px; padding:8px 13px; border:1px solid var(--line-2); border-radius:999px; color:var(--ink-2); transition:all .18s; }
.ct-svc label:hover span { border-color:var(--ink-2); }
.ct-svc input:checked + span { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.ct-submit { align-self:flex-start; background:var(--ink); color:var(--paper); border:none; border-radius:10px; padding:15px 28px; font-family:var(--ff-sans); font-size:15px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:10px; transition:transform .2s, box-shadow .25s; }
.ct-submit:hover { transform:translateY(-2px); box-shadow:0 14px 30px -14px oklch(0.205 0.012 70 /.6); }
.ct-ok { display:none; padding:15px 18px; border-radius:10px; background:var(--signal-bg); border:1px solid oklch(0.6 0.07 158 /.45); color:var(--signal); font-size:14.5px; line-height:1.5; }
.ct-ok.show { display:block; }
/* danger companion to .ct-ok — same box, warning palette (token-driven) */
.ct-warn { padding:15px 18px; border-radius:10px; background:var(--danger-bg); border:1px solid var(--danger); color:var(--danger); font-size:14.5px; line-height:1.5; }