/* Wrapper */
.bd-form-wrapper {
    --u: 10px;
    --bd-col-gap: 1.875rem; /* = 30px bij root-font 16px */
    max-width: 100%;
}

/* Kolommen */
/* 12-koloms Bootstrap-style grid. Gap wordt gerealiseerd via padding op de
   kolommen zelf + negatieve horizontale margin op de container — zo zijn
   kolomsommen altijd exact 100% (12/12) los van het aantal kolommen. */
.bd-columns {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--bd-col-gap) / -2);
    margin-right: calc(var(--bd-col-gap) / -2);
}

.bd-col {
    min-width: 0;
    padding-left: calc(var(--bd-col-gap) / 2);
    padding-right: calc(var(--bd-col-gap) / 2);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 0 0 100%; /* default: full width als inline style ontbreekt */
}

/* Mobile stack-rule wordt runtime gegenereerd in Shortcode::register_assets
   op basis van de `form_col_breakpoint` setting. */

/* Veld */
.bd-field {
    margin-bottom: calc(var(--u) * 1.6);
}

/* Radio/checkbox-groepen zijn <fieldset>+<legend>: browser-defaults resetten
   zodat ze visueel identiek zijn aan de <div>+<label>-velden. */
fieldset.bd-field {
    border: 0;
    padding: 0;
    min-width: 0;
}

legend.bd-label {
    padding: 0;
    float: none;
}

/* Textarea vul kolom hoogte */
.bd-field--fill {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bd-field--fill .bd-input--fill {
    flex: 1;
    min-height: calc(var(--u) * 16);
}

/* Label */
.bd-label {
    display: block;
    margin-bottom: calc(var(--u) * 0.48);
    font-weight: 500;
    font-size: calc(var(--u) * 1.52);
}

.bd-required {
    color: #b32d2e;
    margin-left: calc(var(--u) * 0.32);
}

/* Inputs, selects, textareas */
.bd-input {
    display: block;
    width: 100%;
    min-width: 0;
    padding: calc(var(--u) * 0.8) calc(var(--u) * 1.2);
    font-family: inherit;
    font-size: calc(var(--u) * 1.6);
    line-height: 1.5;
    color: #1a1a1a;
    background: #fff;
    border: calc(var(--u) * 0.16) solid #767676;
    border-radius: calc(var(--u) * 0.64);
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* Tijd-veld: verberg het klok-icoontje van de native picker (input zelf blijft
   klikbaar om picker te openen) */
input[type="time"].bd-input::-webkit-calendar-picker-indicator {
    display: none;
}
input[type="time"].bd-input {
    -moz-appearance: textfield;
}

.bd-input:focus {
    outline: calc(var(--u) * 0.32) solid #0a58ca;
    outline-offset: calc(var(--u) * 0.16);
    border-color: #0a58ca;
    box-shadow: 0 0 0 calc(var(--u) * 0.32) rgba(10, 88, 202, 0.2);
}

.bd-input::placeholder {
    color: #6d6d6d;
    opacity: 1;
}

/* Screen-reader-only tekst */
.bd-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Foutensamenvatting (GOV.UK-stijl) */
.bd-error-summary {
    padding: calc(var(--u) * 1.6) calc(var(--u) * 1.92);
    margin-bottom: calc(var(--u) * 2.4);
    border: calc(var(--u) * 0.16) solid #b32d2e;
    border-left: calc(var(--u) * 0.64) solid #b32d2e;
    background: #fef8f8;
    border-radius: calc(var(--u) * 0.48);
}

.bd-error-summary[hidden] {
    display: none;
}

.bd-error-summary:focus {
    outline: calc(var(--u) * 0.32) solid #b32d2e;
    outline-offset: calc(var(--u) * 0.16);
}

.bd-error-summary__title {
    margin: 0 0 calc(var(--u) * 0.8);
    font-size: calc(var(--u) * 1.76);
    font-weight: 700;
    color: #842029;
}

.bd-error-summary__list {
    margin: 0;
    padding-left: calc(var(--u) * 2.4);
    color: #842029;
    font-size: calc(var(--u) * 1.52);
}

.bd-error-summary__list li {
    margin-bottom: calc(var(--u) * 0.4);
}

.bd-error-summary__list a {
    color: #842029;
    font-weight: 600;
    text-decoration: underline;
}

.bd-error-summary__list a:hover {
    color: #5a181d;
}

.bd-error-summary__list a:focus {
    outline: calc(var(--u) * 0.32) solid #b32d2e;
    outline-offset: calc(var(--u) * 0.16);
}

/* Textarea */
textarea.bd-input {
    min-height: calc(var(--u) * 16);
    resize: vertical;
    font-family: inherit;
}

/* Select pijltje */
select.bd-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(var(--u) * 1.2) center;
    background-size: calc(var(--u) * 2.24) calc(var(--u) * 1.6);
    padding-right: calc(var(--u) * 3.6);
}

/* Checkbox & Radio */
.bd-check {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 0.8);
    margin-bottom: calc(var(--u) * 0.48);
    cursor: pointer;
    font-size: calc(var(--u) * 1.52);
}

.bd-check input {
    margin: 0;
    flex-shrink: 0;
}

/* File */
input[type="file"].bd-input {
    padding: calc(var(--u) * 0.64) calc(var(--u) * 1.2);
}

/* Hulptekst */
.bd-help {
    margin-top: calc(var(--u) * 0.4);
    font-size: calc(var(--u) * 1.28);
    color: #595959;
}

/* Validatie */
.bd-invalid {
    border-color: #d63638 !important;
}

.bd-invalid:focus {
    box-shadow: 0 0 0 calc(var(--u) * 0.32) rgba(214, 54, 56, 0.15) !important;
}

.bd-error {
    display: none;
    margin-top: calc(var(--u) * 0.4);
    font-size: calc(var(--u) * 1.36);
    color: #b32d2e;
}

/* Verzendknop wrapper */
.bd-submit {
    margin-top: calc(var(--u) * 1.6);
}

.bd-submit--right {
    text-align: right;
}

.bd-submit--left {
    text-align: left;
}

/* Tom Select multi-select */
.bd-tom-select + .ts-wrapper .ts-control {
    min-height: calc(var(--u) * 3.2);
    padding: 0 calc(var(--u) * 0.8) !important;
}

.bd-tom-select + .ts-wrapper .ts-control input {
    margin: 0 !important;
}

.bd-tom-select + .ts-wrapper .ts-control > .item {
    display: none !important;
}

.bd-ts-check {
    color: #c00;
    font-weight: bold;
    margin-left: calc(var(--u) * 1.28);
    line-height: 1;
}

.bd-tom-select + .ts-wrapper .ts-dropdown .option.selected {
    background-color: #f0f6fc;
}

/* Verzendknop */
.bd-btn {
    display: inline-block;
    padding: calc(var(--u) * 0.8) calc(var(--u) * 2.4);
    font-size: calc(var(--u) * 1.6);
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
    background: #0a58ca;
    border: calc(var(--u) * 0.16) solid #0a58ca;
    border-radius: calc(var(--u) * 0.64);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.bd-btn:hover {
    background: #084298;
    border-color: #084298;
}

.bd-btn:focus {
    outline: calc(var(--u) * 0.32) solid #0a58ca;
    outline-offset: calc(var(--u) * 0.32);
    box-shadow: 0 0 0 calc(var(--u) * 0.32) rgba(10, 88, 202, 0.35);
}

.bd-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Berichten */
.bd-msg {
    padding: calc(var(--u) * 1.36) calc(var(--u) * 1.6);
    border-radius: calc(var(--u) * 0.64);
    margin-top: calc(var(--u) * 1.6);
    font-size: calc(var(--u) * 1.52);
}

.bd-msg--success {
    background: #d4edda;
    color: #155724;
    border: calc(var(--u) * 0.16) solid #c3e6cb;
}

.bd-msg--error {
    background: #f8d7da;
    color: #842029;
    border: calc(var(--u) * 0.16) solid #f5c2c7;
}

/* Repeater / Herhaalveld */
.bd-repeater {
    width: 100%;
}

.bd-repeater-row {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--u) * 0.8);
    padding: calc(var(--u) * 1.2);
    margin-bottom: calc(var(--u) * 0.8);
    border: calc(var(--u) * 0.16) solid #e0e0e0;
    border-radius: calc(var(--u) * 0.64);
    background: #fafafa;
}

.bd-repeater-row-fields {
    flex: 1;
    min-width: 0;
}

.bd-repeater-remove {
    flex-shrink: 0;
    width: calc(var(--u) * 3.2);
    height: calc(var(--u) * 3.2);
    border: none;
    background: none;
    color: #d63638;
    font-size: calc(var(--u) * 2.24);
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    border-radius: calc(var(--u) * 0.48);
    margin-top: calc(var(--u) * 0.32);
}

.bd-repeater-remove:hover {
    background: #fce4e4;
}

.bd-repeater-add {
    display: inline-block;
    padding: calc(var(--u) * 0.56) calc(var(--u) * 1.6);
    font-size: calc(var(--u) * 1.44);
    color: #0a58ca;
    background: transparent;
    border: calc(var(--u) * 0.16) dashed #0a58ca;
    border-radius: calc(var(--u) * 0.64);
    cursor: pointer;
    margin-top: calc(var(--u) * 0.4);
}

.bd-repeater-add:hover {
    background: #f0f6fc;
    color: #084298;
    border-color: #084298;
}

.bd-repeater-add:focus {
    outline: calc(var(--u) * 0.32) solid #0a58ca;
    outline-offset: calc(var(--u) * 0.16);
}

.bd-repeater-remove:focus {
    outline: calc(var(--u) * 0.32) solid #d63638;
    outline-offset: calc(var(--u) * 0.16);
}

.bd-step-nav {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--u) * 0.96);
    margin-top: calc(var(--u) * 1.6);
    align-items: center;
}

.bd-step-nav.bd-submit--right {
    justify-content: flex-end;
}

.bd-step-nav.bd-submit--left,
.bd-step-nav.bd-submit--inline {
    justify-content: flex-start;
}

.bd-step-prev {
    background: #5a6268;
    border-color: #5a6268;
}

.bd-step-prev:hover {
    background: #454a4f;
    border-color: #454a4f;
}

.bd-step-prev:focus {
    outline: calc(var(--u) * 0.32) solid #5a6268;
    outline-offset: calc(var(--u) * 0.32);
    box-shadow: 0 0 0 calc(var(--u) * 0.32) rgba(90, 98, 104, 0.35);
}