/* g77 — onboarding helpers (client deck 08-10-2026: OB-REV-01 / 03 / 08).
   Reads the shared --ob-* tokens when the page has them (dev, ob-design.css); falls back to the
   same OndjangoBay colours where it does not (1.0 pages). Every rule is scoped to a .g77-* class. */

.g77-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

/* hints under fields */
.g77-hint { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--ob-muted, #5f5f5f); }
.g77-hint.is-error { color: var(--ob-danger, #c62828); font-weight: 600; }
.g77-hint.is-ok { color: var(--ob-success, #1b7f3b); font-weight: 600; }
.g77-field .form-control.is-invalid, .g77-phone .form-control.is-invalid { border-color: var(--ob-danger, #c62828) !important; }
.g77-field .form-control.is-valid, .g77-phone .form-control.is-valid { border-color: var(--ob-success, #1b7f3b) !important; }
input[data-g77-email].is-invalid, input[aria-describedby="password-rules"].is-invalid, #password_confirmation.is-invalid { border-color: var(--ob-danger, #c62828) !important; }
input[data-g77-email].is-valid, input[aria-describedby="password-rules"].is-valid, #password_confirmation.is-valid { border-color: var(--ob-success, #1b7f3b) !important; }

/* phone: country code + national number */
.g77-phone__row { position: relative; display: flex; align-items: stretch; gap: 8px; }
.g77-phone__row .g77-phone__num { flex: 1 1 auto; min-width: 0; margin: 0 !important; letter-spacing: .02em; }
.g77-phone__row select.g77-phone__cc { flex: 0 0 132px; max-width: 132px; }
.g77-phone__btn { flex: 0 0 auto; align-self: stretch; height: auto !important; min-height: 0 !important; margin: 0 !important; line-height: 1 !important; text-transform: none !important; letter-spacing: 0 !important; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px !important; border: 1px solid #cfcfcf; border-radius: var(--ob-radius-sm, 8px); background: #fff; color: var(--ob-ink, #222); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.g77-phone__btn:hover { border-color: #9e9e9e; }
.g77-phone__btn:focus-visible { outline: 2px solid var(--ob-primary-dark, #e0850a); outline-offset: 2px; }
.g77-phone__flag { font-size: 18px; line-height: 1; }
.g77-phone__caret { font-size: 11px; color: var(--ob-muted, #5f5f5f); }
.g77-phone__pop { position: absolute; z-index: 1060; top: calc(100% + 4px); left: 0; width: min(340px, 100%); background: #fff; border: 1px solid var(--ob-border, #e5e5e5); border-radius: var(--ob-radius-sm, 8px); box-shadow: var(--ob-shadow-lg, 0 10px 30px rgba(0,0,0,.14)); padding: 8px; }
.g77-phone__search { width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid #cfcfcf; border-radius: 6px; font-size: 14px; }
.g77-phone__search:focus { outline: 2px solid var(--ob-primary, #f99e1c); outline-offset: 0; }
.g77-phone__list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.g77-phone__list li[role="option"] { padding: 9px 10px; border-radius: 6px; font-size: 14px; cursor: pointer; color: var(--ob-ink, #222); }
.g77-phone__list li[role="option"]:hover, .g77-phone__list li[role="option"]:focus { background: var(--ob-primary-soft, #fff5e6); outline: 0; }
.g77-phone__list li[aria-selected="true"] { font-weight: 700; }
.g77-phone__empty { padding: 10px; font-size: 13px; color: var(--ob-muted, #5f5f5f); }

/* password rules: shown once, ticked live */
.g77-pw { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--ob-border, #e5e5e5); border-radius: var(--ob-radius-sm, 8px); background: #fafafa; }
.g77-pw__title { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--ob-ink, #222); }
.g77-pw ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 18px; }
.g77-pw li { position: relative; padding-left: 22px; font-size: 12.5px; line-height: 1.7; color: var(--ob-muted, #5f5f5f); }
.g77-pw li::before { content: "○"; position: absolute; left: 2px; top: 0; font-weight: 700; }
.g77-pw li.is-ok { color: var(--ob-success, #1b7f3b); }
.g77-pw li.is-ok::before { content: "✔"; }
.g77-pw li.is-bad { color: var(--ob-danger, #c62828); }
.g77-pw li.is-bad::before { content: "✕"; }
.g77-pw__error { display: block; margin-top: 6px; color: var(--ob-danger, #c62828); font-weight: 600; font-size: 13px; }

/* verification code screen */
.g77-otp { font-size: 14px; color: var(--ob-ink, #222); }
.g77-otp__title { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--ob-ink, #222); text-transform: none; }
.g77-otp__intro { margin: 0 0 14px; color: var(--ob-muted, #5f5f5f); }
.g77-otp__sent { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--ob-radius-sm, 8px); background: var(--ob-success-soft, #e9f6ee); color: #14532d; }
.g77-otp__sent.is-expired { background: #f3f3f3; color: var(--ob-muted, #5f5f5f); }
.g77-otp__sent strong { white-space: nowrap; }
.g77-otp__clock { font-variant-numeric: tabular-nums; font-weight: 700; }
.g77-otp__alert { padding: 12px 14px; margin-bottom: 14px; border-radius: var(--ob-radius-sm, 8px); font-weight: 600; }
.g77-otp__alert--error { background: var(--ob-danger-soft, #fdecec); color: #9b1c1c; }
.g77-otp__alert--ok { background: var(--ob-success-soft, #e9f6ee); color: #14532d; }
.g77-otp__expired { padding: 14px; margin-bottom: 14px; border: 1px solid #f5c2c2; border-radius: var(--ob-radius-sm, 8px); background: var(--ob-danger-soft, #fdecec); color: #9b1c1c; font-weight: 600; }
.g77-otp__expired[hidden] { display: none; }
.g77-otp label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.g77-otp input[name="otp"] { min-height: 52px; font-size: 22px; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.g77-otp input[name="otp"]::placeholder { letter-spacing: normal; font-size: 16px; }
.g77-otp input[name="otp"].is-invalid { border-color: var(--ob-danger, #c62828) !important; background: #fff7f7; }
.g77-otp__actions { display: grid; gap: 6px; margin-top: 16px; }
.g77-otp__ask { font-size: 13px; color: var(--ob-muted, #5f5f5f); }
.g77-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 10px 18px; border-radius: var(--ob-radius-sm, 8px); border: 1px solid var(--ob-black, #111); background: var(--ob-black, #111); color: #fff; font: inherit; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; }
.g77-btn:hover { background: #333; border-color: #333; color: #fff; }
.g77-btn:focus-visible { outline: 2px solid var(--ob-primary-dark, #e0850a); outline-offset: 2px; }
.g77-btn[disabled] { opacity: .5; cursor: not-allowed; }
.g77-btn--ghost { background: #fff; color: var(--ob-ink, #222); border-color: #cfcfcf; }
.g77-btn--ghost:hover { background: #f5f5f5; color: var(--ob-ink, #222); border-color: #9e9e9e; }
.g77-btn--ghost.g77-btn--primary, .g77-btn--primary { background: var(--ob-black, #111); color: #fff; border-color: var(--ob-black, #111); }
.g77-btn.is-busy { opacity: .7; }
.g77-otp__foot { margin: 14px 0 0; font-size: 12.5px; color: var(--ob-muted, #5f5f5f); }
.g77-otp__foot a { color: var(--ob-ink, #222); text-decoration: underline; }

/* add store: status, progress, retry */
.g77-status { margin: 0 0 14px; padding: 12px 14px; border-radius: 8px; font-size: 14px; }
.g77-status[hidden] { display: none; }
.g77-status:focus { outline: 0; }
.g77-status--busy { background: #fff8ec; border: 1px solid #f7d39a; color: #5c3b00; }
.g77-status--ok { background: #e9f6ee; border: 1px solid #b7e0c4; color: #14532d; font-weight: 600; }
.g77-status--error { background: #fdecec; border: 1px solid #f5c2c2; color: #9b1c1c; font-weight: 600; }
.g77-status__detail { margin-top: 4px; font-weight: 400; font-size: 12.5px; }
.g77-status .g77-retry { width: auto; min-height: 40px; margin-top: 10px; padding: 8px 18px; font-size: 14px; }
.g77-progress { height: 6px; margin-top: 8px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; }
.g77-progress span { display: block; height: 100%; background: var(--ob-primary, #f99e1c); transition: width .2s; }
.g77-field-msg { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #9b1c1c; }
.g77-field-msg.is-ok { color: #14532d; }
.g77-field-msg[hidden] { display: none; }
.g77-limits { display: block; margin-top: 4px; font-size: 12px; color: #5f5f5f; }
.g77-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; vertical-align: -2px; animation: g77spin .8s linear infinite; }
@keyframes g77spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .g77-spin { animation: none; } .g77-progress span { transition: none; } }

@media (max-width: 575px) {
    .g77-phone__pop { width: 100%; }
    .g77-pw ul { flex-direction: column; }
}