/*
 * Disco-Train MEC restyle.
 * Scoped with .discotrain- prefixes so it never collides with MEC core,
 * theme (Betheme) or page-builder (Elementor/BeBuilder) CSS.
 * Adjust --discotrain-* variables to match brand colors.
 */

/*
 * Palette matches the "Electric Sands" reference design supplied by the
 * client (Ontwerp/stitch_enhanced_design_refinement) — near-black page
 * background, dark cards, electric pink primary + deep teal secondary.
 */
:root {
    --discotrain-accent: #ff007f;
    --discotrain-accent-hover: #e6006f;
    --discotrain-teal: #006b7d;
    --discotrain-teal-hover: #005866;
    --discotrain-dark: #0d0d0d;
    --discotrain-dark-alt: #1a1a1a;
    --discotrain-input-bg: #333333;
    --discotrain-text: #ffffff;
    --discotrain-text-muted: #a3a3a3;
    --discotrain-border: rgba(255, 255, 255, 0.08);
    --discotrain-radius: 16px;
}

/* -------------------------------------------------------------------- */
/* Sticky footer: op pagina's met weinig content (bv. een lege/kleine
   filterresultaten-lijst op /fotos/) stond de footer meteen onder de
   content i.p.v. onderaan het scherm te blijven plakken. Site-wide via
   discotrain-mec.css (laadt op elke pagina, zie discotrain-assets.php) i.p.v.
   een losse plugin — dit is puur een Betheme-layout-fix, geen MEC-specifieke
   styling. */
/* -------------------------------------------------------------------- */
html,
body {
    height: 100%;
    margin: 0;
}

#Wrapper {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

#Content {
    flex-grow: 1 !important;
    padding-bottom: 30px;
}

#Footer {
    margin-top: auto !important;
}

/* -------------------------------------------------------------------- */
/* Roze streepje onder elke Elementor page title (h1). Stond eerder in
   Elementor's eigen Custom CSS-paneel, maar is daar op enig moment kwijt-
   geraakt (niet opgeslagen / overschreven bij een update) — vandaar hier
   ondergebracht in een eigen plugin-bestand dat niet kan verdwijnen. */
/* -------------------------------------------------------------------- */
.elementor-heading-title.elementor-size-default {
    position: relative !important;
    display: inline-block !important;
    padding-bottom: 12px !important;
}

.elementor-heading-title.elementor-size-default::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 60px !important;
    height: 4px !important;
    background-color: var(--discotrain-accent) !important;
    border-radius: 2px !important;
}

/* -------------------------------------------------------------------- */
/* Blog-berichttitels (WP/Betheme .entry-title, bv. /disco-train-boeken/)
   kregen dezelfde title-look als de Elementor page titles hierboven:
   zelfde fontsize (50px) en hetzelfde roze streepje. Scoped op
   .single-post zodat .entry-title elders (bv. in kaarten/overzichten)
   ongemoeid blijft. */
/* -------------------------------------------------------------------- */
.single-post .entry-title {
    position: relative !important;
    display: inline-block !important;
    font-size: 50px !important;
    line-height: 1.2 !important;
    padding-bottom: 12px !important;
}

.single-post .entry-title::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 60px !important;
    height: 4px !important;
    background-color: var(--discotrain-accent) !important;
    border-radius: 2px !important;
}

/* -------------------------------------------------------------------- */
/* MEC's own widget markup (headings, dd/dt, links) ships hardcoded dark
   text colors meant for a white sidebar box. Reused inside our dark
   cards, that text goes near-invisible — force a readable color here,
   early in the file, so later button-specific colors (declared below)
   still win on equal specificity. */
/* !important is used deliberately here: MEC ships selectors like
   `.mec-single-event .mec-event-meta .mec-location dd.author` (4 classes)
   which outrank a plain `.discotrain-card *` reset on specificity alone —
   this is the only reliable way to guarantee readable text without
   copy-pasting MEC's own selector chains. */
/* -------------------------------------------------------------------- */
.discotrain-single-title,
.discotrain-card,
.discotrain-card * {
    color: var(--discotrain-text) !important;
}

.discotrain-card a {
    color: var(--discotrain-text) !important;
}

.discotrain-card a:hover {
    color: var(--discotrain-accent) !important;
}

/* -------------------------------------------------------------------- */
/* Shared buttons (single + grid + list)                                */
/* -------------------------------------------------------------------- */
.discotrain-ticket-button,
.discotrain-details-button,
.discotrain-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.discotrain-ticket-button {
    background: var(--discotrain-accent);
    color: #fff;
}

.discotrain-ticket-button:hover {
    background: #5a5a5a;
    color: #fff;
    transform: translateY(-1px);
}

.discotrain-details-button,
.discotrain-secondary-button {
    background: transparent;
    border-color: var(--discotrain-border);
    color: inherit;
}

.discotrain-details-button:hover,
.discotrain-secondary-button:hover {
    border-color: var(--discotrain-accent);
    color: var(--discotrain-accent);
}

/* Elementor's eigen Button-widget krijgt standaard dezelfde stijl als
   .discotrain-details-button (outline pill, transparant, accentkleur bij
   hover) — zo past een nieuwe knop die een editor toevoegt altijd meteen
   bij de rest van de site, zonder dat er los een class toegevoegd moet
   worden. !important omdat Elementor's eigen Kit-stijl en per-widget
   kleur-instellingen (Stijl-tab) anders op specificiteit kunnen winnen. */
.elementor-widget-button .elementor-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.45) !important;
    background: transparent !important;
    color: inherit !important;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus {
    border-color: var(--discotrain-accent) !important;
    color: var(--discotrain-text) !important;
    background: var(--discotrain-dark-alt) !important;
}

/* Nieuwere Elementor-versies renderen de Button-widget als <button
   class="e-button-base"> (Elementor's "Atomic"/V4-widgets) i.p.v. de
   klassieke <a class="elementor-button">, met een eigen simpele
   .e-button-base default-stijl (blauw, vierkant) i.p.v. de oude
   .elementor-widget-button-wrapper — daarom een losse, gelijkwaardige regel
   voor deze class. */
.e-button-base {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.45) !important;
    background: transparent !important;
    color: inherit !important;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.e-button-base:hover,
.e-button-base:focus {
    border-color: var(--discotrain-accent) !important;
    color: var(--discotrain-text) !important;
    background: var(--discotrain-dark-alt) !important;
}

.discotrain-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.discotrain-ticket-button-large {
    width: 100%;
    padding: 16px 22px;
    font-size: 15px;
}

/* -------------------------------------------------------------------- */
/* Single event page — one column, no sidebar. A consistent .discotrain-  */
/* card component is reused for every section (summary, actions, video,  */
/* line-up, location, organizer, ...) so the page reads as one designed  */
/* system instead of a list of differently-styled text blocks. Layout    */
/* follows the client-supplied reference design 1:1 (Ontwerp/              */
/* stitch_enhanced_design_refinement).                                    */
/* -------------------------------------------------------------------- */
.discotrain-single-event {
    /* No hardcoded max-width: this lets the event content fill the same
       theme content column the grid/list shortcode pages use (Betheme's
       own container, ~1195px in the default full-width template), instead
       of drifting out of sync with a hand-picked pixel value. */
    width: 100%;
    margin: 0 auto;
}

.discotrain-single-title {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-align: left;
    margin: 0.3em 0 0.6em;
}

.discotrain-card {
    background: var(--discotrain-dark-alt);
    border: 1px solid var(--discotrain-border);
    border-radius: var(--discotrain-radius);
    padding: 24px;
    margin-bottom: 16px;
}

/* De default-content-kaart (zie discotrain-default-content.php) heeft, in
   tegenstelling tot alle andere .discotrain-card-kaarten hierboven, geen
   vaste ouder-container die 'm al op breedte houdt — hij wrapt letterlijk
   de hele the_content()-output, inclusief een eventuele Elementor-pagina
   waarin een sectie zelf op "Boxed" staat ingesteld. Zonder eigen
   max-width trekt déze buitenste kaart (achtergrond + rand) gewoon de
   volle paginabreedte, ook al is de Elementor-sectie er middenin keurig
   boxed — je ziet dan geen kaartrand, alleen de (toch al donkere) content
   die tegen de paginarand aan lijkt te plakken. max-width + width:100%
   samen (i.p.v. alleen max-width) voorkomt het bekende shrink-to-fit-
   probleem van Betheme's flex-wrapper rond singular templates, zie
   [[feedback-discotrain-page-width]]. */
.discotrain-default-content {
    width: 100%;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    /* Zonder dit steken de rechte hoeken van een edge-to-edge shortcode-
       sectie (zie verderop) net buiten de afgeronde 16px kaartrand — hidden
       knipt de sectie netjes af tegen diezelfde afronding. */
    overflow: hidden;
}

/* Preview van de kaart-achtergrond ín de Elementor-editor zelf. Elementor's
   live-canvas rendert widgets rechtstreeks vanuit zijn eigen JS-model, niet
   via WordPress' the_content()-filter — .discotrain-default-content bestaat
   dus letterlijk niet in de editor-iframe, alleen op de echte, opgeslagen
   pagina. body.elementor-editor-active (alleen aanwezig in de edit-iframe,
   nooit op de live site) + .elementor-edit-mode (Elementor's eigen
   documentwrapper) bootst hier dezelfde look na, puur ter oriëntatie tijdens
   het bouwen — geen effect op de echte pagina. */
body.elementor-editor-active .elementor.elementor-edit-mode {
    background: var(--discotrain-dark-alt);
    border: 1px solid var(--discotrain-border);
    border-radius: var(--discotrain-radius);
    padding: 24px;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    overflow: hidden;
}

/* Elke sectie die Disco-Train-shortcode-content bevat (hero-slider,
   artiesten/mixen grid of lijst, albums, of MEC's eigen agenda/kalender-
   shortcodes) krijgt automatisch een transparante achtergrond en springt
   buiten de kaart z'n 24px padding — shortcodes hebben doorgaans al hun
   eigen volledige beeld/achtergrond, dus die moeten los van de
   dark-card-styling gewoon randloos vullen i.p.v. binnen de padding
   opgesloten te zitten met de kaartkleur er nog omheen.
   Bewust gematcht op de daadwerkelijke output-classes (i.p.v. op het
   Elementor-widget-type, zoals ".elementor-widget-shortcode") — een editor
   kan dezelfde shortcode-tekst ook in een Tekstbewerker/Paragraaf-widget
   plakken in plaats van het aparte Shortcode-widget, en dan verschilt de
   widget-wrapper class, maar de output (.discotrain-artiesten-grid, etc.)
   blijft hetzelfde. .elementor-widget-shortcode blijft erbij als vangnet
   voor shortcodes die niet in dit lijstje staan. Automatisch via :has(),
   geen losse CSS-class per sectie nodig. */
.discotrain-default-content > .elementor .elementor-top-section:has(
    .elementor-widget-shortcode,
    .discotrain-artiesten-grid,
    .discotrain-artiesten-list,
    .discotrain-djmixes-grid,
    .discotrain-djmixes-list,
    .discotrain-fotogalleries-grid,
    .discotrain-fotogalleries-archive,
    [data-discotrain-hero-slider],
    .mec-wrap
),
body.elementor-editor-active .elementor.elementor-edit-mode .elementor-top-section:has(
    .elementor-widget-shortcode,
    .discotrain-artiesten-grid,
    .discotrain-artiesten-list,
    .discotrain-djmixes-grid,
    .discotrain-djmixes-list,
    .discotrain-fotogalleries-grid,
    .discotrain-fotogalleries-archive,
    [data-discotrain-hero-slider],
    .mec-wrap
) {
    background: transparent !important;
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
    max-width: none;
}

/* Staat de shortcode-sectie helemaal bovenaan de kaart (eerste sectie), dan
   springt hij ook boven de kaart z'n 24px padding uit — anders bleef daar
   nog een randje kaartkleur zichtbaar boven bijv. de hero-slider. Bewust
   alleen bij :first-child: bij een sectie verderop in de pagina zou een
   margin-top:-24px 'm juist over de vorige sectie heen trekken. */
.discotrain-default-content > .elementor .elementor-top-section:first-child:has(
    .elementor-widget-shortcode,
    .discotrain-artiesten-grid,
    .discotrain-artiesten-list,
    .discotrain-djmixes-grid,
    .discotrain-djmixes-list,
    .discotrain-fotogalleries-grid,
    .discotrain-fotogalleries-archive,
    [data-discotrain-hero-slider],
    .mec-wrap
),
body.elementor-editor-active .elementor.elementor-edit-mode .elementor-top-section:first-child:has(
    .elementor-widget-shortcode,
    .discotrain-artiesten-grid,
    .discotrain-artiesten-list,
    .discotrain-djmixes-grid,
    .discotrain-djmixes-list,
    .discotrain-fotogalleries-grid,
    .discotrain-fotogalleries-archive,
    [data-discotrain-hero-slider],
    .mec-wrap
) {
    margin-top: -24px;
}

/* Zelfde redenering aan de onderkant: alleen als de shortcode-sectie de
   LAATSTE sectie in de kaart is, springt hij ook onder de kaart z'n 24px
   padding uit. */
.discotrain-default-content > .elementor .elementor-top-section:last-child:has(
    .elementor-widget-shortcode,
    .discotrain-artiesten-grid,
    .discotrain-artiesten-list,
    .discotrain-djmixes-grid,
    .discotrain-djmixes-list,
    .discotrain-fotogalleries-grid,
    .discotrain-fotogalleries-archive,
    [data-discotrain-hero-slider],
    .mec-wrap
),
body.elementor-editor-active .elementor.elementor-edit-mode .elementor-top-section:last-child:has(
    .elementor-widget-shortcode,
    .discotrain-artiesten-grid,
    .discotrain-artiesten-list,
    .discotrain-djmixes-grid,
    .discotrain-djmixes-list,
    .discotrain-fotogalleries-grid,
    .discotrain-fotogalleries-archive,
    [data-discotrain-hero-slider],
    .mec-wrap
) {
    margin-bottom: -24px;
}

/* Elementor geeft de kolom-wrapper (.elementor-widget-wrap) standaard 10px
   padding mee (Kit-standaardwaarde, geldt overal, meestal onzichtbaar omdat
   de meeste widgets geen eigen achtergrond hebben). Bij een shortcode-sectie
   die hierboven al transparant/randloos is gemaakt, bleef die 10px padding
   nog steeds een dun randje van de kaartkleur tonen rond de shortcode-
   inhoud (bv. de hero-slider) — vandaar hier expliciet op 0 gezet, alleen
   binnen een sectie die al als shortcode-sectie is herkend. */
.discotrain-default-content > .elementor .elementor-top-section:has(
    .elementor-widget-shortcode,
    .discotrain-artiesten-grid,
    .discotrain-artiesten-list,
    .discotrain-djmixes-grid,
    .discotrain-djmixes-list,
    .discotrain-fotogalleries-grid,
    .discotrain-fotogalleries-archive,
    [data-discotrain-hero-slider],
    .mec-wrap
) .elementor-widget-wrap,
body.elementor-editor-active .elementor.elementor-edit-mode .elementor-top-section:has(
    .elementor-widget-shortcode,
    .discotrain-artiesten-grid,
    .discotrain-artiesten-list,
    .discotrain-djmixes-grid,
    .discotrain-djmixes-list,
    .discotrain-fotogalleries-grid,
    .discotrain-fotogalleries-archive,
    [data-discotrain-hero-slider],
    .mec-wrap
) .elementor-widget-wrap {
    padding: 0 !important;
}

.discotrain-card h2,
.discotrain-card h3.mec-events-single-section-title,
.discotrain-card dt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px;
}

.discotrain-card-body {
    line-height: 1.65;
    color: var(--discotrain-text-muted) !important;
}

.discotrain-content {
    margin-top: 0;
}

/* Summary card: flyer image + icon-list facts, matches the reference    */
/* design's two-column "EventSummaryCard" layout. */
.discotrain-summary-card .discotrain-card-body,
.discotrain-summary-inner {
    display: flex;
    flex-direction: row;
    gap: 32px;
    align-items: stretch;
}

.discotrain-summary-image-wrap {
    width: 400px;
    max-width: 400px;
    flex-shrink: 0;
}

.discotrain-summary-image-wrap a {
    display: block;
    cursor: zoom-in;
}

.discotrain-summary-image-wrap img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--discotrain-radius) - 4px);
    display: block;
    transition: opacity 0.15s ease;
}

.discotrain-summary-image-wrap a:hover img {
    opacity: 0.9;
}

.discotrain-summary-details {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.discotrain-facts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.discotrain-facts-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--discotrain-text-muted) !important;
}

.discotrain-facts-list svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--discotrain-teal) !important;
    stroke: var(--discotrain-teal);
    margin-top: 1px;
}

.discotrain-age-badge-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.discotrain-age-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.discotrain-age-badge-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--discotrain-text-muted) !important;
    margin-bottom: 4px;
}

.discotrain-age-badge-value {
    background: var(--discotrain-accent);
    color: #fff !important;
    font-weight: 700;
    font-size: 20px;
    padding: 4px 14px;
    border-radius: 6px;
}

@media (max-width: 767px) {
    .discotrain-summary-card .discotrain-card-body,
    .discotrain-summary-inner {
        flex-direction: column;
    }

    .discotrain-summary-image-wrap,
    .discotrain-summary-details {
        width: 100%;
    }
}

/* Action row: Tickets card + Facebook "Geïnteresseerd" card, side by     */
/* side (Tickets spans full width if there's no Facebook link).           */
.discotrain-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.discotrain-actions-row.discotrain-actions-row-single {
    grid-template-columns: 1fr;
}

.discotrain-action-card {
    background: var(--discotrain-dark-alt);
    border: 1px solid var(--discotrain-border);
    border-radius: var(--discotrain-radius);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.discotrain-action-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--discotrain-text-muted) !important;
}

.discotrain-action-card .discotrain-ticket-button {
    padding: 14px 32px;
    min-width: 190px;
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}

.discotrain-fb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 2px solid var(--discotrain-text);
    flex-shrink: 0;
}

.discotrain-fb-icon svg {
    width: 20px;
    height: 20px;
}

.discotrain-fb-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* flex: 0 0 auto (not 1 1 auto) so this button stays the same width as
       the Tickets button instead of stretching to fill the card — the card
       itself already pushes it to the right via justify-content:
       space-between on .discotrain-action-card. */
    flex: 0 0 auto;
    width: auto;
    min-width: 190px;
    background: var(--discotrain-teal);
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    padding: 14px 20px;
    border-radius: 999px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.15s ease;
}

.discotrain-fb-button:hover {
    background: var(--discotrain-teal-hover);
    color: #fff !important;
}

@media (max-width: 640px) {
    .discotrain-actions-row {
        grid-template-columns: 1fr;
    }

    .discotrain-action-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* Video section — responsive oEmbed wrapper. */
.discotrain-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--discotrain-radius) - 4px);
    overflow: hidden;
    border: 1px solid var(--discotrain-border);
}

.discotrain-video-embed iframe,
.discotrain-video-embed embed,
.discotrain-video-embed object {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* YouTube-facade: scherpe maxresdefault-poster + eigen afspeelknop i.p.v.
   het vage standaard-thumbnail van een niet-afgespeelde YouTube-iframe. */
.discotrain-yt-facade {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #000;
}

.discotrain-yt-facade-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.discotrain-yt-facade-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    transition: transform 0.15s ease;
}

.discotrain-yt-facade:hover .discotrain-yt-facade-play,
.discotrain-yt-facade:focus-visible .discotrain-yt-facade-play {
    transform: translate(-50%, -50%) scale(1.1);
}

.discotrain-yt-facade-play svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* Newsletter + QR section */
.discotrain-newsletter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.discotrain-newsletter-form {
    max-width: 340px;
}

/* Contact Form 7 markup (form is injected via [contact-form-7] shortcode,
   see includes/discotrain-newsletter.php) — CF7 wraps fields in its own
   spans, so target those rather than assuming plain <input> siblings. */
.discotrain-newsletter-form form.wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.discotrain-newsletter-form .wpcf7-form-control-wrap {
    display: block;
}

.discotrain-newsletter-form .discotrain-newsletter-submit {
    align-self: flex-start;
}

.discotrain-newsletter-form .wpcf7-not-valid-tip {
    display: block;
    color: #ff6b6b !important;
    font-size: 12px;
    margin-top: 4px;
}

.discotrain-newsletter-form .wpcf7-response-output {
    font-size: 13px;
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
}

.discotrain-newsletter-form .wpcf7-mail-sent-ok {
    color: var(--discotrain-teal) !important;
    border-color: var(--discotrain-teal) !important;
}

.discotrain-newsletter-form .wpcf7-validation-errors,
.discotrain-newsletter-form .wpcf7-mail-sent-ng,
.discotrain-newsletter-form .wpcf7-spam-blocked {
    color: #ff6b6b !important;
    border-color: #ff6b6b !important;
}

.discotrain-newsletter-missing {
    color: var(--discotrain-text-muted) !important;
    font-size: 14px;
}

.discotrain-newsletter-input {
    /* !important needed: Betheme's be.css ships input[type="email"] etc.
       rules with the same specificity as this class selector (0,1,0) and
       loads after our plugin CSS, so without !important its border/
       border-radius silently win the cascade. */
    width: 100%;
    box-sizing: border-box;
    background: var(--discotrain-input-bg) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 14px;
    color: var(--discotrain-text) !important;
    font-size: 14px;
}

.discotrain-newsletter-input::placeholder {
    color: var(--discotrain-text-muted);
}

.discotrain-newsletter-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--discotrain-accent);
}

.discotrain-newsletter-submit {
    align-self: flex-start;
    background: var(--discotrain-accent) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 28px;
    border: 0 !important;
    border-radius: 8px;
    cursor: pointer;
    opacity: 1 !important;
    transition: background-color 0.15s ease;
}

.discotrain-newsletter-submit:hover {
    background: var(--discotrain-accent-hover) !important;
}

.discotrain-newsletter-feedback {
    font-size: 13px;
    margin: 0;
    min-height: 1.2em;
}

.discotrain-newsletter-feedback.is-success {
    color: var(--discotrain-teal) !important;
}

.discotrain-newsletter-feedback.is-error {
    color: #ff6b6b !important;
}

/* -------------------------------------------------------------------- */
/* Contact Form 7 — generieke stijl voor formulieren zonder eigen
   discotrain-*-input classes (zoals "Contactformulier 1" op de
   contactpagina, standaard CF7-template zonder class:xxx form-tags).
   Zelfde donker/roze look als de nieuwsbrief-CF7 hierboven, nu op CF7's
   eigen standaardklassen zodat elk CF7-formulier op de site er automatisch
   zo uitziet, ook zonder handmatig class:xxx toe te voegen aan de form-tags.
   Expliciet per input-type (niet blind ".wpcf7-form-control") zodat een
   eventuele checkbox/radio/bestand-veld niet ook deze donkere
   invoerveld-styling krijgt.
   !important nodig: zelfde reden als overal in dit bestand — Betheme's
   be.css stylet input/select/textarea met dezelfde specificiteit
   (zie ook [[feedback_theme_css_specificity]]). */
/* Compacter gemaakt op klantverzoek (contactsectie onderaan de homepage
   voelde te "lang" aan): kleinere labels/padding/tussenruimte, en de
   textarea kreeg een vaste (niet alleen minimale) starthoogte — CF7's
   textarea-tag zet standaard rows="10" op het veld, wat de oude
   min-height:140px straal negeerde (het veld rendert dan zo hoog als 10
   rows nodig hebben, ~224px, ongeacht min-height). resize:vertical blijft
   staan, dus de bezoeker kan 'm zelf nog groter slepen als het bericht
   lang wordt. Dit is dezelfde generieke .wpcf7-form-styling die site-breed
   voor ELK CF7-formulier geldt (zie de uitleg hierboven), dus dit
   compacter maken werkt overal consistent door, niet alleen op de
   homepage-contactsectie. */
.wpcf7-form label {
    display: block;
    color: var(--discotrain-text) !important;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.wpcf7-form p {
    margin: 0 0 10px;
}

.wpcf7-form input[type="text"].wpcf7-form-control,
.wpcf7-form input[type="email"].wpcf7-form-control,
.wpcf7-form input[type="tel"].wpcf7-form-control,
.wpcf7-form input[type="url"].wpcf7-form-control,
.wpcf7-form input[type="number"].wpcf7-form-control,
.wpcf7-form input[type="date"].wpcf7-form-control,
.wpcf7-form select.wpcf7-form-control,
.wpcf7-form textarea.wpcf7-form-control {
    width: 100%;
    box-sizing: border-box;
    background: var(--discotrain-input-bg) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 9px 14px;
    color: var(--discotrain-text) !important;
    font-size: 14px;
}

.wpcf7-form textarea.wpcf7-form-control {
    height: 90px;
    resize: vertical;
}

.wpcf7-form input.wpcf7-form-control::placeholder,
.wpcf7-form textarea.wpcf7-form-control::placeholder {
    color: var(--discotrain-text-muted);
}

.wpcf7-form input.wpcf7-form-control:focus,
.wpcf7-form select.wpcf7-form-control:focus,
.wpcf7-form textarea.wpcf7-form-control:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--discotrain-accent);
}

/* Klantverzoek: knoppen overal dezelfde stijl (zie [[feedback_button_style_consistency]]) —
   de CF7-submitknop kreeg tot nu toe een eigen, net-iets-andere look
   (8px hoek-radius, geen hoofdletters). CF7 rendert z'n eigen <input
   type="submit">, dus de HTML-class .discotrain-ticket-button hergebruiken
   kan niet zonder de form-tag in Contact Form 7 zelf aan te passen —
   in plaats daarvan hier exact dezelfde eigenschappen als die class
   (pil-vorm, hoofdletters, dezelfde hover) gekopieerd, zodat "Verzenden"
   er identiek uitziet aan bv. de "Tickets"-knop elders op de site. */
.wpcf7-form input.wpcf7-submit,
.wpcf7-form button.wpcf7-submit {
    background: var(--discotrain-accent) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 12px 22px;
    border: 2px solid transparent !important;
    border-radius: 999px;
    cursor: pointer;
    opacity: 1 !important;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.wpcf7-form input.wpcf7-submit:hover,
.wpcf7-form button.wpcf7-submit:hover {
    background: #5a5a5a !important;
    transform: translateY(-1px);
}

.wpcf7-form .wpcf7-not-valid-tip {
    display: block;
    color: #ff6b6b !important;
    font-size: 12px;
    margin-top: 4px;
}

.wpcf7-form .wpcf7-response-output {
    font-size: 13px;
    margin: 16px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
}

.wpcf7-form .wpcf7-mail-sent-ok {
    color: var(--discotrain-teal) !important;
    border-color: var(--discotrain-teal) !important;
}

.wpcf7-form .wpcf7-validation-errors,
.wpcf7-form .wpcf7-mail-sent-ng,
.wpcf7-form .wpcf7-spam-blocked {
    color: #ff6b6b !important;
    border-color: #ff6b6b !important;
}

.discotrain-qr-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.discotrain-qr-block h2 {
    width: 100%;
    justify-content: flex-end;
}

.discotrain-qr-image {
    background: #fff;
    padding: 8px;
    border-radius: 10px;
    display: inline-block;
}

.discotrain-qr-image img {
    display: block;
    width: 110px;
    height: 110px;
}

.discotrain-share-icons {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.discotrain-share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--discotrain-input-bg);
    color: var(--discotrain-text-muted);
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.discotrain-share-icon:hover {
    color: #fff;
    transform: translateY(-1px);
}

.discotrain-share-icon.discotrain-share-facebook:hover {
    background: #1877f2;
}

.discotrain-share-icon.discotrain-share-whatsapp:hover {
    background: #25d366;
}

.discotrain-share-icon.discotrain-share-instagram:hover {
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
}

@media (max-width: 767px) {
    .discotrain-newsletter-grid {
        grid-template-columns: 1fr;
    }

    .discotrain-qr-block {
        align-items: center;
    }

    .discotrain-qr-block h2 {
        justify-content: center;
    }
}

/* "Het Weer"-kaart (discotrain_weather_image/-description, klant-upload).
   1 rij, 2 kolommen: links een vast 420x420 beeldvak, rechts de
   beschrijving — zelfde opzet als .discotrain-summary-image-wrap hierboven,
   maar met object-fit:contain i.p.v. cover. De klant upload hier vaak een
   screenshot met tekst erin (weersverwachting); cover zou daar een deel van
   kunnen afsnijden als de upload niet exact vierkant is, contain toont 'm
   altijd volledig en dus gegarandeerd leesbaar. Onder 768px stapelt het naar
   1 kolom. */
.discotrain-weather-row {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.discotrain-weather-media {
    width: 420px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: calc(var(--discotrain-radius) - 4px);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.discotrain-weather-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.discotrain-weather-text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

@media (max-width: 767px) {
    .discotrain-weather-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .discotrain-weather-media {
        width: 100%;
    }
}

/* Location map card (Leaflet + OpenStreetMap, see discotrain-mec-map.js) */
.discotrain-map-address {
    color: var(--discotrain-text-muted) !important;
    margin: -4px 0 14px;
    font-size: 14px;
}

.discotrain-map {
    width: 100%;
    height: 320px;
    border-radius: calc(var(--discotrain-radius) - 4px);
    overflow: hidden;
    background: var(--discotrain-dark);
}

/* Leaflet ships its own inline styles/markup (tiles, zoom controls, popups)
   — the broad `.discotrain-card *` color reset above would make its popup
   text and controls unreadable (white text on Leaflet's white popup
   background), so explicitly opt the map back out of that reset. */
.discotrain-map,
.discotrain-map * {
    color: initial !important;
}

.discotrain-map .leaflet-popup-content {
    color: #1a1a1a !important;
    font-size: 13px;
}

.discotrain-map .leaflet-control-attribution a {
    color: #0078a8 !important;
}

.discotrain-incl-fee {
    font-size: 13px;
    color: var(--discotrain-text-muted) !important;
    margin-top: 4px;
}

.discotrain-ticket-info {
    font-size: 13px;
    color: var(--discotrain-text-muted) !important;
    margin-top: 10px;
    line-height: 1.5;
}

.discotrain-admin-notice {
    font-size: 12px;
    color: #e0a800 !important;
    border: 1px dashed #e0a800;
    padding: 8px 10px;
    border-radius: 8px;
    margin: 0;
}

.discotrain-more-info-card a {
    font-weight: 600;
}

/* -------------------------------------------------------------------- */
/* Grid & List cards — dark theme + event image, same visual language   */
/* as the single page's .discotrain-card. MEC's own "modern" style      */
/* ships no image slot and near-black text meant for a white card, so   */
/* both are added/overridden here (mirrors the single-page contrast     */
/* fix above, same root cause: MEC's default styles assume a light      */
/* background).                                                         */
/* -------------------------------------------------------------------- */
.discotrain-grid-wrap .mec-event-article,
.discotrain-list-wrap .mec-event-article {
    background: var(--discotrain-dark-alt);
    border: 1px solid var(--discotrain-border);
    border-radius: var(--discotrain-radius);
    overflow: hidden;
    margin-bottom: 20px;
}

.discotrain-list-wrap .mec-event-article:last-child {
    margin-bottom: 0;
}

.discotrain-grid-wrap .mec-event-article,
.discotrain-grid-wrap .mec-event-article *,
.discotrain-list-wrap .mec-event-article,
.discotrain-list-wrap .mec-event-article * {
    color: var(--discotrain-text) !important;
}

.discotrain-grid-wrap .mec-event-article a:hover,
.discotrain-list-wrap .mec-event-article a:hover {
    color: var(--discotrain-accent) !important;
}

/* MEC core (frontend.css) hardcodes h1-h6 inside .mec-wrap to near-black
   (#171c24) for a white sidebar box — invisible on our dark cards/dividers
   (e.g. the list skin's "augustus 2026" month-divider h5). Same root cause
   as the .mec-event-article override above, just outside that scope. */
.discotrain-grid-wrap h1,
.discotrain-grid-wrap h2,
.discotrain-grid-wrap h3,
.discotrain-grid-wrap h4,
.discotrain-grid-wrap h5,
.discotrain-grid-wrap h6,
.discotrain-list-wrap h1,
.discotrain-list-wrap h2,
.discotrain-list-wrap h3,
.discotrain-list-wrap h4,
.discotrain-list-wrap h5,
.discotrain-list-wrap h6 {
    color: var(--discotrain-text) !important;
}

.discotrain-grid-wrap .event-grid-modern-head,
.discotrain-grid-wrap .mec-event-content,
.discotrain-grid-wrap .mec-event-footer {
    padding: 16px 20px;
}

/* Event thumbnail (added in discotrain-grid-render.php / discotrain-list-render.php,
   MEC's own "modern" style renders none by default). */
.discotrain-event-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--discotrain-dark);
}

/* !important: Betheme's globale img:not([src*='.svg']){height:auto} heeft
   dezelfde specificiteit als deze regel en wint anders de cascade-tie,
   waardoor de thumb op zijn eigen beeldverhouding blijft staan i.p.v. de
   kaart te vullen (zie ook discotrain-fotogalleries.css). */
.discotrain-event-thumb img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto;
    object-fit: cover;
    display: block;
}

/* List "modern" style positions its date badge (.col-md-2, top:20px fixed),
   title/content (.col-md-6, normal flow) and button column (.col-md-4,
   top:30%) with three DIFFERENT vertical anchors (see MEC's own
   frontend.css, @media min-width:768px) — fine when everything is plain
   text, but once our full-height thumbnail was added none of the columns
   lined up with it or each other (date/content sat visibly above the
   article's center, buttons below). Rebuilt as a flex row instead: the
   thumb, date, content and button columns all become flex items on one
   shared vertical axis (align-items:center), so they stay aligned
   regardless of title length/wrapping. */
@media only screen and (min-width: 768px) {
    .discotrain-list-wrap .mec-event-list-modern .mec-event-article {
        display: flex;
        align-items: center;
        gap: 24px;
        /* MEC's eigen "padding: 30px 0 10px" (frontend.css) hoorde bij het
           originele ontwerp waar de thumb absoluut gepositioneerd was en
           dus buiten deze padding om viel. Nu de thumb met
           align-self:stretch gewoon in de flex-rij meedoet (zie hieronder),
           duwt die 30px top-padding 'm scheef naar beneden t.o.v. de
           10px onderkant — zelfde padding-top als padding-bottom geeft
           de thumb (en de rest van de rij) weer gelijke ruimte rondom. */
        padding-top: 10px;
    }

    .discotrain-list-wrap .discotrain-event-thumb {
        position: static;
        flex: 0 0 160px;
        align-self: stretch;
        aspect-ratio: auto;
    }

    .discotrain-list-wrap .mec-event-list-modern .col-md-2.col-sm-2 {
        position: static;
        flex: 0 0 190px;
        width: auto;
        top: auto;
        left: auto;
    }

    .discotrain-list-wrap .mec-event-list-modern .col-md-6.col-sm-6 {
        position: static;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .discotrain-list-wrap .mec-event-list-modern .col-md-4.col-sm-4.mec-btn-wrapper {
        position: static;
        top: auto;
        right: auto;
        flex: 0 0 auto;
    }

    /* .discotrain-card-actions (de flex-rij met Tickets/Bekijk details) is
       een block-element dat de volledige breedte van zijn kolom
       (.mec-btn-wrapper) vult; zonder justify-content bleven de knoppen
       daarbinnen gewoon links uitgelijnd (flex-default), met onvoorspelbare
       lucht tot de rand. flex-end + een vaste padding-right geeft een
       exacte, herhaalbare afstand tot de kaartrand i.p.v. te leunen op
       toevallige flex/clearfix-marges. Client wil precies 115px vanaf de
       rand: kolom staat van zichzelf (MEC's eigen ::before/::after
       clearfix, telt mee als flex-item in de gap:24px hierboven) al ~25px
       van de rand, dus 90px padding-right erbij = 115px totaal (live
       gemeten en bevestigd). Alleen voor de desktop-listweergave —
       grid/hero-kaarten hebben deze class ook, maar daar is de kolom al
       precies zo breed als de knoppen zelf, dus scoping voorkomt
       onbedoelde effecten elders. */
    .discotrain-list-wrap .mec-event-list-modern .mec-btn-wrapper .discotrain-card-actions {
        justify-content: flex-end;
        padding-right: 90px;
    }
}

/* List "modern" date badge: MEC's own 9px margin-top between the big day
   number ("08 AUGUSTUS") and the weekday ("ZATERDAG") reads cramped at
   these font sizes (48px/28px) — give it more breathing room. */
.discotrain-list-wrap .mec-event-list-modern .mec-event-date .event-da {
    margin-top: 18px;
}

@media (max-width: 767px) {
    .discotrain-list-wrap .discotrain-event-thumb {
        width: 100%;
        aspect-ratio: 16 / 9;
        margin-bottom: 12px;
    }

    /* MEC's own 30px top padding on .mec-event-article (frontend.css) is
       meant for the desktop layout, where the thumb is absolutely
       positioned outside normal flow. On mobile the thumb sits in normal
       flow as the first element, so that padding shows up as loose empty
       space above it — drop it, the thumb should sit flush with the card. */
    .discotrain-list-wrap .mec-event-list-modern .mec-event-article {
        padding-top: 0;
    }
}

.discotrain-grid-wrap .mec-event-article .discotrain-card-actions,
.discotrain-list-wrap .mec-event-article .discotrain-card-actions {
    margin-top: 14px;
}

.discotrain-grid-wrap .discotrain-ticket-button,
.discotrain-grid-wrap .discotrain-details-button,
.discotrain-list-wrap .discotrain-ticket-button,
.discotrain-list-wrap .discotrain-details-button {
    padding: 10px 18px;
    font-size: 12px;
}

/* -------------------------------------------------------------------- */
/* Grid cards — gelijke hoogte per rij                                   */
/* MEC's eigen .row/.col-md-x (frontend.css) is een Bootstrap-3          */
/* float-grid: kolommen krijgen daardoor van zichzelf geen gedeelde      */
/* hoogte, dus een kortere titel/tijdrange (bv. "20:30 - 20:30") laat de */
/* kaart korter uitvallen dan zijn buren, met scheve knoppenrijen tot    */
/* gevolg. Rij naar flex + stretch omzetten geeft elke kolom de          */
/* rijhoogte; de kaart zelf volgt met height:100% en wordt zelf ook een  */
/* flex-column zodat de footer (Tickets/Bekijk details) altijd onderaan  */
/* blijft, ongeacht hoeveel tekst erboven staat. Alleen scope op de grid */
/* — de list-skin stapelt kaarten toch al onder elkaar, geen rij om      */
/* gelijk te trekken. */
.discotrain-grid-wrap .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 20px;
}

.discotrain-grid-wrap .row:last-child {
    margin-bottom: 0;
}

/* MEC's eigen clearfix (:before/:after met display:table) is overbodig
   zodra .row flex is, maar zonder content:none worden die pseudo-
   elementen alsnog als (lege) flex-items meegerekend — uitschakelen om
   geen onbedoeld extra item in de rij te krijgen. */
.discotrain-grid-wrap .row:before,
.discotrain-grid-wrap .row:after {
    display: none;
}

.discotrain-grid-wrap .row > [class*="col-"] {
    display: flex;
}

/* margin-bottom:0 hier is bewust: de kaart heeft height:100% van zijn
   (gestretchte) kolom — een margin ONDER een height:100%-element telt mee
   in de hypothetische regelhoogte waarmee de flex-stretch rekent, en werd
   zo feitelijk "opgeslokt" in de stretch i.p.v. zichtbare ruimte te geven
   (resultaat: kaarten van rij 1 en 2 raakten elkaar, geen tussenruimte
   meer). Ruimte tussen rijen komt nu van .row/.mec-event-grid-clean zelf
   (margin-bottom hierboven resp. row-gap verderop bij de agenda-filter-
   variant), niet meer van de kaart. */
.discotrain-grid-wrap .mec-event-article {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
}

/* Content-blok vult de resterende ruimte op, zodat de footer altijd op
   dezelfde hoogte landt; de divider (clean-skin) wordt met margin-top:auto
   naar de onderkant van dat content-blok geduwd, direct boven de footer —
   zelfde visuele opbouw als het ontwerp, nu ook bij kortere kaarten. */
.discotrain-grid-wrap .mec-event-grid-clean .mec-event-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.discotrain-grid-wrap .mec-event-grid-clean .discotrain-grid-clean-divider {
    margin-top: auto;
}

/* -------------------------------------------------------------------- */
/* Grid "clean" style — redesigned card per client mockup                */
/* (Ontwerp/grid /stitch_exact_design_reproduction, 2026-07-31): rounded  */
/* card, pink header with calendar/clock icons, square poster, title +   */
/* single combined location line, divider, Tickets/Bekijk details footer.*/
/* Scoped to .mec-event-grid-clean only — doesn't touch the "modern"     */
/* grid style or the list skin (styled separately above). MEC's own      */
/* clean-skin CSS (frontend.css) ships a 2-class selector for most of    */
/* these elements, so overrides here chain both the MEC class and our    */
/* new discotrain- class to reliably win on specificity without          */
/* !important.                                                           */
/* -------------------------------------------------------------------- */
.discotrain-grid-wrap .mec-event-grid-clean .mec-event-article {
    border-radius: 40px;
    padding: 20px;
}

.discotrain-grid-wrap .mec-event-grid-clean .event-grid-t2-head.discotrain-grid-clean-head {
    background: var(--discotrain-accent);
    border-radius: 24px;
    padding: 20px;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.discotrain-grid-clean-date-row {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 18px;
    font-weight: 500;
    color: #fff !important;
}

.discotrain-grid-clean-date-row .discotrain-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.discotrain-grid-wrap .mec-event-grid-clean .mec-event-image.discotrain-grid-clean-poster {
    margin: 0 0 24px;
    border-radius: 12px;
    overflow: hidden;
}

.discotrain-grid-clean-poster img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    display: block;
    border-radius: 0;
}

.discotrain-grid-wrap .mec-event-grid-clean .mec-event-content {
    background: transparent;
    padding: 0;
}

.discotrain-grid-wrap .mec-event-grid-clean .mec-event-title {
    font-size: 26px;
    font-weight: 500;
    text-transform: none;
    margin: 0 0 12px;
}

.discotrain-grid-clean-location {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 16px;
    margin: 0;
}

.discotrain-grid-clean-location .discotrain-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.discotrain-grid-clean-divider {
    height: 1px;
    background: var(--discotrain-border);
    margin: 20px 0 0;
}

.discotrain-grid-wrap .mec-event-grid-clean .mec-event-footer.discotrain-grid-clean-footer {
    border-top: none;
    background: none;
    padding: 0;
    margin: 16px 0 0;
}

.discotrain-grid-clean-footer .discotrain-card-actions {
    width: 100%;
    margin-top: 0;
    flex-wrap: nowrap;
}

.discotrain-grid-clean-footer .discotrain-details-button {
    flex: 1;
}

/* On mobile the fixed-width Tickets pill reads too narrow next to the
   flexed Bekijk-details button — split the footer evenly there instead. */
@media (max-width: 767px) {
    .discotrain-grid-clean-footer .discotrain-ticket-button {
        flex: 1;
    }
}

/* -------------------------------------------------------------------- */
/* Homepage hero slider — [discotrain_hero_slider]                      */
/* Placeholder styling in the existing dark/pink palette: a client       */
/* mockup for this component is still coming (Ontwerp/ folder), redesign*/
/* onto this once it arrives. Plain crossfade (opacity), no JS library — */
/* see discotrain-mec.js for the tiny prev/next/dot/autoplay logic.      */
/* -------------------------------------------------------------------- */
.discotrain-hero-slider {
    position: relative;
    border-radius: var(--discotrain-radius);
    overflow: hidden;
    margin-bottom: 30px;
}

.discotrain-hero-slider-track {
    position: relative;
    width: 100%;
    height: clamp(360px, 55vw, 560px);
}

.discotrain-hero-slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: var(--discotrain-dark-alt);
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    display: flex;
    align-items: flex-end;
}

.discotrain-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
}

/* Hero = Afbeelding + Video (2026-07-31). De hero image blijft als
   background-image op .discotrain-hero-slide staan (poster/fallback);
   de video ligt daar los bovenop, ook absoluut gepositioneerd, en de
   overlay + content komen daar weer bovenop. */
.discotrain-hero-slide-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

.discotrain-hero-slide-video-local {
    object-fit: cover;
    /* aspect-ratio: auto + !important nodig — zie [[feedback-theme-css-specificity]]
       (Betheme's globale img-reset raakt hier niet, maar hetzelfde soort
       cascade-conflict kan optreden via andere globale video/media-resets). */
    aspect-ratio: auto !important;
}

/* Klassieke "fullscreen background video" truc voor de YouTube-iframe: flink
   oversized + gecentreerd, zodat 'ie de hele slide dekt ongeacht de
   16:9-verhouding van de container, met overflow:hidden op de wrapper om
   het teveel weg te snijden. object-fit werkt niet betrouwbaar op iframes. */
.discotrain-hero-slide-video-youtube {
    pointer-events: none;
}

.discotrain-hero-slide-video-youtube iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78vh;
    height: 56.25vw;
    min-height: 100%;
    min-width: 100%;
    transform: translate(-50%, -50%);
    border: 0;
}

.discotrain-hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.05) 75%);
}

.discotrain-hero-slide-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 32px clamp(20px, 5vw, 60px) 76px;
    color: #fff;
}

.discotrain-hero-slide-date {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #fff;
}

.discotrain-hero-slide-date .discotrain-icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: -4px;
}

.discotrain-hero-slide-time {
    display: inline-flex;
    align-items: center;
}

.discotrain-hero-slide-title {
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.discotrain-hero-slide-title a {
    color: #fff !important;
    text-decoration: none;
}

.discotrain-hero-slide-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #e5e5e5 !important;
    margin: 0 0 18px;
}

.discotrain-hero-slide-content .discotrain-card-actions {
    margin-top: 0;
}

.discotrain-hero-slider-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 20px;
}

.discotrain-hero-slider-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.discotrain-hero-slider-arrow:hover {
    background: var(--discotrain-accent);
    border-color: var(--discotrain-accent);
}

.discotrain-hero-slider-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.discotrain-hero-slider-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.discotrain-hero-slider-dot.is-active {
    background: var(--discotrain-accent);
    transform: scale(1.2);
}

@media (min-width: 768px) {
    .discotrain-hero-slider-nav {
        justify-content: flex-end;
        right: clamp(20px, 5vw, 60px);
        left: auto;
    }

    .discotrain-hero-slider-arrow {
        display: flex;
    }
}

/* -------------------------------------------------------------------- */
/* Ticket iframe modal                                                  */
/* -------------------------------------------------------------------- */
.discotrain-ticket-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
}

.discotrain-ticket-modal.is-open {
    display: block;
}

.discotrain-ticket-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.discotrain-ticket-modal-dialog {
    position: relative;
    max-width: 760px;
    height: 85vh;
    margin: 5vh auto;
    background: #fff;
    border-radius: var(--discotrain-radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.discotrain-ticket-modal-dialog iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.discotrain-ticket-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* -------------------------------------------------------------------- */
/* MEC's eigen frontend.min.css geeft .mec-container (de wrapper rond de
   single-event-pagina content) op mobiel een VASTE, smalle breedte i.p.v.
   volledige breedte — bv. "width:300px" onder 479px, "width:420px" tussen
   480-767px — met margin:auto om 'm te centreren. Op een telefoon van
   375-428px breed (verreweg de meeste toestellen) laat dat links/rechts
   een groot leeg stuk over en de content zelf veel te smal.
   Override met dezelfde media queries (zelfde specificiteit: 1 class-
   selector) — !important zodat laad-volgorde er niet toe doet, mocht MEC
   z'n eigen stylesheet ooit na de onze laden. */
@media only screen and (max-width: 767px) {
    .mec-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        box-sizing: border-box !important;
    }
}

/* -------------------------------------------------------------------- */
/* Betheme's eigen "ul.social" icoontjes (Facebook/YouTube/LinkedIn/
   Instagram) — op verzoek van de klant groter in de footer én het
   mobiele zijmenu (#Side_slide). Beide plekken hergebruiken dezelfde
   generieke Betheme-markup (ul.social > li > a > i.icon-*) zonder eigen
   discotrain-klasse, dus scopen op de omliggende Betheme-containers i.p.v.
   een kale "ul.social" — zo blijft een eventuele andere ul.social elders
   op de site (mocht die ooit ontstaan) buiten schot.
   !important nodig: zelfde reden als overal in dit bestand — Betheme's
   eigen .social-regels zijn minstens even specifiek en zouden anders
   winnen op laadvolgorde. */
.footer_copy .social li,
#Side_slide .social li {
    margin: 0 10px 0 0 !important;
}

.footer_copy .social li a,
#Side_slide .social li a {
    padding: 6px !important;
}

.footer_copy .social li i,
#Side_slide .social li i {
    font-size: 24px !important;
}

/* Contactgegevens (slogan/telefoon/mail) in het mobiele zijmenu — te groot
   op kleine schermen, alleen op mobiel verkleinen (desktop-versie van deze
   balk staat elders en blijft ongemoeid). !important nodig om Betheme's
   eigen "#Side_slide .contact_details" (specificiteit 1,1,0) te overrulen. */
@media only screen and (max-width: 767px) {
    #Side_slide .contact_details {
        font-size: 12px !important;
    }
}

/* Menu-items in het mobiele zijmenu (#Side_slide, zelfde paneel als
   hierboven) waren maar 14px — nauwelijks leesbaar, en juist te klein op
   precies het scherm-formaat (telefoon + kleine laptop, tot 1239px) waar
   dit paneel de ENIGE manier is om te navigeren. Fors vergroot op
   klantverzoek, met wat extra padding zodat de tik/klik-zone ook meegroeit.
   Submenu-items (bv. "Particulier"/"Zakelijk" onder Contact) waren al 20px
   van zichzelf — hoofd-items hier gelijkgetrokken zodat het geheel
   consistent oogt.
   !important nodig: Betheme's eigen "#Side_slide #menu-main-menu > li > a"-
   regel (uit de responsive-menu CSS, actief tot 1239px) is minstens even
   specifiek. */
@media only screen and (max-width: 1239px) {
    #Side_slide #menu-main-menu > li > a {
        font-size: 20px !important;
        line-height: 1.4 !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }
}

/* Betheme's accordion (FAQ-pagina "Vraag & Antwoord") — titelbalk en
   opengeklapte antwoordtekst waren wit-op-wit (be.css zet een lichte
   achtergrond, de site-brede tekstkleur is wit), dus onleesbaar. Donkere
   achtergrond toegevoegd zodat de witte tekst weer zichtbaar is.
   !important nodig: zelfde reden als overal in dit bestand — Betheme's
   eigen .accordion-regels (be.css) zijn minstens even specifiek. */
.accordion .question > .title,
.accordion .question > .answer {
    background: #0e0e0e !important;
    color: #ffffff !important;
}

.accordion .question > .title {
    font-size: 16px !important;
}

/* Hoofdmenu zat rechts strak tegen de rand van het scherm aan — wat
   ademruimte toegevoegd. Alleen desktop (min-width 768px): op mobiel zit
   in dezelfde .menu_wrapper ook de hamburger-knop
   (.responsive-menu-toggle), die moet wél tegen de rand blijven staan. */
@media only screen and (min-width: 768px) {
    .top_bar_left .menu_wrapper {
        padding-right: 30px;
    }
}

/* Minder ruimte tussen de hoofdmenu-items op desktop, op klantverzoek.
   Betheme zet de horizontale spacing via padding op de <span> in elke link
   (niet op de <li>/<a> zelf) — was 20px links+rechts (dus 40px totaal
   tussen twee woorden), verkleind naar 12px. Alleen boven 1239px: dat is
   precies het punt waarop Betheme's eigen menu-CSS omschakelt van het
   hamburger-menu (#Side_slide, zie hierboven) naar de horizontale desktop-
   balk — onder die breedte raakt dit dus nooit het mobiele menu. */
@media only screen and (min-width: 1240px) {
    #Top_bar #menu-main-menu > li > a > span {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Items met een dropdown (bv. "Contact", "Locaties") tonen een pijltje
       via a::after (10px breed) vlak na deze span — bij 12px padding-right
       botste dat pijltje tegen de tekst aan. Alleen voor deze items iets
       meer ruimte rechts, de rest blijft compact.
       Twee selectors nodig: "menu-item-has-children" wordt alleen
       opgeslagen als een item al bij het aanmaken in Weergave > Menu's
       kinderen had (zoals Contact). "Locaties" krijgt zijn kinderen
       dynamisch via discotrain_locaties_inject_menu_children() (elke
       locatie automatisch als submenu-item) — Betheme's eigen walker zet
       dan wél de ".submenu"-class maar niet ".menu-item-has-children", dus
       die moet ook gedekt worden. */
    #Top_bar #menu-main-menu > li.menu-item-has-children > a > span,
    #Top_bar #menu-main-menu > li.submenu > a > span {
        padding-right: 24px !important;
    }
}

/* Google reCAPTCHA-badge (rechtsonder in beeld op elke pagina waar CF7's
   reCAPTCHA actief is) verbergen op klantverzoek. Let op: Google's
   voorwaarden vereisen dat de "Deze site wordt beschermd door reCAPTCHA…"
   tekst dan ergens anders zichtbaar blijft (bv. bij het formulier zelf) —
   dat is hier niet toegevoegd, alleen de badge verborgen zoals gevraagd. */
.grecaptcha-badge {
    visibility: hidden;
}

/* Vervangt de verborgen badge: kleine, gedempte tekst onderaan elk
   CF7-formulier (zie wpcf7_form_elements-filter in
   discotrain-newsletter.php), in dezelfde stijl als de rest van de site.
   !important + p.class nodig: MEC's eigen ".mec-wrap :not(.elementor-
   widget-container) > p" (specificity 0,2,1) wint anders van een simpele
   class-selector, zelfde reden als overal in dit bestand. */
p.discotrain-recaptcha-notice {
    margin: 6px 0 0 !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    color: var(--discotrain-text-muted) !important;
}

.discotrain-recaptcha-notice a {
    color: var(--discotrain-text-muted);
    text-decoration: underline;
}

.discotrain-recaptcha-notice a:hover {
    color: var(--discotrain-text);
}

/* Zwevende WhatsApp-knop (discotrain-whatsapp-button.php), rechtsonder op
   elke pagina. Bewust WhatsApp-groen i.p.v. het site-brede roze/outline
   knoppenpatroon (zie feedback_button_style_consistency) — dit is geen
   tekst-CTA maar een herkenbaar chat-icoon; afwijkende merkkleur houdt 'm
   direct herkenbaar als WhatsApp. */
.discotrain-whatsapp-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.discotrain-whatsapp-button:hover {
    background: #1fb855;
    color: #fff;
    transform: translateY(-2px);
}

@media only screen and (max-width: 767px) {
    .discotrain-whatsapp-button {
        right: 14px;
        bottom: 14px;
        width: 50px;
        height: 50px;
    }
}

/* Plaats-filter (discotrain-mec-agenda-filter.js) boven de Grid/List-
   weergave. Was oorspronkelijk een "skin"-kaart (achtergrond/rand) om 3
   filters heen zodat ze als één geheel oogden (klantverzoek) — nu er
   nog maar 1 dropdown over is (Locatie/Regio zijn eruit gehaald) trok die
   volle-paginabreedte kaart met veel lege ruimte teveel aandacht. Nu:
   inline-flex zodat de "skin"-box om de inhoud sluit i.p.v. de volle
   breedte te vullen, en een subtielere (transparante) achtergrond. */
.discotrain-mec-filter-bar {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    background: transparent;
    border: 1px solid var(--discotrain-border);
    border-radius: var(--discotrain-radius);
    padding: 8px;
}

.discotrain-mec-filter-select {
    background: var(--discotrain-dark);
    color: var(--discotrain-text);
    border: 1px solid var(--discotrain-border);
    border-radius: calc(var(--discotrain-radius) - 4px);
    padding: 8px 14px;
    font-size: 14px;
    min-width: 160px;
    cursor: pointer;
}

.discotrain-mec-filter-select:focus {
    outline: none;
    border-color: var(--discotrain-accent);
}

.discotrain-mec-filter-reset {
    background: transparent;
    color: var(--discotrain-text-muted);
    border: 1px solid var(--discotrain-border);
    border-radius: calc(var(--discotrain-radius) - 4px);
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.discotrain-mec-filter-reset:hover {
    border-color: var(--discotrain-accent);
    color: var(--discotrain-accent);
}

/* Mobiel: dropdown (+ eventuele reset-knop) vol pagina-breed i.p.v. de
   eigen min-width van 160px (die 'm op een smal scherm smaller dan de
   beschikbare breedte hield, klantverzoek) — de inline-flex bar zelf mag
   op mobiel dus weer wel de volle breedte aannemen. */
@media only screen and (max-width: 767px) {
    .discotrain-mec-filter-bar {
        display: flex;
        width: 100%;
        gap: 8px;
        padding: 10px;
    }

    .discotrain-mec-filter-select,
    .discotrain-mec-filter-reset {
        width: 100%;
        min-width: 0;
    }
}

.discotrain-mec-filter-empty {
    color: var(--discotrain-text-muted);
}

/* List-weergave: de eerste maand-divider (bv. "AUGUSTUS 2026") stond veel
   te ver onder de Plaats-filter — MEC's eigen .mec-month-divider heeft
   standaard margin: 60px 0 40px 0, bovenop de margin-bottom van de
   filterbalk zelf. Alleen de éérste divider verkleinen; tussen losse
   maanden verderop in de lijst blijft de normale (grotere) MEC-afstand
   staan, die scheiding is daar wel gewenst. */
.discotrain-list-wrap [class*="mec-event-list-"] > .mec-month-divider:first-child {
    margin-top: 16px;
}

/* Grid-skin reflow bij filteren. MEC groepeert kaarten serverside al in
   vaste .row-blokken van bijv. 3 kolommen (.col-md-X/.col-sm-X,
   float:left — zie discotrain-grid-render.php); dat blijft ongefilterd
   prima werken, maar zodra discotrain-mec-agenda-filter.js kolommen
   verbergt (zie getFilterTarget() daar) reflowen floats alleen BINNEN hun
   eigen rij, niet over meerdere .row-blokken heen — overgebleven kaarten
   bleven daardoor als losse eilandjes op hun oorspronkelijke rij staan
   i.p.v. samen één opgevulde grid te vormen.
   display:contents haalt de .row-div uit de doosmodel (geen eigen box
   meer, alleen zijn kolom-kinderen blijven mee), zodat alle kolommen van
   ALLE oorspronkelijke rijen samen één ononderbroken flex-context vormen
   op de grid-wrapper zelf. Bewust gescoped tot .discotrain-mec-filterable
   (dus alleen als de agenda-filter ook echt aan staat) — ongefilterde
   grid/list-shortcodes elders op de site blijven op de originele
   float-based .row/.col-opzet draaien. */
.discotrain-mec-filterable [class*="mec-event-grid-"] {
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 20px;
}

/* .row wordt hierboven display:contents (geen eigen box meer), dus de
   margin-bottom die normaal via .discotrain-grid-wrap .row voor de
   tussenruimte zorgt heeft hier niets om op te renderen — alle kolommen
   van alle oorspronkelijke rijen vloeien immers als één ononderbroken
   flex-wrap over de grid-wrapper zelf (zie toelichting hierboven).
   row-gap op die wrapper geeft dezelfde 20px tussenruimte terug, en werkt
   hier wél correct: row-gap zit buiten de hoogteberekening van de items
   en wordt dus niet "opgeslokt" door de stretch, in tegenstelling tot een
   margin op de kaart zelf (zie .discotrain-grid-wrap .mec-event-article
   hierboven). */

.discotrain-mec-filterable [class*="mec-event-grid-"] > .row {
    display: contents;
}

.discotrain-mec-filterable [class*="mec-event-grid-"] > .row > [class*="col-md-"],
.discotrain-mec-filterable [class*="mec-event-grid-"] > .row > [class*="col-sm-"] {
    float: none;
}

/* discotrain-mec-agenda-filter.js verbergt gefilterde events via het
   [hidden]-attribuut — maar MEC's eigen "article.mec-event-article {
   display: ... }"-regels (type+class, specificiteit 0,1,1) winnen anders
   van de browser-eigen "[hidden] { display: none }" (0,1,0). Zelfde gotcha
   en fix als .discotrain-locaties-filterable [hidden] in
   discotrain-locaties.css. */
.discotrain-mec-filterable [hidden] {
    display: none !important;
}

/* Site-brede mobiele padding-fix (klantverzoek) — Betheme's eigen
   .content_wrapper .section_wrapper / .container / .four.columns
   .widget-area-regels reserveren op mobiel 33px links/rechts, wat op een
   klein scherm veel ruimte kost. Overschreven i.p.v. in het thema zelf
   aangepast (geen toegang tot de theme-bestanden vanuit deze sessie, en
   Betheme's eigen Custom CSS-paneel is al eerder onbetrouwbaar gebleken —
   zie discotrain-icons.php-achtige toelichtingen elders): zelfde selectors,
   hier in discotrain-mec.css (site-breed geladen op elke pagina, zie
   discotrain-assets.php) met !important zodat het altijd wint, ongeacht
   waar/wanneer Betheme's eigen regel geladen wordt. */
@media only screen and (max-width: 767px) {
    .content_wrapper .section_wrapper,
    .container,
    .four.columns .widget-area {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* Bugfix: Elementor's eigen ".elementor-background-overlay" (de decoratieve
   kleur/gradient-laag die je via Sectie > Achtergrond > Overlay instelt,
   bv. de paarse gradient achter "Over ons!"/"Foto's") krijgt in deze
   Elementor-installatie geen pointer-events:none mee — niet in
   frontend.min.css, niet in de per-pagina post-*.css, nergens. Zo'n overlay
   ligt in de HTML als eerste kind vóór de kolom-inhoud (heading/tekst/knop)
   en is position:absolute + inset:0, terwijl die inhoud zelf gewoon
   position:static is. Volgens de CSS-stacking-regels wordt een positioned
   element (ook zonder eigen z-index) ALTIJD boven gewone in-flow content
   getekend, ongeacht de HTML-volgorde — dus die overlay ving letterlijk elke
   klik op vóór die de knop eronder kon bereiken (klantmelding: "Lees
   verder"-knoppen deden niets, leken de link niet te herkennen). De overlay
   is puur decoratief, hoort nooit klikbaar te zijn — vandaar hier
   pointer-events:none, site-breed voor elke Elementor-sectie/kolom met een
   overlay, i.p.v. per knop een losse z-index-fix. */
.elementor-background-overlay {
    pointer-events: none;
}

/* Footer social-icons rij (klantverzoek) — zie discotrain-footer-social.php
   voor waarom dit een client-side verplaatste kopie van Betheme's eigen
   ul.social is. Betheme's eigen "ul.social li" heeft standaard geen/weinig
   styling (kale lijst); hier de roze rondje-look uit het klant-voorbeeld.
   !important op de kleuren niet nodig (geen concurrerende regel op deze
   specifieke klasse), wel op display/list-style om Betheme's basis
   lijst-opmaak te overschrijven. */
.discotrain-footer-social {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    list-style: none !important;
    margin: 20px 0 0 !important;
    padding: 0 !important;
    gap: 14px;
}

.discotrain-footer-social li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.discotrain-footer-social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--discotrain-accent);
    color: #ffffff;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.discotrain-footer-social li a:hover {
    background: var(--discotrain-accent-hover);
    transform: translateY(-2px);
}

.discotrain-footer-social li a i {
    font-size: 18px;
    line-height: 1;
    color: inherit;
}