/* NID Update form — mobile first. Base styles target 360px. */
* { box-sizing: border-box; }

body.nid-body {
    margin: 0;
    background: #f8f9fa;
    color: #292929;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

.nid-stripe { height: 4px; background: #cd171f; }

.nid-card { padding: 16px 18px 32px; background: #fff; min-height: 100vh; }

.nid-logo { padding: 0 0 14px; }
.nid-logo img { height: 32px; width: auto; max-width: 100%; }

.nid-h1 { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0 0 4px; }
.nid-sub { font-size: 12.5px; color: #717171; line-height: 1.5; margin: 0 0 20px; }

.nid-field { margin-bottom: 18px; }
.nid-fieldset { border: 0; margin-inline: 0; padding: 0; }

.nid-label {
    display: block; font-size: 12.5px; font-weight: 600;
    margin: 0 0 7px; padding: 0;
}
.nid-label i { color: #cd171f; font-style: normal; }

/* 16px minimum — anything smaller makes iOS Safari zoom the viewport on focus,
   which looks broken inside a fixed-size webview. */
.nid-input {
    width: 100%; height: 46px; min-height: 44px;
    border: 1px solid #d4d4d4; border-radius: 8px;
    padding: 0 13px; font-size: 16px; color: #292929; background: #fff;
    letter-spacing: .5px;
}
.nid-input:focus {
    outline: none; border-color: #cd171f;
    box-shadow: 0 0 0 3px rgba(205, 23, 31, .10);
}
.nid-input.is-invalid { border-color: #cd171f; background: #fdf3f4; }

.nid-hint { font-size: 11px; color: #717171; margin: 6px 0 0; }

/* Radio cards — the real input is visually hidden but still focusable. */
.nid-rcard {
    display: flex; align-items: center; gap: 11px;
    border: 1px solid #d4d4d4; border-radius: 8px;
    padding: 13px 14px; margin-bottom: 9px;
    font-size: 14.5px; min-height: 44px; cursor: pointer;
}
.nid-rcard input[type="radio"] {
    position: absolute; opacity: 0; width: 1px; height: 1px;
}
.nid-dot {
    width: 19px; height: 19px; border-radius: 50%;
    border: 2px solid #c4c4c4; flex: none;
}
.nid-rcard:has(input:checked) { border-color: #cd171f; background: #fdf3f4; font-weight: 600; }
.nid-rcard:has(input:checked) .nid-dot {
    border-color: #cd171f;
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 12px #cd171f;
}
/* Fallback for browsers without :has() — JS mirrors the state onto .is-checked */
.nid-rcard.is-checked { border-color: #cd171f; background: #fdf3f4; font-weight: 600; }
.nid-rcard.is-checked .nid-dot {
    border-color: #cd171f;
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 12px #cd171f;
}
.nid-rcard input[type="radio"]:focus-visible ~ .nid-dot {
    outline: 2px solid #cd171f; outline-offset: 2px;
}

.nid-guidance {
    background: #fdf3f4; border-left: 3px solid #cd171f;
    border-radius: 0 6px 6px 0; padding: 11px 13px;
    font-size: 12px; color: #8a1219; line-height: 1.5; margin-bottom: 18px;
}

.nid-errors {
    background: #fdf3f4; border: 1px solid #cd171f; border-radius: 8px;
    padding: 12px 14px; margin-bottom: 18px; font-size: 12.5px; color: #8a1219;
}
.nid-errors p { margin: 0 0 6px; font-weight: 600; }
.nid-errors ul { margin: 0; padding-left: 18px; line-height: 1.6; }

/* Form-level notice (session expiry, rate limit) — informational, not a list
   of per-field mistakes the user can correct, so it is styled distinctly from
   .nid-errors rather than sharing its "Please correct the following:" list. */
.nid-notice {
    background: #fdf3f4; border-left: 3px solid #cd171f;
    border-radius: 0 6px 6px 0; padding: 11px 13px;
    margin-bottom: 18px; font-size: 12.5px; color: #8a1219; line-height: 1.5;
}
.nid-notice p { margin: 0; }

.nid-captcha-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.nid-captcha-row img { border: 1px solid #d4d4d4; border-radius: 6px; height: 42px; }
.nid-refresh {
    width: 44px; height: 44px; border: 1px solid #d4d4d4; border-radius: 6px;
    background: #fff; font-size: 18px; color: #717171; cursor: pointer;
}

.nid-btn {
    width: 100%; height: 50px; border: none; border-radius: 8px;
    background: #cd171f; color: #fff; font-size: 15.5px; font-weight: 700;
    margin-top: 6px; cursor: pointer;
}
.nid-btn:active { background: #b3171e; }
.nid-btn:disabled { background: #e1e1e1; color: #adb5bd; cursor: not-allowed; }

/* Success panel */
.nid-success { text-align: center; padding: 48px 8px; }
.nid-success .tick {
    width: 64px; height: 64px; border-radius: 50%; background: #cd171f;
    color: #fff; font-size: 32px; line-height: 64px; margin: 0 auto 18px;
}
.nid-success h1 { font-size: 19px; margin: 0 0 8px; }
.nid-success p { font-size: 13px; color: #717171; line-height: 1.6; margin: 0; }

@media (min-width: 480px) {
    .nid-card {
        max-width: 460px; margin: 24px auto; min-height: 0;
        border: 1px solid #e1e1e1; border-radius: 12px; padding: 24px 26px 32px;
    }
}