/** Shopify CDN: Minification failed

Line 921:72 Unexpected "{"

**/
/* ========================================
   1) Loader spinner
   ======================================== */

.loader {
    border: 6px solid #f3f3f3;
    border-top: 6px solid rgb(40, 44, 76);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
    display: block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loader section for "Calculating options" */
.Opties_berekenen {
    text-align: center;
}

.loading-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto;
}

.loading-title {
    font-size: 24px;
    font-weight: bold;
    color: #222;
}

.loading-text {
    font-size: 18px;
    color: #555;
    max-width: 400px;
    margin: 0 auto;
}

/* ========================================
   2) Street autocomplete dropdown
   ======================================== */

#straat-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    z-index: 10;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    max-height: 200px;
}

#straat-suggestions li {
    padding: 5px 10px;
    cursor: pointer;
}

#straat-suggestions li:hover {
    background-color: #e1e1eb;
}

/* ========================================
   3) Calendar widget styling
   ======================================== */

.calendar-container {
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px 10px 20px 10px;
    width: 100%;
    border-radius: 0.75rem;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    border-radius: 0.75rem 0.75rem 0 0;
}

.calendar-days-bar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 5px 0;
    text-align: center;
    font-weight: bold;
}

.days_hr {
    margin: 0;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    padding: 10px;
    text-align: center;
}

.calendar-day {
    padding: 10px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: background 0.3s;
    border-radius: 50%;
}

.calendar-day:hover {
    background: beige;
    color: black;
}

.calendar-day.selected {
    background: #28a745;
    color: white;
}

.prev,
.next {
    cursor: pointer;
}

/* Width limit for the custom-date select version (desktop) */
.custom_date_select {
    max-width: 25%;
}

/* ========================================
   4) Timeslot Suggest Container
   ======================================== */

.timeslot_suggest_container {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem; /* rounded-xl */
    background: #ffffff;
    border: 1px solid #e5e7eb; /* gray-200 */
}

/* Error messages inside container */
.timeslot_suggest_container .invalid,
.timeslot_suggest_container .again_fil {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: #dc2626;
}

/* ========================================
   5) Timeslot Grid
   ======================================== */

.timeslot-container {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .timeslot-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .timeslot-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ========================================
   6) Timeslot Buttons (Main)
   ======================================== */

.btn-timeslot.btn-optimal-date-timeslot {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 8px;

    padding: 20px 24px;
    border-radius: 1rem;
    border: 2px solid #282c4c;
    background: #fff;

    font-size: 1.4rem;
    font-weight: 600;
    color: #0e1b4d;

    transition:
            background-color .2s ease,
            color .2s ease,
            border-color .2s ease,
            transform .15s ease,
            box-shadow .2s ease;

    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

/* Hover */
.btn-timeslot.btn-optimal-date-timeslot:hover {
    background: #e68f5d;
    border-color: #e68f5d;
    color: #fff;
}

.btn-timeslot.btn-optimal-date-timeslot:hover .padtxxs {
    color: #fff !important;
}

/* Times & subtext */
.btn-timeslot.btn-optimal-date-timeslot .padtxxs {
    font-size: 1.25rem;
    color: #4b5563;
    transition: color .2s ease;
}

/* Selected State */
.btn-timeslot.btn-optimal-date-timeslot.selected {
    background: #0e1b4d;
    border-color: #0e1b4d;
    color: #eff0f5;
}

.btn-timeslot.btn-optimal-date-timeslot.selected .padtxxs {
    color: #eff0f5;
}

/* Green Choice State */
.btn-timeslot.btn-optimal-date-timeslot.green-choice {
    border-color: #16a34a;
    background-color: #ecfdf3; /* green-50 */
}

.btn-timeslot.btn-optimal-date-timeslot.green-choice:hover {
    background-color: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

.btn-timeslot.btn-optimal-date-timeslot.green-choice:hover .padtxxs {
    color: #ffffff !important;
}

/* Green Choice Badge */
.btn-timeslot .green-choice-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;

    border-radius: 999px;
    font-size: 1.15rem;
    font-weight: 600;

    background-color: #bbf7d0; /* green-200 */
    color: #166534;            /* green-700 */

    margin-bottom: 4px;
}

/* Leaf icon size */
.btn-timeslot .green-choice-badge svg {
    width: 18px;
    height: 18px;
}

.booking-form .btn.btn-timeslot {
    height: auto;
    min-height: 0;
}

.booking-form .timeslot_suggest_container {
    padding: 2rem 2.25rem;
    margin-top: 2rem;
}

.booking-form .timeslot_suggest_container .timeslot-container {
    margin-bottom: 1.5rem;
}

/* ========================================
   7) Confirmation overlays (Bevestig afspraak)
   ======================================== */

.confirm_appointment,
.custom_confirm_appointment {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1000;
    padding: 10px;
    border-radius: 0.75rem;
}

.selecteslot {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 10px;
    border-radius: 0.75rem;
}

.selectedslot {
    background-color: #fff;
    border-radius: 0.75rem;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.date_time {
    display: flex;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
}

/* ========================================
   8) Tooltip (info-icon) + bubble (HTML-capable)
   ======================================== */

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 2px;
    transform: translateY(-1px);
    font-size: 12px;
    font-weight: 600;
    border-radius: 50%;
    border: 1.4px solid #5a5a5a;
    color: #5a5a5a;
    cursor: pointer;
    position: relative;
    z-index: 50; /* eigen stacking context */
}

/* Tooltip bubble (apart element .info-tooltip in JS/HTML) */
.info-tooltip {
    position: absolute;
    left: 50%;
    bottom: 130%;
    transform: translateX(-50%);
    width: min(90vw, 520px);   /* breder én responsive */
    max-width: 520px;

    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    color: #ffffff;
    background: #000000;
    border-radius: 0.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 9999; /* altijd boven andere elementen */
}

/* Tekst in de tooltip */
.info-tooltip p {
    margin: 0 0 0.5rem 0;
}
.info-tooltip p:last-child {
    margin-bottom: 0;
}

/* Arrow onderaan de bubble */
.info-tooltip::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    border-width: 7px;
    border-style: solid;
    border-color: #000000 transparent transparent transparent;
}

/* Show tooltip on hover / focus */
.info-icon:hover .info-tooltip,
.info-icon:focus-visible .info-tooltip {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   9) Required-field asterisk
   ======================================== */

.superscript-asterisk {
    position: relative;
}

.superscript-asterisk::after {
    content: "*";
    position: absolute;
    top: -0.1em;
    font-size: 1.4em;
    color: rgb(230, 143, 93);
}

/* ========================================
   10) Validation indicators (X / ✓ + rode rand)
   ======================================== */

.form-group {
    position: relative;
}

.form-group .error-message {
    position: static;
    margin-top: 6px;
    font-size: 14px;
    color: #dc2626;
}

/* Green checkmark when input is valid */
.form-group.valid::after {
    content: "✔";
    position: absolute;
    right: 12px;
    top: 58px;
    transform: translateY(-50%);
    font-size: 18px;
    color: #28a745;
    font-weight: bold;
    pointer-events: none;
}

/* Red cross when input is invalid */
.form-group.invalid::after {
    content: "✖";
    position: absolute;
    right: 12px;
    top: 58px;
    transform: translateY(-50%);
    font-size: 18px;
    color: #dc2626;
    font-weight: bold;
    pointer-events: none;
}

/* Herstel border override van theme.css tijdens validatie */
.form-group.invalid .form-control {
    border-color: #dc2626 !important;  /* rood */
    border-width: 2px;                 /* optioneel, maar meestal mooier */
}

.form-group.valid .form-control {
    border-color: #28a745 !important;  /* groen */
    border-width: 2px;
}

.form-group.invalid .form-control:focus {
    box-shadow: none !important;
}

/* Specifiek voor de grote custom_date textarea
   (voeg class form-group--textarea toe aan de wrapper) */
.form-group.form-group--textarea.valid::after,
.form-group.form-group--textarea.invalid::after {
    top: 140px;
    transform: translateY(-50%);
}

/* Red border for invalid inputs */
.form-group.invalid input,
.form-group.invalid select,
.form-group.invalid textarea {
    border-color: #dc2626 !important;
}

.form-group.valid input,
.form-group.valid select,
.form-group.valid textarea {
    border-color: #28a745 !important;
}

/* Select styling (zonder native pijltje) */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Interests dropdown rand-kleur bij validatie */
.form-group.invalid #interests-toggle {
    border-color: #dc2626 !important;
}

.form-group.valid #interests-toggle {
    border-color: #28a745 !important;
}



/* Alleen randkleur wijzigen bij valid/invalid */
.form-group.invalid input,
.form-group.invalid select,
.form-group.invalid textarea,
.form-group.valid input,
.form-group.valid select,
.form-group.valid textarea {
    padding-right: 2.5rem; /* ruimte voor icoon, constant */
}

/* Zorg dat de blauwe laadbalk altijd zichtbaar mag zijn */
.progress-fill {
    display: block !important;
}

/* ========================================
   11) MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 640px) {
    /* Loader text iets kleiner */
    .loading-title {
        font-size: 20px;
    }

    .loading-text {
        font-size: 16px;
        padding: 0 8px;
    }

    /* Calendar iets compacter */
    .calendar-header {
        font-size: 16px;
        padding: 8px;
    }

    .calendar-day {
        padding: 8px;
    }

    /* Timeslot buttons – grote tekst op mobiel maar iets minder padding */
    .btn-timeslot.btn-optimal-date-timeslot {
        padding: 16px 18px;
        font-size: 1.4rem;
    }

    .btn-timeslot.btn-optimal-date-timeslot .padtxxs {
        font-size: 1.25rem;
    }

    .btn-timeslot .green-choice-badge {
        font-size: 1.15rem;
    }

    /* Confirmation overlay tekst */
    .date_time {
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-size: 16px;
    }

    .selectedslot {
        padding: 12px;
    }

    /* Tooltip: iets smaller op hele kleine schermen */
    .info-tooltip {
        width: min(94vw, 480px);
        padding: 14px 16px;
    }

    /* Custom_date_select niet te smal op mobiel */
    .custom_date_select {
        max-width: 100%;
    }

    .info-tooltip {
        position: fixed;
        bottom: calc(100% + 10px);

        transform: translateX(-50%);

        inset-inline: calc(100% + 20px);
        margin-inline: auto;

        max-width: calc(100vw - 24px);
    }

}

/* ========================================
   12) Tablet / grotere schermen kleine finetuning
   ======================================== */

@media (min-width: 768px) {
    .selectedslot {
        padding: 18px;
    }

    .date_time {
        font-size: 18px;
    }
}

/* oude styling neutraliseren */
.booking-form .form-group {
    width: 100%;
    max-width: none;
    display: block;
}

.form-group {
    max-width: none !important;
}

.step1-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    width: 100%;
}

@media (min-width: 768px) {
    .step1-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#interests-panel {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    z-index: 99999;
    border: 2px solid #282c4c;
    border-radius: 0.75rem;
}

#interests-panel > div {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

#interests-panel label {
    display: block;
    align-items: center;
    padding: 0.4rem 0.8rem;
    margin: 0;
}

#interests-panel label span {
    margin-left: 0.4rem;
}

.form-group>*+*{
    margin-inline-start: 0;
}


.booking-form button.btn.btn--secondary,
.booking-form a.btn.btn--secondary {
    margin-top: 1.25rem;
}

.booking-form button.btn.btn--primary,
.booking-form a.btn.btn--primary {
    margin-top: 1.75rem;
}

#interests-toggle.btn.btn--primary {
    margin-top: 0 !important;
}

.booking-form .hidden { display: none !important; }

/* Forceer kleurcorrectie + hover-effect voor primary button binnen deze section */
#interests-dropdown .btn.btn--primary {
    /* Sweep-/hoverkleur (oranje) en tekst op hover (wit) */
    --color-button: 230,143,93;         /* #E68F5D */
    --color-button-text: 255,255,255;   /* #FFFFFF */

    /* Basis primary-states (uitgangssituatie) */
    --color-primary-button: 237,237,237;       /* #EDEDED */
    --color-primary-button-text: 40,44,76;     /* #282C4C */

    background-color: rgb(var(--color-primary-button));
    color: rgb(var(--color-primary-button-text));
    border: none;
    transition: all 0.25s ease-in-out;
}

/* Hover-effect consistent met sweepkleur */
#interests-dropdown .btn.btn--primary:hover {
    background-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
}

/* (optioneel, extra zekerheid tegen thematische overrides) */
#interests-dropdown .btn.btn--primary::before {
    background-color: rgb(var(--color-button)) !important;
}

/* ========================================
   Window count dropdown – panel styling
   ======================================== */

#ramen-panel {
    /* Same floating box style as interests panel */
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    z-index: 99999;
    border: 2px solid #282c4c;
    border-radius: 0.75rem;
    background: #ffffff;
}

/* Panel inner layout – same spacing as interests */
#interests-panel > div,
#ramen-panel > div {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 0.75rem 0.9rem;
}

/* Each option row */
#interests-panel label,
#ramen-panel label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.8rem;
    margin: 0;
    cursor: pointer;
    font-size: 1.05rem;
}

/* Text next to the input */
#interests-panel label span,
#ramen-panel label span {
    margin-left: 0.2rem;
}

/* Button for the window-count dropdown (same as Interests dropdown button) */
#ramen-dropdown .btn.btn--primary {
    --color-button: 230,143,93;         /* Hover color */
    --color-button-text: 255,255,255;   /* Hover text color */

    --color-primary-button: 237,237,237;       /* Default bg */
    --color-primary-button-text: 40,44,76;     /* Default text */

    background-color: rgb(var(--color-primary-button));
    color: rgb(var(--color-primary-button-text));
    border: none;
    transition: all 0.25s ease-in-out;
}

/* Hover effect identical to interests dropdown */
#ramen-dropdown .btn.btn--primary:hover {
    background-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
}

/* Ensures sweep animation uses correct color */
#ramen-dropdown .btn.btn--primary::before {
    background-color: rgb(var(--color-button)) !important;
}

/* ========================================
   Window count dropdown – custom radios
   Match look & feel of interests checkboxes
   ======================================== */

/* Hide native radio but keep it focusable / clickable */
#ramen-panel input[type="radio"].ramen-option {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Make sure each option row can host the fake box */
#ramen-panel label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
}

/* Text + fake box container */
#ramen-panel label span {
    position: relative;
    padding-left: 2.4rem;       /* space for the box */
    font-size: 1.05rem;
}

/* Fake checkbox box – same as interests */
#ramen-panel label span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 3px;
    border: 1px solid #16a34a;  /* green border */
    background: #ffffff;
}

/* Dark fill when selected */
#ramen-panel input[type="radio"].ramen-option:checked + span::before {
    background-color: #282c4c;  /* dark blue */
    border-color: #16a34a;
}

#ramen-dropdown,
#ramen-dropdown .btn {
    margin-top: 0 !important;
}

/* Layout for each ramen option row */
#ramen-panel .ramen-option-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;          /* space between radio and text */
    padding: 0.4rem 0.75rem;
    cursor: pointer;
}

/* extra spacing on the span if you want */
#ramen-panel .ramen-option-label span {
    padding-left: 3rem;
}

/* Base state — leave untouched */
#ramen-dropdown .btn.btn--primary,
#interests-dropdown .btn.btn--primary {
    border: 2px solid #282c4c;
    transition: all .2s ease;
}

/* ❌ INVALID — red border + red text */
.form-group.invalid #ramen-dropdown .btn--primary,
.form-group.invalid #interests-dropdown .btn--primary {
    border-color: #dc2626 !important;
}

/* ✔ VALID — green border + dark text */
.form-group.valid #ramen-dropdown .btn--primary,
.form-group.valid #interests-dropdown .btn--primary {
    border-color: #16a34a !important;
}

#ramen-panel input:is([type=checkbox],[type=radio])::after,
#interests-panel input:is([type=checkbox],[type=radio])::after {
    content: none !important;
}

#ramen-panel input[type="radio"].ramen-option:checked + span::after,
#interests-panel input[type="checkbox"].interest-option:checked + span::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;

    background-image: url("data:image/svg+xml;utf8,\
<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>\
<path d='M5 10.5L8.5 14L15 6' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
    background-size: contain;
    background-repeat: no-repeat;
}

#interests-panel input[type="checkbox"].interest-option:checked + span::after {
    left: 14px;
}
@media (max-width: 640px) {
    #ramen-panel input[type="radio"].ramen-option:checked + span::after,{
        left: 2px;
    }
}


/*@media (max-width: 640px) {*/
/*    #interests-panel input[type="checkbox"].interest-option:checked + span::after {*/
/*        left: 10px;*/
/*    }*/
/*}*/

/* ========================================
   Booking Form Buttons — Color Override
   ======================================== */

.booking-form .padt,
.booking-form .confirm_btn,
.booking-form .confirm_btn_no,
.booking-form .custom_date,
.booking-form #showCalendarBtn {
    /* Base button style */
    --btn-base-bg: 14,27,77;         /* #0e1b4d = dark blue */
    --btn-base-text: 239,240,245;    /* #eff0f5 = off-white */

    /* Sweep / hover style */
    --btn-hover-bg: 230,143,93;      /* #E68F5D = orange */
    --btn-hover-text: 255,255,255;   /* white */

    background-color: rgb(var(--btn-base-bg));
    color: rgb(var(--btn-base-text));
    border: 0;
    transition: all .25s ease-in-out;
}

.booking-form .padt:hover,
.booking-form .confirm_btn:hover,
.booking-form .confirm_btn_no:hover,
.booking-form .custom_date:hover,
.booking-form #showCalendarBtn:hover {
    background-color: rgb(var(--btn-hover-bg));
    color: rgb(var(--btn-hover-text));
}

/* OPTIONAL: extra protection against theme sweep overlays */
.booking-form .padt::before,
.booking-form .confirm_btn::before,
.booking-form .confirm_btn_no::before,
.booking-form .custom_date::before,
.booking-form #showCalendarBtn::before {
    background-color: rgb(var(--btn-hover-bg)) !important;
}