/* FE1005_PUSH_TOPIC_SELECTION
   Preserve FE1004-R2 geometry.
   Make the real checkbox own the entire row interaction and make visual
   selection derive from the checkbox's actual checked state. */

html[data-kisure-design="865"] body
.notification-subscribe-modal[data-notification-subscribe-modal]
.notification-topic {
    position: relative !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* The native checkbox is transparent but covers the entire topic tile.
   This makes every point on the row a real checkbox hit target. */
html[data-kisure-design="865"] body
.notification-subscribe-modal[data-notification-subscribe-modal]
.notification-topic > input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Visible square is decoration only; it must not steal the click. */
html[data-kisure-design="865"] body
.notification-subscribe-modal[data-notification-subscribe-modal]
.notification-topic > span,
html[data-kisure-design="865"] body
.notification-subscribe-modal[data-notification-subscribe-modal]
.notification-topic > strong {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Selected state: actual checked checkbox. */
html[data-kisure-design="865"] body
.notification-subscribe-modal[data-notification-subscribe-modal]
.notification-topic > input[type="checkbox"]:checked + span {
    background: #0B9CA0 !important;
    border: 1px solid #0B9CA0 !important;
    color: #fff !important;
}

html[data-kisure-design="865"] body
.notification-subscribe-modal[data-notification-subscribe-modal]
.notification-topic > input[type="checkbox"]:checked + span > i {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Deselected state: clearly empty, but keep exactly the same dimensions. */
html[data-kisure-design="865"] body
.notification-subscribe-modal[data-notification-subscribe-modal]
.notification-topic > input[type="checkbox"]:not(:checked) + span {
    background: #fff !important;
    border: 1px solid #9ebebe !important;
    color: transparent !important;
}

html[data-kisure-design="865"] body
.notification-subscribe-modal[data-notification-subscribe-modal]
.notification-topic > input[type="checkbox"]:not(:checked) + span > i {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Whole tile gives a second selected/unselected cue. */
html[data-kisure-design="865"] body
.notification-subscribe-modal[data-notification-subscribe-modal]
.notification-topic:has(> input[type="checkbox"]:checked) {
    background: #f8fdfd !important;
    border-color: #86cfd0 !important;
}

html[data-kisure-design="865"] body
.notification-subscribe-modal[data-notification-subscribe-modal]
.notification-topic:has(> input[type="checkbox"]:not(:checked)) {
    background: #fff !important;
    border-color: #d3e1e1 !important;
}

/* Keyboard focus is rendered on the decorative square and tile. */
html[data-kisure-design="865"] body
.notification-subscribe-modal[data-notification-subscribe-modal]
.notification-topic > input[type="checkbox"]:focus-visible + span {
    outline: 3px solid rgba(11,156,160,.25) !important;
    outline-offset: 2px !important;
}

html[data-kisure-design="865"] body
.notification-subscribe-modal[data-notification-subscribe-modal]
.notification-topic:focus-within {
    border-color: #0B9CA0 !important;
}

/* Dark-mode deselected state stays visible. */
html[data-kisure-design="865"][data-theme="dark"] body
.notification-subscribe-modal[data-notification-subscribe-modal]
.notification-topic > input[type="checkbox"]:not(:checked) + span {
    background: #1c2424 !important;
    border-color: #688585 !important;
    color: transparent !important;
}

html[data-kisure-design="865"][data-theme="dark"] body
.notification-subscribe-modal[data-notification-subscribe-modal]
.notification-topic:has(> input[type="checkbox"]:not(:checked)) {
    background: #242d2d !important;
    border-color: #3b5050 !important;
}

html[data-kisure-design="865"][data-theme="dark"] body
.notification-subscribe-modal[data-notification-subscribe-modal]
.notification-topic:has(> input[type="checkbox"]:checked) {
    background: #263737 !important;
    border-color: #4e8f91 !important;
}