/* ───────── Base layout ───────── */
.list-options           { display:flex; gap:60px; align-items:center; }
.list-option            { display:flex; align-items:center; gap:10px; cursor:pointer; }
.matrix-option          { justify-content: center; }
.list-option input      { display:none; }

/* ───────── Visual element ───────── */
.option-visual{
    width:22px; height:22px;
    min-width: 22px; min-height:22px;
    border:2px solid #C1C4CC;
    background:#fff;
    box-sizing:border-box;
    position:relative;
    transition:border .2s, background .2s, box-shadow .2s;
}

/* circle vs. square */
.list-option input[type=radio]    + .option-visual{ border-radius:50%; }
.list-option input[type=checkbox] + .option-visual{ border-radius:4px; }

/* inner mark (hidden by default) */
.option-visual::after{
    content:'';
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    opacity:0; transition:opacity .2s;
}
.list-option input[type=radio] + .option-visual::after{
    width:9px; height:9px; border-radius:50%; background:#fff;
}
.list-option input[type=checkbox] + .option-visual::after{
    width:6px; height:11px; border:2px solid #fff; border-top:0; border-left:0;
    transform:translate(-50%,-60%) rotate(45deg);
}

/* label */
.option-label{
    color:var(--Dark-800,#393A45);
    font:400 16px/normal Roboto, sans-serif;
    transition:color .2s;
}

/* ───────── Checked ───────── */
.list-option input:checked + .option-visual{
    background: var(--primary-color); border-color: var(--primary-color);
    box-shadow:0 4px 8px var(--primary-box-shadow);
}
.list-option input:checked + .option-visual::after{ opacity:1; }
.list-option input:checked + .option-visual + .option-label{ color:var(--primary-color); }

/* donut rim only for radio */
.list-option input[type=radio]:checked + .option-visual{ border-width:10px; }

/* ───────── Disabled ───────── */
/* Un-checked disabled → grey ring, white centre */
.list-option input:disabled:not(:checked) + .option-visual{
    border-color:#BFC1C7; background:#fff; box-shadow:none; cursor:not-allowed;
}
.list-option input:disabled:not(:checked) + .option-visual::after{ opacity:0; }
.list-option input:disabled:not(:checked) + .option-visual + .option-label{
    color:#BFC1C7; cursor:not-allowed;
}

/* Checked disabled → solid grey fill + white mark */
.list-option input:disabled:checked + .option-visual{
    background:#BFC1C7; border-color:#BFC1C7; box-shadow:none; cursor:not-allowed;
}
.list-option input:disabled:checked + .option-visual::after{ opacity:1; background:#fff; }
.list-option input:disabled:checked + .option-visual + .option-label{
    color:#BFC1C7; cursor:not-allowed;
}

.list-option input[type=checkbox]:disabled:checked + .option-visual::after{
    opacity:1;               /* sýna merkið        */
    background:none;         /* ekkert fylling     */
    border-color:#fff;       /* hvít strik ✓       */
}

.option {
    display: flex;
    padding: 16px 5px;
    align-items: center;

    border-bottom: 1px solid var(--Dark-100, #E9E9EA);
    background: var(--White, #FFF);
}

@media (max-width: 768px) {
    .option-visual {
        width: 18px; 
        height: 18px;
        min-width: 18px; 
        min-height: 18px;
    }
    .list-option input[type=radio]:checked + .option-visual{ border-width:8px; }

    .option-label {
        font-size: 14px;
    }

    .option {
        padding: 12px 5px;
    }
}