/* =============================================
   MODUS DIGITAL - FORMS
   Form controls, validation, alerts, modals
   ============================================= */

/* -----------------------------------------
   reCAPTCHA
   ----------------------------------------- */
.grecaptcha-badge {
    visibility: hidden;
}

.g-recaptcha {
    margin-bottom: 20px;
}

/* -----------------------------------------
   Cookie message
   ----------------------------------------- */
#cookie-message {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: var(--md-color-white);
    width: 420px;
    max-width: calc(100% - 70px);
    padding: 31px 26px;
    z-index: var(--md-z-cookie);
    box-shadow: var(--md-shadow-cookie);
    opacity: 0;
    transition: opacity 0.6s;
    /* 600ms to fade out */
}

#cookie-message.show {
    opacity: 1;
    transition: opacity 0.6s;
    /* 600ms to fade out */
}

#cookie-message p {
    margin: 0;
    padding: 10px 0 5px 0;
    font-size: 22px;
    line-height: 40px;
}

#cookie-message h4 {
    font-size: 24px;
    line-height: 24px;
    font-weight: var(--md-font-weight-bold);
}

#cookie-message a {
    display: block;
}

#cookie-message span {
    position: absolute;
    top: 31px;
    right: 26px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!-- Font Awesome Pro 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --%3E%3Cpath fill='black' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 464c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm94.8-285.3L281.5 256l69.3 69.3c4.7 4.7 4.7 12.3 0 17l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L256 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.6 4.7 4.6 12.3 0 17z'/%3E%3C/svg%3E");
}

#cookie-message span:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!-- Font Awesome Pro 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --%3E%3Cpath fill='gray' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 464c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm94.8-285.3L281.5 256l69.3 69.3c4.7 4.7 4.7 12.3 0 17l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L256 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.6 4.7 4.6 12.3 0 17z'/%3E%3C/svg%3E");
}

/* -----------------------------------------
   Contact section
   ----------------------------------------- */
.md-contact-section {
    padding-top: 60px;
}

.md-map-img {
    border-radius: var(--md-radius-2xl);
}

/* -----------------------------------------
   Modal: Contact
   ----------------------------------------- */
.modal-content {
    background-color: var(--md-color-modal);
    color: var(--md-color-white);
}

.modal-header {
    border: unset;
    padding: 20px 30px;
}

.modal-body {
    padding: 30px;
}

.modal-body p {
    font-size: 28px;
    line-height: 42px;
    font-weight: var(--md-font-weight-light);
}

.modal-body h4 {
    font-size: 28px;
    line-height: 33px;
    font-weight: var(--md-font-weight-bold);
    margin-bottom: 47px;
}

.modal-footer {
    border: unset;
}

.md-icon-and-text {
    display: block;
    margin-bottom: 14px;
}

.md-icon-and-text .md-icon i {
    font-size: 38px;
    line-height: 38px;
    vertical-align: middle;
}

.md-icon-and-text .md-icon img {
    display: block;
}

.md-icon-and-text .md-icon {
    display: inline-block;
    width: 90px;
}

.md-icon-and-text .md-text p {
    font-size: 22px;
    line-height: 25px;
    margin-bottom: 0;
    font-weight: var(--md-font-weight-light);
}

.md-icon-and-text .md-text h5 {
    font-size: 28px;
    color: var(--md-color-white);
    margin-bottom: 0;
}

.md-icon-and-text .md-text {
    display: inline-block;
}

.md-icon-and-text .md-text a {
    text-decoration: underline;
    font-size: 22px;
}

.md-icon-and-text .md-text {}

/* width */
.modal-body::-webkit-scrollbar {
    width: 10px;
}

/* Track */
.modal-body::-webkit-scrollbar-track {
    background: var(--md-color-white);
}

/* Handle */
.modal-body::-webkit-scrollbar-thumb {
    background: var(--md-color-primary);
}

/* Handle on hover */
.modal-body::-webkit-scrollbar-thumb:hover {
    background: #206c8c;
}

.btn-close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!-- Font Awesome Pro 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --%3E%3Cpath fill='white' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 464c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm94.8-285.3L281.5 256l69.3 69.3c4.7 4.7 4.7 12.3 0 17l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L256 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.6 4.7 4.6 12.3 0 17z'/%3E%3C/svg%3E");
    font-size: 48px;
    line-height: 28px;
    opacity: 1;
    position: absolute;
    right: 20px;
    left: auto;
}

/* -----------------------------------------
   Form controls
   ----------------------------------------- */
form label {
    width: 100%;
}

label {
    font-size: var(--md-font-size-base);
    line-height: 22px;
    color: var(--md-color-dark);
    margin-bottom: var(--md-space-3);
    /* width: 100%; */
}

label[optional]::after {
    content: 'Optioneel';
    float: right;
    color: var(--md-color-blue-deep);
    font-size: var(--md-font-size-meta);
}

/* -----------------------------------------
   Branded checkbox component (.md-form-check)
   Builds on Bootstrap's .form-check / .form-check-input / .form-check-label
   so the markup stays familiar:
     <div class="form-check md-form-check">
       <input class="form-check-input" type="checkbox" ...>
       <label class="form-check-label" ...>...</label>
     </div>
   Default variant fills dark on white. Use .md-form-check--brand for
   higher-emphasis consent moments (e.g. modus-moment) — pink + larger.
   ----------------------------------------- */
.md-form-check {
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-height: auto;
}

.md-form-check .form-check-input {
    /* 1.125rem (18px) — 2px smaller than the original 1.25rem; reads as
       a meta/secondary control next to the 1rem label without looking
       cramped. */
    width: 1.125rem;
    height: 1.125rem;
    /* margin-top centers the checkbox on the FIRST line of the label:
       (line-height 1.4 × 1rem = 22.4px  −  checkbox 18px) / 2 ≈ 2.2px.
       With .md-form-check { align-items: flex-start; }, this keeps the
       checkbox aligned with the top line when the label wraps. */
    margin: 0.14rem 0 0 0;
    flex-shrink: 0;
    background-color: var(--md-color-white);
    border: 2px solid var(--md-color-dark);
    border-radius: var(--md-radius-xs);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.md-form-check .form-check-input:checked {
    background-color: var(--md-color-blue-deep);
    border-color: var(--md-color-blue-deep);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8 3 3 5-6'/%3E%3C/svg%3E");
    /* Check icon scaled proportionally to the smaller box (was 0.875rem
       in 1.25rem ≈ 70%; 0.8rem in 1.125rem ≈ 71% — same visual weight). */
    background-size: 0.8rem;
    background-position: center;
    background-repeat: no-repeat;
}

.md-form-check .form-check-input:focus-visible {
    outline: 2px solid var(--md-color-dark);
    outline-offset: 2px;
    box-shadow: none;
}

.md-form-check .form-check-label {
    font-size: var(--md-font-size-meta);
    line-height: 1.4;
    color: var(--md-color-text-muted);
    cursor: pointer;
    margin-bottom: 0;
}

.md-form-check .form-check-label a {
    color: inherit;
    text-decoration: underline;
}

.md-form-check .form-check-label a:hover {
    text-decoration: none;
}

/* Brand variant — pink. For consent on pink-branded pages (modus-moment etc.).
   Size matches the default .md-form-check (1.125rem); only the colour changes,
   so the base margin-top centering math stays valid. */
.md-form-check--brand .form-check-input {
    border-color: var(--md-color-pink);
}

.md-form-check--brand .form-check-input:checked {
    background-color: var(--md-color-pink);
    border-color: var(--md-color-pink);
}

.md-form-check--brand .form-check-input:focus-visible {
    outline-color: var(--md-color-pink);
}

.md-form-control {
    background-color: var(--md-color-gray-150);
    color: var(--md-color-blue-deep);
    border-radius: var(--md-radius-xs);
    border: 1px solid var(--md-color-gray-150);
    font-family: var(--md-font-body);
    font-size: 16px;
    line-height: 19px;
    padding: 12px 14px;
}

.md-form-control:focus {
    color: var(--md-color-blue-deep);
    background-color: var(--md-color-white);
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem #1E609140;
}

.md-form-control.invalid {
    border-color: var(--md-color-error);
    box-shadow: 0 0 0 .25rem #CC315840;
    background-color: var(--md-color-error-bg);
    color: var(--md-color-error);
}

label.invalid {
    color: var(--md-color-error);
}

/* -----------------------------------------
   Bootstrap validation overrides
   ----------------------------------------- */
.form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: var(--md-color-error-bootstrap);
    box-shadow: 0 0 0 3px rgba(248, 215, 218, 1);
    background-image: unset;
    padding-right: inherit;
}

.form-control.is-valid, .was-validated .form-control:valid {
    border-color: inherit;
    padding-right: inherit;
    background-image: unset;
}

.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
    border-color: var(--md-color-error-bootstrap);
    box-shadow: 0 0 0 .25rem rgba(248, 215, 218, 1);
}

.form-control.is-valid:focus, .was-validated .form-control:valid:focus {
    border-color: inherit;
    box-shadow: 0 0 0 .25rem #1E609140;
}

.was-validated .md-development-options.is-invalid ~ .invalid-feedback,
.was-validated .md-development-options.is-invalid + .invalid-feedback {
    display: block !important;
}

/* -----------------------------------------
   Alerts
   ----------------------------------------- */
.md-alert {
    border: unset;
    font-size: var(--md-font-size-xs);
    line-height: 14px;
    font-weight: var(--md-font-weight-semibold);
    padding: 14px 15px;
}

.md-alert ul {
    padding-left: 47px;
    margin-bottom: 0;
}

.md-alert ul li::marker {
    color: var(--md-color-error);
}

.md-alert ul li {
    font-size: var(--md-font-size-xs);
    line-height: 14px;
    font-weight: var(--md-font-weight-regular);

}

.md-alert i {
    vertical-align: middle;
    font-size: 21px;
    line-height: 21px;
    margin-right: var(--md-space-2);
}

.alert-success {
    color: var(--md-color-success);
    background-color: var(--md-color-success-bg);
}

.alert-danger {
    color: var(--md-color-error);
    background-color: var(--md-color-error-bg);
}

.alert-danger ul li::marker {
    color: var(--md-color-error);
}

/* -----------------------------------------
   Form floating labels
   ----------------------------------------- */
.form-floating>label {
    font-family: var(--md-font-body);
    font-weight: var(--md-font-weight-light);
    font-size: 22px;
    line-height: 24px;
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    transform: scale(.75) translateY(-.5rem) translateX(.15rem);
}

/* -----------------------------------------
   Checklist style
   ----------------------------------------- */
.md-ul-style ul {
    margin: 12px 0;
    list-style: none;
    padding: 0;
}

.md-ul-style ul li {
    font-size: var(--md-font-size-md);
    line-height: 29px;
}

.md-ul-style ul li:before {
    content: '\2713';
    width: 26px;
    display: inline-block;
    text-align: center;
    font-size: 16px;
    line-height: 29px;
}

/* -----------------------------------------
   Voucher form
   ----------------------------------------- */
.voucher-form {
    padding-top: 45px;
    padding-bottom: 45px;
}

.md-voucher-input {
    font-weight: var(--md-font-weight-black);
    font-size: 26px;
    line-height: 29px;
    letter-spacing: 1rem;
    text-transform: uppercase;
    text-align: center;
}

/* -----------------------------------------
   Modus Moment form
   ----------------------------------------- */
.md-moment-form {
    padding-top: 140px;
    padding-bottom: 120px;
    background-color: var(--md-color-gray-150);
}

.md-form-inverted .md-form-control {
    background-color: var(--md-color-white);
}

/* -----------------------------------------
   Development options checkboxes
   ----------------------------------------- */
.md-development-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
}

.md-development-option {
    position: relative;
}

.md-development-option input[type="checkbox"] {
    display: none;
}

.md-development-option .btn-outline-pink {
    border-color: var(--md-color-pink);
    color: var(--md-color-dark);
    border-width: 2px;
    position: relative;
    transition: all ease var(--md-transition-base);
    font-size: var(--md-font-size-sm);
    line-height: 16px;
    padding: 8px 12px;
}

.md-development-option .btn-outline-pink::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    opacity: 0;
    transition: opacity ease var(--md-transition-base);
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_143_1184)'%3E%3Cpath d='M7.50195 -0.00683594C7.56819 -0.00735853 7.634 0.00519937 7.69531 0.0302734C7.7567 0.055389 7.81246 0.0927679 7.85938 0.139648C7.90625 0.186524 7.94361 0.242372 7.96875 0.303711C7.99389 0.365159 8.00644 0.431657 8.00586 0.498047C8.00524 0.564297 7.99098 0.629548 7.96484 0.69043C7.93864 0.751432 7.90127 0.807392 7.85352 0.853516L4.70703 4L7.85352 7.14648C7.94438 7.24075 7.9943 7.36711 7.99316 7.49805C7.99195 7.62903 7.93931 7.75405 7.84668 7.84668C7.75401 7.9393 7.62906 7.992 7.49805 7.99316C7.36711 7.9943 7.24075 7.94438 7.14648 7.85352L4 4.70703L0.853516 7.85352C0.75932 7.94444 0.632863 7.9942 0.501953 7.99316C0.370855 7.99202 0.245048 7.93938 0.152344 7.84668C0.0597969 7.75406 0.0070754 7.62897 0.00585938 7.49805C0.00472062 7.367 0.0554739 7.24077 0.146484 7.14648L3.29297 4L0.146484 0.853516C0.0528558 0.759859 0.000119987 0.632418 0 0.5C0 0.367467 0.0528144 0.240238 0.146484 0.146484C0.240248 0.0527488 0.367418 0 0.5 0C0.632494 6.46482e-05 0.759809 0.0528064 0.853516 0.146484L4 3.29297L7.14648 0.146484C7.1926 0.0987379 7.24761 0.0603838 7.30859 0.0341797C7.3696 0.00797519 7.43556 -0.00625903 7.50195 -0.00683594Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_143_1184'%3E%3Crect width='8' height='8' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.md-development-option input[type="checkbox"]:checked + .btn-outline-pink {
    background-color: var(--md-color-pink);
    border-color: var(--md-color-pink);
    color: var(--md-color-white);
    padding-right: 30px;
}

.md-development-option input[type="checkbox"]:checked + .btn-outline-pink::after {
    opacity: 1;
}

.md-development-option .btn-outline-pink:hover {
    border-color: var(--md-color-pink);
    background-color: rgba(237, 17, 99, 0.1);
}

.md-development-option input[type="checkbox"]:checked + .btn-outline-pink:hover {
    background-color: var(--md-color-pink);
    border-color: var(--md-color-pink);
}

/* -----------------------------------------
   Responsive: Forms
   ----------------------------------------- */
@media screen and (max-width: 768px) {
    .md-voucher-input {
        font-size: 19px;
        line-height: 23px;
    }
}

@media screen and (max-width: 575.98px) {
    .modal-body p {
        font-size: 18px;
        line-height: 24px;
    }

    #cookie-message {
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 100%;
    }

    #cookie-message p {
        font-size: 18px;
        line-height: 34px;
    }

    .btn-close {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!-- Font Awesome Pro 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --%3E%3Cpath fill='white' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 464c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm94.8-285.3L281.5 256l69.3 69.3c4.7 4.7 4.7 12.3 0 17l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L256 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.6 4.7 4.6 12.3 0 17z'/%3E%3C/svg%3E");
        font-size: 48px;
        line-height: 28px;
        opacity: 1;
        position: absolute;
        left: auto;
        right: 20px;
    }
}