/* Disco-Train — Feedback Events: enquêteformulier.
   Zelfde kleurenpalet als de andere discotrain-*-plugins (bewust
   gedupliceerd i.p.v. een gedeeld bestand — zie andere discotrain-*.css
   voor dezelfde motivatie). --discotrain-radius idem. */
:root {
    --discotrain-accent: #ff007f;
    --discotrain-accent-hover: #e6006f;
    --discotrain-teal: #006b7d;
    --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;
}

.discotrain-feedback-single {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    box-sizing: border-box;
    color: var(--discotrain-text);
}

.discotrain-feedback-title {
    margin: 0 0 20px;
    /* Zit buiten .discotrain-card (die krijgt tekstkleur via de
       ".discotrain-card, .discotrain-card *" regel in discotrain-mec.css)
       — Betheme's eigen kopregel-kleur (hardcoded wit, was altijd goed
       zolang de site alleen donker was) moet hier dus expliciet overruled
       worden, anders blijft de titel wit-op-wit in het lichte thema. */
    color: var(--discotrain-text) !important;
}

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

.discotrain-feedback-info {
    margin-bottom: 20px;
    color: var(--discotrain-text-muted);
    line-height: 1.6;
}

.discotrain-feedback-notice {
    color: var(--discotrain-text-muted);
    font-style: italic;
}

.discotrain-feedback-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.discotrain-feedback-question {
    margin-bottom: 24px;
}

.discotrain-feedback-question label {
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
}

.discotrain-feedback-required {
    color: var(--discotrain-accent);
}

/* Betheme's eigen form-control-CSS (input/textarea/select) heeft minstens
   even hoge specificiteit als een plugin-class en wint anders op
   laad-volgorde — !important nodig, zelfde gotcha als eerder gedocumenteerd
   (zie [[feedback_theme_css_specificity]]). */
.discotrain-feedback-question input[type="text"],
.discotrain-feedback-question input[type="email"],
.discotrain-feedback-question textarea {
    width: 100%;
    background: var(--discotrain-input-bg) !important;
    border: 1px solid var(--discotrain-border) !important;
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--discotrain-text) !important;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

/* Sterren: radio's visueel verborgen, labels (SVG-sterren) klikbaar.
   Volgorde in de markup is bewust 5→1 zodat de CSS-sibling-selector
   ~ (die alleen "later in de markup" kan targeten) een hover/checked ster
   én alle sterren ERVOOR (dus lager-genummerd, visueel links) kan
   markeren. */
.discotrain-feedback-stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}

.discotrain-feedback-stars input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.discotrain-feedback-stars label {
    cursor: pointer;
    color: var(--discotrain-text-muted);
    margin: 0;
}

.discotrain-feedback-stars label:hover,
.discotrain-feedback-stars label:hover ~ label,
.discotrain-feedback-stars input:checked ~ label {
    color: var(--discotrain-accent);
}

.discotrain-feedback-stars svg {
    fill: currentColor;
    stroke: none;
}

.discotrain-feedback-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.discotrain-feedback-scale input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.discotrain-feedback-scale label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--discotrain-border);
    cursor: pointer;
    font-weight: 700;
    margin: 0;
}

.discotrain-feedback-scale input:checked + label {
    background: var(--discotrain-accent);
    border-color: var(--discotrain-accent);
    color: #fff;
}

.discotrain-feedback-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.discotrain-feedback-choice {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-weight: 400 !important;
    margin: 0 !important;
    cursor: pointer;
}

.discotrain-feedback-thanks {
    text-align: center;
    padding: 40px 20px;
    color: var(--discotrain-accent);
}

.discotrain-feedback-thanks svg {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
}

#discotrain-feedback-submit {
    margin-top: 8px;
    border: none;
}

#discotrain-feedback-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Wizard: één stap tegelijk zichtbaar + voortgangsbalk + vorige/volgende.
   In de pagina-weergave heeft de form geen .discotrain-feedback-form-wizard
   class — dan forceert de regel hieronder gewoon alle stappen zichtbaar,
   ongeacht is-active, zodat dezelfde stap-markup voor beide weergaves werkt. */
.discotrain-feedback-step {
    display: none;
}

.discotrain-feedback-step.is-active {
    display: block;
}

#discotrain-feedback-form:not(.discotrain-feedback-form-wizard) .discotrain-feedback-step {
    display: block !important;
}

.discotrain-feedback-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.discotrain-feedback-progress-track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--discotrain-border);
    overflow: hidden;
}

.discotrain-feedback-progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--discotrain-accent);
    border-radius: 999px;
    transition: width 0.2s ease;
}

.discotrain-feedback-progress-label {
    font-size: 13px;
    color: var(--discotrain-text-muted);
    white-space: nowrap;
}

.discotrain-feedback-wizard-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

/* Let op: BEWUST een eigen class-naam (niet .discotrain-feedback-nav-btn) —
   die naam is al in gebruik in discotrain-feedback-results.css voor de
   ronde chevron-knopjes daar. Omdat results.css als dependency van deze
   stylesheet laadt (dus beide op de resultatenpagina actief zijn), zou
   eenzelfde class-naam de padding/border-radius van hier in de knoppen
   dáár laten lekken — precies de bug die live opdook (chevron-icoon
   verdween, samengeknepen tot 2px breed door de padding hier). */
.discotrain-feedback-wizard-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--discotrain-border);
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    color: var(--discotrain-text);
}

.discotrain-feedback-wizard-nav-btn:hover {
    border-color: var(--discotrain-accent);
    color: var(--discotrain-accent);
}

/* Volgende/Versturen altijd rechts, ook als "Vorige" (nog) verborgen is. */
#discotrain-feedback-wizard-next,
.discotrain-feedback-wizard-nav #discotrain-feedback-submit {
    margin-left: auto;
    margin-top: 0;
}

/* .discotrain-ticket-button heeft een eigen display-regel die qua
   specificiteit gelijk staat aan de browser's ingebouwde [hidden]-regel en
   'm op bron-volgorde wint — zelfde gotcha als eerder gedocumenteerd (zie
   [[feedback_hidden_attribute_specificity]]) — vandaar hier expliciet
   opnieuw geforceerd voor de wizard-knoppen. */
.discotrain-feedback-wizard-nav [hidden] {
    display: none !important;
}

/* Validatie-foutstaat — eigen JS-validatie i.p.v. browser-required, zie
   discotrain-feedback-form.js voor de motivatie (checkbox-groepen +
   verborgen wizard-stappen). */
.discotrain-feedback-error-message {
    color: #ff5c7a;
    font-size: 13px;
    margin: 8px 0 0;
}

.discotrain-feedback-question.has-error .discotrain-feedback-stars,
.discotrain-feedback-question.has-error .discotrain-feedback-scale,
.discotrain-feedback-question.has-error .discotrain-feedback-choices,
.discotrain-feedback-question.has-error textarea {
    outline: 1px solid #ff5c7a;
    outline-offset: 4px;
    border-radius: 8px;
}