/* ==========================================================================
   topblat.ro — calculatorul de pe pagina produsului, varianta FINALĂ (D1 „Configurator de showroom”, cu reparațiile juriului).
   Se încarcă DUPĂ produs.css și înlocuiește aspectul regulilor .tbc-* (toate regulile sunt sub .tbc: nimic global).
   Markup-ul (partials/calculator.blade.php) și calculator.js rămân neschimbate: aceleași câmpuri, texte, cârlige și pași.
   - card alb cu margine fină; titluri de secțiune clare (fără majuscule, fără iconițe colorate);
   - cantul = control segmentat; câmpuri albe cu contur; chiuvetele = două carduri cu indicator radio (al doilea clic anulează);
   - pasul 1, ordinea afișată: dimensiuni → opțiuni extra → opțiuni incluse (chiar deasupra butonului); ordinea tastaturii nu se schimbă;
   - pasul 2: rezultatul (eticheta, totalul, 5%, serviciile) = SINGURA suprafață plină, verde închis, fără gradient și fără umbră;
   - verdele topblat doar unde e o decizie (cantul ales, chiuveta aleasă, butonul) și la preț; separare prin spațiu, fără linii.
   ========================================================================== */

.tbc {
    --tbc-ink: #14201b;            /* textul principal */
    --tbc-ink-2: #3b4843;          /* text de rând */
    --tbc-muted: #67736e;          /* text secundar (4.94:1 pe alb, 4.55:1 pe panoul gri) */
    --tbc-line: #d6dde0;           /* conturul controalelor */
    --tbc-line-2: #a3afab;         /* conturul la hover */
    --tbc-surface: #f4f6f6;        /* zonele de informație (neinteractive) */
    --tbc-track: #edf0f1;          /* șina controlului segmentat */
    --tbc-accent: var(--tb-verde, #0a5c48);
    --tbc-accent-dark: var(--tb-verde-inchis, #024f41);
    --tbc-accent-soft: rgba(10, 92, 72, .045);
    --tbc-ring: 0 0 0 3px rgba(10, 92, 72, .16);
    --tbc-err: #b42318;
    --tbc-err-soft: #fdeeec;
    --tbc-ok-soft: #e8f2ee;
    --tbc-h: 48px;                 /* înălțimea controalelor */
    --tbc-r: 10px;                 /* colțurile câmpurilor */
    --tbc-r2: 12px;                /* colțurile blocurilor (segmentat, carduri, rezultat, butoane) */
    --tbc-pad: 28px;               /* spațiul din card */
    --tbc-gap: 28px;               /* distanța dintre secțiuni */
    --tbc-rez-pad: 24px;           /* spațiul din blocul cu rezultatul */
    --tbc-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    margin-top: 28px; color: var(--tbc-ink); font-family: var(--tb-font, "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
}

/* atributul hidden câștigă mereu: nicio clasă (display: flex / grid) nu poate afișa un panou, un mesaj sau moneda ascunse de calculator.js */
.tbc [hidden] { display: none !important; }

/* ---------- titlul și cardul ---------- */
.tbc .tbc-titlu {
    margin: 0 0 16px; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; color: var(--tbc-accent); text-wrap: balance;
}
.tbc .tbc-card {
    max-width: 760px; padding: var(--tbc-pad); border: 1px solid #e1e6e9; border-radius: 16px; background: #fff;
    box-shadow: 0 1px 2px rgba(16, 28, 22, .04), 0 14px 34px -22px rgba(16, 28, 22, .22);
}

/* ---------- rândul de sus: pașii și prețul pe metru liniar ---------- */
.tbc .tbc-sus { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 26px; }
.tbc .tbc-pasi { display: flex; align-items: center; gap: 8px; width: auto; max-width: none; flex: 0 0 auto; }
.tbc .tbc-bula {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--tbc-line); background: #fff; color: var(--tbc-muted); font-size: 12.5px; line-height: 1; font-weight: 600;
    font-variant-numeric: tabular-nums; opacity: 1; box-shadow: none; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.tbc .tbc-bula.is-activ { background: var(--tbc-accent); border-color: var(--tbc-accent); color: #fff; box-shadow: none; }
.tbc .tbc-linie { flex: 0 0 28px; width: 28px; height: 2px; border-radius: 1px; background: #e1e6e9; transition: background-color .2s ease; }
/* la pasul 2: pasul 1 rămâne marcat ca făcut (contur și cifră verde), iar linia dintre ei se umple */
.tbc .tbc-pasi:has([data-tbc-bula="2"].is-activ) .tbc-linie { background: var(--tbc-accent); }
.tbc .tbc-pasi:has([data-tbc-bula="2"].is-activ) [data-tbc-bula="1"] {
    background: #fff; border-color: var(--tbc-accent); color: var(--tbc-accent); box-shadow: inset 0 0 0 .5px var(--tbc-accent);
}

/* „Preț listă: € 352.00 / ml” — fără pastilă și fără punct; cifra fermă, cu cifre tabulare */
.tbc .tbc-insigna {
    display: inline-flex; align-items: baseline; flex: 0 1 auto; gap: 0; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0;
    background: none; font-size: 14px; line-height: 22px; color: var(--tbc-ink-2); white-space: nowrap;
}
.tbc .tbc-insigna__punct { display: none; }
.tbc .tbc-insigna b {
    margin: 0 3px 0 1px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--tbc-ink); font-variant-numeric: tabular-nums;
}

/* iconițele colorate de lângă titluri și etichete: scoase (titlurile se citesc singure) */
.tbc .tbc-ico, .tbc .tbc-ico-mic { display: none; }

/* ---------- titlurile secțiunilor (legend / p) ---------- */
.tbc .tbc-cant__titlu, .tbc .tbc-subtitlu {
    display: block; float: none; width: 100%; margin: 0 0 12px; padding: 0; font-size: 15px; line-height: 22px; font-weight: 600;
    letter-spacing: -.005em; color: var(--tbc-ink);
}
/* legend: plutitor pe toată lățimea, ca să stea în fluxul cardului (nu în chenarul fieldset-ului) */
.tbc .tbc-cant__titlu, .tbc .tbc-extra > .tbc-subtitlu { float: left; }
.tbc .tbc-chips, .tbc .tbc-radiouri { clear: both; }

/* ---------- cantul: control segmentat, două opțiuni egale ---------- */
.tbc .tbc-cant {
    display: block; min-width: 0; margin: 0 0 var(--tbc-gap); padding: 0; border: 0; border-radius: 0; background: none;
}
.tbc .tbc-chips {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; margin: 0; padding: 4px; border-radius: var(--tbc-r2);
    background: var(--tbc-track);
}
.tbc .tbc-chip { position: relative; display: block; min-width: 0; cursor: pointer; }
.tbc .tbc-chip input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tbc .tbc-chip span {
    display: flex; align-items: center; justify-content: center; height: calc(var(--tbc-h) - 6px); padding: 0 12px; border: 0; border-radius: 9px;
    background: transparent; color: var(--tbc-ink-2); font-size: 14.5px; line-height: 20px; font-weight: 500; white-space: nowrap;
    box-shadow: none; transform: none; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.tbc .tbc-chip input:checked + span {
    background: var(--tbc-accent); color: #fff; font-weight: 600; transform: none; box-shadow: 0 1px 2px rgba(2, 40, 30, .28);
}
.tbc .tbc-chip input:focus-visible + span { outline: 2px solid var(--tbc-accent); outline-offset: 2px; }
.tbc .tbc-chip input:disabled, .tbc .tbc-chip input:disabled + span { cursor: not-allowed; opacity: .5; }

/* ---------- panourile (pașii) ---------- */
.tbc .tbc-panou { animation: tbcFinApare .22s ease both; }
@keyframes tbcFinApare { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* pasul 1, ordinea afișată: dimensiuni → opțiuni extra → opțiuni incluse → butonul
   (doar vizual; lista inclusă nu are elemente focalizabile, deci ordinea tastaturii rămâne aceeași) */
.tbc .tbc-panou[data-tbc-panou="1"] { display: flex; flex-direction: column; }
.tbc .tbc-panou[data-tbc-panou="1"] > .tbc-grila { order: 1; }
.tbc .tbc-panou[data-tbc-panou="1"] > .tbc-extra { order: 2; }
.tbc .tbc-panou[data-tbc-panou="1"] > .tbc-subtitlu { order: 3; }
.tbc .tbc-panou[data-tbc-panou="1"] > .tbc-incluse { order: 4; }
.tbc .tbc-panou[data-tbc-panou="1"] > .tbc-actiuni { order: 5; }

/* ---------- câmpurile ---------- */
.tbc .tbc-grila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 0 0 var(--tbc-gap); }
.tbc .tbc-camp { position: relative; min-width: 0; margin: 0 0 16px; }
.tbc .tbc-grila .tbc-camp { margin: 0; }
.tbc .tbc-panou[data-tbc-panou="2"] .tbc-grila { margin-bottom: 16px; }
.tbc .tbc-camp label { display: block; margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tbc-ink); }
.tbc .tbc-obl { color: var(--tbc-muted); font-weight: 400; }

.tbc .tbc-input, .tbc .tbc-input--gri {
    display: block; width: 100%; height: var(--tbc-h); margin: 0; padding: 0 14px; border: 1px solid var(--tbc-line); border-radius: var(--tbc-r);
    background: #fff; color: var(--tbc-ink); font: inherit; font-size: 15px; line-height: 20px; font-weight: 500; outline: none; box-shadow: none;
    -webkit-appearance: none; appearance: none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.tbc .tbc-input::placeholder { color: #9aa5a1; }
.tbc .tbc-input:focus, .tbc .tbc-input:focus-visible { border-color: var(--tbc-accent); box-shadow: var(--tbc-ring); outline: none; }
.tbc .tbc-input[aria-invalid="true"] { border-color: var(--tbc-err); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.tbc .tbc-input:disabled { border-color: #e3e8ea; background: #f4f6f6; color: #9aa5a1; cursor: not-allowed; }
.tbc .tbc-input--zona { height: auto; min-height: 112px; padding: 12px 14px; border-radius: var(--tbc-r); background: #fff; line-height: 22px; font-weight: 400; resize: vertical; }
.tbc #tbc-lungime { font-variant-numeric: tabular-nums; }

/* lățimea: select cu săgeata la distanță de margine */
.tbc .tbc-select {
    padding-right: 2.5em; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5' fill='none' stroke='%233b4843' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .75em center; background-size: 18px;
}
.tbc .tbc-select::-ms-expand { display: none; }

/* ---------- opțiunile incluse: listă compactă, bife monocrome ---------- */
.tbc .tbc-incluse {
    list-style: none; display: grid; gap: 10px; margin: 0 0 var(--tbc-gap); padding: 16px 18px; border: 0; border-radius: var(--tbc-r2);
    background: var(--tbc-surface);
}
.tbc .tbc-incluse li {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 0; padding: 0; border: 0; border-radius: 0;
    background: none; font-size: 14px; line-height: 20px;
}
.tbc .tbc-incluse span { display: flex; align-items: flex-start; gap: 10px; min-width: 0; color: var(--tbc-ink); }
.tbc .tbc-incluse b { flex: 0 0 auto; color: var(--tbc-ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.tbc .tbc-incluse em, .tbc .tbc-rezumat em { font-style: normal; font-weight: 400; color: var(--tbc-muted); opacity: 1; }
/* bifa: același ✓, desenat (glifa din font se vede diferit pe fiecare sistem) */
.tbc .tbc-bifa {
    position: relative; display: block; flex: 0 0 16px; width: 16px; height: 20px; border-radius: 0; background: none;
    color: transparent; font-size: 0; line-height: 0; overflow: hidden;
}
.tbc .tbc-bifa::before {
    content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: var(--tbc-accent);
    -webkit-mask: var(--tbc-check) center / 16px 16px no-repeat; mask: var(--tbc-check) center / 16px 16px no-repeat;
}

/* ---------- opțiunile extra: două carduri cu indicator radio ---------- */
.tbc .tbc-extra { min-width: 0; margin: 0 0 var(--tbc-gap); padding: 0; border: 0; }
.tbc .tbc-radiouri { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.tbc .tbc-radio {
    position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; margin: 0; padding: 14px 16px;
    border: 1px solid var(--tbc-line); border-radius: var(--tbc-r2); background: #fff; cursor: pointer; box-shadow: none; transform: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.tbc .tbc-radio:has(input:checked) { border-color: var(--tbc-accent); box-shadow: inset 0 0 0 1px var(--tbc-accent); background: var(--tbc-accent-soft); }
.tbc .tbc-radio:has(input:focus-visible) { outline: 2px solid var(--tbc-accent); outline-offset: 2px; }
.tbc .tbc-radio:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.tbc .tbc-radio input {
    -webkit-appearance: none; appearance: none; display: grid; place-content: center; flex: 0 0 20px; width: 20px; height: 20px; margin: 0;
    border: 1.5px solid #a3afab; border-radius: 50%; background: #fff; cursor: pointer; outline: none;
    transition: border-color .15s ease;
}
.tbc .tbc-radio input::before {
    content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tbc-accent); transform: scale(0); transition: transform .15s ease;
}
.tbc .tbc-radio input:checked { border-color: var(--tbc-accent); }
.tbc .tbc-radio input:checked::before { transform: scale(1); }
.tbc .tbc-radio span { font-size: 14.5px; line-height: 20px; font-weight: 500; color: var(--tbc-ink); text-wrap: balance; }

/* ---------- butoanele ---------- */
.tbc .tbc-actiuni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.tbc .tbc-actiuni > [data-action="calc"] { flex: 1 1 100%; }
.tbc .tbc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin: 0; padding: 0 22px;
    border: 1px solid transparent; border-radius: var(--tbc-r2); font: inherit; font-size: 15.5px; line-height: 20px; font-weight: 600;
    letter-spacing: -.005em; text-decoration: none; cursor: pointer; box-shadow: none; transform: none; filter: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.tbc .tbc-btn__ico { display: block; flex: 0 0 auto; width: 18px; height: 18px; transition: transform .18s ease; }
.tbc .tbc-btn--plin { background: var(--tbc-accent); border-color: var(--tbc-accent); color: #fff; box-shadow: 0 1px 2px rgba(2, 40, 30, .22); }
.tbc .tbc-btn--plin:active { background: #013c31; border-color: #013c31; }
.tbc .tbc-btn--gol { background: #fff; border-color: var(--tbc-line); color: var(--tbc-ink); box-shadow: none; }
.tbc .tbc-btn:focus-visible { outline: 2px solid var(--tbc-accent); outline-offset: 3px; }
/* „Se trimite...”: butonul dezactivat, verde stins */
.tbc .tbc-btn[disabled], .tbc .tbc-btn:disabled { opacity: .62; cursor: progress; transform: none; box-shadow: none; }

/* pasul 2: „Înapoi” cât îi trebuie, „Solicită informații” ocupă restul */
.tbc .tbc-actiuni--doua { flex-wrap: nowrap; justify-content: stretch; margin-top: 24px; }
.tbc .tbc-actiuni--doua .tbc-btn--gol { flex: 0 0 auto; min-width: 124px; }
.tbc .tbc-actiuni--doua .tbc-btn--plin { flex: 1 1 auto; min-width: 0; white-space: nowrap; }

/* ---------- mesajele (eroare / trimis): fond pal, fără contur, pe toată lățimea, sub butoane ---------- */
.tbc .tbc-mesaj { flex: 1 1 100%; margin: 14px 0 0; padding: 12px 14px; border: 0; border-radius: var(--tbc-r); font-size: 14px; line-height: 20px; font-weight: 500; }
.tbc .tbc-mesaj { text-wrap: pretty; }
.tbc .tbc-actiuni .tbc-mesaj { margin: 0; }
/* pasul 1: butonul ocupă tot rândul, deci eroarea stă DEASUPRA lui (altfel cade sub marginea ecranului, pe laptop) */
.tbc .tbc-actiuni > .tbc-mesaj { order: -1; }
.tbc .tbc-mesaj--eroare { background: var(--tbc-err-soft); color: var(--tbc-err); }
.tbc .tbc-mesaj--ok { background: var(--tbc-ok-soft); color: var(--tbc-accent-dark); font-weight: 600; }

/* ---------- pasul 2: rezultatul ----------
   Un singur bloc plin, verde închis (fără gradient, fără umbră): Rezultat → totalul → 5% → servicii. Sub el, Rezumatul (discret)
   și nota. Ambalajele .tbc-rezultat__st / .tbc-subpret se „deschid” (display: contents), ca paragrafele să se așeze în grila
   lui .tbc-rezultat fără să schimbăm markup-ul; fondul verde e ::before, întins pe rândurile 1–4. */
.tbc .tbc-rezultat {
    display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0; margin: 0 0 var(--tbc-gap); padding: 0; border: 0;
    border-radius: 0; background: none;
}
.tbc .tbc-rezultat__st, .tbc .tbc-subpret { display: contents; }
.tbc .tbc-rezultat::before {
    content: ""; grid-column: 1; grid-row: 1 / 5; align-self: stretch; border-radius: var(--tbc-r2); background: var(--tbc-accent-dark);
}
.tbc .tbc-rezultat__eticheta {
    grid-column: 1; grid-row: 1; margin: 0; padding: 22px var(--tbc-rez-pad) 0; font-size: 14px; line-height: 20px; font-weight: 500;
    color: rgba(255, 255, 255, .76); outline: none;
}
.tbc .tbc-rezultat__val {
    grid-column: 1; grid-row: 2; margin: 0; padding: 4px var(--tbc-rez-pad) 0; font-size: 46px; line-height: 1.08; font-weight: 700;
    letter-spacing: -.025em; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.tbc .tbc-moneda { margin-left: 4px; font-size: 20px; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, .8); }
.tbc .tbc-subpret p { margin: 0; }
.tbc .tbc-subpret > p:first-child {
    grid-column: 1; grid-row: 3; padding: 14px var(--tbc-rez-pad) 0; font-size: 14.5px; line-height: 21px; color: rgba(255, 255, 255, .9); text-wrap: pretty;
}
.tbc .tbc-subpret > p:first-child b { font-weight: 700; color: #fff; }
.tbc .tbc-subpret .tbc-subpret__gri {
    grid-column: 1; grid-row: 4; margin: 0 !important; padding: 4px var(--tbc-rez-pad) 22px; font-size: 13.5px; line-height: 20px; font-weight: 400;
    color: rgba(255, 255, 255, .74); opacity: 1;
}
.tbc .tbc-rezumat {
    grid-column: 1; grid-row: 5; order: 0; width: auto; margin: 16px 0 0; padding: 16px 18px; border: 0; border-radius: var(--tbc-r2);
    background: var(--tbc-surface);
}
.tbc .tbc-rezumat__titlu { margin: 0 0 10px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tbc-ink); }
.tbc .tbc-rezumat__randuri { display: grid; gap: 6px; margin: 0; font-size: 13.5px; line-height: 20px; }
.tbc .tbc-rezumat__randuri > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; color: var(--tbc-ink-2); }
/* opțiunile incluse, ca grup separat prin spațiu (fără linii): primul rând de după „Chiuvetă” */
.tbc .tbc-rezumat__randuri > div:has([data-tbc-sum="chiuveta"]) + div { margin-top: 8px; }
.tbc .tbc-rezumat__randuri dt { min-width: 0; font-weight: 400; color: var(--tbc-ink-2); }
.tbc .tbc-rezumat__randuri dd { flex: 0 0 auto; max-width: 62%; margin: 0; text-align: right; font-weight: 600; color: var(--tbc-ink); }
.tbc .tbc-subpret .tbc-nota {
    grid-column: 1; grid-row: 6; order: 0; margin: 14px 0 0 !important; padding: 0; border: 0; font-size: 12.5px; line-height: 19px; color: var(--tbc-muted);
}

/* ---------- acordul ---------- */
.tbc .tbc-acord { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--tbc-ink-2); cursor: pointer; }
.tbc .tbc-acord input {
    -webkit-appearance: none; appearance: none; display: inline-grid; place-content: center; flex: 0 0 20px; width: 20px; height: 20px; margin: 0;
    border: 1.5px solid #a3afab; border-radius: 6px; background: #fff; cursor: pointer; outline: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tbc .tbc-acord input::after {
    content: ""; width: 10px; height: 5.5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(-45deg) scale(0); transition: transform .12s ease;
}
.tbc .tbc-acord input:checked { background: var(--tbc-accent); border-color: var(--tbc-accent); }
.tbc .tbc-acord input:checked::after { transform: rotate(-45deg) scale(1); }
.tbc .tbc-acord input:focus-visible { outline: 2px solid var(--tbc-accent); outline-offset: 2px; }
.tbc .tbc-acord input[aria-invalid="true"] { border-color: var(--tbc-err); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.tbc .tbc-acord input:disabled { opacity: .5; cursor: not-allowed; }
.tbc .tbc-acord a { border: 0; color: var(--tbc-accent); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ---------- hover: doar unde există mouse (pe telefon hover-ul rămâne „lipit” după atingere) ---------- */
/* hover-urile din produs.css (ridicare, umbre) sunt neutralizate peste tot */
.tbc .tbc-radio:hover { box-shadow: none; transform: none; }
.tbc .tbc-btn:hover { filter: none; transform: none; }
.tbc .tbc-radio:has(input:checked):hover { box-shadow: inset 0 0 0 1px var(--tbc-accent); }
@media (hover: hover) {
    .tbc .tbc-chip:hover input:not(:checked) + span { background: rgba(255, 255, 255, .8); color: var(--tbc-ink); }
    .tbc .tbc-input:hover:not(:focus):not([aria-invalid="true"]) { border-color: var(--tbc-line-2); }
    .tbc .tbc-radio:hover:not(:has(input:checked)) { border-color: var(--tbc-line-2); background: #fbfcfc; }
    .tbc .tbc-radio:hover input:not(:checked) { border-color: var(--tbc-ink-2); }
    .tbc .tbc-btn--plin:hover { background: var(--tbc-accent-dark); border-color: var(--tbc-accent-dark); color: #fff; }
    .tbc [data-action="calc"]:hover .tbc-btn__ico { transform: translateX(3px); }
    .tbc .tbc-btn--gol:hover { background: #fff; border-color: var(--tbc-ink-2); color: var(--tbc-ink); }
    .tbc .tbc-btn--plin[disabled]:hover { background: var(--tbc-accent); border-color: var(--tbc-accent); }
    .tbc .tbc-acord:hover input:not(:checked):not([aria-invalid="true"]) { border-color: var(--tbc-ink-2); }
    .tbc .tbc-acord a:hover { color: var(--tbc-accent-dark); }
}

/* ==========================================================================
   tabletă și telefon
   ========================================================================== */
@media (max-width: 767px) {
    .tbc .tbc-titlu { font-size: 22px; }
    /* 16 px în câmpuri: Safari (iPhone) nu mai mărește pagina la atingere */
    .tbc .tbc-input, .tbc .tbc-input--gri { font-size: 16px; }
}

@media (max-width: 600px) {
    .tbc { --tbc-h: 52px; --tbc-pad: 18px; --tbc-gap: 24px; --tbc-rez-pad: 20px; }
    .tbc .tbc-titlu { margin-bottom: 14px; font-size: 21px; line-height: 1.25; }
    .tbc .tbc-card { border-radius: 14px; }
    .tbc .tbc-sus { margin-bottom: 22px; gap: 12px; }
    .tbc .tbc-linie { flex-basis: 20px; width: 20px; }
    .tbc .tbc-chip span { font-size: 15px; }
    .tbc .tbc-grila { gap: 12px; }
    /* pasul 2: numele / telefonul pe câte un rând (tastatura și completarea automată) */
    .tbc .tbc-panou[data-tbc-panou="2"] .tbc-grila { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .tbc .tbc-incluse { padding: 14px 16px; }
    .tbc .tbc-radiouri { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .tbc .tbc-radio { min-height: var(--tbc-h); padding: 12px 16px; }
    .tbc .tbc-radio span { font-size: 15px; }
    .tbc .tbc-btn { min-height: 54px; font-size: 16px; }
    .tbc .tbc-actiuni--doua .tbc-btn--gol { min-width: 104px; padding: 0 18px; }
    .tbc .tbc-actiuni--doua .tbc-btn--plin { padding: 0 16px; }
    .tbc .tbc-rezultat__eticheta { padding-top: 18px; }
    .tbc .tbc-rezultat__val { font-size: 42px; }
    .tbc .tbc-subpret > p:first-child { padding-top: 12px; }
    .tbc .tbc-subpret .tbc-subpret__gri { padding-bottom: 18px; }
    .tbc .tbc-rezumat { padding: 16px; }
}

/* telefoane înguste (360 px): „DA (…)” sub denumire, aliniat cu textul; butoanele pasului 2 pe un rând, fără rupturi (textul nu se rupe) */
@media (max-width: 380px) {
    .tbc { --tbc-pad: 16px; --tbc-rez-pad: 18px; }
    .tbc .tbc-chip span { padding: 0 8px; font-size: 14.5px; }
    .tbc .tbc-incluse { gap: 12px; }
    .tbc .tbc-incluse li { flex-direction: column; align-items: stretch; gap: 2px; }
    .tbc .tbc-incluse b { padding-left: 26px; white-space: normal; }      /* 26 px = bifa (16) + spațiul (10) */
    .tbc .tbc-actiuni--doua { gap: 8px; }
    .tbc .tbc-actiuni--doua .tbc-btn--gol { min-width: 88px; padding: 0 14px; }
    .tbc .tbc-actiuni--doua .tbc-btn--plin { padding: 0 14px; }
    .tbc .tbc-radio { padding: 12px 14px; }
    .tbc .tbc-radio span { font-size: 14.5px; }
    .tbc .tbc-rezultat__val { font-size: min(40px, 11vw); }      /* 5 cifre + „EUR” pe un rând și la 320 px */
}
/* sub 345 px textul și iconița ✓ nu mai încap împreună (măsurat: 150 px necesari, 150 px loc la 340 px): iconița decorativă iese */
@media (max-width: 345px) {
    .tbc .tbc-actiuni--doua .tbc-btn--plin .tbc-btn__ico { display: none; }
    /* „50-64 cm” nu mai încape lângă săgeată în 2 coloane: Lungime / Lățime una sub alta, ca în versiunea veche */
    .tbc .tbc-grila { grid-template-columns: minmax(0, 1fr); }
}
/* ecrane foarte înguste (sub 315 px): butoanele unul sub altul, principalul primul, ambele pe toată lățimea */
@media (max-width: 315px) {
    .tbc .tbc-insigna { font-size: 13px; }
    .tbc .tbc-insigna b { font-size: 15px; }
    .tbc .tbc-actiuni--doua { flex-direction: column-reverse; align-items: stretch; }
    .tbc .tbc-actiuni--doua .tbc-btn--gol, .tbc .tbc-actiuni--doua .tbc-btn--plin { flex: 0 0 auto; width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tbc *, .tbc *::before, .tbc *::after { transition: none !important; animation: none !important; }
}