/*
|--------------------------------------------------------------------------
| VALU5 uniforme selectieknoppen
|--------------------------------------------------------------------------
| Alleen vorm en look-and-feel.
| Geen wijziging van formulierlogica, waarden of validatie.
*/

html body input[type="radio"]:not(.valu5-native-radio):not([data-native-control="true"]) {
    -webkit-appearance: none !important;
    appearance: none !important;

    display: inline-block !important;
    position: relative !important;
    flex: 0 0 36px !important;

    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #ccd8de !important;
    border-radius: 50% !important;

    opacity: 1 !important;
    visibility: visible !important;

    background-color: #ffffff !important;
    background-image:
        radial-gradient(
            circle at center,
            #ffffff 0 6px,
            #777d82 6.5px 7.5px,
            #ffffff 8px
        ) !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;

    box-shadow: none !important;
    box-sizing: border-box !important;

    cursor: pointer !important;
    vertical-align: middle !important;

    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        transform 140ms ease,
        background-image 140ms ease !important;
}

html body input[type="radio"]:not(.valu5-native-radio):not([data-native-control="true"]):hover {
    border-color: #174f52 !important;
    box-shadow: 0 0 0 3px rgba(23, 79, 82, 0.07) !important;
}

html body input[type="radio"]:not(.valu5-native-radio):not([data-native-control="true"]):checked {
    border-color: #174f52 !important;

    background-color: #ffffff !important;
    background-image:
        radial-gradient(
            circle at center,
            #174f52 0 5px,
            #ffffff 5.5px 7px,
            #174f52 7.5px 8.5px,
            #ffffff 9px
        ) !important;

    box-shadow: 0 0 0 3px rgba(23, 79, 82, 0.08) !important;
}

html body input[type="radio"]:not(.valu5-native-radio):not([data-native-control="true"]):focus {
    outline: none !important;
}

html body input[type="radio"]:not(.valu5-native-radio):not([data-native-control="true"]):focus-visible {
    outline: 3px solid rgba(23, 79, 82, 0.22) !important;
    outline-offset: 3px !important;
}

html body input[type="radio"]:not(.valu5-native-radio):not([data-native-control="true"]):active {
    transform: scale(0.96) !important;
}

html body input[type="radio"]:not(.valu5-native-radio):not([data-native-control="true"]):disabled {
    cursor: not-allowed !important;
    opacity: 0.45 !important;
}

/*
 * Herstel voor Tailwind-achtige verborgen radioknoppen.
 * De positie in de formulierstructuur blijft behouden.
 */
html body input[type="radio"].sr-only:not(.valu5-native-radio),
html body input[type="radio"].hidden:not(.valu5-native-radio),
html body input[type="radio"].peer:not(.valu5-native-radio) {
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
}

/* Voorkomt afwijkende accentkleuren vanuit browser of lokaal formulier. */
html body input[type="radio"] {
    accent-color: #174f52;
}

/* VALU5_INTAKE_SELECTION_CARDS_V1 */

/*
 * Intake-selecties als kaarten:
 * zelfde rustige vorm en look-and-feel als de uniforme selectieknop.
 */
main form label:has(input[type="checkbox"]),
main form label:has(input[type="radio"]) {
    position: relative;
    cursor: pointer;
}

/*
 * Specifiek voor kaartachtige keuzes in intake.
 * Dit pakt de meeste intake-opties waar een label een verborgen input bevat.
 */
main form .grid label:has(input[type="checkbox"]),
main form .grid label:has(input[type="radio"]),
main form [class*="grid"] label:has(input[type="checkbox"]),
main form [class*="grid"] label:has(input[type="radio"]),
main form [class*="options"] label:has(input[type="checkbox"]),
main form [class*="options"] label:has(input[type="radio"]),
main form [class*="choices"] label:has(input[type="checkbox"]),
main form [class*="choices"] label:has(input[type="radio"]),
main form [class*="select"] label:has(input[type="checkbox"]),
main form [class*="select"] label:has(input[type="radio"]) {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    min-height: 110px !important;
    padding: 26px 28px 26px 96px !important;
    border: 1px solid #d9e3e8 !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        background-color 140ms ease,
        transform 140ms ease !important;
}

/* Verberg de native input visueel, maar laat hem functioneel */
main form .grid label input[type="checkbox"],
main form .grid label input[type="radio"],
main form [class*="grid"] label input[type="checkbox"],
main form [class*="grid"] label input[type="radio"],
main form [class*="options"] label input[type="checkbox"],
main form [class*="options"] label input[type="radio"],
main form [class*="choices"] label input[type="checkbox"],
main form [class*="choices"] label input[type="radio"],
main form [class*="select"] label input[type="checkbox"],
main form [class*="select"] label input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
}

/* Ongeselecteerde indicator */
main form .grid label:has(input[type="checkbox"])::before,
main form .grid label:has(input[type="radio"])::before,
main form [class*="grid"] label:has(input[type="checkbox"])::before,
main form [class*="grid"] label:has(input[type="radio"])::before,
main form [class*="options"] label:has(input[type="checkbox"])::before,
main form [class*="options"] label:has(input[type="radio"])::before,
main form [class*="choices"] label:has(input[type="checkbox"])::before,
main form [class*="choices"] label:has(input[type="radio"])::before,
main form [class*="select"] label:has(input[type="checkbox"])::before,
main form [class*="select"] label:has(input[type="radio"])::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 1px solid #ccd8de;
    border-radius: 999px;
    background:
        radial-gradient(
            circle at center,
            transparent 0 8px,
            #7a8086 8.5px 9.5px,
            transparent 10px
        );
    background-color: #ffffff;
    box-sizing: border-box;
    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        background 140ms ease;
}

/* Hover */
main form .grid label:has(input[type="checkbox"]):hover,
main form .grid label:has(input[type="radio"]):hover,
main form [class*="grid"] label:has(input[type="checkbox"]):hover,
main form [class*="grid"] label:has(input[type="radio"]):hover,
main form [class*="options"] label:has(input[type="checkbox"]):hover,
main form [class*="options"] label:has(input[type="radio"]):hover,
main form [class*="choices"] label:has(input[type="checkbox"]):hover,
main form [class*="choices"] label:has(input[type="radio"]):hover,
main form [class*="select"] label:has(input[type="checkbox"]):hover,
main form [class*="select"] label:has(input[type="radio"]):hover {
    border-color: #174f52 !important;
    box-shadow: 0 0 0 3px rgba(23, 79, 82, 0.05) !important;
}

main form .grid label:has(input[type="checkbox"]):hover::before,
main form .grid label:has(input[type="radio"]):hover::before,
main form [class*="grid"] label:has(input[type="checkbox"]):hover::before,
main form [class*="grid"] label:has(input[type="radio"]):hover::before,
main form [class*="options"] label:has(input[type="checkbox"]):hover::before,
main form [class*="options"] label:has(input[type="radio"]):hover::before,
main form [class*="choices"] label:has(input[type="checkbox"]):hover::before,
main form [class*="choices"] label:has(input[type="radio"]):hover::before,
main form [class*="select"] label:has(input[type="checkbox"]):hover::before,
main form [class*="select"] label:has(input[type="radio"]):hover::before {
    border-color: #174f52;
    box-shadow: 0 0 0 3px rgba(23, 79, 82, 0.07);
}

/* Geselecteerd */
main form .grid label:has(input:checked),
main form [class*="grid"] label:has(input:checked),
main form [class*="options"] label:has(input:checked),
main form [class*="choices"] label:has(input:checked),
main form [class*="select"] label:has(input:checked) {
    border-color: #38b8ad !important;
    background: #edf8f6 !important;
    box-shadow: 0 0 0 1px rgba(56, 184, 173, 0.10) inset !important;
}

main form .grid label:has(input:checked)::before,
main form [class*="grid"] label:has(input:checked)::before,
main form [class*="options"] label:has(input:checked)::before,
main form [class*="choices"] label:has(input:checked)::before,
main form [class*="select"] label:has(input:checked)::before {
    border-color: #38b8ad;
    background:
        radial-gradient(
            circle at center,
            #38b8ad 0 6px,
            #ffffff 6.5px 8.5px,
            #38b8ad 9px 10px,
            transparent 10.5px
        );
    background-color: #38b8ad;
    box-shadow: 0 0 0 3px rgba(56, 184, 173, 0.10);
}

/* Focus */
main form .grid label:has(input:focus-visible),
main form [class*="grid"] label:has(input:focus-visible),
main form [class*="options"] label:has(input:focus-visible),
main form [class*="choices"] label:has(input:focus-visible),
main form [class*="select"] label:has(input:focus-visible) {
    outline: 3px solid rgba(23, 79, 82, 0.16);
    outline-offset: 3px;
}

/* END VALU5_INTAKE_SELECTION_CARDS_V1 */

/* VALU5_INTAKE_SELECTION_CARDS_V1 */

/*
 * Intake-selecties als kaarten:
 * zelfde rustige vorm en look-and-feel als de uniforme selectieknop.
 */
main form label:has(input[type="checkbox"]),
main form label:has(input[type="radio"]) {
    position: relative;
    cursor: pointer;
}

/*
 * Specifiek voor kaartachtige keuzes in intake.
 * Dit pakt de meeste intake-opties waar een label een verborgen input bevat.
 */
main form .grid label:has(input[type="checkbox"]),
main form .grid label:has(input[type="radio"]),
main form [class*="grid"] label:has(input[type="checkbox"]),
main form [class*="grid"] label:has(input[type="radio"]),
main form [class*="options"] label:has(input[type="checkbox"]),
main form [class*="options"] label:has(input[type="radio"]),
main form [class*="choices"] label:has(input[type="checkbox"]),
main form [class*="choices"] label:has(input[type="radio"]),
main form [class*="select"] label:has(input[type="checkbox"]),
main form [class*="select"] label:has(input[type="radio"]) {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    min-height: 110px !important;
    padding: 26px 28px 26px 96px !important;
    border: 1px solid #d9e3e8 !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        background-color 140ms ease,
        transform 140ms ease !important;
}

/* Verberg de native input visueel, maar laat hem functioneel */
main form .grid label input[type="checkbox"],
main form .grid label input[type="radio"],
main form [class*="grid"] label input[type="checkbox"],
main form [class*="grid"] label input[type="radio"],
main form [class*="options"] label input[type="checkbox"],
main form [class*="options"] label input[type="radio"],
main form [class*="choices"] label input[type="checkbox"],
main form [class*="choices"] label input[type="radio"],
main form [class*="select"] label input[type="checkbox"],
main form [class*="select"] label input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
}

/* Ongeselecteerde indicator */
main form .grid label:has(input[type="checkbox"])::before,
main form .grid label:has(input[type="radio"])::before,
main form [class*="grid"] label:has(input[type="checkbox"])::before,
main form [class*="grid"] label:has(input[type="radio"])::before,
main form [class*="options"] label:has(input[type="checkbox"])::before,
main form [class*="options"] label:has(input[type="radio"])::before,
main form [class*="choices"] label:has(input[type="checkbox"])::before,
main form [class*="choices"] label:has(input[type="radio"])::before,
main form [class*="select"] label:has(input[type="checkbox"])::before,
main form [class*="select"] label:has(input[type="radio"])::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 1px solid #ccd8de;
    border-radius: 999px;
    background:
        radial-gradient(
            circle at center,
            transparent 0 8px,
            #7a8086 8.5px 9.5px,
            transparent 10px
        );
    background-color: #ffffff;
    box-sizing: border-box;
    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        background 140ms ease;
}

/* Hover */
main form .grid label:has(input[type="checkbox"]):hover,
main form .grid label:has(input[type="radio"]):hover,
main form [class*="grid"] label:has(input[type="checkbox"]):hover,
main form [class*="grid"] label:has(input[type="radio"]):hover,
main form [class*="options"] label:has(input[type="checkbox"]):hover,
main form [class*="options"] label:has(input[type="radio"]):hover,
main form [class*="choices"] label:has(input[type="checkbox"]):hover,
main form [class*="choices"] label:has(input[type="radio"]):hover,
main form [class*="select"] label:has(input[type="checkbox"]):hover,
main form [class*="select"] label:has(input[type="radio"]):hover {
    border-color: #174f52 !important;
    box-shadow: 0 0 0 3px rgba(23, 79, 82, 0.05) !important;
}

main form .grid label:has(input[type="checkbox"]):hover::before,
main form .grid label:has(input[type="radio"]):hover::before,
main form [class*="grid"] label:has(input[type="checkbox"]):hover::before,
main form [class*="grid"] label:has(input[type="radio"]):hover::before,
main form [class*="options"] label:has(input[type="checkbox"]):hover::before,
main form [class*="options"] label:has(input[type="radio"]):hover::before,
main form [class*="choices"] label:has(input[type="checkbox"]):hover::before,
main form [class*="choices"] label:has(input[type="radio"]):hover::before,
main form [class*="select"] label:has(input[type="checkbox"]):hover::before,
main form [class*="select"] label:has(input[type="radio"]):hover::before {
    border-color: #174f52;
    box-shadow: 0 0 0 3px rgba(23, 79, 82, 0.07);
}

/* Geselecteerd */
main form .grid label:has(input:checked),
main form [class*="grid"] label:has(input:checked),
main form [class*="options"] label:has(input:checked),
main form [class*="choices"] label:has(input:checked),
main form [class*="select"] label:has(input:checked) {
    border-color: #38b8ad !important;
    background: #edf8f6 !important;
    box-shadow: 0 0 0 1px rgba(56, 184, 173, 0.10) inset !important;
}

main form .grid label:has(input:checked)::before,
main form [class*="grid"] label:has(input:checked)::before,
main form [class*="options"] label:has(input:checked)::before,
main form [class*="choices"] label:has(input:checked)::before,
main form [class*="select"] label:has(input:checked)::before {
    border-color: #38b8ad;
    background:
        radial-gradient(
            circle at center,
            #38b8ad 0 6px,
            #ffffff 6.5px 8.5px,
            #38b8ad 9px 10px,
            transparent 10.5px
        );
    background-color: #38b8ad;
    box-shadow: 0 0 0 3px rgba(56, 184, 173, 0.10);
}

/* Focus */
main form .grid label:has(input:focus-visible),
main form [class*="grid"] label:has(input:focus-visible),
main form [class*="options"] label:has(input:focus-visible),
main form [class*="choices"] label:has(input:focus-visible),
main form [class*="select"] label:has(input:focus-visible) {
    outline: 3px solid rgba(23, 79, 82, 0.16);
    outline-offset: 3px;
}

/* END VALU5_INTAKE_SELECTION_CARDS_V1 */


/*
|--------------------------------------------------------------------------
| VALU5 INTAKE ONE CONTROL SOURCE FIX V2.1
|--------------------------------------------------------------------------
| De generieke selection-controls stylesheet tekent normaal zelf
| een keuze-indicator via label::before.
|
| Pets en recent-life-events hebben inmiddels hun eigen echte
| checkbox als enige zichtbare control. Daarom hier geen tweede
| pseudo-control.
|--------------------------------------------------------------------------
*/

/* ========================================================
   GEEN TWEEDE PSEUDO-RONDJE
   ======================================================== */

html body main form
[data-multi-container="pets"]
label.multi-option::before,

html body main form
[data-multi-container="pets"]
label.multi-option::after,

html body main form
[data-multi-container="recent-life-events"]
label.multi-option::before,

html body main form
[data-multi-container="recent-life-events"]
label.multi-option::after{
    content:none !important;
    display:none !important;

    width:0 !important;
    height:0 !important;

    border:0 !important;
    background:none !important;
    box-shadow:none !important;
}


/* ========================================================
   GENERIEKE 96PX LINKERPADDING OOK UITSCHAKELEN
   ======================================================== */

html body main form
[data-multi-container="pets"]
label.multi-option,

html body main form
[data-multi-container="recent-life-events"]
label.multi-option{
    display:grid !important;
    grid-template-columns:28px minmax(0,1fr) !important;
    align-items:center !important;

    gap:16px !important;

    min-height:76px !important;
    padding:16px 18px !important;

    border-radius:18px !important;
    box-sizing:border-box !important;
}


/* ========================================================
   ÉÉN ENIGE ZICHTBARE CONTROL
   ======================================================== */

html body main form
[data-multi-container="pets"]
label.multi-option
> input.v5-intake-choice-control,

html body main form
[data-multi-container="recent-life-events"]
label.multi-option
> input.v5-intake-choice-control{
    position:static !important;

    display:block !important;

    -webkit-appearance:none !important;
    appearance:none !important;

    width:28px !important;
    height:28px !important;

    min-width:28px !important;
    min-height:28px !important;

    margin:0 !important;
    padding:0 !important;

    opacity:1 !important;
    visibility:visible !important;

    clip:auto !important;
    clip-path:none !important;

    pointer-events:auto !important;

    border:2px solid #7E8B95 !important;
    border-radius:50% !important;

    background:#FFFFFF !important;
    box-shadow:none !important;
}


/* Geselecteerd */
html body main form
[data-multi-container="pets"]
label.multi-option
> input.v5-intake-choice-control:checked,

html body main form
[data-multi-container="recent-life-events"]
label.multi-option
> input.v5-intake-choice-control:checked{
    border-color:#238A87 !important;

    background:
        radial-gradient(
            circle at center,
            #238A87 0 42%,
            #FFFFFF 44% 100%
        ) !important;
}