.footer {
    background-color: var(--color-bg-primary);
}

/* Grid asimetric (1.3:1:1:1.2) cu grid-template-areas — reflow-ul specific per breakpoint
   (4 col desktop → 3 col tabletă → 2 col mobil, cu brand/legal/seller full-width pe mobil)
   e imposibil de reprodus fidel cu auto-flow, deci se folosesc zone denumite.
   GENERAL: zonele sunt asignate prin POZIȚIE (nth-child), NU prin clase modificator în
   markup — deci footer-ul nu se poate „strica" dacă lipsește o clasă, iar markup-ul are
   doar cei 7 copii în ordine (brand, app, Categorii, Companie, Cumpărători, Legal, seller).
   Breakpoint-uri aliniate la Bootstrap: lg (991.98px) tabletă, md (767.98px) mobil.
   column-gap 2rem / row-gap 2.5rem sunt valori non-spacer, rămân custom. */
.footer-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.3fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(300px, 1.2fr);
    grid-template-areas:
        "brand categorii cumparatori seller"
        "app companie legal seller";
    column-gap: 2rem;
    row-gap: 2.5rem;
}

.footer-grid > *:nth-child(1) { grid-area: brand; }
.footer-grid > *:nth-child(2) { grid-area: app; }
.footer-grid > *:nth-child(3) { grid-area: categorii; }
.footer-grid > *:nth-child(4) { grid-area: companie; }
.footer-grid > *:nth-child(5) { grid-area: cumparatori; }
.footer-grid > *:nth-child(6) { grid-area: legal; }
.footer-grid > *:nth-child(7) { grid-area: seller; }

/* ===== Brand ===== */
.footer-description {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    font-size: var(--text-m-size);
    line-height: var(--text-m-line);
    color: var(--color-content-primary);
    max-width: 22rem;
}

.footer-socials {
    gap: 0.75rem;
}

.footer-social-link {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-bg-secondary);
}

/* ===== Descarcă aplicația ===== */
.footer-heading {
    font-size: var(--text-m-size);
    line-height: var(--text-m-line);
    font-weight: var(--font-weight-semibold);
    color: var(--color-content-primary);
    margin-bottom: 1.25rem;
}

.footer-app-badges {
    gap: 0.75rem;
}

.footer-app-badge img {
    height: 2.5rem;
    width: auto;
}

/* ===== Coloane de linkuri ===== */
.footer-link {
    font-size: var(--text-m-size);
    line-height: var(--text-m-line);
    color: var(--color-content-secondary);
}

.footer-link:hover {
    color: var(--color-content-primary);
}

/* ===== Card "Vinde prin Evia" =====
   display/flex-direction/align sunt utilități responsive în markup
   (d-flex flex-column flex-md-row flex-lg-column + align-items-*). Aici rămân doar
   fundal/border/radius. */
.footer-seller {
    background-color: var(--color-bg-partner);
    border: 1px solid var(--color-border-partner);
    border-radius: var(--radius-lg);
}

.footer-seller-image {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}

.footer-seller-title {
    font-size: var(--heading-xs-size);
    line-height: var(--heading-xs-line);
    color: var(--color-content-partner-secondary);
}

.footer-seller-text {
    font-size: var(--text-m-size);
    line-height: var(--text-m-line);
    color: var(--color-content-partner-secondary);
}

.footer-seller-btn {
    background-color: var(--color-content-partner-primary);
    color: var(--color-content-inverse);
    padding: 0.75rem 1.25rem;
}

/* ===== Bara de jos ===== */
.footer-bottom {
    background-color: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-primary);
}

.footer-copyright {
    font-size: var(--text-s-size);
    line-height: var(--text-s-line);
    color: var(--color-content-tertiary);
    white-space: nowrap;
}

.footer-payments {
    gap: 0.75rem;
}

.footer-payments img {
    width: 2.5rem;
    height: 2.5rem;
}

.footer-controls {
    gap: 0.75rem;
}

.footer-lang,
.footer-theme {
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-primary);
}

.footer-lang-option {
    border: 0;
    background: transparent;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-s-size);
    font-weight: var(--font-weight-semibold);
    color: var(--color-content-tertiary);
}

.footer-lang-option-active {
    background-color: var(--color-bg-secondary);
    color: var(--color-content-primary);
}

.footer-theme-option {
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
}

.footer-theme-option-active {
    background-color: var(--color-bg-switch-light);
}

/* ===== Tabletă (md 768 – sub lg 992): 3 coloane, cardul vânzător pe rând întreg,
   orientat row (via utilitățile flex-md-row din markup). Imaginea capătă lățime fixă
   16rem + gap 2rem (valori non-spacer). Breakpoint aliniat la lg (991.98px). ===== */
@media (max-width: 991.98px) {
    .footer-grid {
        grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 1fr) minmax(160px, 1fr);
        grid-template-areas:
            "brand categorii cumparatori"
            "app companie legal"
            "seller seller seller";
    }

    .footer-seller {
        gap: 2rem;
    }

    .footer-seller-image {
        width: 16rem;
        flex-shrink: 0;
        margin-bottom: 0;
    }
}

/* ===== Mobil (sub md 768): 2 coloane, exact ca în „Footer mobil.png" — brand full-width,
   apoi (Descarcă aplicația | Categorii), (Cumpărători | Companie), Informații legale
   full-width, apoi cardul vânzător full-width (revine la column via flex-column din markup).
   Bara de jos stivuită prin `order` (reordonare responsive — cea mai curată în CSS). ===== */
@media (max-width: 767.98px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "brand brand"
            "app categorii"
            "cumparatori companie"
            "legal legal"
            "seller seller";
        row-gap: 2rem;
    }

    .footer-seller-image {
        width: 100%;
        margin-bottom: 1rem;
    }

    .footer-controls {
        order: 1;
    }

    .footer-payments {
        order: 2;
    }

    .footer-copyright {
        order: 3;
    }
}