/* Structura/layout - vezi base_color.css din acelasi folder pt culorile/variabilele temei
   (:root{...}), separate in fisier propriu. */

* {
    box-sizing: border-box;
}

/* Footer "lipit" de josul ecranului cand continutul e scurt (nu ramane la mijloc, cu spatiu gol
   sub el) - .pub-main creste sa umple spatiul ramas, footer-ul si widget-ul de contact raman la
   dimensiunea lor naturala, impinse jos. Pe pagini cu continut lung, functioneaza ca de obicei
   (footer-ul vine dupa continut, fara sa forteze nimic). */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--pub-bg);
    color: var(--pub-text);
}

/* Gutter global pe mobil - rezolva "lipit de margini" peste tot (categorie, cautare, pagini
   compozabile din blocuri etc.) dintr-un singur loc, in loc sa fie reparat pagina cu pagina. */
@media (max-width: 600px) {
    body {
        padding: 0 1px;
    }
}

a {
    color: var(--pub-accent);
    text-decoration: none;
}

a:hover {
    color: var(--pub-accent-hover);
}

/* min(...,100%) inainte de clamp() e ce evita overflow orizontal pe mobil cand valoarea de baza
   e in px (ex: 1200px) - fara el, un "width" fix ar depasi ecranele inguste in loc sa se
   micsoreze; cu %, min(...,100%) practic nu face nimic (procentul e deja sub 100%). clamp() de
   afara aplica apoi limitele min/max (px) din admin, indiferent de unitatea valorii de baza.
   IMPORTANT: si limita MINIMA trebuie trecuta prin min(...,100%) - altfel, daca adminul seteaza
   in Setari > Teme un "Minim (px)" mai mare decat latimea reala a ecranului (posibil pe mobil),
   clamp() ar forta containerul sa fie mai lat decat ecranul insusi, indiferent de <meta viewport>
   - tot ce e in interior (text, imagini) s-ar randa la acea latime mare, browserul ar micsora
   vizual toata pagina ca sa incapa, iar textul ar parea minuscul si imaginile uriase. */
/* Numita "pub-wrap" (nu "pub-container") - un filtru anti-reclama francez (AdGuard) ascunde orice
   element cu clasa exacta "pub-container" sau "pub-block" (##.pub-container/##.pub-block), fiindca
   "pub" inseamna "reclama" in franceza si "container"/"block" sunt cuvinte tipice pt wrapper-e de
   reclame - combinatia bloca practic tot continutul site-ului la vizitatorii cu acel filtru activ. */
.pub-wrap {
    width: clamp(min(var(--pub-container-min), 100%), min(var(--pub-container-width), 100%), var(--pub-container-max));
    margin: 0 auto;
    padding: 0 16px;
}

.pub-main {
    flex: 1 0 auto;
    /* padding stanga/dreapta aici, NU 0 - .pub-main e definit DUPA .pub-wrap mai sus si ambele
       clase stau pe acelasi element (<main class="pub-main pub-wrap">, vezi layout_top.php);
       "padding" e shorthand, deci un "0" aici pe stanga/dreapta suprascria COMPLET padding:0 16px
       de la .pub-wrap (aceeasi specificitate, castiga cel definit mai jos in fisier) - continutul
       ajungea lipit de marginile ecranului, mai ales vizibil pe mobil. */
    padding: 14px 10px;
}

.pub-breadcrumb {
    font-size: 13px;
    color: var(--pub-text-muted);
    margin-bottom: 16px;
}

.pub-breadcrumb a {
    color: var(--pub-text-muted);
}

.pub-title {
    font-size: 24px;
    margin: 0 0 16px;
}

.pub-empty-notice {
    color: var(--pub-text-muted);
    padding: 40px 0;
    text-align: center;
}

/* Formulare/butoane comune */

.pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--pub-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.pub-btn-primary {
    background: var(--pub-accent);
    color: #fff;
}

.pub-btn-primary:hover {
    background: var(--pub-accent-hover);
    color: #fff;
    text-decoration: none;
}

.pub-btn-secondary {
    background: var(--pub-bg);
    border-color: var(--pub-border);
    color: var(--pub-text);
}

.pub-btn-danger {
    background: var(--pub-danger);
    color: #fff;
}

/* Buton ajutator (ex: "Foloseste datele de mai sus" din checkout) - secondary (fundal=fundal
   pagina) era aproape invizibil, doar cu o bordura subtire gri. Contur in culoarea accent, fara
   fundal plin, ca sa se vada clar dar sa nu concureze vizual cu butonul principal (primary). */
.pub-btn-outline-accent {
    background: transparent;
    border-color: var(--pub-accent);
    color: var(--pub-accent);
}

.pub-btn-outline-accent:hover {
    background: var(--pub-accent);
    color: #fff;
    text-decoration: none;
}

.pub-btn-danger:hover {
    opacity: 0.9;
    text-decoration: none;
    color: #fff;
}

.pub-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Modal generic de confirmare (inlocuieste window.confirm() nativ) - vezi public/assets/js/pub_modal.js */

.pub-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1000;
}

.pub-modal-box {
    background: var(--pub-bg);
    border-radius: var(--pub-radius);
    width: 100%;
    max-width: 420px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.pub-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--pub-border);
    font-weight: 700;
}

.pub-modal-body {
    padding: 20px;
}

.pub-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--pub-border);
}

.pub-modal-footer .pub-btn {
    min-height: 38px;
    padding: 8px 16px;
    font-size: 14px;
}

.pub-input {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    font-size: 15px;
    background: var(--pub-header-footer-bg);
}

.pub-alert {
    padding: 10px 14px;
    border-radius: var(--pub-radius);
    font-size: 14px;
    margin-bottom: 16px;
}

.pub-alert-success {
    background: #e9f8ee;
    color: #216a3c;
    border: 1px solid #bfe8cc;
}

.pub-alert-error {
    background: #fdecec;
    color: #a12b2b;
    border: 1px solid #f3c6c6;
}

/* Bara de putere a parolei - vezi public/assets/js/password_strength.js */

.password-strength {
    margin-top: 6px;
    flex: 1 0 100%; /* fara efect in afara unui parinte flex (ex: campul + butonul "Genereaza parola") */
}

.password-strength-track {
    height: 6px;
    border-radius: 3px;
    background: var(--pub-border);
    overflow: hidden;
}

.password-strength-bar {
    height: 100%;
    width: 20%;
    border-radius: 3px;
    transition: width .2s ease, background-color .2s ease;
    background: var(--pub-danger);
}

.password-strength-bar.is-weak { width: 33%; background: var(--pub-danger); }
.password-strength-bar.is-medium { width: 66%; background: #e2a13d; }
.password-strength-bar.is-strong { width: 100%; background: #2e9e58; }

.password-strength-label {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--pub-text-muted);
}

.password-strength-label.is-weak { color: var(--pub-danger); }
.password-strength-label.is-medium { color: #b3791f; }
.password-strength-label.is-strong { color: #2e9e58; }

.pub-form-group {
    margin-bottom: 16px;
}

.pub-form-group label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}

.pub-form-group .pub-input {
    width: 100%;
}

.pub-form-hint {
    color: var(--pub-text-muted);
    font-size: 12px;
    margin-top: 4px;
}