/*
 * leasingautosecondhand.ro
 * ---------------------------------------------------------------------------
 * Temă proprie, nu o revopsire a efficientmotors.ro. Site-ul principal e roșu,
 * Open Sans, banner peste grilă. Aici: verde adânc, serif la titluri, iar
 * numărul care contează — avansul — e singurul element cald din pagină.
 *
 * Se încarcă peste Bootstrap 5, doar pentru grilă și utilitare. Tot ce ține de
 * identitate stă aici.
 */

:root {
    /* Neutrele au o urmă de verde, ca să nu pară gri de inventar. */
    --l-fundal: #f4f6f5;
    --l-suprafata: #ffffff;
    --l-cerneala: #10231f;
    --l-text: #26332f;
    --l-text-secundar: #5c6b66;
    --l-linie: #dde3e0;

    --l-verde: #0d7a63;
    --l-verde-inchis: #08503f;
    --l-verde-palid: #e7f1ee;

    /* Singurul accent cald din pagină. Rezervat avansului. */
    --l-avans: #b26a00;
    --l-avans-palid: #fbf1e2;

    --l-radius: 14px;
    --l-radius-mic: 8px;
    --l-umbra: 0 1px 2px rgba(16, 35, 31, .06), 0 8px 24px -12px rgba(16, 35, 31, .18);

    --l-serif: 'Bitter', Georgia, 'Times New Roman', serif;
    --l-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ─────────────────────────────────────────── baza ── */

body {
    background: var(--l-fundal);
    color: var(--l-text);
    font-family: var(--l-sans);
    font-size: 1rem;
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: var(--l-serif);
    color: var(--l-cerneala);
    font-weight: 600;
    letter-spacing: -.01em;
    text-wrap: balance;
}

h1 { font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.9rem); line-height: 1.15; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem); line-height: 1.2; }
h3 { font-size: 1.2rem; }

a { color: var(--l-verde-inchis); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--l-verde); }

:focus-visible {
    outline: 2px solid var(--l-verde);
    outline-offset: 2px;
    border-radius: 3px;
}

.l-eyebrow {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--l-verde);
}

.l-lead { font-size: 1.1rem; color: var(--l-text-secundar); max-width: 62ch; }

/* ─────────────────────────────────────────── antet ── */

.l-topbar {
    background: var(--l-cerneala);
    color: #b9c9c4;
    font-size: .82rem;
}
.l-topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.l-topbar__row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.5rem;
    justify-content: space-between;
    padding: .5rem 0;
}

.l-header {
    background: var(--l-suprafata);
    border-bottom: 1px solid var(--l-linie);
    position: sticky;
    top: 0;
    z-index: 40;
}
.l-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 0;
}
.l-logo {
    font-family: var(--l-serif);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--l-cerneala);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.l-logo:hover { color: var(--l-verde-inchis); }
.l-logo__mark {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    background: var(--l-verde);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--l-sans);
    font-size: .95rem;
    font-weight: 700;
}
.l-logo__sub {
    display: block;
    font-family: var(--l-sans);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--l-text-secundar);
}

.l-nav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.l-nav a {
    padding: .45rem .7rem;
    border-radius: var(--l-radius-mic);
    font-size: .92rem;
    font-weight: 600;
    color: var(--l-text);
    text-decoration: none;
}
.l-nav a:hover { background: var(--l-verde-palid); color: var(--l-verde-inchis); }
.l-nav a.is-active { color: var(--l-verde-inchis); background: var(--l-verde-palid); }

.l-header__tel {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--l-verde);
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}
.l-header__tel:hover { background: var(--l-verde-inchis); color: #fff; }

@media (max-width: 991px) {
    .l-header { position: static; }
    .l-header__row { flex-wrap: wrap; }
    .l-nav { order: 3; width: 100%; overflow-x: auto; }
}

/* ─────────────────────────────────────────── butoane ── */

.l-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.25rem;
    border-radius: var(--l-radius-mic);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.l-btn--principal { background: var(--l-verde); color: #fff; }
.l-btn--principal:hover { background: var(--l-verde-inchis); color: #fff; }
.l-btn--fantoma { background: transparent; color: var(--l-cerneala); border-color: var(--l-linie); }
.l-btn--fantoma:hover { border-color: var(--l-verde); color: var(--l-verde-inchis); background: var(--l-suprafata); }
.l-btn--wa { background: #1f8a4c; color: #fff; }
.l-btn--wa:hover { background: #176c3b; color: #fff; }
.l-btn--bloc { width: 100%; }

/* ─────────────────────────────────────────── hero ── */

.l-hero {
    background: var(--l-cerneala);
    color: #e8efec;
    padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0;
}
.l-hero h1 { color: #fff; }
.l-hero__lead { color: #b9c9c4; font-size: 1.12rem; max-width: 54ch; margin-top: .9rem; }
.l-hero__actiuni { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.l-hero .l-btn--fantoma { color: #fff; border-color: rgba(255,255,255,.28); }
.l-hero .l-btn--fantoma:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.5); }

/* Trei cifre scurte sub hero: stoc, avans minim, răspuns. */
.l-cifre {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--l-radius);
    overflow: hidden;
    margin-top: 2.2rem;
}
.l-cifra { background: var(--l-cerneala); padding: 1rem 1.15rem; }
.l-cifra__val {
    font-family: var(--l-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.l-cifra__et { font-size: .8rem; color: #9fb3ad; }

/* ─────────────────────────────────────────── secțiuni ── */

.l-sectiune { padding: clamp(2.2rem, 1.5rem + 2.5vw, 3.6rem) 0; }
.l-sectiune--alb { background: var(--l-suprafata); }
.l-sectiune__cap { max-width: 62ch; margin-bottom: 1.8rem; }
.l-sectiune__cap p { color: var(--l-text-secundar); margin-bottom: 0; }

/* Pașii sunt numerotați pentru că sunt chiar o succesiune, nu decor. */
.l-pasi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; }
.l-pas {
    background: var(--l-suprafata);
    border: 1px solid var(--l-linie);
    border-radius: var(--l-radius);
    padding: 1.3rem;
}
.l-sectiune--alb .l-pas { background: var(--l-fundal); }
.l-pas__nr {
    font-family: var(--l-serif);
    font-size: .95rem;
    font-weight: 700;
    color: var(--l-verde);
    display: block;
    margin-bottom: .5rem;
}
.l-pas h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.l-pas p { color: var(--l-text-secundar); font-size: .95rem; margin-bottom: 0; }

/* ─────────────────────────────────────────── card mașină ── */

.l-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.2rem;
}

.l-card {
    background: var(--l-suprafata);
    border: 1px solid var(--l-linie);
    border-radius: var(--l-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .15s ease, transform .15s ease;
}
.l-card:hover { border-color: var(--l-verde); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .l-card { transition: none; } .l-card:hover { transform: none; } }

.l-card__foto { position: relative; aspect-ratio: 5 / 3; background: var(--l-verde-palid); }
.l-card__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l-card__gol {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    padding: 1rem; text-align: center;
    color: var(--l-text-secundar); font-size: .85rem;
}

/* Avansul e primul lucru citit din card, nu prețul. */
.l-card__avans {
    position: absolute;
    left: .7rem;
    bottom: .7rem;
    background: var(--l-suprafata);
    border-radius: 10px;
    padding: .4rem .7rem;
    box-shadow: var(--l-umbra);
    line-height: 1.15;
}
.l-card__avans-et {
    display: block;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--l-text-secundar);
}
.l-card__avans-val {
    font-family: var(--l-serif);
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--l-avans);
    font-variant-numeric: tabular-nums;
}

.l-card__corp { padding: .95rem 1.05rem 1.1rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.l-card__titlu { font-size: 1.02rem; margin: 0; line-height: 1.3; }
.l-card__titlu a { color: var(--l-cerneala); text-decoration: none; }
.l-card__titlu a:hover { color: var(--l-verde-inchis); }

.l-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .55rem;
    font-size: .85rem;
    color: var(--l-text-secundar);
    margin: 0;
    padding: 0;
    list-style: none;
}
.l-card__specs li { display: flex; align-items: center; gap: .55rem; }
.l-card__specs li + li::before { content: '·'; color: var(--l-linie); }

.l-card__subsol {
    margin-top: auto;
    padding-top: .7rem;
    border-top: 1px solid var(--l-linie);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}
.l-card__pret { font-size: .88rem; color: var(--l-text-secundar); }
.l-card__pret strong { color: var(--l-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.l-card__link { font-size: .88rem; font-weight: 700; text-decoration: none; white-space: nowrap; }

/* ─────────────────────────────────────────── pagina mașinii ── */

.l-fisa { padding: 1.8rem 0 3rem; }

.l-galerie__mare { border-radius: var(--l-radius); overflow: hidden; background: var(--l-verde-palid); aspect-ratio: 5 / 3; }
.l-galerie__mare img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l-galerie__mic {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: .5rem;
    margin-top: .5rem;
}
.l-galerie__mic button {
    padding: 0; border: 1px solid var(--l-linie); background: none;
    border-radius: var(--l-radius-mic); overflow: hidden; aspect-ratio: 4 / 3; cursor: pointer;
}
.l-galerie__mic button[aria-current="true"] { border-color: var(--l-verde); border-width: 2px; }
.l-galerie__mic img { width: 100%; height: 100%; object-fit: cover; display: block; }

.l-panou {
    background: var(--l-suprafata);
    border: 1px solid var(--l-linie);
    border-radius: var(--l-radius);
    padding: 1.3rem;
    margin-bottom: 1.1rem;
}
.l-panou h2, .l-panou h3 { font-size: 1.12rem; margin-bottom: .9rem; }

/* Cardul de avans: singurul loc unde apare accentul cald, la dimensiune mare. */
.l-avans-card {
    background: var(--l-avans-palid);
    border: 1px solid #f0dcbc;
    border-radius: var(--l-radius);
    padding: 1.3rem;
    text-align: center;
}
.l-avans-card__et {
    font-size: .75rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--l-avans);
}
.l-avans-card__val {
    display: block;
    font-family: var(--l-serif);
    font-size: clamp(2.1rem, 1.6rem + 2vw, 2.9rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--l-avans);
    font-variant-numeric: tabular-nums;
    margin: .2rem 0 .1rem;
}
.l-avans-card__nota { font-size: .85rem; color: #7a5410; margin-bottom: 1rem; }
.l-avans-card .l-btn { width: 100%; }
.l-avans-card .l-btn + .l-btn { margin-top: .5rem; }

.l-pret-secundar {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid #f0dcbc;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .92rem;
    color: #7a5410;
}
.l-pret-secundar strong { font-size: 1.05rem; color: var(--l-cerneala); font-variant-numeric: tabular-nums; }

.l-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1.5rem; }
.l-spec {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .5rem 0; border-bottom: 1px solid var(--l-linie); font-size: .93rem;
}
.l-spec__et { color: var(--l-text-secundar); }
.l-spec__val { font-weight: 600; text-align: right; }

.l-dotari { font-size: .95rem; }
.l-dotari ul { padding-left: 1.1rem; }

/* ─────────────────────────────────────────── conținut editorial ── */

.l-articol { max-width: 68ch; }
.l-articol h2 { margin-top: 2rem; }
.l-articol h3 { margin-top: 1.4rem; font-size: 1.08rem; }
.l-articol p, .l-articol li { color: var(--l-text); }
.l-articol ul, .l-articol ol { padding-left: 1.2rem; }
.l-articol li { margin-bottom: .4rem; }

.l-checklist { list-style: none; padding: 0; margin: 0; }
.l-checklist li {
    position: relative;
    padding-left: 1.7rem;
    margin-bottom: .6rem;
}
.l-checklist li::before {
    content: '';
    position: absolute;
    left: 0; top: .45em;
    width: 9px; height: 9px;
    border-radius: 2px;
    background: var(--l-verde);
}

.l-faq { border-top: 1px solid var(--l-linie); }
.l-faq__item { border-bottom: 1px solid var(--l-linie); }
.l-faq__item summary {
    padding: 1rem 0;
    font-family: var(--l-serif);
    font-weight: 600;
    font-size: 1.03rem;
    color: var(--l-cerneala);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.l-faq__item summary::-webkit-details-marker { display: none; }
.l-faq__item summary::after { content: '+'; color: var(--l-verde); font-size: 1.3rem; line-height: 1; }
.l-faq__item[open] summary::after { content: '–'; }
.l-faq__item p { color: var(--l-text-secundar); padding-bottom: 1rem; margin: 0; max-width: 68ch; }

.l-nota {
    background: var(--l-verde-palid);
    border-radius: var(--l-radius-mic);
    padding: .9rem 1.1rem;
    font-size: .9rem;
    color: #1d453b;
}

/* ─────────────────────────────────────────── listare ── */

.l-bara {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: 1.3rem;
}
.l-bara__nr { margin: 0; color: var(--l-text-secundar); font-size: .95rem; }
.l-bara__nr strong { color: var(--l-cerneala); font-size: 1.05rem; }
.l-bara__ctrl { display: flex; align-items: center; gap: .5rem; }
.l-bara__ctrl label { font-size: .85rem; color: var(--l-text-secundar); margin: 0; }
.l-bara select {
    border: 1px solid var(--l-linie);
    border-radius: var(--l-radius-mic);
    padding: .4rem 1.9rem .4rem .6rem;
    font-size: .9rem;
    background-color: var(--l-suprafata);
    color: var(--l-text);
}

.l-gol {
    background: var(--l-suprafata);
    border: 1px solid var(--l-linie);
    border-radius: var(--l-radius);
    padding: 2.5rem 1.5rem;
    text-align: center;
}

/* ─────────────────────────────────────────── subsol ── */

.l-footer {
    background: var(--l-cerneala);
    color: #9fb3ad;
    padding: 2.6rem 0 1.6rem;
    margin-top: 3rem;
    font-size: .92rem;
}
.l-footer h2 { color: #fff; font-size: 1rem; margin-bottom: .8rem; }
.l-footer a { color: #d5e2de; text-decoration: none; }
.l-footer a:hover { color: #fff; text-decoration: underline; }
.l-footer ul { list-style: none; padding: 0; margin: 0; }
.l-footer li { margin-bottom: .4rem; }
.l-footer__jos {
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 1.8rem;
    padding-top: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    justify-content: space-between;
    font-size: .85rem;
}

/* ─────────────────────────────────────────── paginare ── */

.cl-pagination .pagination { gap: .3rem; flex-wrap: wrap; }
.cl-pagination .page-link {
    border: 1px solid var(--l-linie);
    border-radius: var(--l-radius-mic);
    color: var(--l-text);
    background: var(--l-suprafata);
}
.cl-pagination .page-item.active .page-link { background: var(--l-verde); border-color: var(--l-verde); color: #fff; }
.cl-pagination .page-item.disabled .page-link { color: #a9b6b2; background: transparent; }
.cl-pagination__info { color: var(--l-text-secundar); font-size: .88rem; margin-top: .7rem; }

/* ─────────────────────── view-uri comune, sub tema de leasing ── */
/*
 * Termenii, politica și formularul de finanțare n-au versiune proprie în
 * temă: se randează din view-urile de bază, cu layout-ul de aici. Folosesc
 * aproape numai clase Bootstrap, care sunt încărcate — mai puțin cele două
 * de mai jos, definite în front-styles.css, pe care tema asta nu o încarcă.
 */
.page-title {
    font-family: var(--l-serif);
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
    color: var(--l-cerneala);
    font-weight: 600;
}
.page-intro-text {
    font-family: var(--l-serif);
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
    color: var(--l-cerneala);
    font-weight: 600;
    line-height: 1.2;
    text-wrap: balance;
}