/* ── Resident Portal sign-up (register.php): four-step form ─────────────────────────────────────────────────── */
:root { --rg-green: #1f4d3d; --rg-green-mid: #2e7a5c; --rg-green-soft: #edf5f1; --rg-bg: #eef2ef; --rg-ink: #1c2b27; --rg-muted: #5f6f69; --rg-line: #d3dcd8; --rg-line-soft: #e5ebe8; --rg-field-ro: #f3f4f3; --rg-red: #a3262a; --rg-red-soft: #fdecec; --rg-gold: #e9b949; }
* { box-sizing: border-box; }
body.rg { margin: 0; min-height: 100vh; background: var(--rg-bg); color: var(--rg-ink); font: 400 15px/1.5 'DM Sans', system-ui, sans-serif; }
.rg [hidden] { display: none !important; }

.rg-test-banner { padding: 8px 16px; background: #f6d77a; color: #3d2c00; font-size: 13px; text-align: center; }
.rg-test-banner strong { margin-right: 6px; padding: 1px 7px; border-radius: 5px; background: #3d2c00; color: #fff; font-size: 11px; letter-spacing: .5px; }
.rg-header { display: flex; align-items: center; height: 64px; padding: 0 28px; background: var(--rg-green); }
.rg-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.rg-brand img { width: 36px; height: 36px; border-radius: 50%; background: #fff; object-fit: cover; }
.rg-brand strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; }
.rg-brand small { display: block; font-size: 12px; opacity: .85; }

.rg-main { width: 100%; max-width: 632px; margin: 0 auto; padding: 40px 16px 56px; }

/* Stepper */
.rg-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 30px; padding: 0; list-style: none; }
.rg-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--rg-muted); font-size: 13px; font-weight: 500; text-align: center; }
.rg-step:not(:first-child)::before { content: ''; position: absolute; top: 16px; right: calc(50% + 24px); left: calc(-50% + 24px); height: 2px; background: #cfd9d4; }
.rg-step.is-done::before, .rg-step.is-current::before { background: var(--rg-green-mid); }
.rg-step-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid #c3cfca; border-radius: 50%; background: #fff; color: var(--rg-muted); font-size: 13px; font-weight: 700; }
.rg-step-dot svg { display: none; width: 14px; height: 14px; }
.rg-step.is-current { color: var(--rg-ink); font-weight: 700; }
.rg-step.is-current .rg-step-dot { border-color: var(--rg-green); background: var(--rg-green); color: #fff; box-shadow: 0 0 0 5px rgba(46, 122, 92, .16); }
.rg-step.is-done { color: var(--rg-green-mid); font-weight: 600; }
.rg-step.is-done .rg-step-dot { border-color: var(--rg-green-mid); background: var(--rg-green-mid); color: #fff; }
.rg-step.is-done .rg-step-num { display: none; }
.rg-step.is-done .rg-step-dot svg { display: block; }

/* Card */
.rg-card { padding: 40px 44px; border: 1px solid var(--rg-line-soft); border-radius: 16px; background: #fff; }
.rg-kicker { margin: 0 0 6px; color: var(--rg-green-mid); font-size: 12.5px; font-weight: 600; }
.rg-title { margin: 0 0 6px; font-size: 21px; font-weight: 700; line-height: 1.3; outline: none; }
.rg-sub { margin: 0 0 30px; color: var(--rg-muted); font-size: 13.5px; }
.rg-section { margin: 30px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--rg-line-soft); color: #24654c; font-size: 14px; font-weight: 700; }
.rg-sub + .rg-section, .rg-verified + .rg-section { margin-top: 0; }
.rg-field { margin-bottom: 18px; min-width: 0; }
.rg-field label { display: block; margin-bottom: 8px; color: var(--rg-ink); font-size: 13.5px; font-weight: 600; }
.rg-optional { color: var(--rg-muted); font-weight: 400; }
.rg-optional-block { display: block; margin-top: 6px; }
.rg-field input, .rg-field select { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--rg-line); border-radius: 8px; background: #fff; color: var(--rg-ink); font: inherit; font-size: 14.5px; }
.rg-field select { padding-right: 34px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2b27' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; background-size: 14px; cursor: pointer; }
.rg-field input::placeholder { color: #8a9893; }
.rg-field input:focus, .rg-field select:focus { border-color: var(--rg-green-mid); outline: 3px solid rgba(46, 122, 92, .18); outline-offset: 0; }
.rg-field input[readonly] { border-color: var(--rg-line-soft); background: var(--rg-field-ro); color: var(--rg-muted); }
.rg-field input:disabled { background: #fafbfa; }
.rg-field .is-invalid { border-color: var(--rg-red); }
.rg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rg-row-name { grid-template-columns: 1fr 156px; }
.rg-hint { margin: 8px 0 0; color: var(--rg-muted); font-size: 12px; }
.rg-hint-after { margin: -10px 0 18px; }
.rg-error { margin: 6px 0 0; color: var(--rg-red); font-size: 12.5px; }
.rg-error:empty { display: none; }

.rg-choices { margin: 0 0 18px; padding: 0; border: 0; }
.rg-legend { margin-bottom: 10px; padding: 0; color: var(--rg-ink); font-size: 13.5px; font-weight: 600; }
.rg-field .rg-choice { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; padding: 13px 16px; border: 1px solid var(--rg-line); border-radius: 8px; background: #fff; font-size: 14px; cursor: pointer; }
.rg-field .rg-choice:has(input:checked) { border-color: var(--rg-green-mid); background: var(--rg-green-soft); font-weight: 600; }
.rg-field .rg-choice input { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; padding: 0; border: 0; accent-color: var(--rg-green); }
.rg-choices.is-invalid .rg-choice { border-color: var(--rg-red); }
.rg-member { padding: 18px 18px 2px; margin-bottom: 18px; border: 1px solid var(--rg-line-soft); border-radius: 10px; background: #f8faf9; }
.rg-lookup { margin: 8px 0 0; font-size: 13px; color: var(--rg-muted); }
.rg-lookup.is-found { color: var(--rg-green-mid); font-weight: 600; }
.rg-hint-after + .rg-actions, .rg-member + .rg-hint-after { margin-top: 0; }
.rg-consent {display: flex; gap: 14px; align-items: flex-start; margin: 4px 0 20px; padding: 16px 18px; border: 1px solid var(--rg-line-soft); border-radius: 10px; background: #f6f8f7; color: var(--rg-ink); font-size: 13.5px; line-height: 1.6; cursor: pointer; }
.rg-consent input { flex: 0 0 auto; width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--rg-green); }
.rg-consent.is-invalid { border-color: var(--rg-red); }
.rg-captcha { min-height: 65px; margin-bottom: 20px; }
.rg-inline { display: flex; gap: 12px; }
.rg-inline input { flex: 1 1 auto; }
.rg-sent { margin: -6px 0 12px; color: var(--rg-green); font-size: 13px; }
.rg-test-code { margin-bottom: 14px; padding: 10px 14px; border-radius: 8px; background: #fbefc8; color: #3d2c00; font-size: 13.5px; }
.rg-test-code strong { margin-left: 6px; font-size: 18px; letter-spacing: 3px; }

.rg-verified { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 30px; padding: 14px 18px; border: 1px solid #d7e7df; border-radius: 10px; background: var(--rg-green-soft); }
.rg-verified span { display: block; color: var(--rg-muted); font-size: 12.5px; }
.rg-verified strong { display: block; font-size: 15px; letter-spacing: .3px; }
.rg-verified .rg-verified-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--rg-green-mid); font-size: 13.5px; font-weight: 700; }
.rg-verified-tag svg { width: 14px; height: 14px; }

/* Buttons */
.rg-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rg-line-soft); }
.rg-actions .rg-btn-primary:only-child { margin-left: auto; }
.rg-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: 14.5px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .15s ease; }
.rg-btn:focus-visible { outline: 3px solid rgba(46, 122, 92, .3); outline-offset: 2px; }
.rg-btn-primary { min-width: 152px; background: var(--rg-green); color: #fff; }
.rg-btn-primary:hover:not(:disabled) { background: #173d30; }
.rg-btn-outline { border-color: var(--rg-line); background: #fff; color: var(--rg-ink); font-weight: 600; }
.rg-btn-outline:hover { background: #f6f8f7; }
.rg-btn-soft { flex: 0 0 auto; min-width: 82px; border-color: var(--rg-line); background: #f6f8f7; color: var(--rg-ink); font-weight: 600; }
.rg-btn-soft:hover:not(:disabled) { background: #eaf0ed; }
.rg-btn-block { width: 100%; }
.rg-btn:disabled { border-color: transparent; background: #d5dfdb; color: #6c7c76; cursor: not-allowed; }
.rg-btn-soft:disabled { border-color: var(--rg-line-soft); background: #f6f8f7; color: #8a9893; }

.rg-message { margin: 0 0 24px; padding: 12px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 500; }
.rg-message.is-error { border: 1px solid #f2c4c5; background: var(--rg-red-soft); color: var(--rg-red); }
.rg-message.is-success { border: 1px solid #cfe5da; background: var(--rg-green-soft); color: var(--rg-green); }

.rg-done { display: flex; flex-direction: column; align-items: center; text-align: center; outline: none; }
.rg-done .rg-sub { max-width: 440px; margin-bottom: 18px; }
.rg-done-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 50%; background: var(--rg-green-mid); color: #fff; }
.rg-done-icon svg { width: 30px; height: 30px; }

.rg-login { margin: 34px 0 0; color: var(--rg-muted); font-size: 14px; text-align: center; }
.rg-login a { color: var(--rg-green); font-weight: 700; text-decoration: none; }
.rg-login a:hover { text-decoration: underline; }
.rg-foot { max-width: 560px; margin: 26px auto 0; color: var(--rg-muted); font-size: 12.5px; line-height: 1.6; text-align: center; }

@media (max-width: 560px) {
    .rg-header { padding: 0 16px; }
    .rg-main { padding-top: 26px; }
    .rg-card { padding: 28px 20px; }
    .rg-step { font-size: 11.5px; }
    .rg-row, .rg-row-name { grid-template-columns: 1fr; gap: 0; }
    .rg-row-name { grid-template-columns: 1fr 110px; gap: 12px; }
    .rg-btn-primary { min-width: 0; }
}