/*
 * De thematour: de teller, de bevestiging en de plekkenkaart.
 *
 * Verhuisd uit WPCode-snippet 117317, waar dit als style="" in elke regel HTML
 * stond en als één <style>-blok in wp_head. Dezelfde waarden, alleen nu op één
 * plek en met een versienummer, zodat een wijziging de bezoeker ook bereikt.
 */

/* Het anker waar "Inschrijven" naartoe springt, plus de ruimte eronder zodat
   het formulier niet tegen de bovenrand van het scherm plakt. */
#ndhr-thematour-anker {
    display: block;
    height: 0;
    overflow: hidden;
}

.ndhr-thematour-ruimte {
    display: block;
    height: 50px;
}

html {
    scroll-behavior: smooth;
}

/* De teller boven het formulier. */
.ndhr-thematour-teller {
    margin-bottom: 1em;
    padding: .75em 1em;
    background: #f0f0f0;
    border-left: 4px solid #0073aa;
    width: 100%;
    box-sizing: border-box;
}

/* De bevestiging na het inschrijven. */
.ndhr-thematour-bevestiging {
    margin-bottom: 1em;
    padding: .75rem 1rem;
    background: #e8f5e9;
    border-left: 4px solid #27ae60;
    width: 100%;
    box-sizing: border-box;
}

/* De plekkenkaart van [thematour_plekken]. Groen zolang er plek is, oranje
   zodra het een wachtlijst wordt: die kleuren zeggen hetzelfde als de tekst,
   voor wie alleen scant. */
.ndhr-thematour-plekken {
    box-sizing: border-box;
    width: 100%;
    padding: .75rem 1.25rem;
    background: #f4faf7;
    border: 1px solid #2e7d5a;
    border-left-width: 3px;
    border-radius: 6px;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.ndhr-thematour-plekken.is-vol {
    background: #fef6f2;
    border-color: #ed6c20;
}

.ndhr-thematour-plekken-tekst {
    flex: 1;
    min-width: 0;
}

.ndhr-thematour-plekken-titel {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1f2937;
}

.ndhr-thematour-plekken-uitleg {
    margin: .25rem 0 0;
    font-size: .8125rem;
    line-height: 1.4;
    color: #6b7280;
    font-weight: 400;
}

.ndhr-thematour-plekken-knop {
    display: inline-block;
    padding: .5rem 1.125rem;
    background: #2e7d5a;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity .2s;
}

.ndhr-thematour-plekken.is-vol .ndhr-thematour-plekken-knop {
    background: #ed6c20;
}

/* In de snippet zat dit als onmouseover/onmouseout op de knop zelf. */
.ndhr-thematour-plekken-knop:hover,
.ndhr-thematour-plekken-knop:focus {
    color: #fff;
    opacity: .9;
}