/* ============================================================
   extra.css — sectiunile aduse din template-ul v1 (Calculator ROI si
   Comparatie), rescrise in sistemul din template-v2, plus bara de cookies.

   Foloseste aceleasi variabile ca restul temei (base.css). Nu redefineste
   niciun token; daca schimbi accentul acolo, se schimba si aici.
   ============================================================ */

/* ---------- Calculator ROI ---------- */
.calc{
  margin-top:clamp(44px, 5vw, 68px);
  display:grid;
  grid-template-columns:1fr .82fr;
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line);
}

.calc__controls,
.calc__out{ background:var(--bg-panel); padding:clamp(26px, 3vw, 42px); }

.calc__ctl + .calc__ctl{ margin-top:34px; }

.calc__hd{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:14px;
}
.calc__l{ font-size:.92rem; color:var(--text-2); }
.calc__v{
  font-family:var(--mono); font-size:.9rem; color:var(--uv-bright);
  font-variant-numeric:tabular-nums;
}

/* Slider-ul: sina de 2px, buton rotund cu halou cald la focus */
.calc__range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:2px; margin:0;
  background:var(--line-strong);
  border-radius:2px; outline:none; cursor:pointer;
}
.calc__range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:var(--uv); border:3px solid var(--bg-panel);
  box-shadow:0 0 0 1px var(--uv), 0 6px 18px -6px var(--uv-glow);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.calc__range::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--uv); border:3px solid var(--bg-panel);
  box-shadow:0 0 0 1px var(--uv), 0 6px 18px -6px var(--uv-glow);
}
.calc__range:hover::-webkit-slider-thumb{ transform:scale(1.14); }
.calc__range:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 1px var(--uv), 0 0 0 6px var(--uv-wash); }

.calc__note{ margin-top:34px; padding-top:22px; border-top:1px solid var(--line-soft); max-width:46ch; }

.calc__out{ display:flex; flex-direction:column; }

.calc__big{ padding-bottom:26px; border-bottom:1px solid var(--line-soft); }
.calc__num{
  margin-top:12px;
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.3rem, 3.6vw, 3.2rem); line-height:1;
  letter-spacing:-.04em; color:var(--uv);
  font-variant-numeric:tabular-nums;
}
.calc__num small{
  display:block; margin-top:10px;
  font-family:var(--sans); font-size:.85rem; font-weight:400;
  letter-spacing:0; color:var(--text-3);
}

.calc__grid{
  margin:26px 0; display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.calc__cell{ background:var(--bg-panel); padding:18px 20px; }
.calc__cell b{
  display:block; margin-top:9px;
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  letter-spacing:-.02em; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.calc__cell b.is-gold{ color:var(--gold); }
.calc__cell b.is-uv{ color:var(--uv-bright); }

.calc__out .btn{ margin-top:auto; }

@media (max-width:900px){
  .calc{ grid-template-columns:1fr; }
}

/* ---------- Comparatie ---------- */
.vs{
  margin-top:clamp(44px, 5vw, 68px);
  border:1px solid var(--line);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.vs__t{ width:100%; min-width:760px; border-collapse:collapse; background:var(--bg-panel); }

.vs__t th,
.vs__t td{
  padding:20px 24px;
  text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line-soft);
}
.vs__t tbody tr:last-child th,
.vs__t tbody tr:last-child td{ border-bottom:0; }

.vs__t thead th{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3);
  padding-top:22px; padding-bottom:22px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}

.vs__t tbody th{
  font-family:var(--sans); font-size:.94rem; font-weight:500;
  color:var(--text); width:26%;
}

.vs__t td{ font-size:.92rem; color:var(--text-2); width:37%; }

/* coloana noastra e singura cu fundal si cu accent */
.vs__own{ background:var(--uv-wash); }
.vs__t thead th.vs__own{ color:var(--uv-bright); }

.vs__no,
.vs__yes{ display:flex; align-items:flex-start; gap:10px; line-height:1.5; }
.vs__no svg,
.vs__yes svg{ width:14px; height:14px; flex:none; margin-top:3px; }
.vs__no{ color:var(--text-3); }
.vs__no svg{ color:var(--text-4); }
.vs__yes{ color:var(--text); }
.vs__yes svg{ color:var(--uv); }

.vs__t tbody tr:hover td,
.vs__t tbody tr:hover th{ background:rgba(255,255,255,.014); }
.vs__t tbody tr:hover td.vs__own{ background:rgba(255,107,43,.14); }

/* ---------- Bara de cookies ---------- */
.cookiebar{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--bg-elevated);
  border-top:1px solid var(--line);
  transform:translateY(100%);
  transition:transform .5s var(--ease-out);
}
.cookiebar.is-in{ transform:none; }
.cookiebar__in{
  max-width:var(--maxw); margin-inline:auto;
  padding:20px clamp(20px,4vw,56px);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cookiebar p{ margin:0; font-size:.88rem; color:var(--text-2); max-width:62ch; }
.cookiebar__actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

@media (prefers-reduced-motion: reduce){
  .cookiebar{ transition:none; }
}

/* Linkul de salt la continut devine vizibil doar cand ajunge la el tastatura */
.sr:focus{
  position:fixed; left:16px; top:16px; z-index:400;
  width:auto; height:auto; margin:0; clip:auto; white-space:normal;
  padding:12px 18px; background:var(--bg-elevated);
  border:1px solid var(--uv); color:var(--text); font-size:.9rem;
}