/* Disco-Train — Ticketshop (Celebratix widget overrides)
   Alleen van toepassing op het overzichtsscherm (klant-wens: "gaat alleen
   om het overzicht"). Widget rendert licht-DOM onder #celebratix (bevestigd
   via live-inspectie op /test/ — geen Shadow DOM), dus normale CSS-cascade
   werkt gewoon. Selectors zijn bewust gebaseerd op data-testid/data-cy
   attributen + structuur (nth-child) i.p.v. de arbitrary-value Tailwind-
   classes (bijv. .text-[10px]) — die attributen zijn duidelijk bedoelde
   stabiele hooks (waarschijnlijk voor e2e-tests), de Tailwind-classes
   kunnen per build net iets anders zijn. Eigen kopie van de
   kleurenvariabelen, zelfde patroon als de andere discotrain-*-plugins. */
:root {
    --discotrain-accent: #ff007f;
    --discotrain-dark: #0d0d0d;
    --discotrain-dark-alt: #1a1a1a;
    --discotrain-text: #ffffff;
    --discotrain-text-muted: #a3a3a3;
    --discotrain-border: rgba(255, 255, 255, 0.08);
    --discotrain-radius: 16px;
}

/* Achtergrondkleur — Celebratix heeft hier zelf theming-hooks voor
   (--clbtx-background-color / --clbtx-events-background-color, gebruikt via
   hun eigen .bg-clbtx-bg-color / .bg-clbtx-events-bg-color classes — al
   aanwezig en actief in de huidige widget-versie, live bevestigd). Dit is de
   nette manier: geen !important-gevecht nodig, de widget leest deze
   variabelen zelf in, dus immuun voor de laad-volgorde van style tags. */
#celebratix {
    --clbtx-background-color: var(--discotrain-dark);
    --clbtx-events-background-color: var(--discotrain-dark-alt);
}

/* Sectietitel "Evenementen" */
#celebratix [data-testid="event-list"] > p:first-child {
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 800 !important;
}

/* Event-rij: kaart-gevoel toevoegen (afgeronde hoeken + hover-highlight +
   scheidingslijn), zelfde stijl als de andere discotrain-kaarten
   (locaties/artiesten). !important nodig om de eigen Tailwind-utility
   classes van de widget te overrulen. */
#celebratix [data-testid="event-card"] {
    border-radius: calc(var(--discotrain-radius) - 4px) !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--discotrain-border);
    transition: background-color 0.15s ease;
}

#celebratix [data-testid="event-card"]:hover {
    background-color: var(--discotrain-dark) !important;
    opacity: 1 !important;
}

/* Thumbnail */
#celebratix [data-testid="event-card"] > img {
    border-radius: 10px !important;
}

/* Venue-naam (klein tekstje boven de titel) */
#celebratix [data-testid="event-card"] > div > div:first-child > div:first-child > p:first-child {
    color: var(--discotrain-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Titel ("track details") */
#celebratix [data-testid="event-card"] > div > div:first-child > div:first-child > p:last-child {
    color: var(--discotrain-text) !important;
    font-weight: 700 !important;
}

/* Datum/tijd-tekst */
#celebratix [data-testid="event-card"] > div > div:first-child > p {
    color: var(--discotrain-text-muted) !important;
    font-weight: 500 !important;
}

/* Datumbadge (vierkantje met maand + dag) — accentkleur, zelfde principe als
   de datumbadge op de Locaties-plugin (.discotrain-locaties-event-card-date). */
#celebratix [data-testid="event-card"] [data-cy="squareLabel"] {
    background-color: rgba(255, 0, 127, 0.15) !important;
}

#celebratix [data-testid="event-card"] [data-cy="title"],
#celebratix [data-testid="event-card"] [data-cy="body"] {
    color: var(--discotrain-accent) !important;
}

/* Chevron-pijltje rechts */
#celebratix [data-testid="event-card"] svg {
    color: var(--discotrain-text-muted);
    transition: color 0.15s ease;
}

#celebratix [data-testid="event-card"]:hover svg {
    color: var(--discotrain-accent);
}

/* Mobiel: de titel wrapte tot 3 regels (smalle kolom naast thumbnail +
   datumbadge), waardoor elke rij veel te hoog werd. Titel afkappen op
   max. 2 regels + iets kleiner lettertype, en de rij zelf compacter. */
@media only screen and (max-width: 767px) {
    #celebratix [data-testid="event-card"] {
        padding: 8px 6px !important;
    }

    #celebratix [data-testid="event-card"] > div > div:first-child > div:first-child > p:last-child {
        font-size: 14px !important;
        line-height: 1.25 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #celebratix [data-testid="event-card"] > div > div:first-child > div:first-child > p:first-child {
        font-size: 9px !important;
    }

    #celebratix [data-testid="event-card"] > div > div:first-child > p {
        font-size: 11px !important;
    }

    /* De widget zit in een Elementor "HTML"-widget, en Elementor's eigen
       .elementor-widget-wrap heeft standaard 12px padding-left/right — dat
       gaf zichtbare zijkanten om het ticketoverzicht op mobiel. :has() i.p.v.
       een vaste .elementor-element-xxxxxxx-klasse, zodat dit blijft werken
       ook als de Kaartverkoop-pagina ooit opnieuw opgebouwd wordt in
       Elementor (widget-ID zou dan veranderen, deze selector niet). Alleen
       op mobiel — de paginatitel erboven (los element) blijft wél gecenterd
       met normale marge, dit raakt alleen de wrap rond het ticketoverzicht. */
    .elementor-widget-wrap:has(.ticketshop-container) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Er zat nóg een laag padding omheen: de site-brede ".discotrain-card"
       paginawrapper (het afgeronde kaart-effect om alle pagina-inhoud, zie
       ook discotrain-locaties.css) heeft standaard 24px padding-left/right.
       Die kaart zelf laten staan (past bij de rest van de site), maar het
       ticketoverzicht er met negatieve marge uit laten "breken" zodat het
       wél echt tot de randen van de kaart loopt. */
    .ticketshop-container {
        margin-left: -24px !important;
        margin-right: -24px !important;
        width: calc(100% + 48px) !important;
    }
}

/* ---------------------------------------------------------------------
   Ticket-detail / bestelscherm (aantal-stepper + "Verder naar
   winkelwagen"/"Verder naar afrekenen"-knop).
   Root-oorzaak: celebratix-base.css is afgeleid van een oudere DTstyle.css
   (andere widget-versie), en mist daardoor een paar arbitrary-value
   kleur-utilities die déze versie gebruikt (bijv. .text-[#131822]) — de
   tekst/icoontjes vallen dan terug op onze eigen site-brede witte tekstkleur,
   wit-op-wit dus onzichtbaar (client-gemeld: "+ en - moet nog gefixed
   worden"). Vaste fix via data-testid, niet via de ontbrekende utility-classes
   zelf (die veranderen sneller tussen widget-versies dan deze attributen). */
/* Zowel color (voor currentColor) als fill zelf zetten: een site-brede
   icon-regel (waarschijnlijk uit het Betheme-thema, want #celebratix draait
   NIET in een iframe/Shadow DOM en is dus niet afgeschermd van zulke globale
   CSS) zet path-elementen expliciet op fill:#fff met hogere prioriteit dan
   inheritance vanaf de <svg fill="currentColor">, dus color alleen was niet
   genoeg — live bevestigd via computed styles. */
#celebratix [data-testid="increment-button"] svg,
#celebratix [data-testid="increment-button"] svg path {
    color: #000 !important;
    fill: #000 !important;
}

#celebratix [data-testid="decrement-button"] svg,
#celebratix [data-testid="decrement-button"] svg path {
    color: #fff !important;
    fill: #fff !important;
}

#celebratix [data-testid="ticket-quantity"] {
    color: var(--discotrain-text) !important;
}

/* "Verder naar winkelwagen" (ticket-detail scherm) en "Verder naar
   afrekenen" (winkelwagen-scherm) zijn twee verschillende componenten
   (order-button vs. submit-button) — allebei zelfde wit-op-wit bug. */
#celebratix [data-testid="order-button"],
#celebratix [data-testid="submit-button"] {
    background-color: #fff !important;
}

#celebratix [data-testid="order-button"] p,
#celebratix [data-testid="submit-button"] p {
    color: #131822 !important;
}

/* Zelfde wit-op-wit bug, nu op het allerlaatste "Pay"-scherm (betaalstap):
   data-testid="pay-button" mist ook de arbitrary-value Tailwind-class
   text-[#131822] in deze widget-versie. */
#celebratix [data-testid="pay-button"] p {
    color: #131822 !important;
}