/* ============================================================
   TOKENURI
   Verde = indicator de autostradă. Albastru = indicator de drum
   național. În România tariful depinde exact de aceste două
   categorii, deci culorile poartă informație, nu decorează.
   ============================================================ */
:root{
  --asfalt:#16181C;
  --asfalt-2:#22252B;
  --hartie:#EFF1EF;
  --plan:#FFFFFF;
  --linie:#D6DAD8;
  --linie-tare:#B9BFBC;
  --text:#16181C;
  --text-2:#5C6360;
  --verde:#0E6B3C;        /* indicator autostradă */
  --verde-luminos:#1E9459;
  --albastru:#1B4F9C;     /* indicator drum național */
  --albastru-luminos:#3A72C4;
  --alerta:#A64C18;
  --alerta-fundal:#FDF2E7;
  --eroare:#A32A20;
  --eroare-fundal:#FCEDEB;

  --r-mic:10px; --r:14px; --r-mare:20px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --umbra-mica:0 1px 2px rgba(22,24,28,.05), 0 8px 24px -12px rgba(22,24,28,.18);
  --jos: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){
  :root{
    --hartie:#101215; --plan:#191C21; --linie:#2C3037; --linie-tare:#3C424A;
    --text:#EDEFEE; --text-2:#9BA3A0;
    --verde:#3BA96A; --verde-luminos:#4FC282;
    --albastru:#6098DE; --albastru-luminos:#7FB0EC;
    --alerta:#E0A76A; --alerta-fundal:#2A2118;
    --eroare:#E88A80; --eroare-fundal:#2B1815;
    --umbra-mica:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  padding:var(--s5) var(--s4) calc(var(--s7) + var(--jos));
  background:var(--hartie); color:var(--text);
  font:400 16px/1.55 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
}
.pagina{max-width:560px;margin:0 auto}
@media (max-width:520px){ body{padding-top:var(--s4)} }
@media (min-width:900px){ .pagina{max-width:640px} }

/* ---------- tipografie ---------- */
.supra{
  font:600 11px/1 "IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-2);
}
h1{font:800 clamp(28px,8vw,38px)/1.02 "Archivo",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.035em;margin:var(--s3) 0 var(--s2)}
h2{font:600 15px/1.3 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.01em;margin:0 0 var(--s4)}
.intro{color:var(--text-2);font-size:15px;margin:0 0 var(--s5);max-width:46ch}
.mono{font-family:"IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}

/* ---------- suprafețe ---------- */
/* Regula de elevatie: umbra e rezervata pentru ce chiar pluteste deasupra
   continutului (autocomplete, bara fixa, cardul de rezultat, ca moment de
   incheiere). Cardurile plate din fluxul normal al paginii primesc doar o
   bordura fina, nu umbra — altfel totul pare "ridicat" in egala masura si
   nimic nu se mai simte special. */
.plan{
  background:var(--plan); border:1px solid var(--linie); border-radius:var(--r);
  padding:var(--s4); margin-bottom:var(--s3);
}
.plan > h2{display:flex;align-items:center;gap:var(--s2)}
.ascuns{display:none !important}

/* ---------- formular ---------- */
label{display:block;font-size:13px;font-weight:600;margin-bottom:var(--s2);color:var(--text)}
.camp{margin-bottom:var(--s4)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
input,select{
  width:100%; min-height:48px; padding:0 var(--s3);
  font:400 16px/1.4 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--text);
  background:var(--plan); border:1.5px solid var(--linie); border-radius:var(--r-mic);
  -webkit-appearance:none; appearance:none; transition:border-color .15s ease;
}
input[type=number]{font-family:"IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
input:hover,select:hover{border-color:var(--linie-tare)}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{
  outline:3px solid var(--albastru); outline-offset:2px; border-color:transparent;
}
select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235C6360' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s3) center;background-size:12px;
  padding-right:36px;
}
.ajutor{font-size:12.5px;line-height:1.5;color:var(--text-2);margin:var(--s2) 0 0}

/* comutator segmentat: mai bun decât un dropdown pe telefon */
.seg{display:grid;gap:var(--s1);grid-auto-flow:column;grid-auto-columns:1fr;
     background:var(--hartie);border:1.5px solid var(--linie);border-radius:var(--r-mic);padding:3px}
.seg input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.seg label{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:42px;margin:0;padding:0 var(--s1);border-radius:7px;cursor:pointer;
  font:500 13px/1.15 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text-2);
  transition:background .15s ease,color .15s ease;
}
.seg input:checked + label{background:var(--asfalt);color:#fff;font-weight:600}
.seg input:focus-visible + label{outline:3px solid var(--albastru);outline-offset:2px}
@media (prefers-color-scheme: dark){ .seg input:checked + label{background:#fff;color:#16181C} }

/* ---------- steppere +/- pe campuri numerice ---------- */
.stepper{display:flex;align-items:stretch;gap:0;border:1.5px solid var(--linie);border-radius:var(--r-mic);
         overflow:hidden;background:var(--plan)}
.stepper input{border:0;border-radius:0;text-align:center;min-width:0;flex:1;background:transparent}
.stepper input:focus-visible{outline:none;background:var(--hartie)}
.stepper-btn{
  flex:none;width:40px;min-height:44px;border:0;background:var(--hartie);color:var(--text);
  font:600 18px/1 -apple-system,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;
  -webkit-user-select:none;user-select:none;
}
.stepper-btn:first-child{border-right:1px solid var(--linie)}
.stepper-btn:last-child{border-left:1px solid var(--linie)}
.stepper-btn:hover{background:var(--linie)}
.stepper-btn:active{background:var(--linie-tare)}

/* ---------- carduri de vehicul ---------- */
.carduri-vehicul{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.carduri-vehicul input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.card-vehicul{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:var(--s3) var(--s1) 10px;border:1.5px solid var(--linie);border-radius:var(--r-mic);
  background:var(--plan);cursor:pointer;min-height:44px;transition:border-color .15s ease,background .15s ease;
  position:relative;
}
.card-vehicul svg{width:30px;height:30px;color:var(--text-2);transition:color .15s ease}
.card-vehicul b{font:600 12.5px/1.25 "Archivo",-apple-system,sans-serif;color:var(--text)}
.card-vehicul i{font:400 10.5px/1.2 -apple-system,sans-serif;font-style:normal;color:var(--text-2)}
.carduri-vehicul input:checked + .card-vehicul{
  border-color:var(--verde);background:color-mix(in srgb,var(--verde) 6%,var(--plan));box-shadow:var(--umbra-mica);
}
.carduri-vehicul input:checked + .card-vehicul svg{color:var(--verde)}
.carduri-vehicul input:focus-visible + .card-vehicul{outline:3px solid var(--albastru);outline-offset:2px}
.card-vehicul::after{
  content:"";position:absolute;top:7px;right:7px;width:15px;height:15px;border-radius:50%;
  border:1.5px solid var(--linie-tare);background:var(--plan);opacity:.8;
}
.carduri-vehicul input:checked + .card-vehicul::after{
  border-color:var(--verde);background:var(--verde);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2l2.8 2.8 6.2-6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
@media (prefers-color-scheme: dark){
  .carduri-vehicul input:checked + .card-vehicul{background:color-mix(in srgb,var(--verde) 14%,var(--plan))}
}

/* ---------- continut informativ / SEO, in afara aplicatiei ---------- */
.continut-seo{max-width:560px;margin:var(--s6) auto 0;padding:0 var(--s4)}
.continut-seo .plan{box-shadow:none;background:transparent;border:0;padding:0}
.continut-seo h2{font:700 17px "Archivo",-apple-system,sans-serif;letter-spacing:-.01em;
                  margin:var(--s6) 0 var(--s3)}
.continut-seo h2:first-child{margin-top:0}
.continut-seo h3{font:600 14px -apple-system,sans-serif;margin:var(--s4) 0 var(--s2);color:var(--text-2)}
.continut-seo p{font-size:14.5px;line-height:1.65;color:var(--text-2);margin:0 0 var(--s3)}
.continut-seo table.tabel{font-size:13px;min-width:480px}
.continut-seo details summary{font-size:14.5px}
.continut-seo details p{margin:0}
.continut-seo a{color:var(--text)}
@media (min-width:900px){ .continut-seo{max-width:640px} }

#gatEmail{border-color:var(--asfalt)}
@media (prefers-color-scheme: dark){ #gatEmail{border-color:#fff} }

/* ---------- modal de email peste rezultatul blurat ---------- */
#zonaRezultate.blurat{filter:blur(9px);pointer-events:none;user-select:none}
.modal-fundal{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:rgba(22,24,28,.45);backdrop-filter:blur(3px);padding:var(--s4);
}
.modal-caseta{
  background:var(--plan);border-radius:var(--r-mare);padding:var(--s5) var(--s4);
  max-width:400px;width:100%;box-shadow:0 24px 60px -12px rgba(0,0,0,.35);
}
.modal-caseta h2{font:800 20px "Archivo",-apple-system,sans-serif;margin:0 0 6px;letter-spacing:-.01em}
@media (prefers-reduced-motion: no-preference){ .modal-caseta{animation:modalIn .18s ease-out} }
@keyframes modalIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- header compact ---------- */
.cap{margin-bottom:var(--s4)}
.sigla{display:flex;align-items:center;gap:8px;margin-bottom:var(--s3)}
.sigla svg{width:24px;height:24px;flex:none}
.sigla b{font:800 13px "Archivo",-apple-system,sans-serif;letter-spacing:-.01em}
.cap h1{margin:0 0 4px}
.cap .intro{margin:0;max-width:40ch}

.plan-traseu{padding-bottom:var(--s3)}
.harta-cadru{
  margin-top:var(--s4);border-radius:var(--r);overflow:hidden;
  border:1px solid var(--linie);
}
.harta-cadru #harta{border:0;border-radius:0;margin:0}

/* ---------- carduri EURO, acelasi limbaj vizual ca vehiculul ---------- */
.carduri-euro{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.carduri-euro input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.card-euro{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;
  padding:var(--s3) var(--s1);border:1.5px solid var(--linie);border-radius:var(--r-mic);
  background:var(--plan);cursor:pointer;min-height:44px;transition:border-color .15s ease,background .15s ease;
}
.card-euro .punct{width:9px;height:9px;border-radius:50%;background:var(--linie-tare)}
.card-euro-e6 .punct{background:#3F8F6B}     /* verde stins, nu strident */
.card-euro-e54 .punct{background:#C79A44}    /* amber neutru */
.card-euro-e30 .punct{background:#B0645C}    /* rosu stins */
.card-euro b{font:600 12.5px "Archivo",-apple-system,sans-serif;color:var(--text)}
.card-euro i{font:400 10.5px -apple-system,sans-serif;font-style:normal;color:var(--text-2)}
.carduri-euro input:checked + .card-euro{border-color:var(--asfalt);background:var(--hartie)}
.carduri-euro input:focus-visible + .card-euro{outline:3px solid var(--albastru);outline-offset:2px}
@media (prefers-color-scheme: dark){
  .carduri-euro input:checked + .card-euro{border-color:#fff;background:var(--asfalt-2)}
}

/* ---------- schelet de incarcare, cat timp se calculeaza ruta principala ---------- */
.schelet{background:var(--asfalt);border-radius:var(--r-mare);padding:var(--s5) var(--s4);margin-bottom:var(--s3)}
.sk-line{height:14px;border-radius:6px;background:var(--asfalt-2);animation:puls 1.3s ease-in-out infinite}
.sk-w40{width:40%;height:11px;margin-bottom:10px}
.sk-w70{width:70%}
.sk-mare{height:34px;margin-bottom:var(--s4)}
.sk-band{height:44px;border-radius:8px;background:var(--asfalt-2);animation:puls 1.3s ease-in-out infinite;margin-bottom:var(--s3)}
.sk-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.sk-block{height:52px;border-radius:var(--r-mic);background:var(--asfalt-2);animation:puls 1.3s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:.55}50%{opacity:.95}}
@media (prefers-reduced-motion: reduce){ .sk-line,.sk-band,.sk-block{animation:none;opacity:.7} }

/* ---------- comparatie fara autostrada, carduri narative ---------- */
.cmp-carduri{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s3);align-items:center;margin-top:var(--s3)}
.cmp-card{padding:var(--s4) var(--s3);border-radius:var(--r-mic);border:1px solid var(--linie);background:var(--hartie)}
.cmp-card.cmp-a{border-color:var(--verde);background:color-mix(in srgb,var(--verde) 6%,var(--plan))}
.cmp-titlu{font:600 12px "IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.04em;
           color:var(--text-2);margin:0 0 8px}
.cmp-card.cmp-a .cmp-titlu{color:var(--verde)}
.cmp-km{font:600 13px -apple-system,sans-serif;color:var(--text-2);margin:0}
.cmp-taxa{font:800 22px "Archivo",-apple-system,sans-serif;letter-spacing:-.02em;
          font-variant-numeric:tabular-nums;margin:2px 0}
.cmp-timp{font:400 13px ui-monospace,monospace;color:var(--text-2);margin:0}
.cmp-vs{font:600 12px "IBM Plex Mono",monospace;color:var(--text-2);text-transform:uppercase}
.cmp-concluzie{margin:var(--s3) 0 0;font-size:13.5px;line-height:1.5;color:var(--text)}
@media (max-width:520px){
  .cmp-carduri{grid-template-columns:1fr;gap:var(--s2)}
  .cmp-vs{text-align:center;padding:2px 0}
}

.eticheta-rand{display:flex;align-items:center;justify-content:space-between;gap:8px}
.eticheta-rand label{margin:0}
.mutare-rand{display:flex;gap:4px}
.mut-sus,.mut-jos{
  width:26px;height:26px;border:1px solid var(--linie);border-radius:6px;
  background:var(--plan);color:var(--text-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:none;padding:0;
}
.mut-sus:hover:not(:disabled),.mut-jos:hover:not(:disabled){color:var(--text);border-color:var(--linie-tare)}
.mut-sus:disabled,.mut-jos:disabled{opacity:.3;cursor:default}
.mut-sus svg,.mut-jos svg{width:11px;height:11px}

/* Evidentiere temporara a punctului pe care ORS l-a raportat ca
   nefiind rutabil (niciun drum in apropiere pentru profilul de camion). */
.oprire.punct-suspect{
  outline:2px solid var(--eroare);outline-offset:3px;border-radius:var(--r-mic);
  animation:puls-suspect 1.6s ease-in-out 2;
}
@keyframes puls-suspect{0%,100%{outline-color:var(--eroare)}50%{outline-color:transparent}}
@media (prefers-reduced-motion: reduce){ .oprire.punct-suspect{animation:none} }

/* ---------- lista de opriri, cu fir de traseu ---------- */
.opriri{position:relative}
.oprire{position:relative;display:grid;grid-template-columns:28px 1fr 40px;gap:var(--s3);
        align-items:start;padding-bottom:var(--s4)}
.oprire:last-child{padding-bottom:0}
.oprire::before{               /* firul care leagă punctele */
  content:"";position:absolute;left:13px;top:26px;bottom:-2px;width:2px;
  background:repeating-linear-gradient(var(--linie-tare) 0 6px,transparent 6px 12px);
}
.oprire:last-child::before{display:none}
.nod{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:600 12px "IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;color:#fff;background:var(--asfalt);
  margin-top:24px;position:relative;z-index:1;flex:none;
}
.nod.incarcare{background:var(--verde)} .nod.descarcare{background:var(--albastru)} .nod.oprire-simpla{background:var(--text-2)}
.oprire .coloana{min-width:0;display:flex;flex-direction:column;gap:var(--s2)}
.oprire select{min-height:40px;font-size:14px}
.sterge{
  width:40px;height:48px;margin-top:20px;border:0;background:none;cursor:pointer;
  color:var(--text-2);border-radius:var(--r-mic);
}
.sterge:hover{color:var(--eroare);background:var(--eroare-fundal)}
.sterge svg{width:18px;height:18px;display:block;margin:0 auto}

.sugestii{
  position:absolute;z-index:1000;left:40px;right:44px;top:calc(100% - var(--s3));
  background:var(--plan);border:1.5px solid var(--linie-tare);border-radius:var(--r-mic);
  max-height:220px;overflow-y:auto;box-shadow:0 12px 32px -8px rgba(22,24,28,.25);display:none;
}
.sugestii .sug{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;min-height:46px;
  padding:var(--s2) var(--s3);border-bottom:1px solid var(--linie);color:var(--text);cursor:pointer;
}
.sugestii .sug:last-child{border-bottom:0}
.sugestii .sug:hover,.sugestii .sug:focus-visible{background:var(--hartie)}
.sugestii .sug svg{width:16px;height:16px;flex:none;color:var(--text-2)}
.sugestii .sug span{min-width:0;display:flex;flex-direction:column}
.sugestii .sug b{font:400 14px/1.3 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
                  font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugestii .sug i{font:400 12px -apple-system,sans-serif;font-style:normal;color:var(--text-2);
                  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugestii .inert{padding:var(--s3);font-size:13.5px;color:var(--text-2)}

.adauga{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s4)}
.adauga button{
  min-height:46px;border:1.5px dashed var(--linie-tare);background:none;border-radius:var(--r-mic);
  font:600 13.5px -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:6px;padding:0 var(--s2);
}
.adauga button.inc{color:var(--verde)} .adauga button.desc{color:var(--albastru)}
.adauga button.inc:hover{border-color:var(--verde);background:color-mix(in srgb,var(--verde) 7%,transparent)}
.adauga button.desc:hover{border-color:var(--albastru);background:color-mix(in srgb,var(--albastru) 7%,transparent)}
.adauga svg{width:15px;height:15px;flex:none}

#harta{height:min(58vw,300px);border-radius:var(--r-mic);border:1px solid var(--linie);
       margin-top:var(--s4);background:var(--hartie)}
.leaflet-container{font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--hartie)}

/* ---------- butoane ---------- */
.buton{
  width:100%;min-height:52px;border:0;border-radius:var(--r-mic);cursor:pointer;
  font:600 16px -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--asfalt);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  transition:transform .12s ease,opacity .15s ease;
}
.buton svg{width:16px;height:16px;flex:none}
.buton:active{transform:scale(.985)}
.buton[disabled]{opacity:.45;cursor:default;transform:none}
.buton.secundar{background:var(--plan);color:var(--text);border:1.5px solid var(--linie)}
.buton.verde{background:var(--verde);color:#fff}
@media (prefers-color-scheme: dark){ .buton{background:#fff;color:#16181C} }
.triada{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s3)}
.triada .buton{font-size:14px;min-height:48px}

/* ---------- pliante ---------- */
details{border-top:1px solid var(--linie);margin-top:var(--s4);padding-top:var(--s4)}
summary{
  font:600 14px -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;min-height:32px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--text-2);
  border-bottom:2px solid var(--text-2);transform:rotate(45deg);transition:transform .2s ease}
details[open] summary::after{transform:rotate(-135deg)}
details > *:not(summary){margin-top:var(--s4)}

/* ============================================================
   REZULTAT — elementul-semnătură
   ============================================================ */
.rezultat{background:var(--asfalt);color:#fff;border-radius:var(--r-mare);
          padding:var(--s5) var(--s4);margin-bottom:var(--s3);display:none;
          box-shadow:0 2px 4px rgba(22,24,28,.08), 0 16px 40px -12px rgba(22,24,28,.35);}
.rezultat .supra{color:#8D9490}
.suma{font:800 clamp(40px,13vw,58px)/1 "Archivo",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.045em;
      font-variant-numeric:tabular-nums;margin:var(--s2) 0 var(--s1)}
.suma small{font:600 16px -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:0;color:#8D9490;margin-left:8px}
.temei{font:400 13px/1.5 "IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;color:#9BA3A0}

/* banda de asfalt: proporția verde/albastru desenată ca un drum */
.banda-legenda{font:600 12px "IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
               color:#C9CCD3;margin:var(--s4) 0 var(--s2);letter-spacing:.01em}
.banda-legenda .pct-as{color:#7FD9A8} .banda-legenda .pct-dn{color:#8FC0F0}
.banda{position:relative;height:44px;border-radius:8px;overflow:hidden;margin:0 0 var(--s3);
       display:flex;background:var(--asfalt-2)}
.banda span{display:flex;align-items:center;justify-content:center;min-width:0;
            font:600 12px "IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;color:#fff;white-space:nowrap;overflow:hidden}
.banda .as{background:var(--verde)} .banda .dn{background:var(--albastru)}
.banda::after{  /* marcaj discontinuu pe mijloc */
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 14px,transparent 14px 30px);
  pointer-events:none;
}
/* plăcuțele de indicator */
.placute{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.placuta{border-radius:var(--r-mic);padding:var(--s3);border:2px solid rgba(255,255,255,.85)}
.placuta.as{background:var(--verde)} .placuta.dn{background:var(--albastru)}
.placuta b{display:block;font:800 22px/1 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums;color:#fff}
.placuta i{display:block;font:400 11.5px/1.4 "IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;font-style:normal;
           color:rgba(255,255,255,.85);margin-top:5px}

.fise{margin-top:var(--s4);border-top:1px solid var(--asfalt-2);padding-top:var(--s3)}
.fisa{display:flex;justify-content:space-between;gap:var(--s3);
      font:400 13.5px/2 "IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;color:#A8AFAB}
.fisa b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.fise .grup{border-top:1px solid var(--asfalt-2);margin-top:var(--s3);padding-top:var(--s3)}
.acord{display:flex;gap:var(--s3);align-items:flex-start;margin:0 0 var(--s4);
       font-size:12.5px;line-height:1.55;color:var(--text-2);font-weight:400;cursor:pointer}
.acord input{width:22px;height:22px;min-height:22px;flex:none;margin-top:1px;accent-color:var(--verde);
             border-radius:5px;padding:0;
             /* regula globala input,select seteaza appearance:none, ceea ce
                elimina randarea nativa a checkbox-ului: click-ul tot
                functioneaza, dar nu se vede nimic bifat. O restauram aici. */
             -webkit-appearance:auto;appearance:auto;background:none;border:none}
.acord a{color:var(--text)}

.lacat{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3);border-radius:var(--r-mic);
       background:var(--asfalt-2);font-size:13.5px;line-height:1.5;color:#C3C9C5}
.lacat svg{width:18px;height:18px;flex:none;margin-top:2px;color:#8D9490}
.lacat b{color:#fff;font-weight:600;display:block;margin-bottom:2px;font-size:14px}

/* ---------- tabele care se pliază pe telefon ---------- */
.tabel{width:100%;border-collapse:collapse;font-size:14px}
.tabel th,.tabel td{padding:var(--s3) var(--s2);text-align:right;border-bottom:1px solid var(--linie)}
.tabel th:first-child,.tabel td:first-child{text-align:left}
.tabel thead th{font:600 11px "IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;text-transform:uppercase;
                letter-spacing:.08em;color:var(--text-2);padding-bottom:var(--s2)}
.tabel td{font-variant-numeric:tabular-nums}
.tabel tbody tr:last-child td{border-bottom:0}

.rand{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;
      border-bottom:1px solid var(--linie);font-size:14px}
.rand:last-child{border-bottom:0}
.rand b{font-family:"IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;font-weight:600}
.rand .cale{color:var(--text-2);min-width:0}

/* ---------- etape pentru șofer ---------- */
.etapa{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);
       border:1px solid var(--linie);border-radius:var(--r-mic);margin-bottom:var(--s2);background:var(--hartie)}
.etapa .txt{flex:1;min-width:0;font-size:14px;line-height:1.4}
.etapa .mic{display:block;font:400 12px "IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;color:var(--text-2);margin-top:3px}
.etapa a{
  flex:none;min-height:44px;display:flex;align-items:center;padding:0 var(--s4);
  background:var(--asfalt);color:#fff;border-radius:8px;text-decoration:none;
  font:600 13.5px -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){ .etapa a{background:#fff;color:#16181C} }
.eticheta{font:600 11px "IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.06em}
.eticheta.inc{color:var(--verde)} .eticheta.desc{color:var(--albastru)}

/* ---------- stări ---------- */
.avert{border-radius:var(--r-mic);padding:var(--s3);font-size:13.5px;line-height:1.5;
       margin-bottom:var(--s2);background:var(--alerta-fundal);color:var(--alerta);
       border:1px solid color-mix(in srgb,var(--alerta) 30%,transparent)}
.avert.grav{background:var(--eroare-fundal);color:var(--eroare);
            border-color:color-mix(in srgb,var(--eroare) 30%,transparent)}
.eroare{display:none;margin-top:var(--s3);border-radius:var(--r-mic);padding:var(--s3);
        background:var(--eroare-fundal);color:var(--eroare);font-size:14px;line-height:1.5;
        border:1px solid color-mix(in srgb,var(--eroare) 30%,transparent)}
.rotitor{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
         border-radius:50%;animation:invarte .7s linear infinite}
@keyframes invarte{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------- bara lipită jos, doar pe telefon ---------- */
.bara-jos{
  position:fixed;left:0;right:0;bottom:0;z-index:900;display:none;
  padding:var(--s3) var(--s4) calc(var(--s3) + var(--jos));
  background:color-mix(in srgb,var(--plan) 92%,transparent);
  backdrop-filter:blur(12px);border-top:1px solid var(--linie);
  box-shadow:0 -8px 24px -12px rgba(22,24,28,.18);
  align-items:center;gap:var(--s3);
}
.bara-jos.vizibila{display:flex}
.bara-jos .val{flex:1;min-width:0}
.bara-jos .val span{display:block;font:600 10.5px "IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
                    letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.bara-jos .val b{font:800 21px/1.1 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums}
.bara-jos a{flex:none;min-height:44px;display:flex;align-items:center;padding:0 var(--s4);
            background:var(--verde);color:#fff;border-radius:9px;text-decoration:none;
            font:600 14px -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
@media (min-width:768px){ .bara-jos.vizibila{display:none} }
body.cu-bara{padding-bottom:calc(96px + var(--jos))}

.subsol{margin-top:var(--s6);font-size:12px;line-height:1.6;color:var(--text-2)}
.subsol a{color:var(--text-2)}

/* ---------- oferta tipărită ---------- */
#oferta{display:none}
@media print{
  @page{ margin: 18mm 16mm; }
  body{background:#fff;padding:0}
  .pagina,.bara-jos{display:none !important}
  #oferta{display:block;font:11.5px/1.5 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#000}
  #oferta h2{font-size:19px;margin:0 0 4px}
  #oferta .antet{border-bottom:2.5px solid #000;padding-bottom:8px;margin-bottom:16px}
  #oferta .antet p{margin:0;font-size:11px;color:#333}
  #oferta .titlu-oferta{font-size:15px;font-weight:700;margin:0 0 2px}
  #oferta .data-oferta{font-size:10.5px;color:#666;margin:0 0 14px}
  #oferta table{width:100%;border-collapse:collapse;margin-top:10px}
  #oferta td,#oferta th{padding:6px 4px;border-bottom:1px solid #ccc;text-align:left}
  #oferta td.n{text-align:right}
  #oferta .total{font-size:17px;font-weight:800;border-top:2.5px solid #000;padding-top:8px;margin-top:12px}
  #oferta .ce-e-tollro{margin-top:20px;padding:10px 12px;background:#f4f4f4;border-radius:6px;font-size:10px;line-height:1.5}
  #oferta .marunt{margin-top:12px;font-size:9.5px;color:#555}
}

@media (min-width:640px){
  #pliantVehicul .duo{grid-template-columns:repeat(3,1fr)}
  #pliantVehicul .duo:nth-of-type(3){grid-template-columns:1fr}
}

/* ---------- banner de cookie-uri ---------- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:1100;
  background:var(--asfalt);color:#fff;padding:var(--s3) var(--s4) calc(var(--s3) + var(--jos));
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  box-shadow:0 -8px 24px -8px rgba(0,0,0,.3);
}
.cookie-banner p{margin:0;flex:1;min-width:220px;font-size:12.5px;line-height:1.5;color:#C9CCD3}
.cookie-banner a{color:#fff}
.cookie-butoane{display:flex;gap:8px;flex:none}
.cookie-butoane button{
  min-height:38px;padding:0 var(--s3);border-radius:8px;border:1px solid rgba(255,255,255,.3);
  background:transparent;color:#fff;font:600 13px -apple-system,sans-serif;cursor:pointer;
}
.cookie-butoane button.accent{background:var(--verde);border-color:var(--verde)}

/* ============================================================
   ADAOSURI UX (drag-and-drop, dimensiuni vizibile, procentaje,
   header mobil, ancorare rezultat)
   ============================================================ */

/* drag handle pentru reordonarea opririlor */
.mutare-rand{align-items:center}
.trage{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  padding:0;border:0;background:none;color:var(--linie-tare);cursor:grab;
  touch-action:none;flex:none;border-radius:6px;
}
.trage:hover{color:var(--text-2);background:var(--hartie)}
.trage:active{cursor:grabbing}
.trage svg{width:14px;height:14px}
.oprire.se-trage{
  opacity:.92;background:var(--plan);border-radius:var(--r-mic);
  box-shadow:0 10px 28px -8px rgba(22,24,28,.4);position:relative;z-index:6;
}
body.trage-activ{user-select:none;-webkit-user-select:none;cursor:grabbing}

/* dimensiuni mereu vizibile (fost pliant) */
.bloc-vizibil{border-top:1px solid var(--linie);margin-top:var(--s4);padding-top:var(--s4)}
.bloc-vizibil > *:not(.sub-titlu){margin-top:var(--s4)}
.sub-titlu{font:600 14px -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  margin:0;color:var(--text)}

/* procentaje ca pastile colorate: fundal = culoarea drumului */
.banda-legenda{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.banda-legenda .pct-as,.banda-legenda .pct-dn{
  padding:3px 9px;border-radius:6px;color:#fff;font-weight:700;letter-spacing:0;
}
.banda-legenda .pct-as{background:var(--verde)}
.banda-legenda .pct-dn{background:var(--albastru)}

/* ancorare lina a rezultatului dupa calcul */
#rezultat{scroll-margin-top:14px}

/* header mai compact pe mobil (mai putin spatiu gol sus) */
@media (max-width:520px){
  body{padding-top:var(--s2)}
  h1{font-size:clamp(23px,7vw,30px)}
  .cap{margin-bottom:var(--s3)}
  .cap h1{margin:2px 0 2px}
  .plan-traseu .ajutor{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}


/* ============================================================
   REDESIGN (redesign-skill: preserve, trust-first, restrans)
   Tipografie reala + adancime discreta + stari fizice.
   ============================================================ */
html{scroll-behavior:smooth}

.sigla b{font-family:"Archivo",-apple-system,sans-serif;letter-spacing:-.02em;font-weight:800}
h2{font-family:"Archivo",-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:-.01em}
.placuta b{font-family:"Archivo",-apple-system,sans-serif}

/* adancime discreta pe cardul de rezultat: halou verde ambiant sus */
.rezultat{
  background-image:radial-gradient(125% 90% at 50% -22%,
    color-mix(in srgb, var(--verde) 20%, transparent), transparent 60%);
}
.suma{letter-spacing:-.05em}

/* hover pe carduri de selectie (feedback fizic peste starea checked) */
.card-vehicul,.card-euro{transition:border-color .15s ease,background .15s ease,transform .12s ease}
.card-vehicul:hover,.card-euro:hover{border-color:var(--linie-tare)}
.carduri-vehicul input:checked + .card-vehicul,
.carduri-euro input:checked + .card-euro{transform:translateY(-1px)}

/* randul de oprire: inel subtil pe nod la hover (doar pointer fin) */
@media (hover:hover){
  .oprire:hover .nod{box-shadow:0 0 0 4px color-mix(in srgb, var(--verde) 12%, transparent)}
}

/* butoane: hover mai viu, feedback fizic pastrat */
.buton{transition:transform .12s ease,opacity .15s ease,filter .15s ease}
.buton:hover:not([disabled]){filter:brightness(1.06)}
.buton.secundar:hover:not([disabled]){border-color:var(--linie-tare);background:var(--hartie)}

/* pastilele de procentaj: umbra colorata coerenta cu drumul */
.banda-legenda .pct-as{box-shadow:0 2px 8px -3px color-mix(in srgb, var(--verde) 60%, transparent)}
.banda-legenda .pct-dn{box-shadow:0 2px 8px -3px color-mix(in srgb, var(--albastru) 60%, transparent)}

/* ============================================================
   TUTORIAL "cum se folosește"
   ============================================================ */
.cap{position:relative}
.ajutor-btn{
  position:absolute;top:0;right:0;width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--linie);background:var(--plan);color:var(--text-2);
  font:800 15px "Archivo",-apple-system,sans-serif;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s,transform .12s;
}
.ajutor-btn:hover{border-color:var(--verde);color:var(--verde);transform:translateY(-1px)}
.tutorial-caseta{max-width:420px;text-align:left}
.tut-ilustratie{
  width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--s3);background:color-mix(in srgb,var(--verde) 12%,var(--plan));
}
.tut-ilustratie svg{width:28px;height:28px;color:var(--verde)}
.tutorial-caseta h2{font:800 20px "Archivo",-apple-system,sans-serif;margin:0 0 6px;letter-spacing:-.01em}
#tutText{line-height:1.55;color:var(--text-2);font-size:14px}
.tut-puncte{display:flex;gap:6px;margin:var(--s4) 0}
.tut-puncte span{width:7px;height:7px;border-radius:50%;background:var(--linie-tare);transition:background .2s,width .2s}
.tut-puncte span.activ{background:var(--verde);width:22px;border-radius:4px}
.tut-butoane{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.tut-butoane .buton{min-height:46px}
.tut-sari{
  display:block;width:100%;margin-top:var(--s3);background:none;border:0;
  color:var(--text-2);font:500 13px -apple-system,sans-serif;cursor:pointer;min-height:32px;
}
.tut-sari:hover{color:var(--text)}

/* ============================================================
   REDESIGN v2 — premium restrâns (redesign-skill + taste-skill)
   Un singur accent (verde), adâncime discretă, stări fizice.
   Potrivit unui tool trust-first: nimic flashy.
   ============================================================ */

/* fundal cu adâncime discretă, nu plat */
body{
  background:radial-gradient(155% 65% at 50% -6%,
    color-mix(in srgb, var(--verde) 4%, var(--hartie)) 0%, var(--hartie) 48%) fixed;
}

/* HEADER: eyebrow + titlu mai strâns */
.cap{position:relative}
.cap::before{
  content:"Tarife oficiale MTI · 2026";
  display:inline-block;
  font:600 10.5px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.14em; text-transform:uppercase; color:var(--verde);
  background:color-mix(in srgb, var(--verde) 11%, transparent);
  padding:5px 9px; border-radius:6px; margin-bottom:10px;
}
.cap h1{font-size:clamp(25px,6vw,34px)}

/* SECȚIUNI: adâncime reală + accent pe titlu */
.plan{
  border-radius:18px;
  border-color:color-mix(in srgb, var(--linie) 72%, transparent);
  box-shadow:0 1px 2px rgba(22,24,28,.04), 0 14px 34px -20px rgba(22,24,28,.20);
}
.plan > h2{position:relative; padding-left:14px}
.plan > h2::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:15px; border-radius:2px; background:var(--verde);
}

/* INPUTURI: fill subtil, focus mai clar, colțuri mai moi */
input, select{border-radius:12px; background:color-mix(in srgb, var(--hartie) 45%, var(--plan))}
input:hover, select:hover{background:color-mix(in srgb, var(--hartie) 30%, var(--plan))}
input:focus-visible, select:focus-visible{
  outline:none; border-color:var(--albastru);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--albastru) 15%, transparent);
}

/* nodurile de oprire: inel + umbră */
.nod{box-shadow:0 2px 7px -1px rgba(22,24,28,.32), 0 0 0 4px var(--plan)}

/* butoane adaugă + hartă */
.adauga button{border-radius:12px; background:color-mix(in srgb, var(--hartie) 55%, var(--plan))}
.harta-cadru{border-radius:16px; box-shadow:0 12px 32px -18px rgba(22,24,28,.4)}

/* BUTOANE: colțuri coerente, verde cu gradient + glow */
.buton{border-radius:14px}
.buton.secundar{border-radius:14px}
.triada .buton{border-radius:12px}
.buton.verde{
  background:linear-gradient(180deg, #16a35b 0%, var(--verde) 100%);
  box-shadow:0 8px 20px -8px color-mix(in srgb, var(--verde) 62%, transparent);
}
.buton.verde:hover:not([disabled]){filter:brightness(1.04)}

/* carduri vehicul/euro: stare selectată mai puternică */
.carduri-vehicul input:checked + .card-vehicul{
  box-shadow:0 0 0 1px var(--verde), 0 8px 22px -10px color-mix(in srgb, var(--verde) 55%, transparent);
}
.carduri-euro input:checked + .card-euro{box-shadow:0 6px 18px -10px rgba(22,24,28,.28)}

/* CARD REZULTAT: elementul-semnătură, mai bogat */
.rezultat{
  border-radius:24px;
  box-shadow:0 2px 4px rgba(22,24,28,.1), 0 30px 64px -26px rgba(14,107,60,.38),
    inset 0 1px 0 rgba(255,255,255,.06);
  background-image:radial-gradient(130% 90% at 50% -16%, rgba(30,148,89,.26), transparent 58%);
}
.suma{letter-spacing:-.05em}
.placuta{border-radius:14px}
.banda{border-radius:12px}