/* ==========================================================================
   EG Import Center NV — design system
   --------------------------------------------------------------------------
   Alle kleuren zijn ongewijzigd overgenomen uit het oude ontwerp; ze staan
   hier alleen nog maar op één plek in plaats van verspreid door de views.
   Leidend principe: elke achtergrond heeft een vaste, contrastrijke
   tekstkleur, zodat niets onleesbaar wordt door het licht/donker-thema.
   ========================================================================== */

:root {
    /* Merkkleuren (onveranderd) */
    --eg-rood: #D90416;
    --eg-rood-donker: #8B000C;
    --eg-zilver: #C9CCD3;
    --eg-metallic: #4A4F59;
    --eg-gunmetal: #1A1C21;
    --eg-zwart: #0B0B0D;
    --eg-licht: #F2F2F2;
    --eg-wit: #ffffff;

    /* Afgeleide tekstkleuren — vastgezet voor leesbaarheid */
    --eg-tekst: var(--eg-gunmetal);          /* body-tekst op licht vlak   */
    --eg-tekst-zacht: var(--eg-metallic);    /* secundaire tekst op licht  */
    --eg-tekst-placeholder: #6E7480;   /* donkerder dan #9198A3: haalt AA */
    --eg-tekst-op-donker: var(--eg-wit);
    --eg-tekst-zacht-op-donker: var(--eg-zilver);

    /* Statuskleuren (onveranderd) */
    --eg-succes: #198754;
    --eg-fout: #dc3545;
    --eg-neutraal: #6c757d;
    --eg-whatsapp: #25D366;
    --eg-whatsapp-hover: #1DA851;

    /* Verlopen */
    --eg-verloop-rood: linear-gradient(135deg, var(--eg-rood-donker) 0%, var(--eg-rood) 100%);
    --eg-verloop-donker: linear-gradient(135deg, var(--eg-gunmetal) 0%, var(--eg-zwart) 100%);
    --eg-verloop-metallic: linear-gradient(135deg, var(--eg-metallic), var(--eg-gunmetal));

    /* Vorm & ritme */
    --eg-radius: 16px;
    --eg-radius-s: 12px;
    --eg-radius-pill: 50rem;
    --eg-rand: 1px solid var(--eg-zilver);
    --eg-rand-zacht: 1px solid var(--eg-licht);

    /* Schaduwen */
    --eg-schaduw-s: 0 2px 10px rgba(11, 11, 13, 0.06);
    --eg-schaduw-m: 0 8px 24px rgba(11, 11, 13, 0.10);
    --eg-schaduw-l: 0 20px 45px rgba(11, 11, 13, 0.16);

    /* Beweging */
    --eg-transitie: 0.3s ease;

    /* Hoogte van de vaste navbar — gebruikt voor scroll-offset */
    --eg-navbar-h: 100px;
}

/* ==========================================================================
   Basis
   ========================================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--eg-navbar-h);
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--eg-tekst);
    background-color: var(--eg-wit);
    -webkit-font-smoothing: antialiased;
}

/* Pagina's met een hero beginnen direct onder de navbar; pagina's zonder hero
   krijgen ruimte via .page-offset (zie hieronder). */
main {
    padding-top: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--eg-tekst);
    letter-spacing: -0.01em;
}

a {
    color: var(--eg-rood);
    text-decoration: none;
    transition: color var(--eg-transitie);
}

a:hover {
    color: var(--eg-rood-donker);
}

::selection {
    background: var(--eg-rood);
    color: var(--eg-wit);
}

:focus-visible {
    outline: 3px solid rgba(217, 4, 22, 0.45);
    outline-offset: 2px;
}

/* Pagina's zonder hero (cart, checkout, account, beheer) moeten onder de
   vaste navbar starten. */
/* .page-offset staat verderop in dit bestand gedefinieerd, ná .section —
   anders zou .section's eigen padding-top die van .page-offset overschrijven
   en schuift de inhoud onder de vaste navbar. */

@media (max-width: 991.98px) {
    :root { --eg-navbar-h: 70px; }
}

@media (max-width: 575.98px) {
    :root { --eg-navbar-h: 65px; }
}

/* ==========================================================================
   Secties
   ========================================================================== */

.section {
    padding: 80px 0;
}

.section-sm {
    padding: 56px 0;
}

/* Pagina's zonder hero (winkelwagen, checkout, account, productpagina,
   beheer): de vaste navbar dekt de bovenkant af, dus tellen we die hoogte op
   bij de sectiepadding. Staat bewust ná .section — anders wint .section's
   eigen padding-top en schuift de inhoud onder de balk. */
.page-offset {
    padding-top: calc(var(--eg-navbar-h) + 56px);
}

@media (max-width: 767.98px) {
    .page-offset {
        padding-top: calc(var(--eg-navbar-h) + 36px);
    }
}

.section-licht  { background: var(--eg-licht); }
.section-wit    { background: var(--eg-wit); }
.section-donker { background: var(--eg-verloop-donker); }
.section-rood   { background: var(--eg-verloop-rood); }

/* Op donkere secties staat álle tekst standaard leesbaar. */
.section-donker,
.section-donker p,
.section-donker li,
.section-rood,
.section-rood p,
.section-rood li {
    color: var(--eg-tekst-zacht-op-donker);
}

.section-donker h1, .section-donker h2, .section-donker h3,
.section-donker h4, .section-donker h5, .section-donker h6,
.section-rood h1, .section-rood h2, .section-rood h3,
.section-rood h4, .section-rood h5, .section-rood h6 {
    color: var(--eg-tekst-op-donker);
}

.section-kop {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

.section-kop h2 {
    font-weight: 700;
}

.section-kop .lead {
    color: var(--eg-tekst-zacht);
    margin-bottom: 0;
}

.section-donker .section-kop .lead,
.section-rood .section-kop .lead {
    color: var(--eg-tekst-zacht-op-donker);
}

/* Accentwoord binnen een kop */
.accent { color: var(--eg-rood); }
.accent-zilver { color: var(--eg-zilver); }

/* ==========================================================================
   Hero
   ========================================================================== */

/* De navbar staat fixed bóven de hero en dekt de bovenkant af. De padding
   telt die hoogte er daarom bij op, anders plakt de titel tegen de balk. */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--eg-verloop-rood);
    padding: calc(var(--eg-navbar-h) + 72px) 0 88px;
    color: var(--eg-tekst-op-donker);
}

/* Decoratieve lichtvlekken — puur visueel, nooit klikbaar. */
.hero::before,
.hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hero::before {
    width: 600px;
    height: 600px;
    top: -260px;
    left: -160px;
    background: rgba(255, 255, 255, 0.05);
}

.hero::after {
    width: 800px;
    height: 800px;
    bottom: -460px;
    right: -220px;
    background: rgba(255, 255, 255, 0.035);
}

.hero > .container {
    position: relative;
    z-index: 1;
}

.hero h1 {
    color: var(--eg-tekst-op-donker);
    font-weight: 700;
}

.hero .lead,
.hero p {
    color: var(--eg-tekst-zacht-op-donker);
}

/* Grote variant voor de homepage: de inhoud staat gecentreerd, met de
   navbarhoogte als extra ruimte bovenaan zodat het midden optisch klopt. */
/* De navbar dekt de bovenkant af, dus we compenseren met een even grote
   marge bovenaan. De inhoud staat daardoor optisch gecentreerd in het deel
   van de hero dat zichtbaar is, in plaats van te hoog te hangen. */
.hero-groot {
    min-height: calc(560px + var(--eg-navbar-h));
    padding: var(--eg-navbar-h) 0 0;
    display: flex;
    align-items: center;
}

.hero-groot > .container {
    padding-top: 48px;
    padding-bottom: 48px;
    width: 100%;
}

.hero h1 {
    line-height: 1.15;
}

.hero .lead {
    max-width: 62ch;
}

/* Op de gecentreerde hero's staat de tekst midden op de pagina. */
.hero .text-center .lead {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991.98px) {
    .hero { padding: calc(var(--eg-navbar-h) + 56px) 0 64px; }
    .hero-groot {
        min-height: calc(480px + var(--eg-navbar-h));
        padding: var(--eg-navbar-h) 0 0;
    }
}

@media (max-width: 767.98px) {
    .hero { padding: calc(var(--eg-navbar-h) + 48px) 0 52px; }
    .hero-groot {
        min-height: auto;
        padding: var(--eg-navbar-h) 0 0;
    }
    .hero-groot > .container {
        padding-top: 48px;
        padding-bottom: 52px;
    }
    .hero h1 { font-size: 2rem; }
    .hero .lead { font-size: 1rem; }
}

@media (max-width: 575.98px) {
    .hero { padding: calc(var(--eg-navbar-h) + 44px) 0 48px; }
    .hero-groot > .container {
        padding-top: 44px;
        padding-bottom: 48px;
    }
    .hero h1 { font-size: 1.75rem; }
}

/* ==========================================================================
   Knoppen
   ========================================================================== */

.btn {
    transition: all var(--eg-transitie);
    font-weight: 600;
}

.btn-eg {
    background: var(--eg-rood);
    color: var(--eg-wit);
    border: none;
    border-radius: var(--eg-radius-pill);
    padding: 0.65rem 1.75rem;
    box-shadow: 0 6px 16px rgba(217, 4, 22, 0.25);
}

.btn-eg:hover,
.btn-eg:focus {
    background: var(--eg-rood-donker);
    color: var(--eg-wit);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(139, 0, 12, 0.32);
}

.btn-eg:disabled,
.btn-eg.disabled {
    background: var(--eg-zilver);
    color: var(--eg-wit);
    box-shadow: none;
    transform: none;
}

/* Donkere knop (gunmetal) — o.a. "Add to cart" */
.btn-eg-donker {
    background: var(--eg-gunmetal);
    color: var(--eg-wit);
    border: none;
    border-radius: var(--eg-radius-pill);
    padding: 0.65rem 1.75rem;
}

.btn-eg-donker:hover,
.btn-eg-donker:focus {
    background: var(--eg-zwart);
    color: var(--eg-wit);
    transform: translateY(-2px);
}

/* Omlijnde variant op licht vlak */
.btn-eg-outline {
    background: transparent;
    color: var(--eg-rood);
    border: 2px solid var(--eg-rood);
    border-radius: var(--eg-radius-pill);
    padding: 0.6rem 1.7rem;
}

.btn-eg-outline:hover,
.btn-eg-outline:focus {
    background: var(--eg-rood);
    color: var(--eg-wit);
    transform: translateY(-2px);
}

/* Omlijnde variant op donker vlak */
.btn-eg-outline-licht {
    background: transparent;
    color: var(--eg-wit);
    border: 2px solid var(--eg-wit);
    border-radius: var(--eg-radius-pill);
    padding: 0.6rem 1.7rem;
}

.btn-eg-outline-licht:hover,
.btn-eg-outline-licht:focus {
    background: var(--eg-wit);
    color: var(--eg-rood);
    transform: translateY(-2px);
}

/* Zilveren omlijning op donker vlak */
.btn-eg-outline-zilver {
    background: transparent;
    color: var(--eg-zilver);
    border: 1px solid var(--eg-zilver);
    border-radius: var(--eg-radius-pill);
    padding: 0.6rem 1.7rem;
}

.btn-eg-outline-zilver:hover,
.btn-eg-outline-zilver:focus {
    background: var(--eg-zilver);
    color: var(--eg-gunmetal);
}

/* Metallic knop op de hero van de homepage */
.btn-eg-metallic {
    background: var(--eg-gunmetal);
    color: var(--eg-wit);
    border: 2px solid var(--eg-zilver);
    border-radius: var(--eg-radius-pill);
    padding: 0.75rem 2.25rem;
}

.btn-eg-metallic:hover,
.btn-eg-metallic:focus {
    background: var(--eg-zwart);
    color: var(--eg-wit);
    border-color: var(--eg-wit);
    transform: translateY(-2px);
}

/* WhatsApp-groen is te licht voor witte tekst (1.98:1), dus donkere tekst. */
.btn-whatsapp {
    background: var(--eg-whatsapp);
    color: var(--eg-gunmetal);
    border: none;
    border-radius: var(--eg-radius-pill);
    font-weight: 700;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
    background: var(--eg-whatsapp-hover);
    color: var(--eg-gunmetal);
}

/* Neutrale secundaire knop — vervangt btn-outline-secondary, dat in
   dark-mode onleesbaar kon worden. */
.btn-eg-neutraal {
    background: transparent;
    color: var(--eg-metallic);
    border: 1px solid var(--eg-zilver);
    border-radius: var(--eg-radius-pill);
    padding: 0.55rem 1.5rem;
}

.btn-eg-neutraal:hover,
.btn-eg-neutraal:focus {
    background: var(--eg-licht);
    color: var(--eg-gunmetal);
    border-color: var(--eg-metallic);
}

/* ==========================================================================
   Kaarten
   --------------------------------------------------------------------------
   Kaarten zijn altijd licht met donkere tekst, ongeacht het thema van de
   browser — zo blijft de inhoud onder alle omstandigheden leesbaar.
   ========================================================================== */

.eg-card {
    background-color: var(--eg-wit);
    color: var(--eg-tekst);
    border: var(--eg-rand-zacht);
    border-radius: var(--eg-radius);
    box-shadow: var(--eg-schaduw-s);
    transition: transform var(--eg-transitie), box-shadow var(--eg-transitie);
}

.eg-card p,
.eg-card li {
    color: var(--eg-tekst-zacht);
}

.eg-card h1, .eg-card h2, .eg-card h3,
.eg-card h4, .eg-card h5, .eg-card h6 {
    color: var(--eg-tekst);
}

/* Kaart die bij hover oplicht */
.eg-card-hover:hover {
    transform: translateY(-8px);
    box-shadow: var(--eg-schaduw-m);
}

/* Kaart met rode streep bovenaan */
.eg-card-top {
    border-top: 4px solid var(--eg-rood);
}

/* Panel op grijze ondergrond, met rode streep links */
.eg-panel {
    background: var(--eg-licht);
    color: var(--eg-tekst);
    border-left: 4px solid var(--eg-rood);
    border-radius: var(--eg-radius);
    padding: 1.75rem;
    transition: transform var(--eg-transitie);
}

.eg-panel p,
.eg-panel li {
    color: var(--eg-tekst-zacht);
}

.eg-panel:hover {
    transform: translateY(-5px);
}

/* Variant die zijwaarts schuift in plaats van omhoog */
.eg-panel-schuif:hover {
    transform: translateX(5px);
}

/* Panel met streep onderaan */
.eg-panel-onder {
    background: var(--eg-licht);
    color: var(--eg-tekst);
    border-bottom: 3px solid var(--eg-rood);
    border-radius: var(--eg-radius);
    padding: 1.75rem;
    transition: transform var(--eg-transitie);
}

.eg-panel-onder p,
.eg-panel-onder li {
    color: var(--eg-tekst-zacht);
}

.eg-panel-onder:hover {
    transform: translateY(-5px);
}

/* Donker informatiepaneel */
.eg-panel-donker {
    background: var(--eg-gunmetal);
    color: var(--eg-tekst-zacht-op-donker);
    border-radius: var(--eg-radius);
    padding: 1.75rem;
}

.eg-panel-donker.heeft-streep {
    border-left: 4px solid var(--eg-rood);
}

.eg-panel-donker h1, .eg-panel-donker h2, .eg-panel-donker h3,
.eg-panel-donker h4, .eg-panel-donker h5, .eg-panel-donker h6 {
    color: var(--eg-tekst-op-donker);
}

.eg-panel-donker p,
.eg-panel-donker li {
    color: var(--eg-tekst-zacht-op-donker);
}

/* Zachte grijze doos zonder accentrand */
.eg-vak {
    background: var(--eg-licht);
    color: var(--eg-tekst);
    border-radius: var(--eg-radius);
    padding: 1.5rem;
}

.eg-vak p,
.eg-vak li {
    color: var(--eg-tekst-zacht);
}

/* ==========================================================================
   Iconen
   ========================================================================== */

/* Rond icoon met rood verloop */
.eg-icoon-rond {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, var(--eg-rood), var(--eg-rood-donker));
    color: var(--eg-wit);
    box-shadow: 0 8px 18px rgba(217, 4, 22, 0.25);
}

.eg-icoon-rond-s {
    width: 70px;
    height: 70px;
}

/* Los icoon in merkrood */
.eg-icoon {
    color: var(--eg-rood);
}

.eg-icoon-zilver { color: var(--eg-zilver); }

/* Rond grijs vlak achter een contact-icoon */
.eg-icoon-vak {
    background: var(--eg-licht);
    border-radius: 50%;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--eg-rood);
}

/* ==========================================================================
   Tegels (Other Services / Mailbox-voordelen)
   --------------------------------------------------------------------------
   Bij hover kleurt de hele tegel rood; tekst en icoon gaan mee naar wit, dus
   het contrast blijft kloppen.
   ========================================================================== */

.eg-tegel {
    background: var(--eg-licht);
    color: var(--eg-tekst);
    border-radius: var(--eg-radius);
    padding: 1.25rem;
    text-align: center;
    height: 100%;
    transition: all var(--eg-transitie);
}

.eg-tegel i,
.eg-tegel .eg-tegel-titel {
    transition: color var(--eg-transitie);
}

.eg-tegel i { color: var(--eg-rood); }

.eg-tegel .eg-tegel-titel {
    color: var(--eg-tekst);
    font-weight: 700;
    margin-bottom: 0;
}

.eg-tegel:hover {
    background: var(--eg-rood);
    transform: translateY(-5px);
    box-shadow: var(--eg-schaduw-m);
}

.eg-tegel:hover i,
.eg-tegel:hover .eg-tegel-titel {
    color: var(--eg-wit);
}

/* ==========================================================================
   Lijsten met vinkjes
   ========================================================================== */

.eg-lijst {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.eg-lijst li {
    position: relative;
    padding-left: 1.85rem;
    margin-bottom: 0.75rem;
    color: var(--eg-tekst);
}

.eg-lijst li::before {
    content: '\f058'; /* fa-check-circle */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.1em;
    color: var(--eg-rood);
}

/* ==========================================================================
   Formulieren
   --------------------------------------------------------------------------
   Velden zijn altijd wit met donkere tekst — nooit afhankelijk van het thema.
   ========================================================================== */

.eg-input,
.eg-form .form-control,
.eg-form .form-select {
    border: 1px solid var(--eg-zilver);
    background-color: var(--eg-wit);
    color: var(--eg-tekst);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.eg-input::placeholder,
.eg-form .form-control::placeholder {
    color: var(--eg-tekst-placeholder);
    opacity: 1;
}

.eg-input:focus,
.eg-form .form-control:focus,
.eg-form .form-select:focus {
    border-color: var(--eg-rood);
    box-shadow: 0 0 0 0.2rem rgba(217, 4, 22, 0.18);
    background-color: var(--eg-wit);
    color: var(--eg-tekst);
}

.eg-input.is-invalid,
.eg-form .form-control.is-invalid {
    border-color: var(--eg-fout);
    background-image: none;
}

/* Label boven een veld */
.eg-label {
    color: var(--eg-tekst-zacht);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

/* Gewoon label, niet in kapitalen */
.eg-label-normaal {
    color: var(--eg-tekst);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.eg-form .invalid-feedback,
.eg-form .help-block {
    color: var(--eg-fout);
    font-size: 0.85rem;
}

.eg-form .form-check-input:checked {
    background-color: var(--eg-rood);
    border-color: var(--eg-rood);
}

.eg-form .form-check-input:focus {
    border-color: var(--eg-rood);
    box-shadow: 0 0 0 0.2rem rgba(217, 4, 22, 0.18);
}

.eg-form .form-check-label {
    color: var(--eg-tekst-zacht);
    cursor: pointer;
}

/* Icoon in een invoerveld */
.eg-input-icoon-wrap {
    position: relative;
}

.eg-input-icoon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--eg-rood);
    font-size: 0.95rem;
    pointer-events: none;
    z-index: 3;
}

.eg-input-met-icoon {
    padding-left: 48px !important;
}

/* ==========================================================================
   Auth-pagina's (login / registreren)
   ========================================================================== */

/* De kaart staat gecentreerd in de ruimte ónder de navbar: de balk dekt de
   bovenkant af, dus die hoogte gaat van de sectiehoogte af én komt als
   padding terug. Zo staat de kaart optisch in het midden. */
.eg-auth-sectie {
    min-height: calc(100vh - var(--eg-navbar-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--eg-navbar-h) + 40px) 15px 48px;
    background: var(--eg-licht);
}

.eg-auth-card {
    background-color: var(--eg-wit);
    color: var(--eg-tekst);
    border: none;
    border-radius: var(--eg-radius);
    box-shadow: var(--eg-schaduw-l);
}

.eg-auth-card h3 { color: var(--eg-tekst); }

.eg-auth-card .eg-auth-sub {
    color: var(--eg-tekst-zacht);
}

.eg-link-rood {
    color: var(--eg-rood);
    font-weight: 600;
}

.eg-link-rood:hover { color: var(--eg-rood-donker); }

@media (max-width: 575.98px) {
    .eg-auth-card .card-body { padding: 1.75rem !important; }
}

/* ==========================================================================
   Meldingen (alerts)
   ========================================================================== */

.eg-alert {
    border: none;
    border-left: 4px solid var(--eg-metallic);
    border-radius: var(--eg-radius-s);
    background: var(--eg-licht);
    color: var(--eg-tekst);
    padding: 1rem 1.25rem;
}

.eg-alert-succes { border-left-color: var(--eg-succes); }
.eg-alert-fout   { border-left-color: var(--eg-fout); }

.eg-alert-succes .eg-alert-icoon { color: var(--eg-succes); }
.eg-alert-fout .eg-alert-icoon   { color: var(--eg-fout); }

/* ==========================================================================
   Badges
   ========================================================================== */

.eg-badge {
    display: inline-block;
    padding: 0.35em 0.7em;
    border-radius: var(--eg-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--eg-wit);
    background: var(--eg-metallic);
}

.eg-badge-rood      { background: var(--eg-rood); }
.eg-badge-donker    { background: var(--eg-rood-donker); }
.eg-badge-groen     { background: var(--eg-succes); }
.eg-badge-grijs     { background: var(--eg-neutraal); }
.eg-badge-metallic  { background: var(--eg-metallic); }

/* ==========================================================================
   Tabellen
   ========================================================================== */

.eg-tabel-wrap {
    background: var(--eg-wit);
    border: var(--eg-rand-zacht);
    border-radius: var(--eg-radius);
    overflow: hidden;
}

.eg-tabel {
    margin-bottom: 0;
    --bs-table-bg: var(--eg-wit);
    --bs-table-color: var(--eg-tekst);
    color: var(--eg-tekst);
}

.eg-tabel thead th {
    background: var(--eg-licht);
    color: var(--eg-tekst-zacht);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--eg-zilver);
    white-space: nowrap;
}

.eg-tabel td {
    color: var(--eg-tekst);
    vertical-align: middle;
    border-color: var(--eg-licht);
}

/* ==========================================================================
   Prijzen & totalen
   ========================================================================== */

.eg-prijs {
    color: var(--eg-rood);
    font-weight: 700;
}

.eg-prijs-groot {
    color: var(--eg-rood);
    font-weight: 700;
    font-size: 2rem;
}

/* ==========================================================================
   Lege staat (lege winkelwagen, geen producten)
   ========================================================================== */

.eg-leeg {
    text-align: center;
    padding: 64px 16px;
}

.eg-leeg i {
    color: var(--eg-zilver);
    margin-bottom: 1.5rem;
}

.eg-leeg h2 {
    color: var(--eg-tekst);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.eg-leeg p {
    color: var(--eg-tekst-zacht);
}

/* ==========================================================================
   CTA-blok
   ========================================================================== */

.eg-cta {
    background: var(--eg-verloop-donker);
    border: 1px solid var(--eg-zilver);
    border-radius: var(--eg-radius);
    padding: 3rem;
    text-align: center;
}

.eg-cta h3 {
    color: var(--eg-tekst-op-donker);
    font-weight: 700;
    margin-bottom: 1rem;
}

.eg-cta p {
    color: var(--eg-tekst-zacht-op-donker);
    margin-bottom: 1.5rem;
}

@media (max-width: 575.98px) {
    .eg-cta { padding: 2rem 1.25rem; }
}

/* ==========================================================================
   Productkaart (webstore)
   ========================================================================== */

.eg-product-card {
    background: var(--eg-wit);
    color: var(--eg-tekst);
    border: var(--eg-rand-zacht);
    border-radius: var(--eg-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform var(--eg-transitie), box-shadow var(--eg-transitie);
}

.eg-product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--eg-schaduw-m);
}

.eg-product-media {
    position: relative;
    height: 200px;
    background: var(--eg-licht);
    display: flex;
    align-items: center;
    justify-content: center;
}

.eg-product-media img {
    max-height: 200px;
    max-width: 100%;
    object-fit: cover;
}

.eg-product-media .eg-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.eg-product-body {
    padding: 1rem 1rem 0;
    flex-grow: 1;
}

.eg-product-titel {
    color: var(--eg-tekst);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.eg-product-actie {
    padding: 0 1rem 1rem;
}

.eg-product-categorie {
    color: var(--eg-tekst-zacht);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

/* Categoriefilter boven de productenlijst. Op smalle schermen scrollt de rij
   horizontaal in plaats van de pagina te verbreden. */
.eg-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.eg-filter-knop {
    display: inline-block;
    padding: 0.45rem 1.1rem;
    border: 1px solid var(--eg-zilver);
    border-radius: var(--eg-radius-pill);
    background: var(--eg-wit);
    color: var(--eg-metallic);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--eg-transitie), color var(--eg-transitie), border-color var(--eg-transitie);
}

.eg-filter-knop:hover,
.eg-filter-knop:focus {
    border-color: var(--eg-metallic);
    color: var(--eg-gunmetal);
}

.eg-filter-knop.actief {
    background: var(--eg-rood);
    border-color: var(--eg-rood);
    color: var(--eg-wit);
}

/* Bij veel categorieën: alles na de eerste 8 is ingeklapt tot de "Meer"-knop
   de lijst opent. Op mobiel vervangt een keuzelijst de knoppen. */
.eg-filter:not(.open) .eg-filter-extra {
    display: none;
}

.eg-filter-meer {
    padding: 0.45rem 1.1rem;
    border: 1px dashed var(--eg-metallic);
    border-radius: var(--eg-radius-pill);
    background: transparent;
    color: var(--eg-metallic);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
}

.eg-filter-meer:hover,
.eg-filter-meer:focus {
    color: var(--eg-gunmetal);
    border-color: var(--eg-gunmetal);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-question {
    background: var(--eg-licht);
    color: var(--eg-tekst);
    border-left: 3px solid var(--eg-rood);
    border-radius: var(--eg-radius-s);
    padding: 1rem 1.15rem;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    transition: background-color var(--eg-transitie), transform var(--eg-transitie);
}

.faq-question:hover {
    background-color: var(--eg-zilver);
    transform: translateX(5px);
}

.faq-vraag-tekst {
    font-weight: 600;
    color: var(--eg-tekst);
}

.faq-icon {
    color: var(--eg-rood);
    display: inline-block;
    width: 24px;
    flex-shrink: 0;
    text-align: center;
}

/* Hoogte-animatie via JS (scrollHeight) — voorkomt springerig gedrag. */
.faq-answer {
    height: 0;
    overflow: hidden;
    transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--eg-wit);
    border-radius: var(--eg-radius-s);
    margin-top: 0.5rem;
}

.faq-item.is-open .faq-answer {
    border: var(--eg-rand);
}

.faq-answer-inner {
    padding: 1.25rem;
}

.faq-answer-inner p {
    color: var(--eg-tekst-zacht);
    margin: 0;
}

@media (max-width: 767.98px) {
    .faq-vraag-tekst { font-size: 0.92rem; }
    .faq-answer-inner p { font-size: 0.88rem; }
}

/* ==========================================================================
   Foutpagina
   ========================================================================== */

.site-error {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--eg-navbar-h) + 32px) 16px 64px;
    background: var(--eg-licht);
}

.site-error-content {
    max-width: 620px;
    background: var(--eg-wit);
    border-radius: var(--eg-radius);
    box-shadow: var(--eg-schaduw-m);
    padding: 3rem 2rem;
}

.site-error .foutcode {
    color: var(--eg-rood);
    font-weight: 800;
    line-height: 1;
}

.site-error h2 { color: var(--eg-tekst); }

.site-error p { color: var(--eg-tekst-zacht); }

/* ==========================================================================
   Beheer (admin)
   ========================================================================== */

.eg-admin {
    padding-top: calc(var(--eg-navbar-h) + 48px);
    padding-bottom: 64px;
    background: var(--eg-licht);
    min-height: 100vh;
}

@media (max-width: 767.98px) {
    .eg-admin {
        padding-top: calc(var(--eg-navbar-h) + 32px);
        padding-bottom: 48px;
    }
}

.eg-admin h1 {
    color: var(--eg-tekst);
    font-weight: 700;
}

.eg-admin-paneel {
    background: var(--eg-wit);
    color: var(--eg-tekst);
    border: var(--eg-rand-zacht);
    border-radius: var(--eg-radius);
    box-shadow: var(--eg-schaduw-s);
    padding: 1.5rem;
}

.eg-admin-paneel h5 {
    color: var(--eg-tekst);
    font-weight: 700;
}

.eg-admin-paneel p {
    color: var(--eg-tekst-zacht);
}

/* GridView & DetailView leesbaar houden binnen het admin-paneel */
.eg-admin .table,
.eg-admin .grid-view table {
    --bs-table-bg: var(--eg-wit);
    --bs-table-color: var(--eg-tekst);
    color: var(--eg-tekst);
}

.eg-admin .table > thead th,
.eg-admin .grid-view th {
    background: var(--eg-licht);
    color: var(--eg-tekst-zacht);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.eg-admin .table > tbody td,
.eg-admin .grid-view td {
    color: var(--eg-tekst);
    vertical-align: middle;
}

.eg-admin .table th,
.eg-admin .table td,
.eg-admin .grid-view th,
.eg-admin .grid-view td {
    border-color: var(--eg-licht);
}

.eg-admin .summary,
.eg-admin .empty {
    color: var(--eg-tekst-zacht);
    font-size: 0.9rem;
}

.eg-admin .pagination .page-link {
    color: var(--eg-rood);
}

.eg-admin .pagination .active > .page-link {
    background-color: var(--eg-rood);
    border-color: var(--eg-rood);
    color: var(--eg-wit);
}

.eg-admin .form-control,
.eg-admin .form-select {
    border: 1px solid var(--eg-zilver);
    background-color: var(--eg-wit);
    color: var(--eg-tekst);
}

.eg-admin .form-control:focus,
.eg-admin .form-select:focus {
    border-color: var(--eg-rood);
    box-shadow: 0 0 0 0.2rem rgba(217, 4, 22, 0.18);
}

.eg-admin label {
    color: var(--eg-tekst);
    font-weight: 600;
}

.eg-admin .eg-badge {
    white-space: nowrap;
}

/* Een brede tabel mag nooit de hele pagina (en de navbar) oprekken */
.eg-admin .grid-view,
.eg-admin .table-responsive {
    max-width: 100%;
    overflow-x: auto;
}

.eg-admin .eg-kaart-acties {
    white-space: nowrap;
}

.eg-admin .eg-kaart-acties a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    color: var(--eg-rood);
}

/* Beheer op mobiel: tabelrijen als kaarten, knoppen op volle breedte */
@media (max-width: 767.98px) {
    .eg-admin h1 {
        font-size: 1.75rem;
        width: 100%;
    }

    .eg-admin-paneel {
        padding: 1rem;
    }

    .eg-admin-knoppen {
        width: 100%;
    }

    /* flex-basis auto: past een knop niet meer, dan loopt hij door naar de volgende regel */
    .eg-admin-knoppen > .btn {
        flex: 1 1 auto;
        white-space: nowrap;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .eg-admin .grid-view,
    .eg-admin .table-responsive {
        overflow-x: visible;
    }

    .eg-admin .eg-tabel-kaarten,
    .eg-admin .eg-tabel-kaarten tbody,
    .eg-admin .eg-tabel-kaarten tr,
    .eg-admin .eg-tabel-kaarten td {
        display: block;
        width: 100%;
    }

    .eg-admin .eg-tabel-kaarten thead {
        display: none;
    }

    .eg-admin .eg-tabel-kaarten tr {
        position: relative;
        border: var(--eg-rand-zacht);
        border-radius: var(--eg-radius);
        padding: 0.75rem 1rem;
        margin-bottom: 0.75rem;
        background: var(--eg-wit);
    }

    .eg-admin .eg-tabel-kaarten td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.35rem 0;
        border: 0;
        text-align: right;
    }

    .eg-admin .eg-tabel-kaarten td[data-label]::before {
        content: attr(data-label);
        color: var(--eg-tekst-zacht);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: left;
        flex-shrink: 0;
    }

    .eg-admin .eg-tabel-kaarten td.eg-kaart-titel {
        display: block;
        text-align: left;
        font-weight: 700;
        padding-right: 3rem;
        padding-bottom: 0.5rem;
        margin-bottom: 0.25rem;
        border-bottom: 1px solid var(--eg-licht);
    }

    .eg-admin .eg-tabel-kaarten td.eg-kaart-id {
        position: absolute;
        top: 0.75rem;
        right: 1rem;
        width: auto;
        gap: 0;
        padding: 0;
        color: var(--eg-tekst-zacht);
        font-size: 0.85rem;
    }

    .eg-admin .eg-tabel-kaarten td.eg-kaart-id::before {
        content: "#";
        text-transform: none;
        letter-spacing: 0;
        font-size: inherit;
    }

    .eg-admin .eg-tabel-kaarten td.eg-kaart-acties {
        justify-content: flex-end;
        gap: 0.5rem;
        padding-top: 0.5rem;
        margin-top: 0.25rem;
        border-top: 1px solid var(--eg-licht);
    }

    .eg-admin .eg-tabel-kaarten td.eg-kaart-acties a {
        border: var(--eg-rand-zacht);
        border-radius: 10px;
        min-width: 44px;
        min-height: 44px;
    }

    .eg-admin .eg-tabel-kaarten td:empty {
        display: none;
    }

    /* DetailView: label boven de waarde */
    .eg-admin .eg-detail-tabel,
    .eg-admin .eg-detail-tabel tbody,
    .eg-admin .eg-detail-tabel tr,
    .eg-admin .eg-detail-tabel th,
    .eg-admin .eg-detail-tabel td {
        display: block;
        width: 100%;
    }

    .eg-admin .eg-detail-tabel th {
        border-bottom: 0;
        padding-bottom: 0;
        color: var(--eg-tekst-zacht);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .eg-admin .eg-detail-tabel td {
        padding-top: 0.2rem;
        overflow-wrap: anywhere;
    }
}

/* Yii-standaardelementen die anders het themacontrast volgen */
.hint-block {
    display: block;
    margin-top: 5px;
    color: var(--eg-tekst-zacht);
}

.not-set {
    color: var(--eg-fout);
    font-style: italic;
}

.error-summary {
    color: var(--eg-fout);
    background: var(--eg-licht);
    border-left: 3px solid var(--eg-fout);
    border-radius: var(--eg-radius-s);
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* Sorteericoontjes in GridView-koppen */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px var(--eg-tekst);
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px var(--eg-tekst);
    border-bottom-width: 0;
}

/* ==========================================================================
   Captcha (contactformulier)
   ========================================================================== */

.eg-captcha-vak {
    background: var(--eg-licht);
    border: var(--eg-rand);
    border-radius: var(--eg-radius-s);
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eg-captcha-vak img {
    max-width: 100%;
    border-radius: 8px;
}

/* ==========================================================================
   Kaartje (Google Maps)
   ========================================================================== */

.eg-map {
    height: 180px;
    border-radius: var(--eg-radius-s);
    overflow: hidden;
    border: var(--eg-rand);
    background: var(--eg-licht);
}

.eg-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ==========================================================================
   Toegankelijkheid: respecteer "verminder beweging"
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .eg-card-hover:hover,
    .eg-panel:hover,
    .eg-panel-onder:hover,
    .eg-tegel:hover,
    .eg-product-card:hover,
    .btn-eg:hover,
    .btn-eg-donker:hover,
    .btn-eg-outline:hover,
    .btn-eg-metallic:hover {
        transform: none;
    }
}

/* ==========================================================================
   Navbar — desktop
   ========================================================================== */

.navbar-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

/* Geen border-bottom: een zilveren rand las als een witte streep tussen de
   balk en de hero. De schaduw scheidt de navbar al voldoende van de pagina. */
.navbar {
    background: var(--eg-verloop-rood) !important;
    border-bottom: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    padding: 8px 0;
    min-height: auto;
}

.navbar .container,
.navbar .container-fluid {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 !important;
    margin: 0 !important;
    /* Het logo mag krimpen zodat het menu ernaast op één regel past. */
    min-width: 0;
    flex-shrink: 1;
}

.navbar-brand-logo {
    --eg-logo-h: 70px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Merknaam verdwijnt vanzelf als hij niet naast het menu past.
   Het logoblok is precies één regel hoog; past de merknaam er niet meer
   naast, dan loopt hij door naar een tweede regel die buiten beeld valt.
   Zo hangt het niet af van vaste breekpunten: het werkt voor elke
   schermbreedte, taal en inlogstatus (ingelogd heeft het menu meer knoppen).
   De 6px padding/negatieve marge geeft de schaduw van het logo ruimte. */
.navbar .navbar-brand-logo {
    flex-wrap: wrap;
    align-content: flex-start;
    row-gap: 100px;
    height: calc(var(--eg-logo-h) + 12px);
    padding: 6px 0;
    margin: -6px 0;
    overflow: hidden;
}

.navbar .navbar-brand-logo img {
    flex-shrink: 0;
}

/* Vanaf 1200px mag de menubalk breder zijn dan de pagina-inhoud (tot 24px van
   de schermrand), zodat de merknaam ook naast het langste menu past
   (Nederlands + ingelogd). Met de gewone containerbreedte viel hij daar tot
   1500px weg. */
@media (min-width: 1200px) {
    .navbar > .container {
        max-width: min(1440px, calc(100% - 48px));
    }
}

/* Alleen het logo krimpt; het menu houdt zijn breedte. */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        flex-shrink: 0;
    }
}

.navbar-brand-logo img {
    height: var(--eg-logo-h);
    width: auto;
    transition: transform var(--eg-transitie);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.navbar-brand-logo:hover img {
    transform: scale(1.03);
}

.navbar-brand-text {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

.brand-eg      { font-weight: 800; font-size: 1.5rem; color: var(--eg-wit); }
.brand-em      { font-weight: 800; font-size: 1.5rem; color: var(--eg-rood); }
.brand-imports { font-weight: 700; font-size: 1.5rem; color: var(--eg-wit); }
.brand-center  { font-weight: 600; font-size: 1.3rem; color: var(--eg-zilver); }
.brand-nv      { font-weight: 700; font-size: 1.3rem; color: var(--eg-rood); }

/* Alles in de navbar blijft op één regel: geen wrap, en de balk mag
   desnoods krimpen (zie de font-size-stappen hieronder). */
.navbar-nav {
    align-items: center;
    flex-wrap: nowrap;
}

.navbar-nav .nav-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* De uitlogknop zit in een <form>; die extra laag mag de rij niet breken. */
.navbar-nav .nav-item > form {
    display: flex;
    align-items: center;
    margin: 0;
}

.navbar-nav .nav-link {
    display: flex;
    align-items: center;
    color: var(--eg-wit) !important;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--eg-radius-pill);
    margin: 0;
    white-space: nowrap;
    transition: all var(--eg-transitie);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--eg-wit) !important;
    transform: translateY(-2px);
}

.navbar-nav .nav-link.active {
    background-color: var(--eg-rood-donker) !important;
    color: var(--eg-wit) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Winkelwagen-teller in de navbar */
.nav-cart-badge {
    background: var(--eg-rood-donker);
    color: var(--eg-wit);
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 0.7rem;
    font-weight: 700;
}

/* Taalwissel EN | NL in de navbar. Compact gehouden: de balk is tussen 992px
   en 1400px al krap, dus twee korte codes in plaats van volledige taalnamen. */
.lang-switch {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--eg-radius-pill);
    overflow: hidden;
    margin-left: 0.35rem;
    flex-shrink: 0;
}

.lang-switch a {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;
    color: var(--eg-wit);
    text-decoration: none;
    transition: all var(--eg-transitie);
}

.lang-switch a:hover,
.lang-switch a:focus {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--eg-wit);
}

/* De actieve taal is geen link maar een span, zodat er niets te klikken valt. */
.lang-switch .lang-actief {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;
    background: var(--eg-rood-donker);
    color: var(--eg-wit);
}

/* "Get Quote"-knop in de navbar */
.btn-quote {
    display: inline-flex;
    align-items: center;
    background: var(--eg-verloop-metallic);
    border: 2px solid var(--eg-zilver);
    border-radius: var(--eg-radius-pill);
    color: var(--eg-wit) !important;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    padding: 0.4rem 1.1rem;
    margin-left: 0.35rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--eg-transitie);
}

.btn-quote:hover,
.btn-quote:focus {
    background: linear-gradient(135deg, var(--eg-gunmetal), var(--eg-zwart));
    border-color: var(--eg-rood);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Tussen 992px en 1400px is de balk het krapst: logo, merknaam en menu
   schalen stapsgewijs mee zodat alles op één regel blijft staan. */
@media (max-width: 1399.98px) {
    .brand-eg, .brand-em, .brand-imports { font-size: 1.25rem; }
    .brand-center, .brand-nv { font-size: 1.05rem; }
    .navbar-brand-logo { --eg-logo-h: 56px; }
    .navbar-brand-logo { gap: 10px; }
    .navbar-nav .nav-link { font-size: 0.82rem; padding: 0.45rem 0.55rem; }
    .btn-quote { font-size: 0.82rem; padding: 0.35rem 0.9rem; }
    .lang-switch a, .lang-switch .lang-actief { font-size: 0.72rem; padding: 0.28rem 0.5rem; }
}

@media (max-width: 1199.98px) {
    .brand-eg, .brand-em, .brand-imports { font-size: 1.05rem; }
    .brand-center, .brand-nv { font-size: 0.9rem; }
    .navbar-brand-logo { --eg-logo-h: 46px; }
    .navbar-brand-text { gap: 3px; }
    .navbar-nav .nav-link { font-size: 0.76rem; padding: 0.4rem 0.45rem; }
    .btn-quote { font-size: 0.76rem; padding: 0.32rem 0.75rem; margin-left: 0.2rem; }
    .lang-switch { margin-left: 0.2rem; }
    .lang-switch a, .lang-switch .lang-actief { font-size: 0.68rem; padding: 0.25rem 0.42rem; }
}

/* Vlak boven de mobiele grens: alleen het logo. De merknaam wijkt zodat het
   menu op één regel past — ook voor ingelogde gebruikers, die er een
   winkelwagen en "Uitloggen" bij krijgen. Het logo draagt het merk hier. */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .navbar-brand-text { display: none; }
    .navbar-brand-logo { --eg-logo-h: 44px; }
}

/* Het mobiele overlay-menu bestaat alleen onder 992px. */
#mobileMenuOverlay {
    display: none !important;
}

/* ==========================================================================
   Navbar — mobiel
   ========================================================================== */

@media (max-width: 991.98px) {
    .navbar { padding: 6px 0; }
    .navbar-brand-logo { --eg-logo-h: 40px; }
    .brand-eg, .brand-em, .brand-imports { font-size: 1rem; }
    .brand-center, .brand-nv { font-size: 0.85rem; }

    /* Bootstrap's eigen collapse blijft ongebruikt; wij tonen een overlay. */
    .navbar-collapse {
        display: none !important;
    }

    .navbar-toggler {
        border: 2px solid rgba(255, 255, 255, 0.5);
        background-color: rgba(0, 0, 0, 0.25);
        border-radius: 8px;
        padding: 6px 10px;
    }

    .navbar-toggler:focus {
        box-shadow: none;
        outline: none;
    }

    .navbar-toggler-icon {
        filter: brightness(0) invert(1);
    }

    #mobileMenuOverlay {
        display: none !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
        background: rgba(0, 0, 0, 0.45);
    }

    #mobileMenuOverlay.open {
        display: block !important;
    }

    #mobileMenuPanel {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: linear-gradient(160deg, var(--eg-zwart) 0%, var(--eg-gunmetal) 100%);
        border-bottom: 3px solid var(--eg-rood);
        border-radius: 0 0 20px 20px;
        padding: 0 0 16px 0;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
        transform: translateY(-100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        max-height: 100vh;
        overflow-y: auto;
    }

    #mobileMenuOverlay.open #mobileMenuPanel {
        transform: translateY(0);
    }

    #mobileMenuHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: var(--eg-verloop-rood);
    }

    #mobileMenuHeader .mobile-brand {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    #mobileMenuHeader .mobile-brand img {
        height: 36px;
        width: auto;
    }

    #mobileMenuHeader .mobile-brand-text {
        display: flex;
        align-items: baseline;
        gap: 4px;
    }

    #mobileMenuHeader .mobile-brand-text .brand-eg,
    #mobileMenuHeader .mobile-brand-text .brand-em,
    #mobileMenuHeader .mobile-brand-text .brand-imports { font-size: 1rem; }

    #mobileMenuHeader .mobile-brand-text .brand-center,
    #mobileMenuHeader .mobile-brand-text .brand-nv { font-size: 0.85rem; }

    #mobileMenuClose {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: 2px solid rgba(255, 255, 255, 0.4);
        background: rgba(0, 0, 0, 0.25);
        color: var(--eg-wit);
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.2s ease;
    }

    #mobileMenuClose:hover {
        background: rgba(0, 0, 0, 0.5);
        border-color: var(--eg-wit);
    }

    #mobileMenuNav {
        padding: 10px 12px 4px;
    }

    #mobileMenuNav a,
    #mobileMenuNav button {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 13px 16px;
        color: rgba(255, 255, 255, 0.85) !important;
        background: transparent;
        text-align: left;
        text-decoration: none;
        font-weight: 600;
        font-size: 1rem;
        border: 1px solid transparent;
        border-radius: 10px;
        margin-bottom: 3px;
        transition: all 0.2s ease;
    }

    #mobileMenuNav a i,
    #mobileMenuNav button i {
        width: 22px;
        text-align: center;
        color: var(--eg-rood);
        font-size: 1rem;
        flex-shrink: 0;
    }

    #mobileMenuNav a:hover,
    #mobileMenuNav button:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--eg-wit) !important;
    }

    #mobileMenuNav a.active-link {
        background: var(--eg-rood-donker);
        border-color: rgba(255, 255, 255, 0.15);
        color: var(--eg-wit) !important;
    }

    #mobileMenuNav a.active-link i {
        color: var(--eg-wit);
    }

    #mobileMenuNav .menu-separator {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        margin: 8px 4px;
    }

    #mobileMenuNav .btn-quote-mobile {
        background: var(--eg-verloop-metallic) !important;
        border: 1px solid var(--eg-zilver) !important;
        border-radius: var(--eg-radius-pill);
        color: var(--eg-wit) !important;
        justify-content: center;
        margin-top: 4px;
    }

    #mobileMenuNav .btn-quote-mobile:hover {
        background: linear-gradient(135deg, var(--eg-gunmetal), var(--eg-zwart)) !important;
        border-color: var(--eg-rood) !important;
    }

    #mobileMenuNav .btn-quote-mobile i {
        color: var(--eg-wit) !important;
    }

    /* Taalwissel in het mobiele menu: twee even brede knoppen naast elkaar,
       zodat de keuze ook op een telefoon direct zichtbaar is. */
    #mobileMenuNav .lang-switch-mobile {
        display: flex;
        gap: 6px;
        margin-top: 4px;
    }

    #mobileMenuNav .lang-switch-mobile a,
    #mobileMenuNav .lang-switch-mobile span {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 12px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 10px;
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--eg-wit);
        text-decoration: none;
        margin-bottom: 0;
    }

    #mobileMenuNav .lang-switch-mobile .lang-actief {
        background: var(--eg-rood-donker);
        border-color: rgba(255, 255, 255, 0.25);
    }
}

@media (max-width: 575.98px) {
    .navbar-brand-logo { --eg-logo-h: 32px; }
    .brand-eg, .brand-em, .brand-imports { font-size: 0.85rem; }
    .brand-center, .brand-nv { font-size: 0.72rem; }
    .navbar-brand-text { gap: 2px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    background: var(--eg-verloop-donker);
    border-top: 3px solid var(--eg-rood);
    color: var(--eg-tekst-zacht-op-donker);
}

.footer h5,
.footer h6 {
    color: var(--eg-tekst-op-donker);
}

.footer p,
.footer li {
    color: rgba(255, 255, 255, 0.72);
}

.footer-accent {
    color: var(--eg-rood) !important;
}

.footer a {
    color: rgba(255, 255, 255, 0.72);
    transition: all var(--eg-transitie);
}

.footer a:hover {
    color: var(--eg-wit);
}

.footer-lijst {
    list-style: none;
    padding-left: 0;
    font-size: 0.9rem;
}

.footer-lijst li {
    margin-bottom: 0.5rem;
}

.hover-link:hover {
    color: var(--eg-rood) !important;
    padding-left: 5px;
}

.footer-social a {
    color: var(--eg-rood);
    font-size: 1.15rem;
}

.footer-social a:hover {
    color: var(--eg-wit);
}

.footer hr {
    border-color: rgba(255, 255, 255, 0.15);
    opacity: 1;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

/* ==========================================================================
   Tekst-hulpklassen
   --------------------------------------------------------------------------
   Vervangen Bootstrap's text-body-secondary / text-muted / text-white-50: die
   volgen het browserthema en werden daardoor onleesbaar op vaste vlakken.
   ========================================================================== */

.tekst          { color: var(--eg-tekst) !important; }
.tekst-zacht    { color: var(--eg-tekst-zacht) !important; }
.tekst-rood     { color: var(--eg-rood) !important; }
.tekst-licht    { color: var(--eg-tekst-op-donker) !important; }
.tekst-zilver   { color: var(--eg-tekst-zacht-op-donker) !important; }
.tekst-succes   { color: var(--eg-succes) !important; }
.tekst-fout     { color: var(--eg-fout) !important; }

/* ==========================================================================
   Tracking-uitslag (in de SweetAlert-popup)
   --------------------------------------------------------------------------
   De popup staat buiten de paginastructuur, dus alle kleuren worden hier
   expliciet gezet — nooit geërfd van een thema.
   ========================================================================== */

.eg-track-uitslag {
    color: var(--eg-tekst);
}

.eg-track-status {
    background: var(--eg-licht);
    border-radius: var(--eg-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.eg-track-status-titel {
    color: var(--eg-tekst);
    font-weight: 700;
    margin-bottom: 0;
}

.eg-track-verloren {
    color: var(--eg-fout);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0.5rem 0 0;
}

.eg-track-omschrijving {
    color: var(--eg-tekst-zacht);
    margin: 0.5rem 0 0;
}

.eg-track-kop {
    color: var(--eg-tekst);
    font-weight: 700;
    margin: 1rem 0 0.5rem;
}

.eg-fact {
    background: var(--eg-licht);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    height: 100%;
}

.eg-fact-label {
    display: block;
    color: var(--eg-tekst-zacht);
    font-size: 0.78rem;
}

.eg-fact-waarde {
    display: block;
    color: var(--eg-tekst);
    font-weight: 600;
}

/* Titel en knop van de popup in de merkstijl */
.swal2-popup {
    border-radius: var(--eg-radius) !important;
}

.swal2-title {
    color: var(--eg-tekst) !important;
}

.swal2-html-container {
    color: var(--eg-tekst) !important;
}

/* ==========================================================================
   Winkelwagen
   ========================================================================== */

/* Scheidingslijn tussen regels in het besteloverzicht */
.eg-regel {
    border-bottom: var(--eg-rand-zacht);
}

.eg-regel:last-of-type {
    border-bottom: none;
}

.eg-verwijder-link {
    color: var(--eg-neutraal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    transition: all var(--eg-transitie);
}

.eg-verwijder-link:hover,
.eg-verwijder-link:focus {
    color: var(--eg-wit);
    background: var(--eg-fout);
}

/* ==========================================================================
   Bootstrap-overschrijvingen
   --------------------------------------------------------------------------
   Deze Bootstrap-klassen volgen het browserthema. Op onze vaste lichte
   vlakken leverde dat lichtgrijze tekst op lichtgrijze achtergrond op, dus
   we zetten ze hier expliciet vast.
   ========================================================================== */

.text-muted,
.text-body-secondary {
    color: var(--eg-tekst-zacht) !important;
}

.card {
    background-color: var(--eg-wit);
    color: var(--eg-tekst);
}

/* Bootstrap-alerts binnen de site consistent maken */
.alert-success {
    background: var(--eg-licht);
    border: none;
    border-left: 4px solid var(--eg-succes);
    color: var(--eg-tekst);
}

.alert-danger {
    background: var(--eg-licht);
    border: none;
    border-left: 4px solid var(--eg-fout);
    color: var(--eg-tekst);
}

/* Yii's validatiemeldingen */
.has-error .form-control,
.form-control.is-invalid {
    border-color: var(--eg-fout);
}

.help-block-error,
.invalid-feedback {
    color: var(--eg-fout);
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
    .navbar,
    .footer,
    #mobileMenuOverlay,
    .btn {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .eg-card,
    .eg-admin-paneel {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* ==========================================================================
   Flash-berichten (layout, boven de pagina-inhoud)
   ========================================================================== */

/* Het bericht staat vóór de sectie-inhoud, dus buiten de padding waarmee die
   secties zelf onder de vaste navbar uit komen. Daarom telt het blok die
   navbar-hoogte hier zelf op; zonder dit schuift de melding onder de balk. */
.eg-flash {
    padding-top: calc(var(--eg-navbar-h) + 24px);
    margin-bottom: 0;
}

/* Staat er een flash, dan zorgt die al voor de ruimte onder de navbar. De
   sectie erna mag zijn eigen navbar-offset dan laten vallen, anders ontstaat
   er een dubbel gat. */
.eg-flash + .eg-auth-sectie {
    padding-top: 24px;
    min-height: 0;
}

.eg-flash + .page-offset,
.eg-flash + .eg-admin {
    padding-top: 24px;
}

/* De site zet alert-kleuren elders neutraal grijs; een succes- of foutmelding
   moet juist meteen leesbaar zijn, dus die krijgen hier hun eigen kleur terug
   via een gekleurde rand en bijpassende tekst. */
.eg-flash .alert {
    border: none;
    border-radius: var(--eg-radius);
    border-left: 4px solid var(--eg-neutraal);
    box-shadow: var(--eg-schaduw-s);
}

.eg-flash .alert-success {
    border-left-color: var(--eg-succes);
}

.eg-flash .alert-danger {
    border-left-color: var(--eg-fout);
}

.eg-flash .alert-warning {
    border-left-color: #f0ad4e;
}

.eg-flash .alert-info {
    border-left-color: var(--eg-metallic);
}

/* ==========================================================================
   Wachtwoord tonen/verbergen (oogje)
   ========================================================================== */

/* De knop staat binnen .eg-input-icoon-wrap, tegenover het slotje links. */
.eg-ww-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--eg-tekst-zacht);
    font-size: 0.95rem;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.eg-ww-toggle:hover,
.eg-ww-toggle:focus-visible {
    color: var(--eg-rood);
    background-color: rgba(217, 4, 22, 0.08);
}

/* De globale focusring is te zwaar voor dit kleine, ronde knopje binnen een
   veld dat zelf al oplicht. Toetsenbordgebruikers houden een duidelijke
   markering via de gekleurde achtergrond hierboven plus een dunne ring. */
.eg-ww-toggle:focus-visible {
    outline: 2px solid var(--eg-rood);
    outline-offset: 0;
}

/* Ruimte rechts in het veld, zodat de tekst niet tegen het oogje aanloopt.
   !important omdat Bootstrap's .form-control-lg een eigen padding meebrengt
   die anders wint — zelfde aanpak als .eg-input-met-icoon hierboven. */
.eg-input-met-toggle {
    padding-right: 58px !important;
}

/* ==========================================================================
   Winkelmandje-popup (toast)
   --------------------------------------------------------------------------
   Verschijnt rechtsboven, net onder de navbar bij het winkelmandje-icoon,
   na "In winkelmandje". Zie web/js/cart.js. Altijd licht met donkere tekst,
   net als de productkaarten.
   ========================================================================== */

.eg-toast-plek {
    position: fixed;
    top: calc(var(--eg-navbar-h) + 16px);
    right: 16px;
    z-index: 1080;
    width: 380px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.eg-toast {
    pointer-events: auto;
    background: var(--eg-wit);
    color: var(--eg-tekst);
    border-radius: var(--eg-radius);
    border-top: 4px solid var(--eg-succes);
    box-shadow: 0 16px 40px rgba(11, 11, 13, 0.22);
    padding: 1rem 1.1rem 1.1rem;
    animation: eg-toast-in 0.3s ease;
}

.eg-toast-fout {
    border-top-color: var(--eg-rood);
}

.eg-toast.weg {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes eg-toast-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.eg-toast-kop {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
}

.eg-toast-icoon {
    font-size: 1.2rem;
    color: var(--eg-succes);
}

.eg-toast-fout .eg-toast-icoon {
    color: var(--eg-rood);
}

.eg-toast-bericht {
    flex-grow: 1;
}

.eg-toast-sluit {
    border: 0;
    background: transparent;
    color: var(--eg-tekst-zacht);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
}

.eg-toast-sluit:hover,
.eg-toast-sluit:focus {
    color: var(--eg-gunmetal);
}

.eg-toast-product {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--eg-licht);
}

.eg-toast-product img,
.eg-toast-geen-foto {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    object-fit: contain;
    background: var(--eg-licht);
    border-radius: 10px;
}

.eg-toast-geen-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--eg-zilver);
    font-size: 1.5rem;
}

.eg-toast-info {
    min-width: 0;
}

.eg-toast-naam {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eg-toast-prijs {
    color: var(--eg-rood);
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 0.15rem;
}

.eg-toast-knoppen {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.eg-toast-knoppen .btn {
    flex: 1 1 auto;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .eg-toast-plek {
        top: auto;
        bottom: 16px;
        left: 16px;
        right: 16px;
        width: auto;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eg-toast,
    .eg-toast.weg {
        animation: none;
        transition: none;
    }
}

/* Knop tijdens het versturen. */
.eg-bezig {
    opacity: 0.7;
    cursor: progress;
}

/* ==========================================================================
   Winkelmandje
   --------------------------------------------------------------------------
   Elke productregel is een grid. Desktop: alles op één rij. Telefoon: foto
   links over twee rijen, daarnaast naam + prullenbak, en daaronder aantal
   + subtotaal. Zo past alles zonder horizontaal te scrollen.
   ========================================================================== */

.eg-mandje-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--eg-wit);
    border: var(--eg-rand-zacht);
    border-radius: var(--eg-radius);
}

.eg-mandje-regel {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto 120px auto;
    grid-template-areas: "foto info aantal subtotaal verwijder";
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 1rem 1.25rem;
    color: var(--eg-tekst);
}

.eg-mandje-regel + .eg-mandje-regel {
    border-top: 1px solid var(--eg-licht);
}

.eg-mandje-foto {
    grid-area: foto;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    background: var(--eg-licht);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--eg-zilver);
    font-size: 1.5rem;
}

.eg-mandje-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.eg-mandje-info {
    grid-area: info;
    min-width: 0;
}

.eg-mandje-naam {
    display: block;
    color: var(--eg-tekst);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.eg-mandje-naam:hover,
.eg-mandje-naam:focus {
    color: var(--eg-rood);
}

.eg-mandje-stukprijs {
    font-size: 0.875rem;
    margin-top: 0.2rem;
}

.eg-mandje-aantal {
    grid-area: aantal;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--eg-zilver);
    border-radius: var(--eg-radius-pill);
    overflow: hidden;
    background: var(--eg-wit);
}

.eg-mandje-aantal .eg-input {
    width: 3rem;
    border: 0;
    border-radius: 0;
    text-align: center;
    padding: 0.4rem 0;
    box-shadow: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.eg-mandje-aantal .eg-input::-webkit-outer-spin-button,
.eg-mandje-aantal .eg-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.eg-stap {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--eg-gunmetal);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.eg-stap:hover,
.eg-stap:focus {
    background: var(--eg-licht);
}

.eg-mandje-subtotaal {
    grid-area: subtotaal;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.eg-mandje-verwijder {
    grid-area: verwijder;
}

.eg-mandje-overzicht {
    background: var(--eg-licht);
    color: var(--eg-tekst);
    border-radius: var(--eg-radius);
    padding: 1.5rem;
    position: sticky;
    top: calc(var(--eg-navbar-h) + 16px);
}

.eg-mandje-totaal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.eg-mandje-totaal + .eg-mandje-totaal {
    margin-top: 0.5rem;
}

.eg-mandje-totaal .eg-prijs {
    font-size: 1.25rem;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .eg-mandje-regel {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        /* Teller onder de foto: zo is er naast de teller genoeg ruimte voor
           het subtotaal, ook op smalle telefoons. */
        grid-template-areas:
            "foto info verwijder"
            "aantal aantal subtotaal";
        gap: 0.5rem 0.75rem;
        padding: 1rem;
    }

    .eg-mandje-foto {
        width: 72px;
        height: 72px;
        align-self: start;
    }

    .eg-mandje-aantal {
        justify-self: start;
    }

    .eg-stap {
        width: 34px;
        height: 36px;
    }

    .eg-mandje-aantal .eg-input {
        width: 2.25rem;
    }

    .eg-mandje-verwijder {
        align-self: start;
    }

    .eg-mandje-overzicht {
        position: static;
    }
}