/* ===========================================================================
   aanmelden.css -- de opmaak van /aanmelden-spreker-dagvoorzitter
   ===========================================================================

   Stond als <style>-blok in de pagina zelf, inclusief het donkerblauwe
   heroblok dat er nu niet meer is.

   De kaart om het formulier volgt /contact en /offerte: een witte pagina met
   daarin één lichtgrijs vak zonder rand. Hier was het andersom -- een witte
   kaart mét rand op een grijze ondergrond.
   =========================================================================== */

/* --- de kaart om het formulier ------------------------------------------- */
.hsb-aanmeld__card {
    background: rgb(var(--bs-light-rgb, 248 249 250));
    border: 0;
    border-radius: 24px;
}

/* --- de genummerde stappen ----------------------------------------------- */
.hsb-aanmeld__sectiehead {
    border-left: 4px solid var(--brand-orange, #f56c20);
    padding-left: 15px;
    margin-top: 48px;
    margin-bottom: 24px;
}

.hsb-aanmeld__sectiehead:first-of-type { margin-top: 0; }

.hsb-aanmeld__stap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-blue, #16264a);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    margin-right: 10px;
    flex-shrink: 0;
}

/* --- velden --------------------------------------------------------------
   Wit op het lichtgrijze vlak, zoals op /offerte. Stonden ze grijs op grijs,
   dan verdwijnt de rand van het veld. */
.hsb-aanmeld__card .form-control,
.hsb-aanmeld__card .form-select {
    background-color: #fff;
    border: 1px solid #dde2e8;
    border-radius: 12px;
}

.hsb-aanmeld__card .form-control:focus,
.hsb-aanmeld__card .form-select:focus {
    border-color: var(--brand-orange, #f56c20);
    box-shadow: 0 0 0 .2rem rgba(245, 108, 32, .15);
}

/* --- de lijst met onderwerpen -------------------------------------------- */
.hsb-aanmeld__expertise {
    background: #fff;
    border: 1px solid #dde2e8;
    border-radius: 12px;
    max-height: 420px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.hsb-aanmeld__expertise::-webkit-scrollbar { width: 6px; }

.hsb-aanmeld__expertise::-webkit-scrollbar-thumb {
    background: #d2d2d7;
    border-radius: 10px;
}

.hsb-aanmeld__cat {
    background: rgb(var(--bs-light-rgb, 248 249 250));
    padding: 8px 12px;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-muted, #86868b);
    letter-spacing: .04em;
}

/* --- aankruisvakjes ------------------------------------------------------ */
.hsb-aanmeld__check .form-check-input:checked {
    background-color: var(--brand-orange, #f56c20);
    border-color: var(--brand-orange, #f56c20);
}

.hsb-aanmeld__check .form-check-input:focus {
    border-color: var(--brand-orange, #f56c20);
    box-shadow: 0 0 0 .2rem rgba(245, 108, 32, .2);
}

/* --- het verborgen veld voor bots ----------------------------------------
   Niet met display:none: sommige bots vullen juist alleen in wat verborgen
   is op die manier, en een schermlezer slaat het dan over -- wat prima is,
   want een bezoeker hoort dit veld nooit in te vullen. */
.hsb-aanmeld__extra {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 1px;
    width: 1px;
    overflow: hidden;
}