/* ==========================================================================
   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;
}

/* ==========================================================================
   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;
}

/* 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 {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.navbar-brand-logo img {
    height: 70px;
    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;
}

/* "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 img { height: 56px; }
    .navbar-brand-logo { gap: 10px; }
    .navbar-nav .nav-link { font-size: 0.82rem; padding: 0.45rem 0.6rem; }
    .btn-quote { font-size: 0.82rem; padding: 0.35rem 0.9rem; }
}

@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 img { height: 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; }
}

/* 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 img { height: 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 img { height: 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;
    }
}

@media (max-width: 575.98px) {
    .navbar-brand-logo img { height: 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;
    }
}