/* =========================================================================
   La Victoraș — spălătorie auto
   Paleta e luată din fațada spălătoriei: negru albastrui, albastru electric,
   cyan de apă. Roșul ușii de garaj apare o singură dată, ca muchie verticală
   în bara de sus — niciodată pe un buton.
   ========================================================================= */

:root{
  /* culori */
  --abis:        #04070e;
  --noapte:      #08101f;
  --panou:       #0c1729;
  --panou-sus:   #122238;
  --linie:       #1b2d47;
  --electric:    #1d8bff;
  --electric-cl: #57a9ff;
  --gheata:      #8fdcff;
  --crom:        #eaf1f9;
  --crom-sters:  #98abc2;
  --rubin:       #c8102e;
  --portocaliu:  #ff9f45;

  /* tipografie: o singură familie, două lățimi */
  --font: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;

  /* ritm */
  --cadru-max: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --spatiu-sectiune: clamp(4.5rem, 9vw, 8rem);
}

/* --------------------------------- bază --------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--abis);
  color:var(--crom);
  font-family:var(--font);
  font-variation-settings:"wdth" 100;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
svg{display:block}

h1,h2,h3{
  font-variation-settings:"wdth" 118;
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.005em;
  margin:0;
  text-wrap:balance;
}

p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

a{color:inherit}

:focus-visible{
  outline:2px solid var(--gheata);
  outline-offset:3px;
  border-radius:2px;
}

.doar-citit{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.sari-la-continut{
  position:absolute;top:-4rem;left:var(--gutter);z-index:100;
  background:var(--electric);color:#03070f;
  padding:.7rem 1.1rem;border-radius:4px;
  font-weight:700;text-decoration:none;
  transition:top .18s ease;
}
.sari-la-continut:focus{top:.75rem}

.cadru{
  width:100%;
  max-width:var(--cadru-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.cadru--ingust{max-width:780px}

/* -------------------------------- butoane ------------------------------- */

.buton{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;
  padding:.78rem 1.4rem;
  border-radius:3px;
  font-weight:700;
  font-size:.95rem;
  font-variation-settings:"wdth" 108;
  letter-spacing:.01em;
  text-decoration:none;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.buton--plin{
  background:var(--electric);
  color:#02060d;
  box-shadow:0 0 0 rgba(29,139,255,0);
}
.buton--plin:hover{
  background:var(--electric-cl);
  box-shadow:0 6px 28px -8px rgba(29,139,255,.75);
}

.buton--gol{
  border-color:var(--linie);
  color:var(--crom);
  background:rgba(143,220,255,.04);
}
.buton--gol:hover{
  border-color:var(--electric);
  color:var(--gheata);
}

.buton--mare{
  padding:1rem 1.75rem;
  font-size:1.0625rem;
}

.legatura{
  color:var(--gheata);
  text-decoration:none;
  border-bottom:1px solid rgba(143,220,255,.35);
  padding-bottom:1px;
}
.legatura:hover{border-bottom-color:var(--gheata)}

/* ------------------------------- bara de sus ---------------------------- */

.bara{
  position:sticky;top:0;z-index:50;
  background:rgba(4,7,14,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie);
}
/* muchia roșie: rama ușii de garaj de la intrarea în spălătorie */
.bara::before{
  content:"";position:absolute;inset:0 auto 0 0;
  width:4px;background:var(--rubin);
}

.bara__interior{
  max-width:var(--cadru-max);
  margin-inline:auto;
  padding:.85rem var(--gutter);
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
}

.marca{
  text-decoration:none;
  display:grid;
  line-height:1;
  margin-right:auto;
}
.marca__nume{
  font-variation-settings:"wdth" 116;
  font-weight:700;
  font-size:1.35rem;
  letter-spacing:-.01em;
}
.marca__nume b{color:var(--electric);font-weight:700}
.marca__sub{
  font-size:.62rem;
  font-variation-settings:"wdth" 112;
  font-weight:600;
  letter-spacing:.32em;
  color:var(--crom-sters);
  margin-top:.34rem;
}

.navigatie{display:flex;gap:1.9rem}
.navigatie a{
  text-decoration:none;
  font-size:.94rem;
  font-weight:600;
  color:var(--crom-sters);
  padding-block:.3rem;
  border-bottom:1.5px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.navigatie a:hover{color:var(--crom);border-bottom-color:var(--electric)}

.meniu-mobil{
  display:none;
  width:44px;height:40px;
  background:none;border:1px solid var(--linie);border-radius:3px;
  cursor:pointer;
  position:relative;
}
.meniu-mobil__linii,
.meniu-mobil__linii::before,
.meniu-mobil__linii::after{
  content:"";position:absolute;left:11px;
  width:20px;height:1.8px;background:var(--crom);
  transition:transform .2s ease,opacity .2s ease;
}
.meniu-mobil__linii{top:19px}
.meniu-mobil__linii::before{left:0;top:-6px}
.meniu-mobil__linii::after{left:0;top:6px}
.meniu-mobil[aria-expanded="true"] .meniu-mobil__linii{background:transparent}
.meniu-mobil[aria-expanded="true"] .meniu-mobil__linii::before{transform:translateY(6px) rotate(45deg)}
.meniu-mobil[aria-expanded="true"] .meniu-mobil__linii::after{transform:translateY(-6px) rotate(-45deg)}

.navigatie-mobil{
  display:none;
  flex-direction:column;gap:.25rem;
  padding:.5rem var(--gutter) 1.5rem;
  border-top:1px solid var(--linie);
}
.navigatie-mobil a{
  text-decoration:none;
  padding:.85rem 0;
  font-weight:600;
  border-bottom:1px solid var(--linie);
}
.navigatie-mobil .buton{margin-top:1rem;border-bottom:none}

/* ---------------------------------- hero -------------------------------- */

.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(4rem,11vw,7.5rem) 0 clamp(4rem,9vw,6.5rem);
  /* caroserie neagră lucioasă */
  background:
    linear-gradient(178deg,#061020 0%,#04070e 46%,#050b16 100%);
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--linie) 18%,var(--linie) 82%,transparent);
}

/* reflectorul de deasupra firmei */
.hero__lumina{
  position:absolute;inset:-30% -10% auto -10%;height:120%;
  background:radial-gradient(60% 52% at 50% 0%,rgba(46,140,255,.30),rgba(46,140,255,.07) 45%,transparent 72%);
  pointer-events:none;
}

.hero__picaturi{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:.7;
}

.hero__interior{
  position:relative;
  max-width:var(--cadru-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.silueta{
  width:min(420px,72%);
  height:auto;
  color:var(--crom);
  filter:drop-shadow(0 0 14px rgba(29,139,255,.55));
  margin-bottom:clamp(1rem,2.5vw,1.75rem);
}

.hero__marca{
  display:grid;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
.hero__marca-rand{
  font-size:clamp(2.5rem,13vw,7.5rem);
  font-variation-settings:"wdth" 120;
  line-height:.92;
  letter-spacing:-.02em;
  /* luciu de caroserie pe literele albe */
  background:linear-gradient(176deg,#ffffff 0%,#dce8f6 52%,#93a9c4 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__marca-rand b{
  font-weight:700;
  background:linear-gradient(176deg,#7ec4ff 0%,#1d8bff 55%,#0a5fc4 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__marca-sub{
  font-size:clamp(.72rem,2.1vw,1.15rem);
  font-variation-settings:"wdth" 118;
  font-weight:600;
  letter-spacing:.42em;
  color:var(--crom-sters);
  margin-top:clamp(.55rem,1.4vw,.9rem);
}

.hero__fraza{
  max-width:34ch;
  font-size:clamp(1.15rem,1rem + 1vw,1.6rem);
  line-height:1.4;
  color:#c6d5e6;
  margin-bottom:clamp(1.75rem,3.5vw,2.5rem);
}

.hero__actiuni{display:flex;flex-wrap:wrap;gap:.85rem}

.hero__repere{
  display:flex;flex-wrap:wrap;
  gap:.6rem 1.6rem;
  margin-top:clamp(2.25rem,4vw,3rem);
  font-size:.9rem;
  color:var(--crom-sters);
}
.hero__repere li{display:flex;align-items:center;gap:.6rem}
.hero__repere li::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--electric);
  box-shadow:0 0 8px rgba(29,139,255,.9);
  flex:none;
}

/* Singurul moment de mișcare din pagină: la încărcare, o reflexie traversează
   o dată hero-ul, ca lumina care alunecă pe o caroserie udă. Mai departe, nimic
   nu se mișcă fără ca vizitatorul să ceară. */
.hero__lumina::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(104deg,
    transparent 41%,
    rgba(143,220,255,.15) 47.5%,
    rgba(255,255,255,.11) 50%,
    rgba(143,220,255,.15) 52.5%,
    transparent 59%);
  transform:translateX(-110%);
}
@media (prefers-reduced-motion:no-preference){
  .hero__lumina::after{
    animation:reflexie 1.9s cubic-bezier(.32,.5,.2,1) .4s 1 both;
  }
  @keyframes reflexie{
    from{transform:translateX(-110%)}
    to{transform:translateX(110%)}
  }
}

/* ------------------------------- secțiuni ------------------------------- */

.sectiune{padding-block:var(--spatiu-sectiune)}
.sectiune--panou{
  background:var(--noapte);
  border-block:1px solid var(--linie);
}

.sectiune__cap{
  max-width:52ch;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.sectiune__cap h2{
  font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem);
  margin-bottom:1rem;
}
.sectiune__cap p{
  color:var(--crom-sters);
  font-size:1.075rem;
}

/* ------------------------------- servicii ------------------------------- */

.servicii{
  border-top:1px solid var(--linie);
}
.serviciu{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(1.1rem,3vw,2.25rem);
  align-items:start;
  padding-block:clamp(1.6rem,3vw,2.15rem);
  border-bottom:1px solid var(--linie);
}

/* inelul cu iconiță, device luat de pe panoul fațadei */
.serviciu__inel{
  flex:none;
  width:clamp(52px,7vw,64px);
  aspect-ratio:1;
  display:grid;place-items:center;
  border:1.5px solid var(--electric);
  border-radius:50%;
  color:var(--gheata);
  background:radial-gradient(circle at 50% 30%,rgba(29,139,255,.18),transparent 70%);
  box-shadow:0 0 0 1px rgba(29,139,255,.16), 0 0 22px -6px rgba(29,139,255,.5);
}
.serviciu__inel svg{width:52%;height:52%}

.serviciu__text h3{
  font-size:clamp(1.2rem,1.05rem + .55vw,1.55rem);
  margin-bottom:.55rem;
}
.serviciu__text p{
  color:var(--crom-sters);
  max-width:62ch;
}

/* -------------------------------- pachete ------------------------------- */

.pachete{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:1.25rem;
}

.pachet{
  display:flex;flex-direction:column;
  padding:clamp(1.6rem,3vw,2.1rem);
  background:var(--panou);
  border:1px solid var(--linie);
  border-radius:4px;
}

.pachet--evidentiat{
  background:linear-gradient(180deg,var(--panou-sus),var(--panou) 55%);
  border-color:var(--electric);
  box-shadow:0 0 42px -14px rgba(29,139,255,.65);
}

.pachet__eticheta{
  align-self:flex-start;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  color:#02060d;
  background:var(--electric);
  padding:.28rem .6rem;
  border-radius:2px;
  margin-bottom:1rem;
}

.pachet__nume{
  font-size:1.6rem;
  margin-bottom:.4rem;
}
.pachet__descriere{
  color:var(--crom-sters);
  font-size:.95rem;
  margin-bottom:1.35rem;
}

.pachet__pret{
  display:flex;align-items:baseline;gap:.4rem;
  padding-bottom:1.35rem;
  margin-bottom:1.35rem;
  border-bottom:1px solid var(--linie);
}
.pachet__pret b{
  font-size:2.6rem;
  font-variation-settings:"wdth" 118;
  font-weight:700;
  line-height:1;
  color:var(--crom);
}
.pachet__de-la,.pachet__moneda{
  font-size:.85rem;
  color:var(--crom-sters);
}

.pachet__lista{
  display:grid;gap:.6rem;
  margin-bottom:1.5rem;
  font-size:.95rem;
  color:#c1cfe0;
}
.pachet__lista li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.65rem;
  align-items:start;
}
.pachet__lista li::before{
  content:"";
  width:15px;height:9px;
  margin-top:.45rem;
  border-left:1.8px solid var(--electric);
  border-bottom:1.8px solid var(--electric);
  transform:rotate(-45deg);
}

.pachet__durata{
  font-size:.85rem;
  color:var(--crom-sters);
  margin-bottom:1.25rem;
  margin-top:auto;
}
.pachet__buton{width:100%}

.pachete__nota{
  margin-top:2rem;
  max-width:60ch;
  color:var(--crom-sters);
  font-size:.95rem;
}

/* ------------------------------- cum lucrăm ----------------------------- */

.metoda{margin:0;display:grid;gap:0}
.metoda__item{
  padding-block:clamp(1.4rem,2.6vw,1.9rem);
  border-top:1px solid var(--linie);
}
.metoda__item:last-child{border-bottom:1px solid var(--linie)}
.metoda dt{
  font-size:1.2rem;
  font-weight:700;
  font-variation-settings:"wdth" 114;
  margin-bottom:.5rem;
}
.metoda dd{
  margin:0;
  color:var(--crom-sters);
  max-width:64ch;
}

/* ------------------------------- programare ----------------------------- */

.programare{
  position:relative;
  overflow:hidden;
  padding-block:clamp(4rem,8vw,6.5rem);
  background:
    radial-gradient(70% 120% at 50% 0%,rgba(29,139,255,.22),transparent 68%),
    var(--noapte);
  border-block:1px solid var(--linie);
  text-align:center;
}
.programare__titlu{
  font-size:clamp(1.9rem,1.35rem + 2.4vw,3.1rem);
  margin-bottom:1.1rem;
}
.programare__text{
  color:#c6d5e6;
  font-size:1.1rem;
  max-width:52ch;
  margin-inline:auto;
  margin-bottom:2rem;
}
.programare__actiuni{
  display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;
}
.programare__nota{
  margin-top:1.5rem;
  font-size:.88rem;
  color:var(--crom-sters);
}

/* -------------------------------- contact ------------------------------- */

.contact{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.5rem,5vw,4rem);
  align-items:start;
}
@media (min-width:860px){
  .contact{grid-template-columns:1fr .85fr}
}

.contact__date h2{
  font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem);
  margin-bottom:2.25rem;
}

.contact__bloc{
  padding-block:1.35rem;
  border-top:1px solid var(--linie);
}
.contact__bloc:last-child{border-bottom:1px solid var(--linie)}
.contact__bloc h3{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--crom-sters);
  font-variation-settings:"wdth" 110;
  margin-bottom:.7rem;
}
.contact__bloc p{margin-bottom:.5rem}

.contact__telefon{
  font-size:clamp(1.6rem,1.3rem + 1.4vw,2.2rem);
  font-weight:700;
  font-variation-settings:"wdth" 116;
  color:var(--gheata);
  text-decoration:none;
  letter-spacing:-.01em;
}
.contact__telefon:hover{color:#fff}

.program{
  border-collapse:collapse;
  width:100%;
  max-width:24rem;
  font-size:.98rem;
}
.program th{
  text-align:left;
  font-weight:600;
  color:var(--crom-sters);
  padding:.28rem 0;
}
.program td{
  text-align:right;
  padding:.28rem 0;
  font-variant-numeric:tabular-nums;
}

.contact__foto{margin:0}
.contact__foto img{
  width:100%;
  border-radius:4px;
  border:1px solid var(--linie);
}
.contact__foto figcaption{
  margin-top:.85rem;
  font-size:.88rem;
  color:var(--crom-sters);
}

/* --------------------------------- subsol ------------------------------- */

.subsol{
  padding-block:2.75rem;
  border-top:1px solid var(--linie);
  background:var(--abis);
}
.subsol__interior{
  display:flex;flex-wrap:wrap;
  align-items:center;
  gap:1.5rem 2.5rem;
}
.marca--subsol{margin-right:0}
.subsol__navigatie{
  display:flex;flex-wrap:wrap;gap:1.4rem;
  margin-right:auto;
}
.subsol__navigatie a{
  text-decoration:none;
  font-size:.92rem;
  color:var(--crom-sters);
}
.subsol__navigatie a:hover{color:var(--crom)}
.subsol__drepturi{
  font-size:.85rem;
  color:var(--crom-sters);
}

/* ------------------------------- responsive ----------------------------- */

@media (max-width:840px){
  .navigatie,.bara__cta{display:none}
  .meniu-mobil{display:block}
  .navigatie-mobil:not([hidden]){display:flex}
  .hero__repere{gap:.55rem 1.2rem;font-size:.85rem}
  .silueta{width:min(320px,80%)}
}

@media (max-width:520px){
  .hero__actiuni .buton,
  .programare__actiuni .buton{width:100%}
  .serviciu{grid-template-columns:1fr;gap:1rem}
}

/* =========================================================================
   Aplicația de programări
   Aceleași unelte ca restul paginii: hairlines, inele albastre, negru adânc.
   Nimic nou introdus doar pentru formulare.
   ========================================================================= */

.aplicatie{padding-block:clamp(2.5rem,6vw,4.5rem)}

.sectiune__cap--aplicatie{margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.sectiune__cap--aplicatie h1{
  font-size:clamp(1.9rem,1.4rem + 2.2vw,3rem);
  margin-bottom:.85rem;
}
.sectiune__cap--aplicatie p{color:var(--crom-sters)}

/* -------------------------------- alerte -------------------------------- */

.alerta{
  padding:1rem 1.15rem;
  border-radius:4px;
  margin-bottom:1.5rem;
  border-left:3px solid var(--linie);
  background:var(--panou);
  font-size:.96rem;
}
.alerta p{margin:0}
.alerta p + p{margin-top:.4rem}
.alerta--rea{border-left-color:var(--rubin);background:rgba(200,16,46,.10);color:#ffd8de}
.alerta--buna{border-left-color:#2fbf71;background:rgba(47,191,113,.10);color:#c9f3dc}
.alerta--info{border-left-color:var(--electric)}
.alerta--promo{
  border-left-color:var(--gheata);
  background:linear-gradient(90deg,rgba(29,139,255,.18),rgba(29,139,255,.04));
  color:#dff1ff;
}

/* ------------------------------- formulare ------------------------------ */

.formular{margin-bottom:2rem}

.camp-grup{
  border:0;
  border-top:1px solid var(--linie);
  margin:0 0 1.75rem;
  padding:1.5rem 0 0;
}
.camp-grup legend{
  padding:0 .7rem 0 0;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--crom-sters);
  font-variation-settings:"wdth" 110;
}

.camp{margin-bottom:1.25rem}
.camp:last-child{margin-bottom:0}

.camp label{
  display:block;
  font-weight:600;
  font-size:.94rem;
  margin-bottom:.45rem;
}
.camp__optional{color:var(--crom-sters);font-weight:400}

.camp input[type="text"],
.camp input[type="tel"],
.camp input[type="date"],
.camp input[type="number"],
.camp input[type="password"],
.camp textarea{
  width:100%;
  padding:.8rem .9rem;
  background:var(--noapte);
  border:1.5px solid var(--linie);
  border-radius:3px;
  color:var(--crom);
  font:inherit;
  font-size:1rem;
  transition:border-color .16s ease, background-color .16s ease;
}
.camp input:focus,
.camp textarea:focus{
  outline:none;
  border-color:var(--electric);
  background:var(--panou);
  box-shadow:0 0 0 3px rgba(29,139,255,.18);
}
.camp textarea{resize:vertical;min-height:5rem;line-height:1.55}

/* numărul de înmatriculare se scrie cu majuscule, ca pe plăcuță */
#numar,#ab_numar{
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:700;
  font-variation-settings:"wdth" 112;
}
#numar::placeholder,#ab_numar::placeholder{
  font-weight:400;letter-spacing:.05em;color:#6b88a8;
}

.camp__ajutor{
  margin-top:.45rem;
  font-size:.85rem;
  color:var(--crom-sters);
}
.camp__eroare{
  margin-top:.45rem;
  font-size:.88rem;
  color:#ff9aa9;
  font-weight:600;
}
.camp--rau input,
.camp--rau textarea{border-color:var(--rubin)}

.camp-rand{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:600px){
  .camp-rand{grid-template-columns:1fr 1fr}
  .camp-rand--patru{grid-template-columns:1.1fr 1.2fr 1fr .6fr}
}

.formular__final{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  padding-top:.5rem;
}
.formular__nota{
  font-size:.85rem;
  color:var(--crom-sters);
  max-width:38ch;
}
.formular-inline{display:inline}
.formular-bloc{margin-bottom:1.75rem}

/* ---------------------- alegerea pachetului ----------------------------- */

.pachete-alegere{display:grid;gap:.65rem}

.alegere{position:relative;display:block;cursor:pointer}
.alegere input{position:absolute;opacity:0;width:0;height:0}

.alegere__corp{
  display:grid;
  gap:.2rem;
  padding:1rem 1.1rem 1rem 3rem;
  background:var(--panou);
  border:1.5px solid var(--linie);
  border-radius:4px;
  transition:border-color .16s ease, background-color .16s ease;
}
/* inelul de selecție, același vocabular ca inelele serviciilor */
.alegere__corp::before{
  content:"";
  position:absolute;
  left:1.05rem;top:1.15rem;
  width:18px;height:18px;
  border:1.5px solid var(--linie);
  border-radius:50%;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.alegere:hover .alegere__corp{border-color:#2a4569}
.alegere input:checked + .alegere__corp{
  border-color:var(--electric);
  background:linear-gradient(180deg,var(--panou-sus),var(--panou));
}
.alegere input:checked + .alegere__corp::before{
  border-color:var(--electric);
  box-shadow:inset 0 0 0 4px var(--abis), inset 0 0 0 9px var(--electric);
}
.alegere input:focus-visible + .alegere__corp{
  outline:2px solid var(--gheata);
  outline-offset:2px;
}
.alegere__nume{font-weight:700;font-size:1.05rem}
.alegere__descriere{color:var(--crom-sters);font-size:.92rem;line-height:1.5}
.alegere__meta{color:var(--gheata);font-size:.82rem;margin-top:.15rem}

/* ------------------------------- orele ---------------------------------- */

.ore{margin-top:1.5rem}
.ore__titlu{font-weight:600;margin-bottom:.85rem}
.ore__gol{color:var(--crom-sters);font-size:.95rem}

.ore__grila{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:.5rem;
}
.ora{position:relative;display:block;cursor:pointer}
.ora input{position:absolute;opacity:0;width:0;height:0}
.ora span{
  display:block;
  padding:.65rem .3rem;
  text-align:center;
  background:var(--noapte);
  border:1.5px solid var(--linie);
  border-radius:3px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  transition:border-color .16s ease, background-color .16s ease, color .16s ease;
}
.ora:hover span{border-color:#2a4569}
.ora input:checked + span{
  background:var(--electric);
  border-color:var(--electric);
  color:#02060d;
}
.ora input:focus-visible + span{outline:2px solid var(--gheata);outline-offset:2px}

/* ----------------------------- confirmarea ------------------------------ */

.confirmare{text-align:center;padding-block:1.5rem}
.confirmare__semn{
  width:64px;height:64px;
  margin:0 auto 1.5rem;
  display:grid;place-items:center;
  border:1.5px solid var(--electric);
  border-radius:50%;
  color:var(--gheata);
  background:radial-gradient(circle at 50% 30%,rgba(29,139,255,.22),transparent 70%);
  box-shadow:0 0 28px -6px rgba(29,139,255,.6);
}
.confirmare__semn svg{width:30px;height:30px}
.confirmare h1{font-size:clamp(1.8rem,1.4rem + 1.8vw,2.6rem);margin-bottom:1rem}
.confirmare__rezumat{font-size:1.15rem;color:#c6d5e6;margin-bottom:1.5rem}
.confirmare__promo{
  display:inline-block;
  padding:.8rem 1.2rem;
  margin-bottom:1.5rem;
  border-radius:4px;
  background:linear-gradient(90deg,rgba(29,139,255,.22),rgba(29,139,255,.06));
  border:1px solid var(--electric);
  color:#dff1ff;
}

.confirmare__date{
  display:grid;gap:0;
  max-width:26rem;
  margin:0 auto 1.5rem;
  text-align:left;
}
.confirmare__date > div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--linie);
}
.confirmare__date dt{color:var(--crom-sters);font-size:.9rem}
.confirmare__date dd{margin:0;font-weight:600}
.cod{
  font-variation-settings:"wdth" 112;
  letter-spacing:.14em;
  color:var(--gheata);
}
.confirmare__nota{
  color:var(--crom-sters);
  font-size:.92rem;
  max-width:44ch;
  margin:0 auto 1.75rem;
}
.confirmare__actiuni{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}

/* --------------------- cardul de fidelitate ----------------------------- */

.card-fidelitate,
.card-abonament{
  padding:clamp(1.4rem,3vw,1.9rem);
  background:linear-gradient(180deg,var(--panou-sus),var(--panou) 60%);
  border:1px solid var(--linie);
  border-radius:4px;
  margin-bottom:1.5rem;
}
.card-fidelitate h2,
.card-abonament h2,
.lista-rezervari h2{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--crom-sters);
  font-variation-settings:"wdth" 110;
  margin-bottom:1.1rem;
}

/* ștampilele: aceleași inele ca la servicii, umplute pe măsură ce strângi */
.stampile{
  display:flex;flex-wrap:wrap;gap:.6rem;
  margin-bottom:1.1rem;
}
.stampila{
  width:46px;height:46px;
  display:grid;place-items:center;
  border:1.5px solid var(--linie);
  border-radius:50%;
  color:var(--abis);
}
.stampila--plina{
  border-color:var(--electric);
  background:radial-gradient(circle at 50% 30%,var(--electric-cl),var(--electric));
  box-shadow:0 0 20px -5px rgba(29,139,255,.8);
}
.stampila svg{width:22px;height:22px}

.card-fidelitate__stare{font-size:1.05rem;margin-bottom:.6rem}
.card-fidelitate__stare--castigat{color:var(--gheata);font-weight:700}
.card-fidelitate__nota{font-size:.85rem;color:var(--crom-sters)}
.card-abonament p{color:#c6d5e6}

/* ----------------------- lista de programări ---------------------------- */

.lista-rezervari{margin-bottom:2rem}
.lista-rezervari ul{border-top:1px solid var(--linie)}

.rezervare{
  display:grid;
  grid-template-columns:1fr;
  gap:.5rem;
  padding:1.1rem 0;
  border-bottom:1px solid var(--linie);
}
@media (min-width:640px){
  .rezervare{grid-template-columns:11rem 1fr auto;gap:1.25rem;align-items:start}
}
.rezervare--anulata{opacity:.5}
.rezervare--efectuata .rezervare__cand b{color:var(--crom-sters)}

.rezervare__cand{display:grid;gap:.15rem;font-size:.95rem}
.rezervare__cand span{color:var(--crom-sters);font-variant-numeric:tabular-nums}
.rezervare__ce{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.rezervare__pachet{font-weight:600}
.rezervare__mentiuni{
  flex-basis:100%;
  color:var(--crom-sters);
  font-size:.88rem;
}
.rezervare__nota{color:var(--crom-sters);font-size:.85rem}

.fanion{
  display:inline-block;
  padding:.18rem .5rem;
  border-radius:2px;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.05em;
  background:rgba(143,220,255,.10);
  border:1px solid var(--linie);
  color:var(--crom-sters);
  white-space:nowrap;
}
.fanion--promo{
  background:var(--electric);
  border-color:var(--electric);
  color:#02060d;
}
.fanion--stare{background:transparent}
.fanion--nou{
  background:var(--rubin);
  border-color:var(--rubin);
  color:#fff;
}

.buton-text{
  background:none;border:0;padding:0;
  color:var(--gheata);
  font:inherit;font-size:.92rem;font-weight:600;
  cursor:pointer;
  text-decoration:none;
  border-bottom:1px solid rgba(143,220,255,.35);
}
.buton-text:hover{border-bottom-color:var(--gheata);color:#fff}
.buton-text--tare{color:#7ef0b0;border-bottom-color:rgba(126,240,176,.4)}
.buton-text--tare:hover{color:#b6ffd6;border-bottom-color:#b6ffd6}

/* ================================ panou ================================= */

.panou{background:var(--abis)}

.panou__cadru{
  max-width:1320px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.panou__intrare{
  max-width:26rem;
  margin:12vh auto;
  padding-inline:var(--gutter);
}
.panou__intrare h1{font-size:2rem;margin-bottom:1.75rem}

.panou__bara{
  border-bottom:1px solid var(--linie);
  background:var(--noapte);
  padding-block:1rem;
  position:sticky;top:0;z-index:20;
}
.panou__bara .panou__cadru{display:flex;align-items:center;gap:1rem}
.panou__eticheta{
  font-size:.7rem;letter-spacing:.2em;font-weight:700;
  color:var(--crom-sters);
}
.panou__iesire{margin-left:auto}

.panou__continut{padding-block:2.5rem}
.panou__sectiune{
  margin-bottom:3rem;
  padding-top:1.75rem;
  border-top:1px solid var(--linie);
}
.panou__sectiune:first-of-type{border-top:0;padding-top:0}
.panou__sectiune > h2{
  font-size:1.35rem;
  margin-bottom:1.25rem;
}
.panou__cap{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem 1.5rem;
  margin-bottom:1.25rem;
}
.panou__cap h2{font-size:1.5rem;margin-right:auto}
.panou__zile{display:flex;gap:1.1rem;flex-wrap:wrap}
.panou__explicatie{color:var(--crom-sters);font-size:.92rem;margin-bottom:1.25rem}

.tabel{
  width:100%;
  border-collapse:collapse;
  font-size:.93rem;
}
.tabel th{
  text-align:left;
  font-size:.7rem;
  letter-spacing:.14em;
  font-weight:700;
  color:var(--crom-sters);
  padding:.6rem .7rem;
  border-bottom:1px solid var(--linie);
  white-space:nowrap;
}
.tabel td{
  padding:.85rem .7rem;
  border-bottom:1px solid var(--linie);
  vertical-align:top;
}
.tabel tr:hover td{background:rgba(143,220,255,.03)}
.nowrap{white-space:nowrap;font-variant-numeric:tabular-nums}
.mentiuni{color:var(--crom-sters)}
.rand--anulata{opacity:.45}
.rand--efectuata{background:rgba(47,191,113,.05)}
.actiuni{display:flex;flex-wrap:wrap;gap:.75rem}

.lista-simpla{border-top:1px solid var(--linie)}
.lista-simpla li{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.8rem 0;
  border-bottom:1px solid var(--linie);
  font-size:.95rem;
}

@media (max-width:760px){
  /* tabelele lungi se derulează lateral în loc să spargă pagina */
  .tabel{display:block;overflow-x:auto;white-space:nowrap}
  .tabel td,.tabel th{white-space:nowrap}
}

/* ------------------- abonament și promoția 5+1 -------------------------- */

.oferte{
  display:grid;
  gap:1.25rem;
  margin-top:2.5rem;
}
@media (min-width:820px){
  .oferte{grid-template-columns:1fr 1.15fr}
}

.oferta{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:.9rem;
  padding:clamp(1.5rem,3vw,2rem);
  border:1px solid var(--linie);
  border-radius:4px;
  background:var(--panou);
}
.oferta h3{font-size:1.4rem}
.oferta__text{color:var(--crom-sters);max-width:46ch}
.oferta__pret{font-size:1.1rem}
.oferta__pret b{
  font-size:2rem;
  font-variation-settings:"wdth" 118;
  color:var(--crom);
}
.oferta__nota{font-size:.87rem;color:var(--crom-sters);max-width:44ch}
.oferta .buton{margin-top:auto}

.oferta--promo{
  border-color:var(--electric);
  background:linear-gradient(160deg,var(--panou-sus),var(--panou) 60%);
  box-shadow:0 0 42px -16px rgba(29,139,255,.55);
}

.stampile--reclama{margin-block:.4rem}
.stampila--cadou{
  width:auto;
  padding-inline:.9rem;
  border-style:dashed;
  border-color:var(--gheata);
  color:var(--gheata);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.12em;
  border-radius:23px;
}

/* ------------------ tipul vehiculului și marca -------------------------- */

.camp__titlu{
  display:block;
  font-weight:600;
  font-size:.94rem;
  margin-bottom:.6rem;
}

.vehicule{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:.5rem;
}

.vehicul,.marca-optiune{position:relative;display:block;cursor:pointer}
.vehicul input,.marca-optiune input{position:absolute;opacity:0;width:0;height:0}

.vehicul__corp{
  display:grid;
  justify-items:center;
  gap:.45rem;
  padding:.85rem .4rem .7rem;
  background:var(--noapte);
  border:1.5px solid var(--linie);
  border-radius:4px;
  text-align:center;
  transition:border-color .16s ease, background-color .16s ease, color .16s ease;
}
.vehicul__icoana{
  display:block;
  width:100%;
  max-width:56px;
  color:var(--crom-sters);
  transition:color .16s ease;
}
.vehicul__icoana svg{width:100%;height:auto}
.vehicul__nume{
  font-size:.82rem;
  font-weight:600;
  line-height:1.25;
  color:var(--crom-sters);
}

.vehicul:hover .vehicul__corp{border-color:#2a4569}
.vehicul input:checked + .vehicul__corp{
  border-color:var(--electric);
  background:linear-gradient(180deg,var(--panou-sus),var(--panou));
  box-shadow:0 0 24px -10px rgba(29,139,255,.8);
}
.vehicul input:checked + .vehicul__corp .vehicul__icoana{color:var(--gheata)}
.vehicul input:checked + .vehicul__corp .vehicul__nume{color:var(--crom)}
.vehicul input:focus-visible + .vehicul__corp{outline:2px solid var(--gheata);outline-offset:2px}

/* mărcile: aceeași mecanică, plăcuțe mai mici */
.marci{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:.5rem;
}

.marca-optiune__corp{
  display:grid;
  justify-items:center;
  align-content:center;
  gap:.4rem;
  min-height:76px;
  padding:.7rem .4rem;
  background:var(--noapte);
  border:1.5px solid var(--linie);
  border-radius:4px;
  text-align:center;
  transition:border-color .16s ease, background-color .16s ease;
}
.marca-optiune__sigla{
  display:block;
  width:30px;height:30px;
  color:var(--crom-sters);
  transition:color .16s ease;
}
.marca-optiune__sigla svg{width:100%;height:100%}
.marca-optiune__nume{
  font-size:.78rem;
  font-weight:600;
  color:var(--crom-sters);
  line-height:1.2;
}

/* mărcile al căror logo e chiar numele scris */
.marca-optiune--scrisa .marca-optiune__nume{
  font-size:.92rem;
  font-variation-settings:"wdth" 112;
  letter-spacing:.06em;
  color:var(--crom);
}

.marca-optiune:hover .marca-optiune__corp{border-color:#2a4569}
.marca-optiune input:checked + .marca-optiune__corp{
  border-color:var(--electric);
  background:linear-gradient(180deg,var(--panou-sus),var(--panou));
}
.marca-optiune input:checked + .marca-optiune__corp .marca-optiune__sigla{color:var(--gheata)}
.marca-optiune input:checked + .marca-optiune__corp .marca-optiune__nume{color:var(--crom)}
.marca-optiune input:focus-visible + .marca-optiune__corp{
  outline:2px solid var(--gheata);outline-offset:2px;
}

/* vehiculul în dosarul mașinii și în panou */
.dosar-cap{display:flex;align-items:center;gap:1.1rem}
.dosar-cap__icoana{
  flex:none;width:72px;
  color:var(--gheata);
}
.dosar-cap__icoana svg{width:100%;height:auto}

.masina-celula{display:flex;align-items:center;gap:.6rem}
.masina-celula__icoana{flex:none;width:42px;color:var(--crom-sters)}
.masina-celula__icoana svg{width:100%;height:auto}
.masina-celula small{color:var(--crom-sters)}

@media (max-width:420px){
  .vehicule{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
  .marci{grid-template-columns:repeat(auto-fit,minmax(78px,1fr))}
}

/* ------------------- filele panoului, filtre, setări --------------------- */

.file{display:flex;gap:.35rem;flex-wrap:wrap}
.fila{
  text-decoration:none;
  padding:.45rem .85rem;
  border-radius:3px;
  font-size:.92rem;
  font-weight:600;
  color:var(--crom-sters);
  border:1px solid transparent;
  transition:color .16s ease, border-color .16s ease, background-color .16s ease;
}
.fila:hover{color:var(--crom)}
.fila--activa{
  color:var(--crom);
  background:rgba(29,139,255,.12);
  border-color:var(--electric);
}

.filtre{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:1rem;
  padding-bottom:1.5rem;
  margin-bottom:1.25rem;
  border-bottom:1px solid var(--linie);
}
.filtre .camp{margin-bottom:0;min-width:9rem}
.filtre .camp--lat{flex:1 1 16rem}
.filtre__butoane{display:flex;align-items:center;gap:1rem}

.filtre input[type="search"],
.filtre input[type="date"],
.filtre select{
  width:100%;
  padding:.65rem .8rem;
  background:var(--noapte);
  border:1.5px solid var(--linie);
  border-radius:3px;
  color:var(--crom);
  font:inherit;
  font-size:.95rem;
}
.filtre select{appearance:none;padding-right:2rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--crom-sters) 50%),
                   linear-gradient(135deg,var(--crom-sters) 50%,transparent 50%);
  background-position:right 1rem center, right .72rem center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.filtre input:focus,.filtre select:focus{
  outline:none;border-color:var(--electric);
  box-shadow:0 0 0 3px rgba(29,139,255,.18);
}

.paginare{
  display:flex;align-items:center;gap:1.5rem;
  padding-top:1.25rem;
  font-size:.92rem;
  color:var(--crom-sters);
}

/* tabelele de setări au câmpuri în celule, deci nu se înghesuie */
.tabel--setari td,.tabel--setari th{vertical-align:middle}
.tabel--setari input[type="time"],
.tabel--setari input[type="number"]{
  padding:.5rem .6rem;
  background:var(--noapte);
  border:1.5px solid var(--linie);
  border-radius:3px;
  color:var(--crom);
  font:inherit;
  font-size:.95rem;
  font-variant-numeric:tabular-nums;
}
.tabel--setari input:focus{
  outline:none;border-color:var(--electric);
  box-shadow:0 0 0 3px rgba(29,139,255,.18);
}
.tabel--setari input[type="checkbox"]{
  width:20px;height:20px;
  accent-color:var(--electric);
  cursor:pointer;
}
.durata-camp{width:5.5rem}
.tabel--setari + .buton{margin-top:1.5rem}

.tabel-derulant{overflow-x:auto}
.alegere__pret{color:var(--crom);font-weight:700}

/* sâmbăta și duminica se văd dintr-o privire în tabelul de program */
.zi-weekend{
  color:var(--portocaliu);
  font-weight:700;
}

.fanion--coleg{
  background:rgba(255,159,69,.12);
  border-color:rgba(255,159,69,.45);
  color:var(--portocaliu);
}

.tabel--setari th small{
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:var(--crom-sters);
}

/* câmpuri editabile direct în tabel */
.camp-tabel{
  width:100%;
  min-width:7rem;
  padding:.45rem .6rem;
  background:var(--noapte);
  border:1.5px solid var(--linie);
  border-radius:3px;
  color:var(--crom);
  font:inherit;
  font-size:.93rem;
}
.camp-tabel--scurt{min-width:5.5rem}
.camp-tabel:focus{
  outline:none;border-color:var(--electric);
  box-shadow:0 0 0 3px rgba(29,139,255,.18);
}
.pachet__la-telefon{font-size:1.15rem;font-weight:700;color:var(--gheata)}
.program__inchis{color:var(--crom-sters)}

/* orele unei zile închise nu mai au ce spune */
.celula-ora--ascunsa input{visibility:hidden}
.tabel--program td:first-child{font-weight:600;white-space:nowrap}

.buton-text--sterge{color:#ff9aa9;border-bottom-color:rgba(255,154,169,.4)}
.buton-text--sterge:hover{color:#ffc4cd;border-bottom-color:#ffc4cd}

/* alegerea colegului, direct din grafic */
.formular-coleg{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.formular-coleg select{
  padding:.4rem .6rem;
  background:var(--noapte);
  border:1.5px solid var(--linie);
  border-radius:3px;
  color:var(--crom);
  font:inherit;
  font-size:.9rem;
  max-width:9rem;
}
.formular-coleg select:focus{
  outline:none;border-color:var(--electric);
  box-shadow:0 0 0 3px rgba(29,139,255,.18);
}

/* la ce vehicul se referă prețul afișat */
.pachet__referinta{
  display:block;
  font-size:.78rem;
  color:var(--crom-sters);
  margin-top:.15rem;
}
.oferta__economie{
  display:block;
  font-size:.85rem;
  font-weight:700;
  color:var(--gheata);
  margin-top:.3rem;
}
.pret-calculat{color:var(--gheata);font-weight:700;font-variant-numeric:tabular-nums}

/* pachet anunțat, dar care nu se poate încă alege */
.pachet--curand{
  justify-content:center;
  text-align:center;
  border-style:dashed;
  background:transparent;
}
.pachet--curand .pachet__nume{color:var(--crom-sters)}
.pachet__curand-ce{
  font-size:1.5rem;
  font-weight:700;
  font-variation-settings:"wdth" 116;
  color:var(--crom);
  margin-top:.6rem;
}
.pachet__curand{
  margin-top:.5rem;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--gheata);
}

/* butoanele care duc în WhatsApp */
.buton--wa{
  gap:.5rem;
  white-space:nowrap;   /* numărul nu se rupe pe două rânduri */
}
.icoana-wa{
  width:1em;height:1em;
  flex:none;
  color:#25d366;
}
/* pe butoanele mari, iconița rămâne discretă lângă text */
.buton--mare .icoana-wa{width:.95em;height:.95em}
.buton--plin .icoana-wa{color:#02060d}
.contact__sub{
  display:flex;align-items:center;gap:.45rem;
  margin-top:.5rem;
  font-size:.9rem;
  color:var(--crom-sters);
}
.contact__sub .icoana-wa{width:.95em;height:.95em}

/* butoanele din hero: fiecare pe un rând al lui, niciodată rupt în cuvinte */
.hero__actiuni .buton{white-space:nowrap}
@media (max-width:420px){
  .hero__actiuni .buton--mare{padding-inline:1.1rem;font-size:1rem}
}

/* ------------------------ fereastra de notițe --------------------------- */

.dialog{
  width:min(30rem, calc(100vw - 2rem));
  padding:0;
  border:1px solid var(--linie);
  border-radius:5px;
  background:var(--panou);
  color:var(--crom);
  box-shadow:0 24px 70px -20px rgba(0,0,0,.8);
}
.dialog::backdrop{
  background:rgba(4,7,14,.72);
  backdrop-filter:blur(3px);
}
.dialog__corp{padding:clamp(1.4rem,3vw,1.9rem)}
.dialog__titlu{
  font-size:1.35rem;
  margin-bottom:.3rem;
}
.dialog__despre{
  font-size:.95rem;
  font-weight:700;
  font-variation-settings:"wdth" 112;
  letter-spacing:.06em;
  color:var(--gheata);
  margin-bottom:1.35rem;
}
.dialog__actiuni{
  display:flex;align-items:center;justify-content:flex-end;
  gap:1.25rem;
  margin-top:1.5rem;
}

/* notițele, în grafic și în istoric */
.notite{color:var(--gheata)}
.celula-notite{
  max-width:22rem;
  white-space:normal;
  font-size:.9rem;
}
@media (max-width:760px){
  .celula-notite{max-width:16rem}
}