/*
 * Acoperișuri Vest — pagina „Contact” (page-contact.php, template-parts/contact/form-pasi.php).
 * Se încarcă pe cheia `contact` (inc/setup-pages.php), după components.css.
 * Sursa: docs/redesign/design-reference/canvas/Contact.dc.html (capturile Contact-1440 / Contact-390,
 * Contact-pas2-*, Contact-pas3-*, Contact-trimis-*). Titlul vine din .av-ph--deschis (components.css),
 * câmpurile din .av-form / .field (components.css, base.css).
 * Fără JS (fără clasa `js` pe <html>): toți pașii unul sub altul, fără indicator, un singur submit.
 * Cu JS, contact.js (V2-29) pune `hidden` pe pașii inactivi și arată butoanele [data-av-next] / [data-av-back].
 */

.av-contact [hidden]{display:none!important}
/* cu JS, până preia contact.js (defer → .is-pasi): doar pasul 1, fără „Trimiteți” (altfel apar o clipă).
   Plasă de siguranță: dacă după 3 s tot nu e .is-pasi (contact.js picat / fără window.avForms), animația îi
   dezvăluie — formularul arată ca fără JS. Ascunși cu visibility + position (display nu se animă peste tot). */
.js .av-form--contact:not(.is-pasi) .av-step:not([data-av-step="1"]),
.js .av-form--contact:not(.is-pasi) [data-av-submit]{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;animation:av-contact-dezvaluie 0s 3s forwards}
@keyframes av-contact-dezvaluie{to{position:static;width:auto;height:auto;overflow:visible;visibility:visible}}

/* ---------- Așezare: formularul în stânga, coloana închisă în dreapta ---------- */
.av-contact{padding:56px 0 96px}
.av-contact__in{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.av-contact__main{flex:999 1 640px;min-width:0;display:flex;flex-direction:column;gap:28px}
/* scroll-margin: „Trimiteți altă cerere” derulează aici (contact.js, C10) — spațiu deasupra indicatorului de pași
   (pe desktop antetul nu e fix; sub 900 px se adună cu scroll-padding-top din mobile.css), ca la confirmare */
.av-contact__cerere{display:flex;flex-direction:column;gap:28px;min-width:0;scroll-margin-top:32px}

/* ---------- Indicatorul de pași ---------- */
.av-contact__pasi{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px}
.av-contact__pas{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--av-text-3)}
.av-contact__pas-n{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #9DA3A8;font-family:var(--av-font-mono);font-size:12px;font-weight:500;box-sizing:border-box}
.av-contact__pas.is-on{color:var(--av-text)}
.av-contact__pas.is-on .av-contact__pas-n{background:var(--av-graphite);border-color:var(--av-graphite);color:var(--av-white)}
.av-contact__pas.is-done .av-contact__pas-n{background:var(--av-red);border-color:var(--av-red);color:var(--av-white)}
html:not(.js) .av-contact__pasi{display:none}

/* ---------- Cardul formularului ---------- */
.av-form--contact{gap:24px;padding:32px;border:1px solid var(--av-line-3);border-top:4px solid var(--av-red)}

.av-step{min-width:0;border:0;margin:0;padding:0}
.av-step--lucrare{display:flex;flex-direction:column;gap:16px}
/* cel mult 2 coloane (Contact-pas2/3, V4-46): minimul coloanei = max(240 px, jumătate - 9 px), deci a treia nu
   mai încape nici când formularul are ≥ 752 px fără coloana laterală (ex. 1024); sub ~496 px rămâne una */
.av-step--grila{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(240px,calc(50% - 9px)),1fr));gap:16px}
.av-step__titlu{float:none;width:100%;padding:0;margin-bottom:16px;font-size:24px;font-weight:700;line-height:normal;color:var(--av-text);box-sizing:border-box}
.av-step__lat{grid-column:1 / -1}
/* cu JS (contact.js): titlul pasului nou primește focusul programatic (tabindex=-1), fără contur */
.av-form--contact.is-pasi .av-step__titlu:focus{outline:none}
/* mai mulți pași vizibili (fără JS): o linie între ei */
.av-step:not([hidden]) ~ .av-step:not([hidden]) > .av-step__titlu{padding-top:24px;border-top:1px solid var(--av-line)}

/* pasul 1: lucrările ca dale (radio-uri ascunse vizual, eticheta e dala) */
.av-form .av-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.av-tile{position:relative;display:flex;min-width:0}
/* radio-ul invizibil acoperă toată dala: derularea la focus (autofocus fără JS, focusCamp() cu JS) ține cont de
   dreptunghiul lui, deci aduce dala întreagă între antet și bara fixă de jos; clicurile trec la etichetă */
.av-tiles .av-tile__input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none}
.av-tiles .av-tile__label{flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:92px;padding:16px;border:1px solid var(--av-field-border);background:var(--av-white);color:var(--av-text);font-size:13px;font-weight:400;cursor:pointer;box-sizing:border-box;overflow-wrap:break-word;min-width:0}
/* hover doar cu mouse-ul: pe ecranele tactile :hover rămâne „lipit” pe dala atinsă (chenar grafit) */
@media (hover:hover){.av-tiles .av-tile__label:hover{border-color:var(--av-graphite)}}
.av-tile__titlu{font-size:16px;font-weight:600}
.av-tile__detaliu{font-size:13px;color:var(--av-text-3)}
.av-tile__input:checked + .av-tile__label{border:2px solid var(--av-red);background:#FBF1EF}
.av-tile__input:focus-visible + .av-tile__label{outline:2px solid var(--av-focus);outline-offset:2px;box-shadow:0 0 0 4px var(--av-focus-halo)}
.av-tile__input[aria-invalid="true"] + .av-tile__label{border-color:var(--av-red)}
/* focus pe o dală cu eroare: inel grafit, ca la câmpuri (components.css), despărțit de bordura roșie de 2 px albi */
.av-tile__input[aria-invalid="true"]:focus-visible + .av-tile__label{outline:3px solid var(--av-graphite);outline-offset:2px;box-shadow:0 0 0 2px var(--av-white)}
.av-tiles .field__err{grid-column:1 / -1}
/* eroarea grupului e deasupra dalelor: la focus pe prima opțiune (forms.js derulează „start”) rămâne loc pentru ea
   (48 px ca la celelalte câmpuri + până la 2 rânduri de eroare și spațiul dintre ele) */
.av-tiles .av-tile__input{scroll-margin-top:96px}

/* pasul 2: fotografiile */
.av-form .field input[type="file"]{height:auto;min-height:46px;padding:5px 12px 5px 5px;font-size:14px;color:var(--av-text-3);cursor:pointer}
/* butonul nativ („Choose Files” / „Alegeți fișierele”) ca .btn.btn-outline din base.css; tot câmpul rămâne
   ținta de atingere și de focus (inelul de focus vine din base.css pe input) */
.av-form .field input[type="file"]::file-selector-button{min-height:40px;margin:0 12px 0 0;padding:0 16px;border:1px solid var(--av-graphite);border-radius:0;background:transparent;color:var(--av-text);font-family:var(--av-font-body);font-size:15px;font-weight:600;cursor:pointer}
.av-form .field input[type="file"]:hover::file-selector-button{background:var(--av-graphite);color:var(--av-white)}
/* cu JS (contact.js, V5-03: `.av-foto` pus de script): butonul „Adăugați fotografii” e o etichetă legată de input;
   inputul rămâne în pagină (focusabil, cu aria-describedby), invizibil și exact sub buton — focusul lui se vede pe
   buton, iar derularea la câmp (eroare) aduce butonul în vedere; clicurile trec la etichetă */
.av-foto__alege{position:relative;display:flex;align-self:flex-start;max-width:100%}
.av-form .field.av-foto .av-foto__alege input[type="file"]{position:absolute;top:0;left:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;pointer-events:none}
.av-form .field .av-foto__btn{min-height:48px;font-size:15px;font-weight:600}
.av-form .field .av-foto__btn:hover{color:var(--av-white)}
.av-foto__alege input[type="file"]:focus-visible + .av-foto__btn{outline:2px solid var(--av-focus);outline-offset:2px;box-shadow:0 0 0 4px var(--av-focus-halo)}
.av-foto__alege input[type="file"][aria-invalid="true"] + .av-foto__btn{border-color:var(--av-red);box-shadow:inset 0 0 0 1px var(--av-red)}
/* focus cu eroare: inel grafit, ca la câmpuri (components.css) */
.av-foto__alege input[type="file"][aria-invalid="true"]:focus-visible + .av-foto__btn{outline:3px solid var(--av-graphite);outline-offset:2px;box-shadow:inset 0 0 0 1px var(--av-red),0 0 0 2px var(--av-white)}
/* lista pozelor alese: nume scurtat + mărime + „Scoate” (44 × 44 px minim) */
.av-foto__lista{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.av-foto__item{display:flex;align-items:center;gap:12px;min-width:0;padding:4px 4px 4px 12px;border:1px solid var(--av-line-3);background:var(--av-paper)}
.av-foto__nume{flex:1 1 auto;min-width:0;font-size:14px;color:var(--av-text);overflow-wrap:anywhere}
.av-foto__marime{flex:none;font-family:var(--av-font-mono);font-size:12px;color:var(--av-text-3)}
.av-form .av-foto__scoate{flex:none;min-width:44px;min-height:44px;margin:0;padding:0 14px;border:1px solid var(--av-field-border);border-radius:0;background:var(--av-white);color:var(--av-text);font-family:var(--av-font-body);font-size:14px;font-weight:600;cursor:pointer}
.av-form .av-foto__scoate:hover{border-color:var(--av-graphite);background:var(--av-graphite);color:var(--av-white)}

/* pasul 3: consimțământul */
.av-acord__rand{display:flex;gap:10px;align-items:flex-start}
.av-form .av-acord input[type="checkbox"]{position:relative;z-index:1;flex:none;width:20px;height:20px;margin:0;padding:0;accent-color:var(--av-red);cursor:pointer}
/* padding de 12 px sus / jos anulat de marginile negative: aspectul rămâne, dar eticheta (ținta de clic) are
   cel puțin 45 px înălțime și când textul încape pe un rând de 21 px (1024 px și peste) */
.av-form .av-acord label{position:relative;padding:12px 0;margin:-12px 0;font-size:14px;font-weight:400;line-height:1.5;color:#3E444A}
/* zona de atingere a căsuței: 44×44 px centrată pe căsuța de 20 px (aparține etichetei, deci bifează căsuța);
   -42 px = 10 px spațiu + 20 px căsuță + 12 px; top 0 = 12 px (padding-ul etichetei) deasupra căsuței = (44 - 20) / 2.
   Căsuța (z-index 1) rămâne deasupra. */
.av-form .av-acord label::before{content:"";position:absolute;top:0;left:-42px;width:44px;height:44px}

/* navigarea între pași / trimiterea */
.av-contact__nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--av-line);padding-top:20px}
.av-contact__pas-label{font-size:13px;color:var(--av-text-3)}
.av-contact__nav .btn-red{margin-left:auto}
/* cu JS: Înapoi · eticheta · Continuați distribuite (eticheta la mijloc); la rând nou, butonul pornește din stânga */
.av-form--contact.is-pasi .av-contact__nav .btn-red{margin-left:0}

/* ecranul de confirmare (Contact-trimis-*) */
.av-contact__confirm:not([hidden]){display:flex;flex-direction:column;gap:14px;padding:12px 0}
/* focusul programatic (succes, PRG): fără contur după trimiterea cu mouse-ul / atingere (Contact-trimis-*, B12);
   conturul apare doar la tastatură (:focus-visible), în grafit: inelul roșu al temei ar face confirmarea să pară
   o eroare (C7, V4-37); #6B737B pe alb = 4,7:1 (≥ 3:1, AA pentru contur) */
.av-contact__confirm:focus{outline:none}
.av-contact__confirm:focus-visible{outline:2px solid var(--av-line-muted);outline-offset:6px}
.av-contact__confirm-ic{color:var(--av-red)}
.av-contact__confirm-titlu{font-size:30px;line-height:1.15;color:var(--av-text);overflow-wrap:break-word}
.av-contact__confirm-text{margin:0;font-size:17px;line-height:1.6;color:#3E444A}
.av-contact__confirm-actiuni{display:flex;flex-wrap:wrap;gap:12px}

/* starea „trimis” randată de server (`?av_trimis=c`, D-V3-12; form-pasi.php pune `.is-trimis`):
   - pașii și navigarea rămân ascunși și cu JS (contact.js arată pasul 1 la pornire);
   - mesajul de succes e în confirmare, deci zona de stare nu-l mai dublează;
   - indicatorul apare și fără JS, cu toți pașii făcuți (Contact-trimis-*), oricum l-ar marca contact.js. */
.av-form--contact.is-trimis .av-step,
.av-form--contact.is-trimis .av-contact__nav,
.av-form--contact.is-trimis .av-form__stare{display:none!important}
html:not(.js) .av-contact__cerere.is-trimis .av-contact__pasi{display:flex}
.av-contact__cerere.is-trimis .av-contact__pas{color:var(--av-text-3)}
.av-contact__cerere.is-trimis .av-contact__pas-n{background:var(--av-red);border-color:var(--av-red);color:var(--av-white)}

/* ---------- Coloana „Preferați direct?” ---------- */
.av-contact__direct{--av-focus:var(--av-red-on-dark);--av-focus-halo:var(--av-graphite);flex:1 1 340px;min-width:0;background:var(--av-graphite);color:var(--av-text-on-dark);padding:32px;display:flex;flex-direction:column;gap:8px;box-sizing:border-box}
.av-contact__direct-et{margin:0;padding-bottom:8px;color:var(--av-red-on-dark)}
.av-chan{display:flex;flex-direction:column;gap:4px;padding:20px 0;border-top:1px solid var(--av-line-dark);color:var(--av-white);text-decoration:none;min-width:0;overflow-wrap:anywhere}
a.av-chan:hover{color:var(--av-white)}
.av-chan:last-child,.av-chan:has(+ .av-contact__zone){border-bottom:1px solid var(--av-line-dark)}
.av-chan__et{font-size:10px;color:var(--av-text-on-dark-3)}
.av-chan__valoare{font-size:15px;color:var(--av-white)}
.av-chan--telefon .av-chan__valoare,.av-chan--whatsapp .av-chan__valoare{font-family:var(--av-font-display);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.av-chan--telefon .av-chan__valoare{font-size:28px}
.av-chan--whatsapp .av-chan__valoare{font-size:24px}
.av-chan--email .av-chan__valoare{font-size:18px;font-weight:600}
.av-chan__sub{font-size:13px;color:var(--av-text-on-dark-3)}
a.av-chan:hover .av-chan__valoare{text-decoration:underline;text-decoration-color:var(--av-red-on-dark);text-underline-offset:4px}

/* în locul hărții din canvas: zonele deservite (D-V2-4), în cutia hărții (200 px înălțime, conținutul centrat pe
   verticală; crește doar dacă lista nu încape) — panoul are astfel înălțimea din Contact-1440 (V5-17f) */
.av-contact__zone{margin-top:16px;min-height:200px;background:var(--av-line-dark);padding:24px;display:flex;flex-direction:column;justify-content:center;gap:12px;box-sizing:border-box}
.av-contact__zone-et{margin:0;font-size:11px;color:var(--av-text-on-dark-3)}
.av-contact__zone-lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;color:var(--av-white)}

/* ---------- Telefon (Contact-390): cardul și coloana își păstrează cei 32 px din canvas ---------- */
@media (max-width:640px){
  .av-form--contact{padding:32px}
  .av-contact__direct{padding:32px}
}