/* Registration — role chooser. Everything else comes from login.css,
   booking.css and gov.css. */

.reg-fieldset { border: 0; padding: 0; margin: 0 0 26px; }
.reg-fieldset legend { padding: 0; }

/* The whole block is the label, so the clickable target is the entire option
   rather than a 16px radio — which matters most on a phone. */
.reg-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 2px solid #b1b4b6;
    background: #fff;
    cursor: pointer;
}
.reg-option:hover { border-color: var(--gov-blue); }

.reg-option input[type=radio] {
    width: 20px; height: 20px; margin: 2px 0 0;
    flex-shrink: 0; accent-color: var(--gov-blue); cursor: pointer;
}
.reg-option input[type=radio]:focus-visible { outline: 3px solid #ffdd00; outline-offset: 2px; }

/* Selected state is a thicker border plus a tint, not colour alone. */
.reg-option:has(input:checked) {
    border-color: var(--gov-blue);
    background: #eef4fb;
}

.reg-option span {
    font-size: calc(15px * var(--gov-font-scale));
    line-height: 1.6;
    color: #383f45;
}
.reg-option strong {
    display: block;
    font-size: calc(17px * var(--gov-font-scale));
    color: var(--gov-ink);
    margin-bottom: 2px;
}