/* =========================================================================
   AFISAREA PE TELEFON SI TABLETA
   =========================================================================

   DE CE UN FISIER NOU, si nu tema.css:
   tema.css se incarca la linia 468 din index.php, dar DUPA ea vin inca zece
   foi de stil pe pagina (produs.css, calculator.css, antet.css, vitrina.css,
   galerie.css, contact.css, montaj.css, legal.css, articol.css,
   ghiduri-legate.css). O regula scrisa in tema.css pierde in fata lor la
   specificitate egala — adica pur si simplu nu se aplica.

   Fisierul asta se incarca ULTIMUL. De aceea regulile de aici pot fi simple:
   la specificitate egala castiga ultima citita.

   Masuratorile din comentarii vin dintr-un audit facut pe cod, nu dintr-un
   browser: nu s-au facut capturi de ecran si nu s-a testat pe telefon real.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. NICIO IMAGINE NU IESE DIN ECRAN

   Bootstrap 4 NU pune `max-width:100%` pe img — o face doar prin clasa
   `.img-fluid`. Sablonul foloseste in schimb `.img-responsive`, care e din
   Bootstrap 3 si NU EXISTA in bundle (verificat: zero aparitii). Deci
   imaginile se afiseaza la latimea lor reala.

   Consecinte masurate: sigla de 330px si poza de „cos gol" de 495px ies din
   ecran si fac pagina sa se miste lateral pe orice telefon.

   `height:auto` are specificitate (0,0,1), deci NU strica regulile care dau
   inaltimi fixe unor poze anume (.galerie-poza img, .pdr-foto img etc.) —
   acelea au specificitate mai mare si castiga.
   ------------------------------------------------------------------------- */
img {
    max-width: 100%;
    height: auto;
}


/* -------------------------------------------------------------------------
   2. SIGLA

   In HTML are width="330" si clasa .img-responsive, care nu exista. La 360px
   latime de ecran raman 300px utili dupa margini — deci sigla iese 30px in
   afara, iar butonul de meniu e impins pe al doilea rand.

   NU se foloseste .img-fluid: in bundle e redefinita ca
   `.img-fluid{width:100%;height:175px;object-fit:fill}` — ar intinde sigla.
   ------------------------------------------------------------------------- */
.navbar-brand-img img {
    width: 230px;
    height: auto;
    transition: none;          /* bundle-ul pune `transition:all 3s` pe sigla */
}

@media (max-width: 575.98px) {
    .navbar-brand-img img { width: 170px; }
}


/* -------------------------------------------------------------------------
   3. BUTONUL DE MENIU — cel mai grav defect de pe telefon

   Sub 992px meniul e strans, deci butonul asta e SINGURA navigatie.
   Bundle-ul ii da `color:rgba(255,255,255,.5)!important`, iar bara ajunge
   transparenta peste fundalul alb al paginii. Alb 50% peste alb = contrast
   1:1. Butonul exista si functioneaza la atingere, dar nu se vede.

   Fixam si fundalul barei explicit: in bundle sunt trei declaratii care se
   bat intre ele, iar care castiga depinde de ordinea din fisierul generat.
   ------------------------------------------------------------------------- */
.navbar.ftco-navbar-light {
    background: #fff !important;
    border-bottom: 1px solid #e4e4e4;
}

.ftco-navbar-light .navbar-toggler {
    color: #1a1a1a !important;
    padding: 12px 6px 12px 16px;   /* tinta de atingere: era ~24px inaltime */
    font-size: 15px;
    line-height: 1.4;
}

.ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
    color: #1a1a1a;
}

/* Bara lipita sus dupa derulare: acelasi tratament, ca sa nu redevina alba
   pe alb. */
.ftco-navbar-light.scrolled {
    background: #fff !important;
    border-bottom: 1px solid #e4e4e4;
}
.ftco-navbar-light.scrolled .navbar-toggler { color: #1a1a1a !important; }
.ftco-navbar-light.scrolled .navbar-nav > .nav-item > .nav-link { color: #1a1a1a; }

/* Continutul antetului era lipit de marginea ecranului, fata de 15px in
   restul paginii. */
@media (max-width: 991.98px) {
    .navbar.ftco-navbar-light { padding-left: 15px; padding-right: 15px; }

    /* Meniul deschis, cand bara e lipita sus, nu se putea derula: ultimele
       voci ieseau din ecran si nu mai puteau fi atinse. */
    .ftco-navbar-light .navbar-collapse {
        max-height: 78vh;
        overflow-y: auto;
    }
}


/* -------------------------------------------------------------------------
   4. TABELUL DIN COS

   `.table{min-width:1000px!important}` — pe telefon, coloana cu totalul,
   adica cifra pentru care omul a intrat in cos, incepe in afara ecranului.
   Invelisul `.cart-list` are `overflow-x:scroll`, deci pagina nu se rupe,
   dar trebuie tras tabelul cu degetul ca sa vezi cat platesti.
   ------------------------------------------------------------------------- */
@media (max-width: 1030px) {
    .cart-list .table { min-width: 0 !important; }

    /* Poza produsului ocupa 100x150px intr-un tabel ingust. */
    .cart-list .table tbody tr td.image-prod .img { width: 64px; height: 84px; }
    .cart-list .table td, .cart-list .table th { padding: .5rem .35rem; }
    .cart-list .table tbody tr td.product-name { width: auto; }
    .cart-list .table tbody tr td.product-name h3 { font-size: 13px; letter-spacing: .5px; }
}

/* Butonul de stergere din cos avea ~31x32px si pictograma invizibila
   (regula de font pierduta la curatarea CSS-ului). */
.cart-list .table td.product-remove a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}


/* -------------------------------------------------------------------------
   5. POZA DE „COS GOL"

   495px reali, fara nicio limita: 165px de derulare laterala la 360px, exact
   pe pagina unde ajunge un vizitator nou care apasa „COSUL MEU".
   Regula 1 o acopera deja, dar o strangem si mai mult, ca sa nu domine
   ecranul.
   ------------------------------------------------------------------------- */
img[src*="empty-cart"] {
    max-width: 260px;
    width: 100%;
    height: auto;
}


/* -------------------------------------------------------------------------
   6. IPHONE NU MAI MARESTE PAGINA LA ATINGEREA UNUI CAMP

   Safari pe iOS mareste automat pagina cand focalizezi un camp cu litera sub
   16px — SI NU O MAI MICSOREAZA. Omul ramane cu formularul taiat pe margini.

   tema.css pune deja 16px pe `.form-control`, dar trei fisiere incarcate DUPA
   ea readuc valori mai mici. Aici le aducem la 16px, cu specificitate mai
   mare decat a lor.

   NU se rezolva cu `user-scalable=no` in viewport: ar bloca marirea si pentru
   cei care chiar au nevoie de ea.
   ------------------------------------------------------------------------- */
.calc-camp-unit input,
.pdr-camp select.form-control,
.contact-formular .form-control,
.subscribe-form .form-control,
select.form-control,
input.form-control,
textarea.form-control {
    font-size: 16px;
}


/* -------------------------------------------------------------------------
   7. TINTE DE ATINGERE

   Pragul recomandat e 44x44px (Apple) / 48x48 (Android). Sub el, degetul
   rateaza. Campurile de formular aveau 38px, butoanele de cantitate 42px,
   butonul de stergere a unui perete din calculator 30px.
   ------------------------------------------------------------------------- */
.form-control,
select.form-control,
input.form-control {
    min-height: 46px;
}

textarea.form-control { min-height: 92px; }

.btn { min-height: 46px; }

.pdr-cantitate button { min-width: 48px; }

/* Butonul de stergere a unui perete din calculator: se largeste SI coloana
   din grila, altfel butonul iese din ea.

   ATENTIE, greseala pe care am facut-o prima data: `1fr` NU se micsoreaza sub
   latimea continutului. Largind ultima coloana de la 30px la 44px si literele
   de la 15,5px la 16px, grila a devenit mai lata decat containerul si cardul
   negru a fost impins in afara ecranului, la dreapta.
   `minmax(0, 1fr)` lasa coloanele sa se stranga. */
.calc-intrari .calc-perete {
    grid-template-columns: 26px minmax(0, 1fr) 16px minmax(0, 1fr) 44px;
}
.calc-intrari .calc-sterge { width: 44px; height: 44px; }

@media (max-width: 520px) {
    .calc-intrari .calc-perete {
        grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 44px;
    }
}

/* Aceeasi capcana pe grila mare: `1fr 340px`. Daca partea din stanga nu se
   poate strange, cardul de 340px iese din ecran. */
.calc-cutie { grid-template-columns: minmax(0, 1fr) 340px; }

@media (max-width: 860px) {
    .calc-cutie { grid-template-columns: minmax(0, 1fr); }
}

/* Copiii unei grile au implicit `min-width: auto`, adica refuza sa coboare
   sub continutul lor. Fara asta, minmax(0,1fr) de mai sus nu ajuta. */
.calc-cutie > *,
.calc-perete > *,
.calc-camp,
.calc-camp-unit { min-width: 0; }

/* Bifele si butoanele radio: patratul vizibil avea ~13px. Se mareste si se
   adauga spatiu de atingere pe eticheta. */
.form-check-input,
input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
}

.form-check,
.form-check-label {
    min-height: 34px;
    line-height: 1.6;
}


/* -------------------------------------------------------------------------
   8. TELEFONUL, VIZIBIL PE TELEFON

   Bara de sus il ascunde sub 992px prin `d-none d-lg-block` — adica exact pe
   dispozitivul de pe care se poate suna. Pe un site care vinde prin telefon,
   asta e cel mai scump lucru ascuns.

   Se face vizibil in subsol si oriunde e marcat asa in antet.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ftco-navbar-light .telefon-antet,
    .antet-telefon,
    a[href^="tel:"].d-none {
        display: inline-flex !important;
        align-items: center;
        min-height: 44px;
    }
}

/* Legaturile de telefon si email din subsol aveau ~29px inaltime si zero
   spatiu intre ele. */
footer a[href^="tel:"],
footer a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}


/* -------------------------------------------------------------------------
   9. TITLURI CARE NU INCAP

   Bundle-ul nu are nicio scara pentru ecrane mici: h1=40px, h2=32px la orice
   latime. Iar titlul „Un singur model. Il facem bine." ramane 40px pe telefon
   — mai mare decat h1-ul paginii.
   ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    h1, .h1 { font-size: 27px; line-height: 1.25; }
    h2, .h2 { font-size: 23px; line-height: 1.3; }
    h3, .h3 { font-size: 19px; }
    h4, .h4 { font-size: 17px; }

    .heading-section, .ftco-section h2 { font-size: 23px; }
}


/* -------------------------------------------------------------------------
   10. ZONA MOARTA A TABLETEI, 768-991px

   Sectiunile-cheie folosesc DOAR `col-lg-*`, care se aplica de la 992px in
   sus. Sub el stau una sub alta, pe toata latimea — deci pe iPad in portret
   cele trei avantaje ocupa trei ecrane in loc de unul.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ftco-services .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* Iconitele celor trei avantaje raman 70px la orice latime — o cincime din
   ecranul unui telefon de 360px, pentru un element decorativ. */
@media (max-width: 575.98px) {
    .ftco-services .services .icon span { font-size: 46px; }
}


/* -------------------------------------------------------------------------
   11. TEXT PREA MIC SI PREA PALID

   Mesajele de eroare de sub campuri erau 12px — se citesc greu afara, in
   lumina. Gri #9a9a9a pe alb da contrast 2,81:1, sub pragul de 4,5:1.
   ------------------------------------------------------------------------- */
.invalid-feedback,
.form-text,
small { font-size: 13.5px; }

.calc-camp-unit label,
.calc-eticheta { color: #6b6b6b; }


/* -------------------------------------------------------------------------
   12. RANDURI PREA LUNGI PE TABLETA

   Paginile de text lung nu au nicio limita de latime: pe tableta ies ~98 de
   caractere pe rand, peste pragul de la care cititul devine obositor.
   ------------------------------------------------------------------------- */
.legal-continut,
.articol-continut,
.ghid-continut { max-width: 46em; }


/* -------------------------------------------------------------------------
   13. CARDUL NEGRU AL CALCULATORULUI

   Pe desktop sta intr-o coloana de 340px, langa campuri. Sub 860px grila
   devine o singura coloana si cardul se intinde pe TOATA latimea — pe o
   tableta ajunge o banda neagra de ~700px.

   Rezultatul arata prost fiindca randurile sunt `space-between`: eticheta
   ramane lipita in stanga, cifra tocmai in dreapta, si intre ele o palma de
   negru gol. „Suprafata de acoperit" si „0 m²" ajung la doua capete de ecran.

   Se limiteaza la latimea la care a fost gandit si se centreaza sub campuri.
   ------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .calc-cutie .calc-rezultat {
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
    }
}

@media (max-width: 400px) {
    .calc-cutie .calc-rezultat { padding: 16px; }
}

/* Cele doua randuri explicative erau 12,5px — sub pragul de la care textul
   se citeste comod pe telefon, mai ales alb pe negru, afara, in lumina. */
.calc-rezultat .calc-echivalent,
.calc-rezultat .calc-transport {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .82);
}