/* =====================================================================
   Lab-404 — carcasa site-ului in WHMCS (footer, si mai jos antetul)
   ---------------------------------------------------------------------
   Portat din public-staging/partials/footer.js, unde stilul stătea intr-un
   <style> injectat impreuna cu marcajul. Aici il ținem intr-un fisier, ca
   sablonul sa rămână doar marcaj.

   Tot ce e in secțiunea de footer e scopat sub #contact, exact ca in
   original, deci nu atinge nimic din tema.

   Nota: originalul cere 'Plus Jakarta Sans' pentru .lf-col h5, dar site-ul
   public nu incarca niciodata fontul (26 de referinte, zero @font-face si
   nimic in cererea catre Google Fonts) - deci acolo cade pe sans-serif-ul
   implicit. Pastram acelasi stack ca sa arate identic; daca fontul se adauga
   pe site, il ia si aici.
   ===================================================================== */


/* =====================================================================
   BANDA PAGINII - una singura, pe toata zona de client
   ---------------------------------------------------------------------
   Bootstrap-ul din nexus opreste ".container" la 1140px, cu 15px de padding -
   adica 1110px utili. Site-ul public lucreaza pe alta masura: ".container" cu
   "max-width: 1400px; padding: 0 2rem" (public-staging/style.css), deci la o
   fereastra de 1400px are 1336px utili, cu 226px mai mult.

   De aici venea impresia ca meniul din WHMCS e inghesuit. Nu era spatierea:
   distanta dintre file e 2.5rem in amandoua, masurata - 40px si intr-una, si in
   cealalta. Banda era cea ingusta, iar aceleasi goluri intr-o banda cu 200px mai
   mica aduc filele mai aproape unele de altele si logoul mai aproape de ele.

   Formula era deja scrisa in tema, dar intr-o foaie care se incarca DOAR pe
   paginile de produs (lab404-pg-pagina.css). Se vedea diferenta: pe /index.php
   logoul incepea la 85px de marginea ferestrei, iar pe /store/gazduire-web la
   39px - acelasi antet, doua asezari. Acum regula sta aici, in foaia de carcasa,
   care se incarca peste tot.

   "100% - 3rem" tine cele 1.5rem de aer pe fiecare latura si pe ecran ingust,
   unde plafonul de 1270 nu mai are ce limita. Restul temei se sprijina deja pe
   cifra asta - vezi pragul de 1450px al butonului de cos, calculat din
   (fereastra - 1270)/2. */
.container {
    width: min(1270px, 100% - 3rem);
    max-width: none;
}


/* =====================================================================
   ANTETUL
   ---------------------------------------------------------------------
   Valorile sunt cele din public-staging (site-chrome.css pentru bara de sus,
   style.css pentru navigatie si buton). Marcajul rămâne cel al lui nexus, ca
   sa nu pierdem collapse-ul de pe mobil si dropdown-urile - deci stilizam
   clasele Bootstrap in loc sa le inlocuim.
   ===================================================================== */

/* "header.lab-header" peste tot unde tema are reguli pe "header.header":
   specificitatea lor e 0,2,1 si un selector doar cu clase pierde in fata ei
   (asa s-a pierdut intai bordura de jos si marginea logo-ului). La egalitate
   castiga foaia asta, incarcata ultima - fara !important. */
header.lab-header {
    /* Pe site antetul e position: fixed. Aici e sticky: acelasi efect vizual,
       dar fara sa scoatem antetul din flux si sa fim nevoiti sa compensam cu
       padding pe body. Pagina de pachete isi masoara inaltimea in --bara-h
       (vezi js/lab404-pachete.js) ca sidebar-ul lipicios sa se opreasca sub el. */
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(3, 7, 18, .92);
    backdrop-filter: blur(25px);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

/* --- Bara subtire de sus --- */
.lh-top {
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    font-size: 13px;
    color: #d4d4d8;
}

/* Pe site .top-bar-content sta INTR-UN .container si de aceea are width: 100%.
   Aici e el insusi containerul, deci lățimea vine din .container - o lasam,
   ca bara de sus sa fie aliniata cu restul paginii. */
.lh-top-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lh-top-left { flex: 1 1 0; display: flex; align-items: center; }
.lh-top-center { font-weight: 500; }
.lh-top-right { flex: 1 1 0; display: flex; justify-content: flex-end; }

/* Cipul de limba/moneda, in stilul selectorului de pe site: chenar subtire,
   codurile in font monospațiat, steagul la 18x12. */
.lh-cip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .22rem .5rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 7px;
    color: #d4d4d8;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}

.lh-cip:hover {
    color: #fff;
    border-color: rgba(34, 211, 238, .45);
    background: rgba(34, 211, 238, .08);
}

.lh-cip .iti-flag {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .4);
}

.lh-cip-cod { font-family: 'Fira Code', ui-monospace, Consolas, monospace; font-weight: 500; letter-spacing: .02em; }
.lh-cip-sep { opacity: .45; }
.lh-cip-chev { width: 12px; height: 12px; opacity: .6; }

/* Aceeasi roz-ul n8n de pe site */
.lh-accent { color: #ea4b71; font-weight: 800; }

.lh-top-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .3s ease;
}

.lh-top-link:hover { color: #06b6d4; }

@media (max-width: 767px) {
    /* Pe site anunțul din centru se mută pe toata lățimea si linkul de suport
       dispare; aici e mai simplu: ascundem anunțul si pastram suportul. */
    .lh-top-center { display: none; }
}

/* --- Rândul cu logo si meniu ---
   navbar.tpl emite <li class="d-block"><a> - fara .nav-item / .nav-link -
   deci targetam pe "> li > a", nu pe clasele Bootstrap. */
/* Rândul cu logo si meniu are EXACT inalțimea celui de pe lab-404.ro: 89,6px.

   Se construieste la fel, nu se fixeaza cu o cifra - pe site e "nav { padding:
   1.2rem 0 }", iar inalțimea iese din cel mai inalt copil, butonul de cont
   (51,2px): 19,2 + 51,2 + 19,2 = 89,6. Cu tot cu bara de sus (40px), antetul are
   129,6px pe amandoua.

   Inainte avea 70px, si nu din alegerea noastra: tema are "header.header .navbar
   { min-height: 70px; padding: 0 }", cu specificitate 0,2,1, iar regula de aici
   era scrisa doar cu clase (0,2,0) - deci se pierdea si padding-ul, si
   inalțimea. De aceea selectorul incepe cu "header.lab-header": la specificitate
   egala castiga foaia asta, care se incarca ultima. min-height: 0 e obligatoriu,
   altfel cei 70px ai temei ar fi ramas ca prag de jos. */
header.lab-header .lh-nav {
    background: transparent;
    padding: 1.2rem 0;
    min-height: 0;
}

/* "header.lab-header", nu ".lab-header": tema are "header.header .navbar-brand
   { margin-right: 0 }" cu specificitate 0,2,1, deci un selector doar cu clase
   pierdea. La specificitate egala castiga foaia asta, care se incarca ultima -
   fara !important. */
header.lab-header .navbar-brand { padding: 0; margin-right: 2.5rem; }
header.lab-header .navbar-brand .logo-img { height: 40px; width: auto; }

/* Tema pune "header.header .navbar-nav { margin: 8px 0 20px }" - o margine
   ASIMETRICA, deci cele doua liste din collapse (meniul si butonul de cont) se
   ridicau cu 6px fata de centrul rândului, in timp ce logo-ul si coșul stăteau
   centrate corect. De aici impresia ca logo-ul e mai jos: de fapt celelalte
   erau mai sus. Le aducem la 0 si totul se centreaza in acelasi punct. */
header.lab-header .navbar-nav { margin-top: 0; margin-bottom: 0; }

@media (min-width: 1200px) {
    /* Pe desktop .lh-tools rămâne goala: coșul e plutitor (vezi mai jos), iar
       butonul de meniu e doar pentru mobil. Fara margine, ca lista goala sa nu
       lase un gol de 20px care sa opreasca butonul de cont inainte de marginea
       benzii. */
    .lab-header .lh-nav > .container { flex-wrap: nowrap; }
    .lab-header .navbar-brand    { order: 1; }
    .lab-header .navbar-collapse { order: 2; flex-grow: 1; }
    .lab-header .lh-tools        { order: 3; }

    /* Meniul centrat intre logo si buton, ca pe site. Marginile auto pe ambele
       laturi absorb spatiul liber in mod egal, deci lista se centreaza si
       .lh-account e impins la marginea din dreapta. De asta am scos "ml-auto"
       de pe el in header.tpl: ar fi intrat in concurenta pe acelasi spatiu. */
    .lab-header .lh-primary { margin-inline: auto; }
}

.lab-header .lh-primary { gap: 2.5rem; }

/* CULOAREA E #cbd5e1, NU TOKENUL --text-secondary, si e o capcana in care am
   intrat deja o data.

   style.css al site-ului scrie ".nav-links a { color: var(--text-secondary) }",
   iar tokenul e #94a3b8 - de acolo l-am luat. Numai ca index.html are, in
   <head>, un bloc <style> propriu care il rescrie:

     .nav-links a { color: #cbd5e1; }   ("brighter, more white")

   Aceeasi specificitate, dar vine dupa, deci castiga. Site-ul afiseaza deci
   #cbd5e1, iar noi afisam tokenul - masurat pe amandoua, 203,213,225 acolo si
   148,163,184 aici. La ochi: al nostru parea stins.

   Daca vreodata te uiti in style.css si te miri de ce nu se potriveste, uita-te
   si in <style>-ul din capul lui index.html. */
.lab-header .lh-primary > li > a {
    color: #cbd5e1;
    font-weight: 500;
    font-size: .95rem;
    padding: .35rem 0;
    transition: color .4s cubic-bezier(.4, 0, .2, 1);
}

/* LINIA DE SUB FILA, LA TRECEREA CU MAUSUL, N-A FOST NICIODATA A NOASTRA.

   theme.min.css al lui nexus are regula lui Bootstrap, neatinsa:
   "a:hover { color: #0056b3; text-decoration: underline }". Specificitatea ei e
   0,1,1, a noastra 0,3,1 - deci culoarea o schimbam noi, dar sublinierea rămâne,
   fiindca n-o pomeneam. Se vedea o dunga sub fiecare fila din meniu, pe care
   site-ul public n-o are.

   Se stinge aici, unde se scrie oricum ce face trecerea cu mausul, nu printr-o
   regula generala pe "a:hover": sublinierea e buna in text curent, unde e
   singurul semn ca un cuvant e legatura. In meniu, semnul e turcoazul. */
.lab-header .lh-primary > li > a:hover,
.lab-header .lh-primary > li.active > a {
    color: #06b6d4;
    text-decoration: none;
}

@media (max-width: 1199px) {
    /* Meniul colapsat curge pe verticala, deci distanta orizontala n-are sens */
    .lab-header .lh-primary { gap: 0; }
    .lab-header .lh-primary > li > a { padding: .5rem 0; }
    /* "header.lab-header", ca sa bata regula de mai sus care duce marginile
       listelor la 0 (aceeasi specificitate 0,2,1, iar asta vine dupa).
       Fara ea, butonul de cont se lipeste de ultimul link din meniul deschis. */
    header.lab-header .lh-account { margin-top: 1rem; }
}

/* --- Contul: butonul cu gradient din dreapta, ca .btn-primary de pe site.
   Targetam prin clasa pusa in header.tpl, nu prin poziție, ca sa nu se rupa
   daca WHMCS schimba ce intra in $secondaryNavbar. --- */
.lab-header .lh-account > li > a {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    /* siluetă de om, la fel ca pe butonul "Cont client" de pe lab-404.ro:
       acelasi desen (lucide "user"), aceeasi grosime de linie si aceeasi
       marime. E desenata din CSS, nu adaugata in marcaj, fiindca rândul vine
       din $secondaryNavbar prin includes/navbar.tpl - un sablon comun tuturor
       elementelor de meniu, in care n-avem unde pune ceva doar pentru contul
       de client fara sa-l copiem intreg in tema. */
    background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    color: #fff;
    padding: .8rem 2rem;
    border-radius: 12px;
    font-weight: 700;
    /* 1.6, ca pe site: cu 1.5 (mostenit din tema) butonul iesea de 49,6px in loc
       de 51,2 si tragea dupa el toata inalțimea rândului. Doi pixeli care se vad
       doar puși unul peste altul - dar rândul se construieste din ei. */
    line-height: 1.6;
    white-space: nowrap;
    box-shadow: 0 10px 20px -5px rgba(6, 182, 212, .4);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1), box-shadow .4s cubic-bezier(.4, 0, .2, 1);
}

.lab-header .lh-account > li > a::before {
    content: '';
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--lh-ico-user) center / contain no-repeat;
    mask: var(--lh-ico-user) center / contain no-repeat;
}

.lab-header {
    --lh-ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.lab-header .lh-account > li > a:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgba(6, 182, 212, .4);
}

/* =====================================================================
   COȘUL PLUTITOR
   ---------------------------------------------------------------------
   Lipit de marginea din dreapta a ferestrei, langa bara de derulare. Sta pe loc
   cat timp derulezi, deci in magazin il ai mereu la indemana - nu doar cat timp
   vezi antetul. Nu apare peste tot: vezi lista de pași si cele doua condiții din
   header.tpl (are ceva in el, si nu esti deja in coș).

   DOUA STARI, doua intrebari diferite:
     · in repaus - iconița si cifra. Raspunde la "cate am adunat?", care e tot ce
       vrei sa afli dintr-o privire. Textul intreg ("1 produs") ocupa de trei ori
       mai mult loc ca sa spuna acelasi lucru, si sta peste conținut.
     · la hover - un panou care se deschide SPRE STANGA si raspunde la "ce anume
       am adunat?": numele serviciului, domeniul, ciclul si suma.

   Spre stanga fiindca butonul e lipit de marginea din dreapta - in partea
   cealalta n-are unde sa se deschida fara sa iasa din fereastra.
   ===================================================================== */

/* Invelisul e cel fix, nu butonul: panoul se aseaza fata de el, iar hover-ul
   trebuie sa cuprinda si butonul, si panoul. Daca ar fi fost pe buton, panoul ar
   fi disparut in clipa in care mouse-ul pleca de pe el ca sa ajunga la lista. */
.lh-cos-invelis {
    position: fixed;
    bottom: 22px;
    right: 18px;
    z-index: 1020;
    display: flex;
    align-items: center;
}

/* INALTIMEA LA CARE STA depinde de cat loc e pe margine, si nu din capriciu.
   Banda paginii are cel mult 1270px si e centrata, deci jgheabul liber din
   dreapta se ingusteaza pe masura ce fereastra scade. Cand nu mai incape acolo,
   butonul ajunge la jumatatea inalțimii exact peste cardurile din pagina - si nu
   arata ca un buton care pluteste, ci ca unul cazut din layout. De aceea:

     · fereastra ingusta -> colțul din dreapta-jos, unde acopera marginea de jos a
       paginii si se citeste ca buton plutitor, cum e obiceiul;
     · fereastra lata -> la jumatatea inalțimii, in jgheabul liber, fara sa atinga
       conținutul.

   PRAGUL DE 1450px E CALCULAT, NU ALES, si s-a schimbat de doua ori odata cu
   butonul: 1420 cand era un patrat de 50px, 1650 cat timp statea deschis cu tot
   textul, si acum 1450, de cand arata doar cifra si masoara ~76px.

   Aritmetica: jgheabul din dreapta e (fereastra - 1270)/2 + 15px de padding, iar
   butonul cere 76px latime + 18px margine + 8px aer fata de conținut. Iese
   fereastra >= 1444, rotunjit la 1450.

   Panoul care se deschide la hover NU intra in socoteala: el acopera conținutul
   dinadins, cateva secunde, si dispare. Butonul e cel care sta permanent. */
@media (min-width: 1450px) {
    .lh-cos-invelis {
        top: calc(50% - 26px);
        bottom: auto;
    }
}

/* --- Butonul --- */
.cart-btn.lh-cos-plutitor {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 52px;
    padding: 0 18px;
    border-radius: 26px;
    white-space: nowrap;

    /* GOL: doar conturul, stins. In pagina nu se vede la incarcare - butonul nici
       nu se randeaza cand coșul e gol - dar butonul trece prin starea asta cand
       stergi ultimul produs fara reincarcare. */
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .14);
    color: #4b5563;
    text-decoration: none;

    transition:
        background-color .35s ease,
        background-image .35s ease,
        border-color .35s ease,
        color .35s ease,
        box-shadow .45s ease,
        transform .3s ease;
}

/* APRINS — are produse in el. */
.cart-btn.lh-cos-plutitor.plin {
    background-image: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 30px -8px rgba(6, 182, 212, .7);
}

.lh-cos-invelis:hover .cart-btn.lh-cos-plutitor.plin {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -8px rgba(6, 182, 212, .8);
}

.cart-btn.lh-cos-plutitor .cart-ico {
    width: 21px;
    height: 21px;
    display: block;
    flex: 0 0 auto;
}

/* Cifra. Nu mai e o bulina lipita peste colț, ci un numar asezat langa iconița:
   pe un buton care oricum se vede doar cand are ceva in el, bulina rosie de
   alarma n-are ce anunța. Id-ul si clasa raman - assets/js/whmcs/
   recommendations.js scrie exact in ".cart-btn .badge". */
.cart-btn.lh-cos-plutitor #cartItemCount {
    position: static;
    min-width: 0;
    height: auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
    font-family: 'Fira Code', ui-monospace, Consolas, monospace;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
}

/* Unda de la adaugare. Clasa se pune si se scoate din js/lab404-cos.js, deci
   ruleaza o singura data, exact cand creste numarul.

   "opacity: 0" e in starea de baza, NU doar in keyframes, si asta nu e o
   redundanta: fara fill-mode, cand o animatie se termina elementul revine la
   stilul lui normal. Cu opacity scrisa doar in @keyframes, starea normala era
   opacity 1 - adica un inel cyan de 2px ramas agatat de buton pentru totdeauna
   dupa prima adaugare. */
.cart-btn.lh-cos-plutitor {
    position: relative;
}

.cart-btn.lh-cos-plutitor.aprinde::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 2px solid #06b6d4;
    opacity: 0;
    animation: lh-cos-unda .85s cubic-bezier(.22, 1, .36, 1) 1;
    pointer-events: none;
}

@keyframes lh-cos-unda {
    from { transform: scale(1);    opacity: .9; }
    to   { transform: scale(1.35); opacity: 0; }
}


/* =====================================================================
   PANOUL CU CONȚINUTUL COȘULUI
   ===================================================================== */
.lh-cos-panou {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    /* 300, nu 268: de cand in panou intra si domeniile, randul are un nume mult
       mai lung decat "Web Advanced" - plus butonul de scoatere din coș. La 268
       randul iesea 304px si trecea 53px in afara panoului, masurat. */
    width: 300px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(15, 23, 42, .97);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .9);

    /* Punctul de origine e coltul din dreapta, cel dinspre buton: panoul creste
       DIN buton, nu apare langa el. */
    transform: translateY(-50%) scale(.96);
    transform-origin: right center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}

.lh-cos-invelis:hover .lh-cos-panou,
.lh-cos-invelis:focus-within .lh-cos-panou {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}

/* Puntea invizibila peste cei 12px dintre panou si buton. Fara ea, mouse-ul
   trece prin gol, iese din invelis si panoul se inchide exact cand incerci sa
   ajungi la el. */
.lh-cos-panou::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 12px;
}

.lh-cos-titlu {
    margin: 0 0 10px;
    font-family: 'Fira Code', ui-monospace, Consolas, monospace;
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #22d3ee;
}

.lh-cos-lista {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    /* "minmax(0, 1fr)", nu "1fr": "1fr" e de fapt "minmax(auto, 1fr)", adica are un
       prag de min-content. Un nume de domeniu e un singur cuvant lung, care nu se
       rupe, deci min-content-ul randului era mai mare decat panoul si randul refuza
       sa se strange - iesea in afara. Cu prag zero, randul se supune latimii. */
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.lh-cos-lista li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

/* --- BUTONUL DE SCOATERE DIN COS ---
   Stins in repaus si roșu la trecerea mouse-ului: e o acțiune care sterge, deci
   n-are ce sa-ti ia ochii cat te uiti la ce ai in coș, dar cand o cauti trebuie
   sa spuna limpede ce face. */
.lh-cos-scoate {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #55607a;
    cursor: pointer;
    /* "baseline" pe <li> ar alinia butonul dupa linia de baza a textului, adica
       vizibil mai jos decat numele. Cu "center" sta pe mijlocul randului. */
    align-self: center;
    transition: background-color .16s, color .16s;
}

.lh-cos-scoate svg { width: 12px; height: 12px; }

.lh-cos-scoate:hover,
.lh-cos-scoate:focus-visible {
    background: rgba(248, 113, 113, .14);
    color: #f87171;
    outline: none;
}

.lh-cos-nume {
    display: grid;
    gap: 2px;
    font-size: .82rem;
    font-weight: 600;
    color: #f8fafc;
    min-width: 0;

    /* "flex: 1 1 auto" ALINIAZA PRETURILE, si asta a fost un decalaj vizibil.
       Randul e flex cu "justify-content: space-between" si trei piese: nume,
       sume, butonul de scoatere. "space-between" imparte spatiul RAMAS in doua
       goluri egale - deci poziția blocului de sume depindea de cat de lat era
       numele de langa el. Un pachet ("Web Basic") si un domeniu lung dadeau doua
       goluri diferite, iar prețul se muta cu ele: masurat, se terminau la 1107 si
       la 1109.

       Cu numele care creste, nu mai rămâne spatiu de impartit: blocul de sume
       ajunge lipit de buton pe fiecare rand, deci toate prețurile se termina pe
       aceeasi verticala. */
    flex: 1 1 auto;
    /* Un domeniu lung se rupe pe doua randuri, nu impinge coloana. "anywhere"
       fiindca n-are unde altundeva sa se rupa: e un singur cuvant, fara spatii.
       Randul creste in inalțime, ceea ce e in regula - numele intreg se poate
       citi, si asta conteaza la un domeniu. */
    overflow-wrap: anywhere;
}

.lh-cos-domeniu {
    font-size: .7rem;
    font-weight: 400;
    color: #7c8aa0;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Fara "nowrap", "text-overflow" nu face nimic: textul se rupe si nu ajunge
       niciodata sa depaseasca. Randul de dedesubt e o eticheta scurta
       ("Înregistrare domeniu"), deci taierea cu trei puncte e potrivita. */
    white-space: nowrap;
}

.lh-cos-sume {
    display: grid;
    justify-items: end;
    gap: 2px;
    flex: 0 0 auto;
    text-align: right;
}

.lh-cos-sume b {
    font-family: 'Fira Code', ui-monospace, Consolas, monospace;
    font-size: .82rem;
    font-weight: 500;
    color: #f8fafc;
}

.lh-cos-ciclu {
    font-size: .66rem;
    color: #7c8aa0;
}

.lh-cos-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .78rem;
    color: #94a3b8;
}

.lh-cos-total b {
    font-family: 'Fira Code', ui-monospace, Consolas, monospace;
    font-size: .95rem;
    color: #f8fafc;
}

.lh-cos-mergi {
    display: block;
    margin-top: 12px;
    padding: .55rem;
    border-radius: 9px;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
}

/* Pe ecran cu deget, hover-ul nu exista: panoul s-ar deschide la prima atingere
   si ar inghiti clicul care trebuia sa duca in coș. Ramane doar butonul. */
@media (hover: none) {
    .lh-cos-panou { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cart-btn.lh-cos-plutitor,
    .lh-cos-panou { transition-duration: .01ms; }
    .cart-btn.lh-cos-plutitor.aprinde::after { animation: none; }
}

/* =====================================================================
   BARA DE SUS CAND ESTI LOGAT
   ---------------------------------------------------------------------
   WHMCS o randeaza deasupra antetului, cu notificarile in stanga si numele
   firmei in dreapta (header.tpl, ramura {if $loggedin}). Tema ii da
   "background-color: var(--grayscale-accented)", adica un gri deschis - pe
   fundalul nostru intunecat ieșea o banda alba peste tot in zona de client.

   "header.lab-header .topbar", nu doar ".topbar": tema o prinde cu
   "header.header .topbar", specificitate 0,2,1. Un selector doar cu clase ar
   fi pierdut.
   ===================================================================== */
header.lab-header .topbar {
    padding: 0;
    background-color: rgba(255, 255, 255, .03);
    border-bottom: 1px solid var(--line-soft);
    color: #94a3b8;
    font-size: .78rem;
}

header.lab-header .topbar .btn {
    padding: .5rem .75rem;
    color: #94a3b8;
    font-size: .78rem;
    line-height: 1.4;
}
header.lab-header .topbar .btn:hover { color: #f8fafc; }

/* Numele firmei si butonul de schimbare cont, din dreapta. */
header.lab-header .topbar .active-client .input-group-text,
header.lab-header .topbar .btn-active-client {
    background: transparent;
    border: 0;
    color: #94a3b8;
    font-size: .78rem;
}
header.lab-header .topbar .btn-active-client:hover { color: #f8fafc; }


/* --- Fereastra de notificari ---
   E un popover Bootstrap, deci vine cu fundal alb si sageata alba. Pe intuneric,
   textul gri dinauntru ajungea gri pe gri. Sageata are DOUA straturi - ::before e
   conturul, ::after e umplutura - si trebuie colorate amandoua, altfel ramane o
   dunga alba lipita de caseta. */
.popover {
    background-color: #0f172a;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .9);
}

.popover .popover-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: #f8fafc;
    font-family: var(--font-heading, inherit);
    font-size: .85rem;
    font-weight: 600;
}

.popover .popover-body { color: #cbd5e1; font-size: .84rem; line-height: 1.6; }
.popover .popover-body a { color: #67e8f9; }

.popover .arrow::before { border-bottom-color: rgba(255, 255, 255, .12); border-top-color: rgba(255, 255, 255, .12); }
.popover .arrow::after  { border-bottom-color: #0f172a; border-top-color: #0f172a; }

/* Lista de alerte dinauntru. */
.popover .client-alerts { margin: 0; padding: 0; list-style: none; }
.popover .client-alerts li + li { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.popover .client-alerts .none { color: #7c8aa0; }


/* =====================================================================
   BANDA "CONFIRMA-TI ADRESA DE E-MAIL"
   ---------------------------------------------------------------------
   WHMCS o randeaza sub antet, pe TOATE paginile, cat timp clientul nu si-a
   confirmat adresa - includes/verifyemail.tpl, inclus din header.tpl.

   N-avea niciun stil la noi. Marcajul e Bootstrap curat, deci pe fundalul
   intunecat al paginilor ieșea o banda deschisa cu buton gri, adica exact
   piesa cea mai vizibila din pagina arata a alt site. Se vede pe pagina de
   dupa comanda, unde e primul lucru peste care da ochiul cuiva care tocmai
   a platit.

   Nuanta e chihlimbarul de avertisment (--warn din tokeni, scris aici direct
   fiindca foaia asta se incarca si in afara wrapperului cu tokeni), nu rosu:
   nu s-a stricat nimic, doar mai e un pas de facut. */
.lab-header + .verification-banner,
.verification-banner {
    padding: .85rem 0;
    background: rgba(251, 191, 36, .09);
    border-bottom: 1px solid rgba(251, 191, 36, .28);
    color: #fcd34d;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: .875rem;
}

.verification-banner .row { align-items: center; }

.verification-banner .fa-exclamation-triangle {
    margin-right: .55rem;
    color: #fbbf24;
}

.verification-banner .text { color: #fde68a; }

/* Butonul de retrimitere: acelasi desen ca butoanele secundare ale temei, nu
   griul Bootstrap. Rămâne discret - actiunea principala e in casuța de e-mail,
   nu aici.

   SELECTORUL E LUNG DINADINS. Butonul are in marcaj si clasa "btn-action", iar
   tema il prinde cu ".verification-banner.email-verification .btn.btn-action",
   adica specificitate 0,4,0. Un selector scurt ca ".verification-banner .btn-…"
   (0,2,0) pierdea, si butonul ramanea gri inchis pe banda chihlimbarie. Aici
   suntem tot la 0,4,0, iar la egalitate castiga foaia asta, care se incarca
   ultima - fara !important. */
.verification-banner.email-verification .btn.btn-resend-verify-email {
    padding: .45rem 1rem;
    background: rgba(251, 191, 36, .14);
    border: 1px solid rgba(251, 191, 36, .4);
    border-radius: 9px;
    color: #fde68a;
    font-size: .8rem;
    font-weight: 600;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.verification-banner.email-verification .btn.btn-resend-verify-email:hover {
    background: rgba(251, 191, 36, .24);
    border-color: rgba(251, 191, 36, .65);
    color: #fffbeb;
}

/* Butonul de inchidere. Tot cu ".btn.close", nu doar ".close": tema il prinde cu
   ".verification-banner .btn.close" si il face gri-inchis (rgba(55,55,55,.5)) -
   pe fundal intunecat, invizibil. */
.verification-banner .btn.close {
    color: #fcd34d;
    opacity: .55;
    text-shadow: none;
    transition: opacity .2s ease, color .2s ease;
}

.verification-banner .btn.close:hover { color: #fffbeb; opacity: 1; }

/* Butonul de meniu de pe mobil, la fel de inalt ca coșul (50px), ca sa arate ca
   sunt din aceeasi familie. De cand coșul e plutitor, e singurul din .lh-tools. */
header.lab-header .lh-tools > li.nav-item > .btn {
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 12px;
    color: #cbd5e1;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(148, 163, 184, .22);
}

header.lab-header .lh-tools > li.nav-item > .btn:hover {
    color: #fff;
    border-color: rgba(34, 211, 238, .45);
}

/* Ascunderea firimiturii - si cea de pe paginile fara breadcrumb, si cea ceruta
   pe anumite pagini - s-a mutat in custom.css, intr-o singura regula. Nu din
   ordine, ci fiindca "display: none" era gresit acolo si trebuia scos din toate
   locurile deodata; motivul intreg e scris langa regula. */

/* Rândul "Powered by WHMCompleteSolution" de la capatul conținutului.
   Nu vine din niciun sablon - il injecteaza nucleul WHMCS, si apare doar pe
   instalarea locala, care e nelicențiata (licenta e legata de domeniu).
   Producția, client.lab-404.ro, nu il afiseaza deloc: licenta de acolo include
   eliminarea brandingului - verificat. Deci regula asta nu ascunde nimic ce ar
   trebui sa fie vizibil in producție; doar aduce copia de dezvoltare la aceeasi
   forma. Selectorul e cat se poate de strict: doar paragraful care conține un
   link catre whmcs.com. */
#main-body .primary-content > p:has(> a[href*="whmcs.com"]) { display: none; }


/* =====================================================================
   FOOTER — design ft3 "cosmic"
   ===================================================================== */

#contact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 0;
    --ink: #f1f5f9;
    --muted: #94a3b8;
    --border: rgba(148, 163, 184, .16);
    --cyan: #22d3ee;
    --blue: #5b93ff;
    --violet: #8b5cf6;
    --green: #34d399;
    --grad: linear-gradient(120deg, #22d3ee, #5b93ff, #8b5cf6);
    --ease: cubic-bezier(.16, 1, .3, 1);
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(34, 211, 238, .10), transparent 60%),
        radial-gradient(1000px 620px at 88% 0%, rgba(139, 92, 246, .12), transparent 62%),
        radial-gradient(900px 700px at 50% 120%, rgba(52, 211, 153, .07), transparent 60%),
        linear-gradient(180deg, #040711, #02040b 60%, #01030a);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
}

#contact::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: rgba(255, 255, 255, .08);
    opacity: 1;
    z-index: 3;
}

#contact .lf-stars {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .9;
    background-image:
        radial-gradient(1.4px 1.4px at 12% 22%, rgba(255, 255, 255, .55), transparent 60%),
        radial-gradient(1.2px 1.2px at 28% 62%, rgba(180, 220, 255, .5), transparent 60%),
        radial-gradient(1px 1px at 44% 14%, rgba(255, 255, 255, .4), transparent 60%),
        radial-gradient(1.6px 1.6px at 61% 44%, rgba(200, 180, 255, .5), transparent 60%),
        radial-gradient(1.1px 1.1px at 73% 78%, rgba(255, 255, 255, .45), transparent 60%),
        radial-gradient(1.3px 1.3px at 86% 30%, rgba(160, 230, 255, .5), transparent 60%),
        radial-gradient(1px 1px at 8% 82%, rgba(255, 255, 255, .35), transparent 60%),
        radial-gradient(1.2px 1.2px at 52% 88%, rgba(220, 200, 255, .4), transparent 60%),
        radial-gradient(1px 1px at 35% 40%, rgba(255, 255, 255, .3), transparent 60%),
        radial-gradient(1.4px 1.4px at 94% 60%, rgba(190, 235, 255, .45), transparent 60%);
    background-repeat: no-repeat;
}

#contact .lf-stars::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 20% 50%, rgba(255, 255, 255, .3), transparent 60%),
        radial-gradient(1px 1px at 66% 18%, rgba(255, 255, 255, .28), transparent 60%),
        radial-gradient(1px 1px at 40% 72%, rgba(255, 255, 255, .26), transparent 60%),
        radial-gradient(1px 1px at 80% 86%, rgba(255, 255, 255, .3), transparent 60%),
        radial-gradient(1px 1px at 15% 10%, rgba(255, 255, 255, .24), transparent 60%);
    background-repeat: no-repeat;
    animation: lf-twinkle 6s var(--ease) infinite;
}

@keyframes lf-twinkle {
    0%, 100% { opacity: .5; }
    50%      { opacity: .95; }
}

#contact .lf-inner {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    padding: 6.5rem 2rem 0;
}

/* CINCI ZONE, nu trei. Subsolul avea marca, partea juridica si serviciile - dar
   nimic pentru cine e deja client, si nimic despre domenii, desi meniul de sus e
   organizat pe Găzduire / VPS / Cloud / Domenii.

   Marca ramane mai lata (1.5fr): are logo, o propozitie, sloganul, nota de TVA si
   datele de contact. Cele patru liste primesc parti egale.

   Distanta pe orizontala scade de la 3rem la 2.2rem: cu cinci coloane in aceeasi
   banda, jgheaburile late lasau listele prea inguste si titlurile se rupeau. */
#contact .lf-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr .8fr 1fr;
    gap: 4rem 2.2rem;
}

#contact .lf-brand .lf-tag {
    color: var(--muted);
    font-size: 1.04rem;
    line-height: 1.6;
    margin: 1.3rem 0 .7rem;
    max-width: 34ch;
}

#contact .lf-brand .lf-slogan {
    font-weight: 700;
    font-size: 1.16rem;
    letter-spacing: -.01em;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

#contact .lf-brand .lf-vat {
    color: #7c8aa0;
    font-size: .88rem;
    line-height: 1.55;
    margin: .85rem 0 1.5rem;
    max-width: 40ch;
}

#contact .lf-contact {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

#contact .lf-contact a {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--muted);
    text-decoration: none;
    font-size: 1.02rem;
    transition: color .25s var(--ease);
}

#contact .lf-contact a svg {
    width: 19px;
    height: 19px;
    color: var(--cyan);
    flex: none;
    filter: drop-shadow(0 0 4px rgba(34, 211, 238, .5));
    transition: transform .25s var(--ease);
}

#contact .lf-contact a:hover { color: var(--cyan); }
#contact .lf-contact a:hover svg { transform: translateY(-1px); }

#contact .lf-col h5 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #dbe4f0;
    margin-bottom: 1.35rem;
    display: flex;
    align-items: center;
    gap: .55rem;
}

#contact .lf-col h5 .lf-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--grad);
    box-shadow: 0 0 8px 1px rgba(91, 147, 255, .75), 0 0 3px rgba(34, 211, 238, .9);
    animation: lf-pulse 3.2s var(--ease) infinite;
}

@keyframes lf-pulse {
    0%, 100% { box-shadow: 0 0 8px 1px rgba(91, 147, 255, .6), 0 0 3px rgba(34, 211, 238, .7); opacity: .85; }
    50%      { box-shadow: 0 0 12px 2px rgba(139, 92, 246, .85), 0 0 5px rgba(34, 211, 238, 1); opacity: 1; }
}

#contact .lf-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

#contact .lf-col a {
    color: var(--muted);
    text-decoration: none;
    font-size: 1rem;
    width: fit-content;
    transition: color .25s var(--ease);
}

#contact .lf-col a:hover { color: var(--cyan); }

#contact .lf-bottom {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 5rem auto 0;
    padding: 2.1rem 2rem 2.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.4rem;
}

#contact .lf-bottom::before {
    content: "";
    position: absolute;
    inset: 0 2rem auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, .28), transparent);
}

#contact .lf-copy {
    color: #8b98ad;
    font-size: .92rem;
    margin: 0;
}

#contact .lf-badges {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
}

#contact .lf-pays {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    flex-wrap: wrap;
}

#contact .lf-logo-link { display: inline-block; line-height: 0; }

#contact .lf-logo {
    height: 48px;
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45));
}

#contact .lf-badge {
    display: inline-flex;
    line-height: 0;
    border-radius: 6px;
    transition: transform .25s var(--ease), filter .25s var(--ease);
}

#contact .lf-badge img {
    height: 46px;
    width: auto;
    display: block;
    border-radius: 6px;
}

#contact .lf-badge:hover { transform: translateY(-2px); filter: brightness(1.08); }

#contact .lf-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s var(--ease);
}

#contact .lf-pay:hover { transform: translateY(-2px); }

#contact .lf-pay img { height: 27px; width: auto; display: block; }
#contact .lf-pay.mc img { height: 40px; }

/* Selectorul de limba/moneda al WHMCS. Nu exista in footerul de pe site,
   dar in zona de client e functional si trebuie sa stea undeva - il punem
   in rândul de jos, imbracat ca restul. */
#contact .lf-locale {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
    color: var(--muted);
    font-family: 'Inter', sans-serif;
    font-size: .9rem;
    cursor: pointer;
    transition: color .25s var(--ease), border-color .25s var(--ease);
}

#contact .lf-locale:hover {
    color: var(--ink);
    border-color: rgba(148, 163, 184, .38);
}

@media (max-width: 860px) {
    /* Marca sus, pe toata latimea, iar listele in doua coloane dedesubt: cinci
       zone n-au loc pe ecranul mediu, oricat le-am ingusta. */
    #contact .lf-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
    #contact .lf-brand { grid-column: 1 / -1; }
    #contact .lf-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    #contact .lf-inner { padding: 3.2rem 1.4rem 0; }
    #contact .lf-grid { grid-template-columns: 1fr; gap: 2.2rem; }
    #contact .lf-bottom {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 2.6rem;
        padding: 1.5rem 1.4rem 2rem;
    }
    #contact .lf-stars::after,
    #contact .lf-col h5 .lf-dot { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    #contact .lf-stars::after,
    #contact .lf-col h5 .lf-dot { animation: none; }
}


/* =====================================================================
   MEGAMENIUL "GĂZDUIRE WEB"
   ---------------------------------------------------------------------
   Panoul lat care se deschide sub randul de meniu, la trecerea cu mausul.
   Marcajul vine din templates/lab-404/includes/navbar.tpl, iar datele - adrese,
   titluri, descrieri, iconite - din includes/hooks/lab404_meniu_public.php.

   NUMAI DIN CSS. Nicio linie de JavaScript si niciun mecanism Bootstrap: fila nu
   mai poarta clasa "dropdown", legatura n-are "dropdown-toggle" si nici
   data-toggle. Doua mecanisme peste acelasi element ar fi insemnat ca al doilea
   inchide ce deschide primul.

   TREI LUCRURI MASURATE INAINTE DE A SCRIE REGULILE:

   1. NICIUN PARINTE NU TAIE. Am parcurs lantul de la <li> pana la <html>: li,
      ul#nav, #mainNavbar, .container, .navbar, header, body, html - toate cu
      "overflow: visible", niciun transform, niciun filter, niciun contain. Deci
      un panou care iese din <li> chiar se vede.

   2. "100vw" AR FI DEPASIT CU EXACT CAT E BARA DE DERULARE. Masurat pe pagina:
      window.innerWidth = 1440, dar documentul are 1425 - cei 15px sunt bara.
      "width: 100vw" numara si bara, deci panoul ar fi iesit cu 15px in dreapta si
      ar fi aparut o derulare pe orizontala pe toata pagina.

      De aceea NU folosim "100vw" si nici "margin-left: calc(-50vw + 50%)". Nu e
      nevoie: ".navbar" e deja "position: relative" si are chiar latimea
      documentului (1425px, masurat). Cu <li> pe "position: static", un panou
      absolut cu "left: 0; right: 0" se raporteaza la ea si iese fix cat
      documentul - acelasi rezultat vizual, fara riscul barei de derulare.

   3. <li> ERA "position: relative", de la clasa ".dropdown" a lui Bootstrap.
      Trecut pe "static", altfel panoul s-ar fi lipit de fila lata de 118px, nu de
      bara.
   ===================================================================== */
.lab-header .nav-item-mega { position: static; }

.lab-header .mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /* OPAC, NU rgba(3,7,18,.98) CA PE SITE.
     *
     * Doi la suta de transparenta par nimic, dar sub panou trece chiar titlul
     * paginii - alb, corp mare - iar el se citea prin fundal. Pe site problema e
     * mascata de "backdrop-filter: blur(30px)", care ar trebui sa amestece ce e
     * dedesubt; aici textul se vedea NECLINTIT, adica filtrul nu se aplica -
     * panoul e intr-un context de stivuire din care n-are ce sa filtreze.
     *
     * Puteam sa umblu la contextul de stivuire, dar n-avea rost: singurul lucru
     * pe care il facea transparenta era sa lase pagina sa razbata prin meniu.
     * Fundalul opac face acelasi desen si scoate si filtrul, care costa GPU
     * degeaba. Petele de lumina de dedesubt raman - ele dau adancimea.
     *
     * E singura abatere voita de la site pe panoul asta. */
    /* LUMINA PANOULUI (2026-08-25).
       Era #030712 plat - mai inchis decat orice alta suprafata din tema - cu doua
       pete la 10%, care abia se ghiceau. Acum e un degrade vertical: panoul se
       deschide de sub antet, deci e mai luminos sus, unde se lipeste de el, si se
       stinge in jos. Asa capata adancime fara sa se aprinda tot dreptunghiul.

       Baza ramane OPACA (vezi motivul de mai sus, cu titlul care razbatea prin
       panou): degradeul alb de 5% e pictat PESTE ea, nu in locul ei. */
    background-color: #060d1c;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, transparent 45%),
        radial-gradient(circle at 80% 40%, rgba(6, 182, 212, .12) 0%, transparent 50%),
        radial-gradient(circle at 20% 60%, rgba(139, 92, 246, .12) 0%, transparent 50%);
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    padding: 3rem 0;

    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity .4s cubic-bezier(.23, 1, .32, 1),
                visibility .4s cubic-bezier(.23, 1, .32, 1),
                transform .4s cubic-bezier(.23, 1, .32, 1);

    z-index: 999;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .9);
}

/* Deschiderea. Si pe ":focus-within", nu doar pe ":hover": cine parcurge meniul
   cu tasta Tab ajunge pe legatura filei, iar fara asta panoul nu s-ar deschide
   niciodata pentru el. */
.lab-header .nav-item-mega:hover .mega-menu,
.lab-header .nav-item-mega:focus-within .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* PE DESKTOP FILA NU NAVIGHEAZA. E doar declansatorul panoului: dedesubt sunt
   cinci drumuri, iar unul dintre ele duce chiar unde ar fi dus ea.

   "pointer-events: none" opreste clicul FARA JavaScript, si fara sa strice
   deschiderea: evenimentul trece prin legatura si ajunge la <li>, care e cel ce
   poarta ":hover". Legatura rămâne in ordinea de tabulare si isi pastreaza
   adresa, deci si tastatura, si cititoarele de ecran functioneaza mai departe.

   PRAGUL E 1200px, NU 992. Antetul temei e "navbar-expand-XL", deci randul
   orizontal de file apare abia de la 1200px in sus; sub el meniul e strans in
   butonul de hamburger. Verificat: la 1024px meniul e colapsat si panoul are
   dimensiune zero. Cu pragul la 992 as fi omorat clicul pe fila taman in zona
   1024-1199, unde ea e un simplu rand dintr-o lista deschisa cu degetul. */
@media (min-width: 1200px) {
    .lab-header .nav-item-mega > a { pointer-events: none; }
}

/* =====================================================================
   TIPOGRAFIA PANOULUI - masurata pe index.html, valoare cu valoare
   ---------------------------------------------------------------------
   Panoul trebuie sa fie o clona, nu o aproximatie: omul care vine de pe site in
   zona de client n-are voie sa simta ca a intrat altundeva. Cifrele de mai jos
   sunt luate cu getComputedStyle de pe index.html, nu alese.

   DE UNDE VENEAU DIFERENTELE. Tema noastra are alt fundal tipografic decat
   site-ul: titlurile h1-h6 primesc "Space Grotesk" (--font-heading), iar
   interlinia mostenita e 1.5. Site-ul foloseste Inter peste tot si 1.6. Deci
   fiecare text din panou iesea cu alt font sau cu alta inalțime de rand, desi
   marcajul era identic. Masurat, opt nepotriviri:

     titlul cartonasului   Space Grotesk 18.4/22.08, spatiere -0.184  ->  Inter 20/24, normal
     descrierea            greutate 400                               ->  500
     "Beneficii incluse"   interlinie 20.4                            ->  21.76
     un beneficiu          interlinie 20.4                            ->  21.76
     titlul indemnului     Space Grotesk, interlinie 20.16            ->  Inter, 26.88
     textul indemnului     interlinie 20.4                            ->  21.76
     butonul               14.4px/700, spatiere 0.144, cutie 164x46   ->  15.2px/500, normal, 182x50
     iconita WordPress     64x64                                      ->  109x109

   MOSTENIREA NU ERA DE AJUNS pentru titluri: o regula scrisa pe "h4" bate
   intotdeauna un font mostenit de la parinte, oricat de specific ar fi
   parintele. De aceea fontul se scrie pe fiecare titlu, nu doar pe panou.

   TOT CE E AICI E INCHIS IN ".lab-header .mega-menu", deci nu atinge niciun text
   din restul portalului - nici titlurile paginilor, nici tabelele, nici barele.
   ===================================================================== */
.lab-header .mega-menu {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    line-height: 1.6;
}

.lab-header .mega-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.lab-header .mega-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    margin-bottom: 3rem;
}

/* "minmax(0, 1fr)", NU "1fr". Sunt acelasi lucru numai cat timp conținutul
   incape: "1fr" inseamna de fapt "minmax(auto, 1fr)", iar podeaua "auto" e
   latimea minima a celulei - la noi iconita de 64px plus cel mai lung cuvant din
   titlu. Masurat la 1200px: grila iesea 1169px intr-un container de 1105, adica
   depasea cu 64. Cu podeaua pe zero, coloanele chiar se stramteaza. */
.lab-header .mega-main {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.25rem;
}

/* --- CARTONASUL ---
   Grila de doua coloane si doua randuri: iconita stanga-sus, titlul langa ea,
   descrierea pe tot randul de dedesubt. "display: contents" pe .mega-info scoate
   invelisul din calcul, ca titlul si textul sa fie ele insele celule. */
.lab-header .mega-card.primary {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 1rem 1.1rem;
    padding: 1.6rem;
    border-radius: 24px;
    align-items: center;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .05);
    text-decoration: none;
    transition: background-color .3s ease, border-color .3s ease,
                transform .3s ease, box-shadow .3s ease;
}

.lab-header .mega-card.primary:hover {
    background: rgba(255, 255, 255, .04);
    border-color: #06b6d4;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4), 0 0 20px rgba(6, 182, 212, .1);
    text-decoration: none;
}

.lab-header .mega-card.primary .mega-info { display: contents; }

.lab-header .mega-card.primary .mega-icon-png {
    grid-row: 1;
    grid-column: 1;
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Logo-ul WordPress are aer desenat in jurul cercului, deci intr-o cutie de 64px
   iese vizibil mai mic decat celelalte patru. Pe site e marit cu 1.7, ceea ce da
   109x109 - masurat acolo. Cutia din grila rămâne tot de 64px, fiindca "transform"
   nu schimba locul pastrat in asezare; doar desenul creste peste el. */
.lab-header .mega-icon-wp {
    transform: scale(1.7);
    transform-origin: center;
}

.lab-header .mega-card.primary h4 {
    grid-row: 1;
    grid-column: 2;
    margin: 0;
    color: #fff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
}

.lab-header .mega-card.primary p {
    grid-row: 2;
    grid-column: 1 / span 2;
    margin: .5rem 0 0;
    color: rgba(255, 255, 255, .5);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.4;
}

/* --- SUBSOLUL PANOULUI --- */
.lab-header .mega-footer {
    border-top: 1px solid rgba(255, 255, 255, .05);
    padding: 3rem 0 1.5rem;
}

.lab-header .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
}

.lab-header .footer-benefits-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.lab-header .footer-title {
    display: block;
    margin-bottom: .5rem;
    font-size: .85rem;
    font-weight: 600;
    color: #06b6d4;
}

.lab-header .benefits-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2.5rem;
    align-items: center;
}

.lab-header .benefit-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: rgba(255, 255, 255, .7);
    font-size: .85rem;
    font-weight: 500;
    white-space: nowrap;
}

.lab-header .benefit-item::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    background: #06b6d4;
    border-radius: 50%;
    box-shadow: 0 0 8px #06b6d4;
}

/* --- CARTONASUL DE ACTIUNE, in dreapta subsolului --- */
.lab-header .mega-cta-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-width: 440px;
    padding: 1.25rem 1.75rem;
    border: 1px solid rgba(6, 182, 212, .15);
    border-radius: 16px;
    background: rgba(6, 182, 212, .05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .3), inset 0 0 15px rgba(6, 182, 212, .05);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1),
                border-color .4s cubic-bezier(.4, 0, .2, 1),
                box-shadow .4s cubic-bezier(.4, 0, .2, 1);
}

.lab-header .mega-cta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 0% 0%, rgba(6, 182, 212, .1) 0%, transparent 70%);
}

.lab-header .mega-cta-card > * { position: relative; z-index: 1; }

.lab-header .mega-cta-card:hover {
    transform: translateY(-3px);
    border-color: #06b6d4;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4), 0 0 20px rgba(6, 182, 212, .15),
                inset 0 0 20px rgba(6, 182, 212, .1);
}

.lab-header .mega-cta-card .cta-info h4 {
    margin: 0;
    color: #fff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -.01em;
}

.lab-header .mega-cta-card .cta-info p {
    margin: .2rem 0 0;
    color: rgba(255, 255, 255, .6);
    font-size: .85rem;
    font-weight: 400;
}

/* Butonul: degradeul si cutia de pe site, masurate acolo - 182x50px, cu spatiu
   interior 12.8/32 si distanta de 6.4 intre eventuala iconita si text. Al nostru
   iesea 164x46 si cu litere mai groase, fiindca ".btn" al lui nexus are alte
   valori (14.4px, greutate 700, spatiere 0.144px).

   Selectorul e lung fiindca ".btn" si ".btn-primary" sunt si ale lui Bootstrap,
   iar acolo butonul e albastru plin. */
.lab-header .mega-cta-card .btn.btn-primary {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .8rem 2rem;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    color: #fff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: normal;
    white-space: nowrap;
    box-shadow: 0 10px 20px -5px rgba(6, 182, 212, .4);
    transition: transform .3s ease, box-shadow .3s ease;
}

.lab-header .mega-cta-card .btn.btn-primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgba(6, 182, 212, .4);
}

/* =====================================================================
   CE E SPECIFIC PANOULUI "SERVERE VPS"
   ---------------------------------------------------------------------
   Tot ce e mai sus - panoul, containerul, cartonasele, tipografia, indemnul -
   e comun cu gazduirea. Aici raman doar trei lucruri care difera: trei coloane
   in loc de cinci, un subsol cu doua zone in loc de una, si un indemn asezat pe
   coloana in loc de rand.
   ===================================================================== */

/* Trei cartonase pe toata latimea, nu cinci. */
.lab-header .mega-main.mega-main-vps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Rack-ul, acelasi desen cu doua palete. Culorile stau aici, nu in sablon: sunt
   design, iar sablonul deseneaza forma o singura data. */
.lab-header .mega-rack-violet {
    --rack-fata: #8b5cf6;
    --rack-umbra: #3b2a72;
    --rack-leduri: #d8c8ff;
    --rack-fanta: #6a4fc0;
}

.lab-header .mega-rack-portocaliu {
    --rack-fata: #fb923c;
    --rack-umbra: #7a3d12;
    --rack-leduri: #ffe3c7;
    --rack-fanta: #d97430;
}

/* Logo-urile tip cuvant (SAGA) au nevoie de latime, nu de un patrat de 64px.

   SELECTORUL REPETA ".mega-card.primary", si nu de prisos: regula care da 64px
   iconitelor din cartonas e ".lab-header .mega-card.primary .mega-icon-png",
   adica 0,3,0. Scrisa scurt, regula asta ar fi fost 0,2,0 si ar fi pierdut tacut
   - masurat, logo-ul iesea tot 64x64 in loc de 104. */
.lab-header .mega-card.primary .mega-icon-wide,
.lab-header .mega-card.primary .mega-icon-logo-saga { width: 104px; }

/* --- SUBSOLUL CU DOUA ZONE ---
   Grila "auto 1px auto": prima coloana cat ii trebuie listei incluse, un fir de
   1px pentru linie, a treia cat ii trebuie celei optionale. "justify-content:
   start" le tine stranse la stanga, ca surplusul de latime sa ramana pentru card.

   TITLURILE SE ALINIAZA PE LINIA DE BAZA, nu la marginea de sus a celulei: au
   corpuri si familii diferite (0.85rem Inter fata de 0.72rem Fira Code), deci
   aliniate pe cutie al doilea ar cadea vizibil mai jos. */
.lab-header .vps-split {
    display: grid;
    grid-template-columns: auto 1px auto;
    justify-content: start;
    column-gap: 2rem;
    row-gap: 1rem;
}

.lab-header .vps-split-title {
    grid-area: 1 / 1;
    align-self: baseline;
    font-size: .85rem;
    font-weight: 600;
    color: #06b6d4;
}

.lab-header .vps-opt-title {
    grid-area: 1 / 3;
    align-self: baseline;
    font-family: 'Fira Code', ui-monospace, monospace;
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #a78bfa;
}

/* Linia coboara pe ambele randuri (1/2/3/3) si se stinge la capete, ca sa nu
   arate a chenar de tabel. */
.lab-header .vps-split-div {
    grid-area: 1 / 2 / 3 / 3;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .12) 12%,
                                rgba(255, 255, 255, .12) 88%, transparent);
}

.lab-header .vps-inc-list {
    grid-area: 2 / 1;
    justify-self: start;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.05rem 2.5rem;
    align-content: start;
}

/* Acelasi pas pe verticala ca la lista inclusa, ca randurile celor doua sa cada
   pe aceleasi linii. */
.lab-header .vps-opt-list {
    grid-area: 2 / 3;
    display: grid;
    gap: 1.05rem;
    align-content: start;
}

/* GREUTATEA E 400, nu 500 ca la lista inclusa - masurat pe site. Nu e o scapare
   acolo: ce e inclus se scrie ceva mai apasat decat ce se adauga la cerere, si
   asta e a doua diferenta dintre cele doua liste, dupa inelul gol. */
.lab-header .vps-opt-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .58);
    white-space: nowrap;
    transition: color .3s ease;
}

/* INEL GOL, nu bulina plina ca la ce e inclus. E singura diferenta dintre cele
   doua liste in afara de pozitie, si e chiar intelesul lor: "la cerere", nu
   "primesti oricum". */
/* "box-sizing: content-box", si nu e o preferinta.

   Bootstrap pune "border-box" pe tot, inclusiv pe pseudoelemente. Cu el, cei 6px
   INCLUD chenarul, deci inelul iesea de 6px in total si cu un gol de 4px in
   mijloc; pe site, unde box-sizing rămâne cel implicit, sunt 6px de conținut plus
   2x1px de chenar, adica 8px.

   Doi pixeli care se vedeau mai departe decat pe inel: itemii "Opțional" ies cu
   2px mai ingusti, deci coloana lor la fel, deci si cardul din dreapta - masurat,
   154 fata de 156 si 624 fata de 622. */
.lab-header .vps-opt-item::before {
    content: '';
    box-sizing: content-box;
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    border: 1px solid rgba(167, 139, 250, .75);
    background: transparent;
    box-shadow: none;
    transition: background-color .3s ease, box-shadow .3s ease;
}

.lab-header .vps-opt-item:hover { color: #fff; }

.lab-header .vps-opt-item:hover::before {
    background: #a78bfa;
    box-shadow: 0 0 9px rgba(167, 139, 250, .8);
}

/* --- INDEMNUL, PE COLOANA ---
   La gazduire cardul e un rand: text la stanga, buton la dreapta. Aici textul e
   de patru ori mai lung, iar pe rand ar fi ramas cu vreo 140px si s-ar fi rupt in
   sapte randuri scurte. Deci coloana, cu butonul lipit de baza.

   "flex: 0 1 auto" PE COLOANA DE BENEFICII, nu "flex: 1", si asta e miezul:
   cu "flex: 1" blocul de beneficii inghite toata latimea libera si o tine goala
   inauntru, deci intre "Opțional" si card apare un gol vizibil. Asa, surplusul il
   ia cardul, iar cele trei distante - lista, linie, "Opțional", card - ies egale. */
.lab-header .mega-footer-vps .footer-content { align-items: stretch; }

.lab-header .mega-footer-vps .footer-benefits-grid { flex: 0 1 auto; }

.lab-header .mega-footer-vps .mega-cta-card {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.5rem 1.75rem;
}

.lab-header .mega-footer-vps .mega-cta-card .cta-info { margin-bottom: 1.25rem; }
.lab-header .mega-footer-vps .mega-cta-card .cta-info p { line-height: 1.5; }

/* Butonul cade la baza cardului oricat de scurt ar fi textul de deasupra. */
.lab-header .mega-footer-vps .mega-cta-card .btn { margin-top: auto; }

.lab-header .vps-cta-arrow {
    width: 16px;
    height: 16px;
    flex: none;
    transition: transform .3s ease;
}

.lab-header .mega-footer-vps .mega-cta-card:hover .vps-cta-arrow { transform: translateX(3px); }

/* Sub 1240px cele doua zone plus cardul nu mai incap pe un rand; cardul coboara
   pe toata latimea in loc sa striveasca listele. */
@media (max-width: 1240px) {
    .lab-header .mega-footer-vps .footer-content { flex-wrap: wrap; }
    .lab-header .mega-footer-vps .mega-cta-card { min-width: 100%; }
}

/* --- SAGEATA DE PE FILA ---
   Fila nu mai are clasa ".dropdown-toggle", deci nu mai primeste triunghiul lui
   Bootstrap. Il desenam noi, cu aceleasi masuri, ca sa arate ca celelalte file
   care chiar au lista derulanta. */
.lab-header .nav-item-mega > a::after {
    content: '';
    display: inline-block;
    border-width: .3em .3em 0;
    border-style: solid solid none;
    border-color: currentcolor transparent;
    margin-left: .521em;
    vertical-align: .255em;
}

/* --- SUB 1280px: TREI CARTONASE PE RAND, NU CINCI ---
   Pragul si valoarea sunt ale site-ului, luate din style.css:440, nu alese de
   mine. Cinci cartonase sub latimea asta ar ramane cu vreo 90px de titlu fiecare,
   dupa ce scazi spatiul interior si iconita de 64px.

   AICI A FOST SI O STIVUIRE A SUBSOLULUI, pusa de mine fiindca masurasem ca
   indemnul depaseste containerul sub ~1307px. Am scos-o: site-ul nu stivuieste
   niciodata subsolul de la gazduire - ramane "row" la orice latime, verificat de
   la 1215 la 1440 - iar panoul nostru arata altfel decat al lui exact in banda
   1200-1280, unde amandoua se vad. Clona bate reparatia: daca vrem indemnul altfel
   asezat acolo, se schimba in amandoua locurile deodata, nu doar la noi.

   (Ce am masurat rămâne adevarat: pe site, intre 1200 si 1280, indemnul iese cu
   34-59px peste marginea containerului. E un defect al sursei, nu al portarii.) */
@media (max-width: 1280px) {
    .lab-header .mega-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- PE ECRAN INGUST ---
   Sub 1200px antetul temei ("navbar-expand-xl") strange meniul in butonul de
   hamburger: filele devin randuri intr-o lista deschisa cu degetul. Un panou lat
   de 1400px n-are nici unde sa incapa, nici cum sa fie deschis - nu exista maus,
   deci nu exista ":hover". Panoul dispare, iar fila redevine ce era: o legatura
   catre gazduirea web.

   Verificat la 1024px: meniul e colapsat si panoul are dimensiune zero chiar si
   fara regula asta - dar "display: none" il scoate si din calculul de inalțime,
   si din ordinea de tabulare, in loc sa-l lase ascuns si accesibil cu Tab. */
@media (max-width: 1199.98px) {
    .lab-header .mega-menu { display: none; }
}

/* Pe laptopurile mici panoul e mai inalt decat ecranul; ii dam derulare proprie,
   in loc sa taie continutul. Inalțimea antetului e masurata in header.tpl si
   tinuta in --bara-h, deci nu e o cifra scrisa de mana. */
@media (min-width: 1200px) {
    .lab-header .mega-menu {
        max-height: calc(100dvh - var(--bara-h, 131px));
        overflow-y: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lab-header .mega-menu,
    .lab-header .mega-card.primary,
    .lab-header .mega-cta-card,
    .lab-header .mega-cta-card .btn.btn-primary { transition: none; }

    .lab-header .mega-card.primary:hover,
    .lab-header .mega-cta-card:hover,
    .lab-header .mega-cta-card .btn.btn-primary:hover { transform: none; }
}

/* =====================================================================
   MEGAMENIUL "DOMENII"
   ---------------------------------------------------------------------
   Nu are stiluri proprii, dinadins: cartonasele de sus sunt cele de la VPS
   (trei pe rand, .mega-card.primary neatins), iar subsolul e cel de la
   Gazduire (beneficii pe trei coloane, cartonas de actiune culcat).

   Prima versiune avea grila de doua coloane, beneficii cu doua randuri si un
   cartonas de actiune in picioare. Fiecare dintre ele arata bine singura, dar
   impreuna faceau al treilea panou sa para din alt site - iar meniul se citeste
   ca un intreg, nu fila cu fila.

   Randul de mai jos repeta ce face si ".mega-main-vps". E scris a doua oara, pe
   clasa noastra, ca panoul de domenii sa nu atarne de numele filei de VPS:
   daca aia se schimba maine, asta nu trebuie sa se strice.
   ===================================================================== */

.lab-header .mega-main-dom {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}