/* ─── spacing between the two radio buttons ──────────────────── */
.profile-radio{
    display:flex;
    gap:40px;                 /* wider than before → clearer separation  */
    justify-content:center;
    align-items:center;
}

/* make the invisible input cover the entire label for easy click-drag */
.profile-radio input{
    position:absolute;
    opacity:0;
    inset:0;                 /* stretch over the label */
    cursor:pointer;
}

/* ─── default 3-D pill ───────────────────────────────────────── */
.profile-radio label{
    position:relative;
    padding:4px 8px;
    background:#ada387;
    color:#fff;
    border:2px solid #c3b797;
    border-radius:10px;
    font-size:18px;
    box-shadow:
        0 4px 0 0 #83795d,           /* bottom edge (outer) */
        inset 0 2px 0 rgba(255,255,255,.25);  /* subtle top highlight */
    transition:transform .1s, box-shadow .1s;
    user-select:none;
}

/* ─── pressed-in look on :active (mouse down) ─────────────────── */
.profile-radio label:active{
    transform:translateY(2px);
    box-shadow:
        0 2px 0 0 #83795d,               /* shorter outer shadow */
        inset 0 2px 4px rgba(0,0,0,.25); /* deeper inner bevel   */
}

/* ─── selected state ─────────────────────────────────────────── */
.profile-radio input:checked + label{
    background:#c3b797;
    color:#fff;
    box-shadow:
        0 2px 0 0 #42545c,               /* already “pressed”    */
        inset 0 2px 4px rgba(0,0,0,.25);
}

/* maintain the down-press illusion when a selected button is clicked again */
.profile-radio input:checked + label:active{
    transform:translateY(1px);
}

/* ─── keyboard focus outline (for accessibility) ─────────────── */
.profile-radio input:focus-visible + label{
    outline:3px dashed #9eb5c0;
    outline-offset:5px;
}