/* =====================================================================
   Lab-404 — cautarea de domenii (cart.php?a=add&domain=register)
   ---------------------------------------------------------------------
   Macheta d11. Capul de pagina si coloanele sunt cele de pe paginile de produs,
   masurate acolo: bara 250px, 40px pana la conținut, titlu 41.6px Space Grotesk,
   descriere 14px Inter. Asa omul care trece de la un pachet de gazduire la
   domenii nu simte nicio treapta.

   Marcajul e in templates/orderforms/lab404_cart/domainregister.tpl, iar
   verificarea disponibilitatii rămâne a lui WHMCS - noi doar imbracam ce arata
   el si adaugam bifa si bara de jos.
   ===================================================================== */

/* =====================================================================
   NUANTA FUNDALULUI: MAGENTA
   ---------------------------------------------------------------------
   Pagina a pornit verde fiindca poarta clasa "lab404-dom", iar lab404-dom.css ii
   da nuanta 162 - verdele paginii "Alege un domeniu". Am luat clasa pentru
   imbracamintea filtrelor, si a venit si fundalul cu ea.

   CE ERA DEJA LUAT in cos, si de ce nuanta asta: 162 la "Alege un domeniu", 168
   la cos (deci verdele nu mai spunea "alta pagina"), 222 azurul finalizarii, 262
   la configurarea produsului, 280 la pachete. Movul de acolo e spre albastru;
   300 e spre roz, deci nu se confunda cu el.

   SUPRASCRIEREA TINTESTE ".dom-pagina", nu ".lab404-dom": pagina de alegere a
   domeniului poarta doar a doua clasa si rămâne verde - verificat.
   ===================================================================== */
body:has(.dom-pagina) section#main-body { --sec-h: 300; }

/* --- CAPUL PAGINII, ca pe /store/... --- */
.dom-pagina .antet-grup {
    display: grid;
    grid-template-columns: 478fr 416fr;
    gap: 56px;
    align-items: center;
    margin: 0 0 32px;
}

.dom-pagina .antet-grup h1 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 41.6px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--text);
}

.dom-pagina .antet-grup p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.65;
    color: #cbd5e1;
}

/* --- CAUTAREA --- */
.dom-cauta { margin-bottom: 1.6rem; }

.dom-cauta-rand { display: flex; gap: .6rem; }

/* Casuta de cautare. La modul cu sugestii, WHMCS pune un <textarea> cu un
   indiciu de doua randuri; cu inalțimea unui singur rand, al doilea era taiat pe
   jumate si se vedea o bucata de litera sub margine. Ii dam inalțimea lui reala
   si oprim redimensionarea de mana. */
.dom-cauta-rand input[type="text"],
.dom-cauta-rand textarea {
    flex: 1 1 auto;
    min-width: 0;
    padding: .95rem 1.2rem;
    border: 1px solid var(--border-muted);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    font-family: var(--font-body);
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--text);
    resize: none;
}

/* Un singur rand: indiciul are acum o propozitie, nu trei. Cu 88px casuta
   ramanea goala pe jumatate.

   "overflow: hidden", nu "auto": cu "auto" browserul desena bara de derulare in
   dreapta chiar si pentru un singur rand de text, adica doua sageti si un cursor
   intr-o casuta in care scrii un nume de domeniu. N-are ce derula: un domeniu
   incape pe un rand. */
.dom-cauta-rand textarea {
    height: 58px;
    min-height: 58px;
    overflow: hidden;
}

.dom-cauta-rand input[type="text"]::placeholder,
.dom-cauta-rand textarea::placeholder { color: var(--text-muted); }

/* --- BARA LATERALA: NIMIC AICI, SI ASTA E TOT ROSTUL ---
   Pagina foloseste acum acelasi marcaj ca surorile ei din cos - ".sidebar-whmcs"
   cu panouri ".panou" - iar asezarea si imbracamintea vin din
   lab404-cart-comun.css, unde sunt scrise o singura data pentru toate patru
   (.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk).

   AICI ERAU 50 DE RANDURI care refaceau acelasi lucru peste marcajul Bootstrap
   al lui WHMCS ("cart-sidebar" cu ".card-sidebar"): grila de 250px, colturile,
   antetul, randurile, randul curent. Le-am sters odata cu marcajul. Sunt scrise
   a doua oara, deci se pot dezacorda - si chiar se dezacordasera: titlu de 14px
   in loc de 12 majuscule, randuri albe in loc de gri, alt bleu pe randul curent.
   Cateva pierdeau si tacut, fiindca nexus are in theme.min.css reguli de forma
   "body #order-standard_cart .cart-sidebar X", adica (1,2,1), peste care un
   selector de trei clase n-are cum sa treaca.

   Daca bara asta trebuie sa se schimbe, se schimba in foaia comuna - si atunci
   se schimba pe toate paginile cosului deodata, care e chiar ce vrem. */

.dom-cauta-rand input[type="text"]:focus,
.dom-cauta-rand textarea:focus {
    outline: none;
    border-color: rgba(34, 211, 238, .55);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .12);
}

/* Butonul de cautare: degradeul temei. Selectorul repeta ".btn" fiindca
   Bootstrap il coloreaza albastru plin cu ".btn-primary". */
.dom-cauta .btn.btn-primary {
    flex: 0 0 auto;
    /* "width: auto" ANULEAZA O REGULA A LUI WHMCS, nu e de umplutura:
       all.min.css are ".domain-check-availability { width: 100px }", iar clasa
       aia sta pe butonul nostru fiindca base.js o cauta. O latime fixata opreste
       "align-items: stretch" - stretch-ul lucreaza doar peste "auto" - deci
       butonul rămânea la 100px oricat de lata era coloana de deasupra. */
    width: auto;
    /* Pragul e pentru clientul autentificat, care n-are cod: atunci coloana de
       deasupra nu mai are ce sa intinda si butonul ar cadea inapoi la latimea
       cuvantului. */
    min-width: 13rem;
    padding: .7rem 2rem;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
}

.dom-cauta .btn.btn-primary:hover { color: #fff; filter: brightness(1.08); }

/* Marimea textului sta separat, pe ID, dintr-un motiv: regula comuna a butoanelor
   din lab404-cart-comun.css e prefixata cu #order-standard_cart, deci bate orice
   selector de clase de aici. "font-size: .95rem" scris mai sus nu se aplica de
   mult - butonul se desena la 14px, marimea comuna. Cele doua butoane mari ale
   paginii merg la 16px, ca butoanele cardurilor din magazin; randurile de
   rezultate raman la 14, ca actiuni de rand ce sunt. */
body #order-standard_cart.lab404-dom #btnCheckAvailability,
body #order-standard_cart.lab404-dom #domBaraAdauga { font-size: var(--t-base); }

.dom-cauta-optiuni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: .7rem;
}

.dom-bifa-text {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-size: .82rem;
    font-weight: 400;
    color: var(--text-lifted);
}

/* --- ULTIMUL RAND: codul si butonul ---
   Codul statea pe doua randuri, cu casuta intinsa pe toata latimea paginii pentru
   sase caractere. Acum imaginea si casuta stau una langa alta, la latimea lor, iar
   butonul le urmeaza - ordinea in care se completeaza. */
/* Codul pe un rand, butonul pe randul lui, dedesubt. Pe acelasi rand, butonul
   statea lipit de casuta codului si parea ca tine de ea, nu de toata cautarea. */
.dom-cauta-final {
    display: flex;
    flex-direction: column;
    /* "max-content" face coloana exact cat cel mai lat copil al ei - randul cu
       codul - iar "stretch" intinde butonul pana acolo. Deci butonul se termina
       fix unde se termina casuta codului, fara sa scriu nicaieri cati pixeli are
       imaginea generata de WHMCS. Daca imaginea isi schimba latimea, se mută si
       marginea butonului cu ea.

       Inainte era "align-items: flex-start", adica fiecare copil la latimea
       continutului lui: butonul iesea de 100px pentru cinci litere si arata ca o
       nota de subsol, nu ca actiunea principala a paginii. */
    align-items: stretch;
    width: max-content;
    gap: .9rem;
    margin-top: 1rem;
}

/* Indrumarea si perechea imagine+casuta stau lipite, ca sa se citeasca drept un
   singur bloc: distanta dintre ele (.4rem) e mult mai mica decat cea pana la
   buton (.9rem, din ".dom-cauta-final"). Fara gruparea asta, indrumarea ar fi
   fost la fel de departe de codul ei ca de butonul de dedesubt. */
.dom-cod-grup {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.dom-cod-indrumare {
    margin: 0;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 400;
    color: var(--text-lifted);
}

.dom-cod {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
}

/* Imaginea codului: 34px, nu 44. E o formalitate pe drumul catre cautare, nu
   piesa principala a paginii - la 44px statea mai mare decat casuta de langa ea
   si iti lua ochii de la ce ai de facut. */
/* SELECTORUL PRINDE SI ID-UL, nu doar clasa noastra, fiindca la un cod gresit
   base.js inlocuieste imaginea cu una scrisa de el:

     jQuery('#inputCaptchaImage').replaceWith('<img id="inputCaptchaImage" … />')

   In marcajul lui nu e nicio clasa, deci imaginea noua ar fi pierdut regula asta
   si ar fi sarit inapoi la marimea ei naturala - exact in clipa in care omul
   greseste codul si se uita mai atent la ea. */
.dom-cauta-final .lab404-cod-imagine,
.dom-cauta-final #inputCaptchaImage {
    display: block;
    height: 34px;
    width: auto;
    border-radius: 6px;
}

/* Sase caractere, deci ingusta - nu toata banda. Latimea o da acum indiciul
   ("Cod de verificare"), nu continutul: la 7rem, cat ii trebuia codului, textul
   se taia in mijlocul cuvantului. */
.dom-cauta-final .lab404-cod-casuta {
    width: 11.5rem;
    padding: .45rem .75rem;
    border: 1px solid var(--border-muted);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
    font-family: var(--font-mono, monospace);
    font-size: .88rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text);
}

/* Indiciul isi lasa deoparte hainele codului: fara monospace, fara spatiere
   marita si fara majuscule. Cu ele arata ca o valoare deja scrisa in casuta, nu
   ca un indiciu, si nici n-ar fi incaput. Pastreaza-le pe amandoua - Firefox
   citeste "::placeholder", iar WebKit doar prefixul lui. */
.dom-cauta-final .lab404-cod-casuta::placeholder {
    font-family: var(--font-body);
    font-size: .82rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-subtle, rgba(148, 163, 184, .75));
}

.dom-cauta-final .lab404-cod-casuta::-webkit-input-placeholder {
    font-family: var(--font-body);
    font-size: .82rem;
    letter-spacing: normal;
    text-transform: none;
}

.dom-cauta-final .lab404-cod-casuta:focus {
    outline: none;
    border-color: rgba(34, 211, 238, .55);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .12);
}

/* =====================================================================
   REZULTATELE, DUPA MACHETA d11
   ---------------------------------------------------------------------
   Cardul de verdict si tabloul de mai jos sunt desenate de scriptul paginii, din
   ce a raspuns cautarea lui WHMCS. Marcajul lui rămâne in pagina ca sursa de
   date, dar nu se vede: e sub ".dom-sursa".

   O SINGURA BIFA IN TOATA PAGINA. Verdictul e un rand al tabloului, doar aratat
   mare, si poarta aceeasi casuta. Cumpararea se face intr-un singur loc: bara de
   jos. Doua drumuri catre acelasi coș - un buton pe card si bife in tablou - ar
   fi insemnat ca omul trebuie sa ghiceasca pe care sa apuce.
   ===================================================================== */

/* Sursa: ascunsa, dar cu cutie. base.js o comanda cu ".show()" si ".hide()", iar
   noi ne uitam la ce se vede - deci nu poate fi "display: none", altfel tot ce
   scrie el ar parea permanent ascuns si verdictul n-ar iesi niciodata din gri. */
.dom-sursa {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}

/* --- CAT SE CAUTA --- */
.dom-cautam {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 .4rem;
    padding: 1.6rem 1.8rem;
    border: 1px solid var(--border-muted);
    border-radius: 20px;
    background: rgba(255, 255, 255, .02);
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--text-lifted);
}

.dom-cautam[hidden] { display: none; }
.dom-cautam b { font-family: var(--font-mono, monospace); color: var(--text); overflow-wrap: anywhere; }

/* Rotita: un inel caruia ii lipseste un sfert. Fara imagine si fara font de
   iconite - e un cerc cu un chenar si o latura colorata. */
.dom-rotita {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-muted);
    border-top-color: #22d3ee;
    border-radius: 50%;
    animation: dom-rotire .7s linear infinite;
}

@keyframes dom-rotire { to { transform: rotate(360deg); } }

/* Conventia proiectului: miscarea se opreste cand omul a cerut asta din sistem.
   Inelul rămâne, doar ca nemiscat - tot spune "asteapta", prin faptul ca e acolo
   langa text. */
@media (prefers-reduced-motion: reduce) {
    .dom-rotita { animation: none; border-top-color: var(--border-muted); }
}

/* --- CARDUL DE VERDICT --- */
.dom-verdict-loc { margin-bottom: .4rem; }

.dom-vd {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 1.6rem 1.8rem;
    border: 1px solid rgba(74, 222, 128, .32);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(74, 222, 128, .12), rgba(74, 222, 128, .03));
    cursor: pointer;
    transition: border-color .18s, background-color .18s;
}

.dom-vd:hover { border-color: rgba(74, 222, 128, .55); }

.dom-vd.ocupat {
    border-color: rgba(248, 113, 113, .28);
    background: linear-gradient(135deg, rgba(248, 113, 113, .1), rgba(248, 113, 113, .02));
    cursor: default;
}

/* Casuta din card e ACEEASI comanda ca in tablou, doar mai mare. Asta leaga
   vizual cele doua zone: se vede ca e un singur mecanism, nu doua. */
.dom-vd-bifa {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(74, 222, 128, .5);
    border-radius: 9px;
    background: transparent no-repeat center / 18px 18px;
    transition: background-color .16s, border-color .16s;
}

.dom-vd.bifat .dom-vd-bifa {
    border-color: #4ade80;
    background-color: #4ade80;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304210f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.dom-vd.ocupat .dom-vd-bifa {
    border-color: rgba(248, 113, 113, .35);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

.dom-vd-text { flex: 1; min-width: 0; }

.dom-vd-nume {
    margin: 0;
    font-family: var(--font-mono, monospace);
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--text);
    word-break: break-word;
}

.dom-vd-nume i { font-style: normal; color: #4ade80; }
.dom-vd.ocupat .dom-vd-nume { color: var(--text-lifted); }
.dom-vd.ocupat .dom-vd-nume i { color: #f87171; }

.dom-vd-sub { margin: .3rem 0 0; font-size: .95rem; color: var(--text-lifted); }

.dom-vd-pret { flex: 0 0 auto; display: grid; gap: .15rem; text-align: right; }

/* Pretul din card poarta acelasi turcoaz ca totalul din bara de jos: sunt aceeasi
   cifra vazuta in doua locuri, iar culoarea comuna o leaga. */
.dom-vd-pret-mare { font-family: var(--font-mono, monospace); font-size: 1.5rem; color: #22d3ee; }
.dom-vd-pret-mic { font-family: var(--font-mono, monospace); font-size: .8rem; color: var(--text-muted); }

/* --- TABLOUL --- */
.dom-sectiune {
    margin: 2.2rem 0 .2rem;
    padding-bottom: .6rem;
    font-family: var(--font-heading);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.dom-sectiune[hidden], .dom-tbl[hidden] { display: none; }

.dom-tbl { width: 100%; border-collapse: collapse; }

.dom-tbl thead th {
    padding: .55rem .9rem;
    border-bottom: 1px solid var(--border-muted);
    font-family: var(--font-heading);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    white-space: nowrap;
}

.dom-tbl thead th.num { text-align: right; cursor: pointer; user-select: none; }
.dom-tbl thead th.num.sortat { color: #67e8f9; }
.dom-tbl thead th.c-bifa { width: 36px; }

.dom-tbl tbody td {
    padding: .62rem .9rem;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, .06));
    vertical-align: middle;
}

.dom-tbl tbody td.num { text-align: right; font-family: var(--font-mono, monospace); font-size: .85rem; color: var(--text-lifted); }

/* Toata coloana de reinnoire e chihlimbar, nu doar randurile care cresc.
   Am incercat intai numai pe cele care cresc - culoarea ca avertisment - dar
   atunci .eu si .xyz ramaneau gri fiindca au acelasi pret la reinnoire, si
   coloana arata ca si cum acolo ar lipsi ceva. Asa, culoarea marcheaza COLOANA:
   "astea sunt sumele de la anul", indiferent daca s-au schimbat sau nu. */
.dom-tbl tbody td.c-ren { color: #fbbf24; }

.dom-tbl tbody tr { cursor: pointer; }
.dom-tbl tbody tr:hover td { background: rgba(6, 182, 212, .04); }
.dom-tbl tbody tr.bifat td { background: rgba(6, 182, 212, .07); }

/* Randul ocupat se stinge si nu mai raspunde la clic: nu e o alegere. */
.dom-tbl tbody tr.indisponibil { opacity: .42; cursor: default; }
.dom-tbl tbody tr.indisponibil:hover td { background: transparent; }

.dom-tbl-nume { font-family: var(--font-mono, monospace); font-size: 1.05rem; color: var(--text); }
.dom-tbl-nume i { font-style: normal; color: #22d3ee; }

/* Casuta din tablou: aceeasi piesa ca pe card, la marimea randului. */
.dom-bifa-cutie {
    display: inline-block;
    vertical-align: middle;
    width: 17px;
    height: 17px;
    border: 1px solid rgba(148, 163, 184, .5);
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
    transition: background-color .16s, border-color .16s;
}

.dom-tbl tbody tr.bifat .dom-bifa-cutie {
    border-color: #06b6d4;
    background-color: #06b6d4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23030712' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Randul ocupat nu se poate bifa, deci nici casuta lui n-are ce cauta. */
.dom-tbl tbody tr.indisponibil .dom-bifa-cutie { visibility: hidden; }

/* --- ETICHETELE DE STARE --- */
.dom-st {
    display: inline-block;
    padding: .12rem .55rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 600;
}

.dom-st-liber { background: rgba(74, 222, 128, .14); border: 1px solid rgba(74, 222, 128, .4); color: #4ade80; }
.dom-st-luat { background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .35); color: #f87171; }

/* Cat asteptam raspunsul de la registrator. Cele saisprezece extensii se intreaba
   in valuri de patru, deci randurile se coloreaza pe rand, nu deodata. */
.dom-st-astept { background: transparent; border: 1px solid var(--border-muted); color: var(--text-muted); font-weight: 400; }

/* Cand nici a doua incercare n-a raspuns. Nu e rosu - nu e o veste proasta
   despre domeniu, ci o intrebare la care n-am primit raspuns. Subliniat ca sa se
   vada ca se poate apasa. */
.dom-st-eroare {
    background: transparent;
    border: 1px solid rgba(34, 211, 238, .35);
    color: #67e8f9;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dom-tbl tbody tr.de-reincercat .dom-bifa-cutie { visibility: hidden; }

.dom-eticheta {
    padding: .12rem .5rem;
    border: 1px solid rgba(139, 92, 246, .4);
    border-radius: 999px;
    background: rgba(139, 92, 246, .14);
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 600;
    color: #c4b5fd;
}

/* Piesele lui WHMCS pe care le tinem ascunse: butoanele lui de adaugare (bifa
   noastra le tine locul) si incarcatoarele lui. Nu le stergem din marcaj - base.js
   le cauta ca sa scrie in ele starea, pretul si numele domeniului. */
.dom-asteapta, .dom-mai-multe { display: none; }

/* --- FILTRELE DE CATEGORIE ---
   Neutre, cu turcoaz numai pe cea apasata. A fost o vreme roz, ca sa se
   deosebeasca de celelalte unelte colorate din pagina; nu a placut si s-a intors
   la starea de dinainte.

   SE ADUNA, nu se schimba intre ele: filtrul lui WHMCS pune "badge-success" pe
   fiecare categorie apasata si le tine pe toate - verificat, dupa doua clicuri
   raman doua aprinse. De aceea cea aprinsa are fundal, nu doar chenar: cu
   trei-patru aprinse deodata, un contur nu s-ar mai distinge de restul. */
.dom-filtre { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }

/* SELECTOARELE DE AICI IN JOS PORNESC DE LA ".dom-lista-preturi", si nu de moft.
   De cand tabelul e invelit in ".domain-pricing" - ca sa dispara la cautare, cum
   face si la WHMCS - au inceput sa se aplice regulile lor de acolo:

     .domain-pricing .tld-row                       (0,2,0)  padding de 3px
     body #order-standard_cart .domain-pricing
          .tld-filters .badge                       (1,3,1)  fundal alb, colturi 8px

   Regulile mele erau (0,1,0) si (0,2,1), deci pierdeau. Se vedea: randuri lipite
   si categorii mici, albe. Cu invelisul in selector ajung la aceeasi
   specificitate, iar la egalitate castiga foaia care se incarca ultima - asta. */
#order-standard_cart .dom-lista-preturi .dom-filtre a.badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .32rem .8rem;
    border: 1px solid var(--border-muted);
    border-radius: 999px;
    background: transparent;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-lifted);
    text-decoration: none;
    transition: background-color .16s, border-color .16s, color .16s;
}

#order-standard_cart .dom-lista-preturi .dom-filtre a.badge:hover {
    border-color: rgba(6, 182, 212, .45);
    color: var(--text);
    text-decoration: none;
}

/* Cifra de langa nume: mai stinsa decat numele, ca sa se citeasca al doilea. */
#order-standard_cart .dom-lista-preturi .dom-filtre a.badge b {
    font-family: var(--font-mono, monospace);
    font-size: .72rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* Categoria apasata. "badge-success" e clasa pusa de filtrul lui WHMCS. */
#order-standard_cart .dom-lista-preturi .dom-filtre a.badge.badge-success {
    border-color: rgba(6, 182, 212, .45);
    background: rgba(6, 182, 212, .12);
    color: #67e8f9;
}

#order-standard_cart .dom-lista-preturi .dom-filtre a.badge.badge-success b { color: rgba(103, 232, 249, .65); }

/* --- LISTA COMPLETA DE PRETURI --- */
.dom-preturi { border: 1px solid var(--border-muted); border-radius: 14px; overflow: hidden; }

.dom-lista-preturi .dom-preturi-cap,
.dom-lista-preturi .dom-preturi-rand {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    align-items: center;
    gap: 1rem;
    padding: .6rem 1rem;
}

.dom-preturi-cap {
    border-bottom: 1px solid var(--border-muted);
    background: rgba(255, 255, 255, .02);
    font-family: var(--font-heading);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.dom-preturi-cap span:not(:first-child),
.dom-preturi-val { text-align: right; }

.dom-lista-preturi .dom-preturi-rand { border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, .06)); }
.dom-lista-preturi .dom-preturi-rand:last-child { border-bottom: 0; }
.dom-lista-preturi .dom-preturi-rand:hover { background: rgba(255, 255, 255, .02); }

/* RANDUL DIN CATEGORIA ALEASA.
   Filtrul de categorii pune clasa "highlighted", iar standard_cart o picteaza
   "#f3f9fd" - aproape alb. Pe fundalul nostru inchis, randurile alese ieseau
   albe, cu numele extensiei nevazut: text deschis pe alb. Aceeasi nuanta, dar
   in cheia noastra.

   Selectorul repeta ".domain-pricing" fiindca al lor e
   ".domain-pricing .tld-row.highlighted", adica 0,2,0 - la egalitate ar castiga
   cine se incarca ultimul, si nu vreau sa depinda de ordinea foilor. */
.dom-preturi .dom-preturi-rand.highlighted { background: rgba(6, 182, 212, .08); }

.dom-preturi .dom-preturi-rand.highlighted .dom-preturi-tld { color: #67e8f9; }

/* RANDURILE DIN ALTE CATEGORII RAMAN INTREGI.
   Aici au fost o vreme stinse la 45%. Suna bine - iti sare in ochi ce ai filtrat -
   dar in tabel sunt 17 randuri, iar "Popular" are 10: sapte randuri stateau
   permanent decolorate, si la o privire rapida pareau indisponibile, nu "din alta
   categorie".

   Categoriile sunt un ajutor, nu unealta principala: omul vine sa vada preturi.
   Deci toate randurile se citesc la fel, iar cea aleasa doar se coloreaza. */

.dom-preturi-tld {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-mono, monospace);
    font-size: 1.05rem;
    color: var(--text);
}

.dom-preturi-val { font-family: var(--font-mono, monospace); font-size: .85rem; color: var(--text-lifted); }

/* "Indisponibil" nu e un pret, deci nu se imbraca in haine de pret: iese din
   monospace si se stinge. Altfel cuvantul - lung si aliniat in coloana cu
   cifrele - iti ia ochii de la preturile din jurul lui. */
.dom-preturi-fara {
    font-family: var(--font-body);
    font-size: .78rem;
    color: var(--text-subtle, rgba(148, 163, 184, .6));
}

/* --- BARA DE CUMPARARE --- */
.dom-bara {
    position: sticky;
    bottom: 1rem;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.4rem;
    padding: .9rem 1.2rem;
    border: 1px solid rgba(6, 182, 212, .3);
    border-radius: 14px;
    background: #0a1526;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}

.dom-bara[hidden], .dom-bara [hidden] { display: none; }

/* Textul cat nu e nimic bifat. Bara se arata odata cu rezultatele, nu dupa prima
   bifa: indrumarea trebuie citita INAINTE de gest, nu dupa. */
.dom-bara-gol { font-family: var(--font-body); font-size: .85rem; color: var(--text-muted); }

.dom-bara-stanga { display: grid; gap: .15rem; min-width: 0; }
.dom-bara-nr { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; color: var(--text); }
.dom-bara-det { font-family: var(--font-body); font-size: .8rem; color: var(--text-lifted); overflow-wrap: anywhere; }

/* Domeniile alese, in verdele extensiei din cardul de verdict (#4ade80). Verdele
   inseamna un singur lucru in toata pagina - "asta e liber, asta poti lua" - iar
   randul de aici enumera exact ce ai luat. Suma din dreapta rămâne gri: ea nu e
   un domeniu, e un total. */
.dom-bara-nume { color: #4ade80; }

.dom-bara-dreapta { display: flex; align-items: center; gap: 1.2rem; }
.dom-bara-sume { display: grid; gap: .15rem; text-align: right; }
.dom-bara-tot { font-family: var(--font-mono, monospace); font-size: 1.5rem; color: #22d3ee; }

.dom-bara .btn.btn-primary {
    padding: .7rem 1.5rem;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    color: #fff;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
}

.dom-bara .btn.btn-primary:hover { color: #fff; filter: brightness(1.08); }
.dom-bara .btn.btn-primary:disabled { opacity: .6; }

@media (max-width: 991px) {
    .dom-pagina .antet-grup { grid-template-columns: 1fr; gap: 1rem; }
    .dom-pagina .antet-grup h1 { font-size: 30px; }
    .dom-cauta-rand { flex-direction: column; }
    .dom-preturi-cap, .dom-preturi-rand { grid-template-columns: 1.2fr 1fr 1fr; }
    .dom-preturi-cap span:nth-child(3), .dom-preturi-rand span:nth-child(3) { display: none; }
    .dom-bara { flex-direction: column; align-items: stretch; gap: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dom-verdict, .dom-rand { transition: none; }
}