/* Unified custom checkbox and radio styles */

/*
 * Checkbox markup comes in two shapes:
 * 1) Sibling: <input type="checkbox"><label for="id">…</label>
 * 2) Yii ActiveField with label option: <label><input type="checkbox">…</input></label>
 *    (hidden uncheck field may sit before <label> — breaks input+label)
 */

:where(input[type=checkbox]),
:where(input[type=radio]) {
    position: absolute;
    left: -1000em;
}

:where(input[type=checkbox]) + label,
:where(label:has(> input[type=checkbox])) {
    position: relative;
    min-height: 20px;
    margin: 0;
    padding-inline-start: calc(var(--checkbox-box-left) + var(--checkbox-size) + var(--checkbox-label-gap)) !important;
    color: var(--black, #222324);
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* Box offset from label start (e.g. pill inset); default 0 */
    --checkbox-box-left: 0px;
    --checkbox-size: 18px;
    --checkbox-label-gap: 8px;
}

:where(input[type=checkbox]) + label a,
:where(label:has(> input[type=checkbox])) a {
    color: #0645AD;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    text-decoration-line: underline;
}

/* Two full SVGs: swap background on :checked (native input handles click). */
:where(input[type=checkbox]) + label:before,
:where(label:has(> input[type=checkbox])):before {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: var(--checkbox-box-left);
    z-index: 1;
    display: block;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    margin-top: calc(-1 * var(--checkbox-size) / 2);
    box-sizing: border-box;
    border: none;
    background-color: transparent;
    background-image: url("/assets/site/svg/forms/checkbox-unchecked.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: var(--checkbox-size) var(--checkbox-size);
    cursor: pointer;
    transition: opacity 0.15s ease;
}

:where(input[type=checkbox]:checked) + label:before,
:where(label:has(> input[type=checkbox]:checked)):before {
    background-image: url("/assets/site/svg/forms/checkbox-checked.svg");
}

:where(input[type=checkbox]:focus-visible) + label:before,
:where(label:has(> input[type=checkbox]:focus-visible)):before,
:where(input[type=radio]:focus-visible) + label:before {
    outline: 2px solid var(--azure--azure40, #005FF9);
    outline-offset: 2px;
}

:where(input[type=checkbox]:disabled) + label,
:where(label:has(> input[type=checkbox]:disabled)) {
    color: var(--grey--grey60, #ABABAB);
    cursor: not-allowed;
}

:where(input[type=checkbox]:disabled) + label:before,
:where(label:has(> input[type=checkbox]:disabled)):before {
    opacity: 0.55;
    cursor: not-allowed;
}

:where(input[type=radio]) + label {
    position: relative;
    padding-left: 35px;
    margin: 0;
}

:where(input[type=radio]) + label:before {
    content: "\f1db";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
    display: block;
    font-family: "FontAwesome";
    color: var(--black--black10, #222324);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

:where(input[type=radio]:checked) + label:before {
    content: "\f192";
    color: var(--primary-color--default);
}

html[dir=rtl] :where(input[type=checkbox]),
html[dir=rtl] :where(input[type=radio]) {
    position: absolute;
    right: -1000em !important;
    left: 0 !important;
    opacity: 0;
}

html[dir=rtl] :where(input[type=checkbox]) + label,
html[dir=rtl] :where(label:has(> input[type=checkbox])) {
    padding-inline-start: 0;
    padding-inline-end: calc(var(--checkbox-box-left) + var(--checkbox-size) + var(--checkbox-label-gap));
    padding-top: 2px;
    padding-bottom: 8px;
}

.checkbox {
    margin-top: 0;
    margin-bottom: 0;
}