/* =========================================================
   TOPBAR – KWPN
   Koninklijk Warmbloed Paardenstamboek Nederland
   Desktop: logo links, menustructuur naast logo, auth rechts
   Mobile:  hamburger (Bootstrap collapse, geen fullscreen overlay)
   Achtergrond: #002663 | Accent: #FC9533 | Tekst: #FFFFFF
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@600;700;900&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');
/* =========================================================
   KWPN DESIGN TOKENS
========================================================= */
:root {
    --kw-navy:       #002663;
    --kw-navy-dark:  #001a47;
    --kw-orange:     #FC9533;
    --kw-orange-dark:#e07d1a;
    --kw-white:      #FFFFFF;
    --kw-text-muted: rgba(255,255,255,0.70);
    --bg_color:      #002663;
}
/* =========================================================
   BODY & TYPOGRAFIE
========================================================= */
body {
    font-family: 'Open Sans', sans-serif !important;
    background-color: var(--kw-navy) !important;
    color: var(--kw-white) !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Red Hat Display', sans-serif !important;
    font-weight: 700 !important;
    color: var(--kw-white) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}
h1 { font-size: clamp(28px, 3.5vw, 48px) !important; line-height: 1.1 !important; }
h2 { font-size: clamp(22px, 2.5vw, 36px) !important; }
h3 { font-size: clamp(18px, 2vw, 28px) !important; }
h4 { font-size: clamp(16px, 1.5vw, 22px) !important; }
p, li, td, th, label, small, .small {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}
/* =========================================================
   NAVBAR – TRANSPARANTE OVERLAY OVER HERO
   Logo links · Navigatie naast logo · Auth rechts
========================================================= */
.navbar-header {
    position: relative !important;
    height: 0 !important;
    overflow: visible !important;
    z-index: 2100 !important;
    flex: none !important;
}
.navbar-header nav,
.navbar-header .navbar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 60px !important;
    height: auto !important;
    overflow: visible !important;
    /* margin-bottom: zie :has(.featured-hero) blok hieronder voor hero-specifieke fix */
}
.navbar-header .navbar > .container {
    display: flex !important;
    align-items: center !important;
    height: 60px !important;
    padding: 0 20px !important;
    max-width: 100% !important;
    gap: 0 !important;
}
/* Logo: links */
.navbar-header .navbar-brand {
    margin: 0 24px 0 0 !important;
    padding: 6px 0 !important;
    flex-shrink: 0 !important;
}
.navbar-header .navbar-brand img {
    max-height: 42px !important;
    width: auto !important;
}
/* Collapse: vult resterende ruimte — alleen desktop */
@media (min-width: 992px) {
    .navbar-header .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
        flex-grow: 1 !important;
        align-items: center !important;
        height: 60px !important;
        overflow: visible !important;
        background: transparent !important;
    }
}
/* Mobiel: Bootstrap collapse werkt normaal */
@media (max-width: 991.98px) {
    .navbar-header .navbar-collapse:not(.show):not(.collapsing) {
        display: none !important;
    }
}
/* Nav links: direct zichtbaar naast logo */
.navbar-header ul.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    list-style: none !important;
}
.navbar-header .navbar-nav .nav-link {
    font-family: 'Red Hat Display', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--kw-white) !important;
    padding: 0 14px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    transition: color 0.15s ease, opacity 0.15s ease !important;
    border-bottom: 3px solid transparent !important;
}
.navbar-header .navbar-nav .nav-link:hover {
    color: var(--kw-orange) !important;
    opacity: 1 !important;
    border-bottom-color: var(--kw-orange) !important;
}
/* ms-auto nav (auth knoppen): rechts uitlijnen */
.navbar-header .navbar-nav.ms-auto {
    margin-left: auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center !important;
}
/* Desktop taalswitch: zelfde stijl als INLOGGEN (navy gevuld, oranje rand) */
@media (min-width: 992px) {
    .navbar-header .navbar-nav.ms-auto li:has([href*="switch-locale"]) > button,
    .navbar-header .navbar-nav.ms-auto li:has([href*="switch-locale"]) > a {
        background: var(--kw-navy) !important;
        background-color: var(--kw-navy) !important;
        border: 2px solid var(--kw-orange) !important;
        color: var(--kw-orange) !important;
        padding: 6px 16px !important;
        border-radius: 4px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        height: auto !important;
        min-width: 0 !important;
        width: auto !important;
        line-height: 1.4 !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}
/* =========================================================
   AUTH KNOPPEN
========================================================= */
/* Inloggen-knop */
a.nav-link[href="/login"] {
    background-color: transparent !important;
    color: var(--kw-orange) !important;
    border-radius: 0 !important;
    padding: 0 14px !important;
    font-family: 'Red Hat Display', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    border-bottom: 3px solid transparent !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}
a.nav-link[href="/login"]:hover {
    color: var(--kw-white) !important;
    border-bottom-color: var(--kw-orange) !important;
}
/* Registreer-knop */
.navbar-header a#authModalRegistration.nav-link {
    background-color: var(--kw-orange) !important;
    border: 2px solid var(--kw-orange) !important;
    color: var(--kw-white) !important;
    border-radius: 4px !important;
    padding: 6px 16px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    height: auto !important;
}
.navbar-header a#authModalLogin.nav-link {
    background: transparent !important;
    border: 2px solid var(--kw-orange) !important;
    color: var(--kw-orange) !important;
    border-radius: 4px !important;
    padding: 6px 16px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    height: auto !important;
}
.navbar-header a#authModalLogin.nav-link:hover {
    background: var(--kw-orange) !important;
    color: var(--kw-white) !important;
}
/* Gebruikersnaam-knop (ingelogd) */
.nav-link.dropdown-toggle.bg-body.rounded.border {
    background-color: var(--kw-orange) !important;
    color: var(--kw-white) !important;
    border-color: var(--kw-orange) !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    height: auto !important;
    padding: 6px 16px !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
/* =========================================================
   DROPDOWN MENU
========================================================= */
.navbar-header .dropdown-menu,
.nav-item.dropdown .dropdown-menu {
    background-color: var(--kw-navy-dark) !important;
    border: 1px solid rgba(252,149,51,0.35) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important;
    border-radius: 4px !important;
    margin-top: 2px !important;
}
.navbar-header .nav-item.dropdown .dropdown-menu,
.nav-item.dropdown.position-relative .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    transform: none !important;
}
.navbar-header .dropdown-menu .dropdown-item {
    color: var(--kw-white) !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
.navbar-header .dropdown-menu .dropdown-item:hover {
    background: rgba(252,149,51,0.15) !important;
    color: var(--kw-orange) !important;
    border: none !important;
}
/* =========================================================
   HAMBURGER (alleen mobiel)
========================================================= */
.navbar-header .navbar-toggler {
    border: 2px solid var(--kw-orange) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    background: transparent !important;
    box-shadow: none !important;
}
.navbar-header .navbar-toggler:focus { box-shadow: none !important; outline: none !important; }
.navbar-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FC9533' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
/* =========================================================
   MOBIEL – layout & collapse
========================================================= */
@media (max-width: 991.98px) {
    /* Op mobiel: navbar fixed bovenaan → altijd boven hero/content */
    .navbar-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        z-index: 99999 !important;
    }
    .navbar-header nav,
    .navbar-header .navbar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        background: rgba(0, 38, 99, 0.97) !important;
        background-color: rgba(0, 38, 99, 0.97) !important;
        box-shadow: none !important;
    }
    /* Duw body-inhoud 56px omlaag zodat content niet achter de fixed navbar verdwijnt */
    body { padding-top: 56px !important; }
    body::before { display: none !important; }
    .watch-live-v2 { padding-top: 0 !important; }
    /* Topbar container: logo links, auth-icon + hamburger rechts */
    .navbar-header .navbar > .container {
        height: 56px !important;
        padding: 0 12px !important;
        justify-content: space-between !important;
    }
    /* Hamburger: rechts bovenaan */
    .navbar-header .navbar-toggler {
        margin-left: auto !important;
        position: fixed !important;
        top: 10px !important;
        right: 12px !important;
        z-index: 3000 !important;
        width: 36px !important;
        height: 36px !important;
        padding: 4px !important;
        border: none !important;
        background: transparent !important;
    }
    /* Login-knop mobiel: alleen poppetje-icoon, links van hamburger */
    a.nav-link[href="/login"],
    .navbar-header a#authModalLogin.nav-link {
        position: fixed !important;
        top: 10px !important;
        right: 54px !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        font-size: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 3000 !important;
    }
    a.nav-link[href="/login"]::before,
    .navbar-header a#authModalLogin.nav-link::before {
        content: "\f007";
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
        font-weight: 900 !important;
        font-size: 20px !important;
        color: var(--kw-orange) !important;
    }
    /* Ingelogde gebruiker: compact rechts naast hamburger */
    .nav-link.dropdown-toggle.bg-body.rounded.border {
        position: fixed !important;
        top: 10px !important;
        right: 54px !important;
        height: 36px !important;
        padding: 0 10px !important;
        z-index: 3000 !important;
        font-size: 12px !important;
        border-radius: 4px !important;
    }
    /* REGISTREREN: uit topbar, verschijnt onderaan hamburgermenu */
    .navbar-header a#authModalRegistration.nav-link {
        display: none !important;
    }
    /* Hamburgermenu: dropdown onder de balk */
    .navbar-header .navbar-collapse.show,
    .navbar-header .navbar-collapse.collapsing {
        display: block !important;
        background-color: var(--kw-navy-dark) !important;
        border-top: 2px solid var(--kw-orange) !important;
        padding: 8px 0 16px !important;
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 2000 !important;
        overflow-y: auto !important;
    }
    /* Nav links in menu */
    .navbar-header .navbar-collapse.show .navbar-nav,
    .navbar-header .navbar-collapse.collapsing .navbar-nav {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0 20px !important;
        gap: 0 !important;
        width: 100% !important;
    }
    .navbar-header .navbar-collapse.show .navbar-nav .nav-link,
    .navbar-header .navbar-collapse.collapsing .navbar-nav .nav-link {
        height: auto !important;
        padding: 13px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.10) !important;
        border-top: none !important;
        width: 100% !important;
        font-size: 15px !important;
        color: var(--kw-orange) !important;
    }
    /* ms-auto (REGISTREREN + taalswitch) onderaan hamburgermenu */
    .navbar-header .navbar-collapse.show .navbar-nav.ms-auto,
    .navbar-header .navbar-collapse.collapsing .navbar-nav.ms-auto {
        margin-top: auto !important;
        padding: 20px 20px 8px !important;
        border-top: 1px solid rgba(252,149,51,0.25) !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
    }
    /* Toon REGISTREREN onderaan */
    .navbar-header .navbar-collapse.show .navbar-nav.ms-auto a#authModalRegistration.nav-link {
        display: flex !important;
        width: auto !important;
        font-size: 14px !important;
        padding: 8px 16px !important;
    }
    /* Taalswitch: zichtbaar onderaan, witte tekst op navy */
    .navbar-header .navbar-collapse.show .navbar-nav.ms-auto .dropdown,
    .navbar-header .navbar-collapse.collapsing .navbar-nav.ms-auto .dropdown {
        display: block !important;
    }
    /* Taalswitch toggle-knop: zelfde stijl als INLOGGEN (navy gevuld, oranje rand) */
    .navbar-header .navbar-collapse.show li:has([href*="switch-locale"]) > button,
    .navbar-header .navbar-collapse.show li:has([href*="switch-locale"]) > a,
    .navbar-header .navbar-collapse.collapsing li:has([href*="switch-locale"]) > button,
    .navbar-header .navbar-collapse.collapsing li:has([href*="switch-locale"]) > a {
        background: var(--kw-navy) !important;
        background-color: var(--kw-navy) !important;
        border: 2px solid var(--kw-orange) !important;
        color: var(--kw-orange) !important;
        padding: 6px 16px !important;
        border-radius: 4px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        height: auto !important;
        border-bottom: 2px solid var(--kw-orange) !important;
    }
    /* Taalswitch dropdown-menu: navy achtergrond */
    .navbar-header .navbar-collapse.show .dropdown-menu,
    .navbar-header .navbar-collapse.collapsing .dropdown-menu {
        background-color: var(--kw-navy-dark) !important;
        border: 1px solid rgba(252,149,51,0.35) !important;
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        margin-top: 4px !important;
    }
    .navbar-header .navbar-collapse.show .dropdown-menu .dropdown-item,
    .navbar-header .navbar-collapse.collapsing .dropdown-menu .dropdown-item {
        color: var(--kw-white) !important;
        background: transparent !important;
        font-size: 13px !important;
        padding: 8px 16px !important;
    }
    .navbar-header .navbar-collapse.show .dropdown-menu .dropdown-item:hover,
    .navbar-header .navbar-collapse.collapsing .dropdown-menu .dropdown-item:hover {
        color: var(--kw-orange) !important;
        background: rgba(252,149,51,0.10) !important;
    }
    /* Zoekknop: tonen op mobiel/tablet, als derde icoon naast login + hamburger */
    .navbar-header button.btn-link {
        display: inline-flex !important;
        position: fixed !important;
        top: 10px !important;
        right: 96px !important;   /* links van login (54px) en hamburger (12px) */
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 3000 !important;
        background: transparent !important;
        color: var(--kw-orange) !important;
    }
    .navbar-header button.btn-link svg path { fill: var(--kw-orange) !important; }
    /* Taalswitch verbergen uit topbar op mobiel */
    .navbar-header .navbar-nav.ms-auto li:has([href*="switch-locale"]) {
        display: none !important;
    }
}
/* =========================================================
   AUTH MODAL – witte achtergrond, dus donkere tekst
========================================================= */
.modal-content {
    background-color: #ffffff !important;
}
.modal-content h1, .modal-content h2, .modal-content h3,
.modal-content h4, .modal-content h5, .modal-content h6,
.modal-content .h1, .modal-content .h2, .modal-content .h3,
.modal-content .h4, .modal-content .h5, .modal-content .h6 {
    color: var(--kw-navy) !important;
    text-transform: none !important;
}
.modal-content p, .modal-content label,
.modal-content .form-check-label, .modal-content a {
    color: var(--kw-navy) !important;
}
.modal-content .form-control {
    background-color: #f8f8f8 !important;
    color: var(--kw-navy) !important;
    border-color: #ccc !important;
}
.modal-content .btn-primary {
    background: var(--kw-orange) !important;
    border-color: var(--kw-orange) !important;
    color: #ffffff !important;
}
/* Login modal: KWPN-leden → oranje | TV-abonnees → JUMP groen */
#ssoLoginButton {
    background: var(--kw-orange) !important;
    border-color: var(--kw-orange) !important;
    color: #ffffff !important;
}
#ssoLoginButton:hover {
    background: var(--kw-orange-dark) !important;
    border-color: var(--kw-orange-dark) !important;
}
#loginWithPlatformButton {
    background: #3db548 !important;
    border-color: #3db548 !important;
    color: #ffffff !important;
}
#loginWithPlatformButton:hover {
    background: #2d9438 !important;
    border-color: #2d9438 !important;
}
.modal-content .btn-warning {
    background: var(--kw-orange) !important;
    border-color: var(--kw-orange) !important;
    color: #ffffff !important;
}
.modal-content .text-black-50 { color: rgba(0,0,0,0.5) !important; }
/* =========================================================
   VERBERG OVERBODIGE ELEMENTEN
========================================================= */
#navbarNotificationsLink { display: none !important; }
a.dropdown-item[href="/first-logon-survey"] { display: none !important; }
.nav-link .position-absolute.bg-danger.rounded-circle { display: none !important; }
/* Zoekicoontje: oranje */
.navbar-header button.btn-link { color: var(--kw-orange) !important; }
.navbar-header button.btn-link svg path { fill: var(--kw-orange) !important; }
/* =========================================================
   BODY GRADIENT / PADDING
========================================================= */
/* Gradient voor leesbaarheid navbar over hero */
body::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 150px !important;
    background: linear-gradient(to bottom, rgba(0,26,71,0.75) 0%, transparent 100%) !important;
    z-index: 2099 !important;
    pointer-events: none !important;
}
/* Hero direct bovenaan — geen ruimte voor navbar */
.navbar-header + * { padding-top: 0 !important; margin-top: 0 !important; }
/* =========================================================
   NIET-HERO PAGINA'S – DESKTOP
   Op hero-pagina's (intro-hero-carousel-section / featured-hero)
   start content bewust achter de navbar (overlay effect).
   Op alle andere pagina's (overzichten, keuring, watch, etc.)
   moet de eerste content 60px omlaag zodat hij niet achter
   de navbar verdwijnt.
========================================================= */
@media (min-width: 992px) {
    body:not(:has(.intro-hero-carousel-section)):not(:has(.featured-hero))
    .container.alert-container + * {
        padding-top: 60px !important;
    }
}
/* =========================================================
   CARDS
========================================================= */
.card {
    background-color: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 6px !important;
}
.card, .card * { color: var(--kw-white) !important; }
.card-header { background-color: transparent !important; border-color: rgba(255,255,255,0.10) !important; }
.card-body, .card-footer, .asset {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* NIET display:none — de stretched-link zit hierin en maakt de kaart klikbaar */
.card-header.text-center.border-0.bg-white {
    background-color: var(--kw-navy) !important;
    border: none !important;
}
.card-header.text-center.border-0.bg-white * {
    color: var(--kw-white) !important;
    text-decoration: none !important;
}
p.asset-description { display: none !important; }
/* Card headings: leesbaar formaat */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
/* Card hover */
.asset { transition: transform 0.2s ease, box-shadow 0.2s ease !important; }
.asset:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
}
.glide__slide .asset:hover,
.glide__slide .card:hover { background-color: transparent !important; }
/* =========================================================
   KNOPPEN
========================================================= */
.btn {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
}
.btn-primary, a.btn-primary {
    background: var(--kw-orange) !important;
    border-color: var(--kw-orange) !important;
    color: var(--kw-white) !important;
}
.btn-primary:hover, a.btn-primary:hover {
    background: var(--kw-orange-dark) !important;
    border-color: var(--kw-orange-dark) !important;
    color: var(--kw-white) !important;
}
.btn.btn-lg {
    background-color: var(--kw-orange) !important;
    border-color: var(--kw-orange) !important;
    color: var(--kw-white) !important;
}
/* =========================================================
   PROFIEL / INSTELLINGEN / AANKOPEN PAGINA
========================================================= */
.section.py-5, section.py-5 {
    background-color: var(--kw-navy) !important;
    color: var(--kw-white) !important;
}
.section.py-5 .form-control,
section.py-5 .form-control {
    background-color: rgba(255,255,255,0.08) !important;
    border-color: rgba(252,149,51,0.30) !important;
    color: var(--kw-white) !important;
}
.section.py-5 label, section.py-5 label,
.section.py-5 .text-muted, section.py-5 .text-muted {
    color: var(--kw-text-muted) !important;
}
.section.py-5 .form-check-input:checked,
section.py-5 .form-check-input:checked {
    background-color: var(--kw-orange) !important;
    border-color: var(--kw-orange) !important;
}
/* Tabellen: witte achtergrond weghalen */
table {
    background-color: transparent !important;
    border-color: rgba(255,255,255,0.12) !important;
}
thead, tbody, tfoot, tr {
    background-color: transparent !important;
    border-color: rgba(255,255,255,0.12) !important;
}
td, th {
    background-color: var(--kw-navy) !important;
    color: var(--kw-white) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
thead td, thead th {
    background-color: var(--kw-navy-dark) !important;
    color: var(--kw-text-muted) !important;
    font-weight: 700 !important;
}
tbody tr:hover td {
    background-color: rgba(255,255,255,0.05) !important;
}
/* Alert-box op watch-pagina */
.alert.alert-light {
    background-color: rgba(255,255,255,0.08) !important;
    border-color: rgba(252,149,51,0.25) !important;
    color: var(--kw-white) !important;
}
/* =========================================================
   WATCH PAGINA
========================================================= */
/* Navbar zweeft als overlay (height:0). Watch-pagina heeft geen hero,
   dus content moet zelf 60px ruimte maken onder de balk. */
.watch-live-v2 {
    padding-top: 60px !important;
    background-color: var(--kw-navy) !important;
}
.jump-theater { background-color: var(--kw-navy-dark) !important; }
.jump-info-card { background-color: rgba(255,255,255,0.05) !important; }
.jump-info-description,
.jump-info-description *,
.jump-info-body,
.jump-info-body * { color: var(--kw-white) !important; }
/* Alle tekst/knoppen op watch-pagina: wit */
.watch-live-v2 span,
.watch-live-v2 small,
.watch-live-v2 button:not(.btn),
.jump-theater span,
.jump-theater small { color: var(--kw-white) !important; }
.jump-info-toggle,
.jump-info-toggle span,
.jump-info-toggle i { color: var(--kw-white) !important; }
/* Reactie-knoppen: wit op donkere achtergrond */
.jump-reaction-btn,
.jump-reaction-btn span,
.jump-reaction-btn i { color: var(--kw-white) !important; }
/* Beeld-in-beeld en overige player-knoppen */
.jump-pip-btn,
.jump-pip-btn span,
.jump-pip-btn i,
[class*="pip"],
[class*="beeld"] { color: var(--kw-white) !important; }
/* Deel-knoppen: oranje rand, witte achtergrond */
.jump-share-btn {
    background-color: rgba(255,255,255,0.10) !important;
    color: var(--kw-white) !important;
    border: 1px solid rgba(252,149,51,0.40) !important;
}
.jump-share-btn i { color: var(--kw-orange) !important; }
.jump-share-btn:hover {
    background-color: var(--kw-navy) !important;
    color: var(--kw-orange) !important;
    border-color: var(--kw-orange) !important;
}
.jump-share-btn:hover i { color: var(--kw-orange) !important; }
/* =========================================================
   SLIDER PIJLTJES
========================================================= */
.glide div[data-glide-el="controls"] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.glide div[data-glide-el="controls"] .slider-btn {
    pointer-events: auto;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--kw-orange) !important;
    background: rgba(0,26,71,0.75) !important;
    backdrop-filter: blur(4px);
    color: var(--kw-orange) !important;
    font-size: 1.2rem; font-weight: 700;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    transition: all 0.2s ease;
}
.glide div[data-glide-el="controls"] .slider-btn-prev {
    position: absolute; left: -22px; top: 50%; transform: translateY(-50%);
}
.glide div[data-glide-el="controls"] .slider-btn-next {
    position: absolute; right: -22px; top: 50%; transform: translateY(-50%);
}
.glide div[data-glide-el="controls"] .slider-btn:hover {
    background: var(--kw-orange) !important;
    color: var(--kw-white) !important;
}
/* =========================================================
   FOOTER
   Standaard JUMP footer fix: logo centreren, "powered by"-tekst verbergen
========================================================= */
footer { background: transparent !important; margin-top: auto !important; flex-shrink: 0 !important; }
footer, footer * { color: var(--kw-text-muted) !important; }
footer .card, footer .card-body { background: transparent !important; }
footer small, footer p:not(:has(a)) { display: none !important; }
footer .card-body .row.mb-5 { justify-content: center !important; }
footer .card-body .row.mb-5 .col-12.col-md-4 { display: flex !important; justify-content: center !important; }
footer .card-body .row.mb-5 .col-12.col-md-4 > .row { justify-content: center !important; width: auto !important; }
footer .card-body .row.mb-5 .col-12.col-md-4 > .row > .col-8 { display: none !important; }
footer .card-body .row.mb-5 .col-12.col-md-4 > .row > .col-4 { flex: 0 0 auto !important; width: auto !important; text-align: center !important; }
/* =========================================================
   HERO CAROUSEL – GAP FIX
   Bootstrap mb-5 (margin-bottom: 3rem = 48px) zit op de <nav>.
   Op hero-pagina's trekt dit de hero 48px naar beneden.
   Fix: margin-bottom naar 0, maar ALLEEN als hero-carousel aanwezig is.
   KWPN gebruikt .intro-hero-carousel-section, sommige andere pagina's
   gebruiken .featured-hero — beide worden gedekt.
========================================================= */
body:has(.intro-hero-carousel-section) .navbar-header nav,
body:has(.intro-hero-carousel-section) .navbar-header .navbar,
body:has(.featured-hero) .navbar-header nav,
body:has(.featured-hero) .navbar-header .navbar {
    margin-bottom: 0 !important;
}