/* ── Universal box-sizing for popup ── */
#rec200000001 *, #rec200000001 *::before, #rec200000001 *::after { box-sizing: border-box; }

/* ── Screens ── */
.reg-screen { display: none; }
.reg-screen--active { display: block; }
.reg-screen { animation: regFadeIn 0.25s ease; }
@keyframes regFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Header ── */
.reg-header { text-align: center; margin-bottom: 24px; position: relative; }
.reg-title { font-family: Roboto, Arial, sans-serif; font-size: 28px; font-weight: 600; color: #000; margin: 0 0 6px; line-height: 1.23; }
.reg-subtitle { font-family: Roboto, Arial, sans-serif; font-size: 16px; font-weight: 300; color: #000; margin: 0; line-height: 1.45; }
.reg-back { position: absolute; left: 0; top: 2px; background: none; border: none; font-size: 22px; cursor: pointer; color: #000; padding: 0; line-height: 1; }

/* ── Divider ── */
.reg-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #aaa; font-size: 14px; font-family: Roboto, Arial, sans-serif; }
.reg-divider::before, .reg-divider::after { content: ''; flex: 1; height: 1px; background: #e0e0e0; }

/* ── Fields ── */
.reg-field { margin-bottom: 16px; }
.reg-label { display: block; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-weight: 300; color: #000; margin-bottom: 5px; line-height: 1.45; }
.reg-input { width: 100%; padding: 0 14px; height: 50px; border: 1px solid #c9c9c9; border-radius: 5px; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-weight: 400; color: #000; background: transparent; transition: border-color 0.15s; -webkit-appearance: none; }
.reg-input:focus { outline: none; border-color: #000; }
.reg-input--readonly { background: #f5f5f5; color: #666; }
.reg-input--error { border-color: #d32f2f; }
.reg-select { cursor: pointer; }
.reg-field-error { font-family: Roboto, Arial, sans-serif; font-size: 13px; color: #d32f2f; margin-top: 4px; min-height: 0; }

/* ── Phone row ── */
.reg-phone-row { display: flex; gap: 8px; }
.reg-phone-code { width: 120px; flex-shrink: 0; }
.reg-phone-number { flex: 1; }

/* ── Password toggle ── */
.reg-password-wrap { position: relative; }
.reg-password-wrap .reg-input { padding-right: 44px; }
.reg-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #999; padding: 4px; }
.reg-eye:hover { color: #000; }

/* ── OTP ── */
.reg-otp-row { display: flex; justify-content: center; gap: 12px; margin: 24px 0; }
.reg-otp-digit { width: 52px; height: 56px; text-align: center; font-family: Roboto, Arial, sans-serif; font-size: 24px; font-weight: 600; border: 2px solid #c9c9c9; border-radius: 5px; color: #000; background: #fff; -webkit-appearance: none; }
.reg-otp-digit:focus { outline: none; border-color: #000; }

/* ── Resend ── */
.reg-resend { text-align: center; margin-top: 16px; font-family: Roboto, Arial, sans-serif; font-size: 14px; color: #888; }
.reg-resend .reg-link-btn { color: #000; text-decoration: underline; }

/* ── Button ── */
.reg-btn { display: block; width: 100%; height: 50px; padding: 1px 30px; border: none; border-radius: 5px; background: #000; color: #fff; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-weight: 700; cursor: pointer; transition: opacity 0.15s; }
.reg-btn:hover { opacity: 0.88; }
.reg-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Messages ── */
.reg-msg { font-family: Roboto, Arial, sans-serif; font-size: 16px; padding: 10px 12px; border-radius: 5px; margin-bottom: 14px; line-height: 1.45; }
.reg-msg--error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.reg-msg--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* ── Forgot ── */
.reg-forgot { text-align: center; margin-top: 16px; }
.reg-forgot a { font-family: Roboto, Arial, sans-serif; font-size: 16px; font-weight: 400; color: #444; text-decoration: none; border-bottom: 1px solid #bbb; padding-bottom: 1px; transition: color 0.15s, border-color 0.15s; }
.reg-forgot a:hover { color: #000; border-color: #000; }

/* ── Disclaimer ── */
.reg-disclaimer { font-family: Roboto, Arial, sans-serif; font-size: 11px; color: #aaa; text-align: center; margin-top: 16px; line-height: 1.4; }

/* ── Mobile tweaks ── */
@media (max-width: 560px) {
    .reg-otp-digit { width: 46px; height: 50px; font-size: 22px; }
    .reg-phone-code { width: 105px; }
}

/* ── Link-styled buttons (prevent Tilda popup close) ── */
.reg-link-btn { background: none; border: none; padding: 0; font-family: Roboto, Arial, sans-serif; font-size: 14px; color: #000; text-decoration: underline; cursor: pointer; }
.reg-link-btn:hover { color: #333; }

.reg-otp-digit:disabled { opacity: 0.35; }