/* =============================================================================
   Register Wizard — Hybrid Onboarding Design (x99)
   Scoped to body.page-clientregister. Extends x99-login.css tokens.
   ============================================================================= */

/* ─── Card sizing: width like login, height adapts to content. ─── */
body.page-clientregister .x99-login-card--wizard {
    width: 520px;
    min-height: 0;
    padding: 20px 44px 22px;
    gap: 14px;
    grid-template-rows: auto auto auto auto;
}

body.page-clientregister .x99-reg-top {
    gap: 4px;
    padding-top: 4px;
}

/* ─── Progress bar (5 non-review steps) ─── */
.x99-reg-progress {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 0;
}
.x99-reg-progress span {
    height: 3px;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
    transition: background 0.25s ease;
}

/* Fill N leading segments when data-step = N (1..5). */
.x99-reg-progress[data-step="1"] span[data-seg="1"],
.x99-reg-progress[data-step="2"] span[data-seg="1"],
.x99-reg-progress[data-step="2"] span[data-seg="2"],
.x99-reg-progress[data-step="3"] span[data-seg="1"],
.x99-reg-progress[data-step="3"] span[data-seg="2"],
.x99-reg-progress[data-step="3"] span[data-seg="3"],
.x99-reg-progress[data-step="4"] span[data-seg="1"],
.x99-reg-progress[data-step="4"] span[data-seg="2"],
.x99-reg-progress[data-step="4"] span[data-seg="3"],
.x99-reg-progress[data-step="4"] span[data-seg="4"],
.x99-reg-progress[data-step="5"] span {
    background: rgba(239,68,68,0.45);
}

/* ─── Address step (Google Places primary + revealed manual fields) ─── */
.x99-reg-places-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.x99-reg-places-wrap .x99-login-input {
    padding-left: 44px !important;
}
.x99-reg-places-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.4);
    pointer-events: none;
}
.x99-reg-manual-link {
    margin: 2px 0 4px;
    font-size: 11px;
    text-align: right;
}
.x99-reg-manual-link a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color 0.15s ease;
}
.x99-reg-manual-link a:hover {
    color: rgba(255,255,255,0.9);
}
.x99-reg-addr-manual {
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity 0.2s ease;
}
.x99-reg-addr-manual.hidden {
    display: none;
}

/* State field — can render as a text input OR as a select depending on the
   country picked (WHMCS-provided list for known countries, free text for the
   rest). */
.x99-reg-state-field .x99-reg-state-select { display: none; }
.x99-reg-state-field.has-options .x99-reg-state-input  { display: none; }
.x99-reg-state-field.has-options .x99-reg-state-select { display: block; }

.x99-reg-state-select {
    width: 100%;
    height: 48px;
    padding: 0 34px 0 14px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.45) 50%),
                      linear-gradient(135deg, rgba(255,255,255,0.45) 50%, transparent 50%) !important;
    background-position: calc(100% - 18px) center, calc(100% - 13px) center !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    box-sizing: border-box;
    cursor: pointer;
}
.x99-reg-state-select option {
    background: #17171d;
    color: rgba(255,255,255,0.9);
}

/* ─── Inline reveals on the hybrid account-type step ─── */
.x99-reg-reveal {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    transition: opacity 0.2s ease;
}
.x99-reg-reveal.hidden {
    display: none;
}

/* ─── Step container ─── */
.x99-reg-body {
    position: relative;
    min-height: 0;
    /* Content hugs the top; no 1fr stretching to avoid wasted space on short steps. */
}
.x99-reg-step {
    display: none;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.x99-reg-step--active {
    display: flex;
    opacity: 1;
    transform: translateX(0);
}
.x99-reg-step--review {
    gap: 14px;
}

/* ─── Big titles (dashboard-greeting scale) ─── */
.x99-reg-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    letter-spacing: -0.015em;
    line-height: 1.3;
    text-wrap: balance;
}
.x99-reg-hint {
    margin: 0;
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    line-height: 1.5;
}
.x99-reg-field-error {
    margin: 0;
    font-size: 12px;
    color: rgba(252,165,165,0.92);
    line-height: 1.4;
}
.x99-reg-field-error.hidden { display: none; }

/* ─── Row layouts ─── */
.x99-reg-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.x99-reg-row--3 {
    grid-template-columns: 1.3fr 0.8fr 0.9fr;
}
@media (max-width: 600px) {
    .x99-reg-row,
    .x99-reg-row--3 {
        grid-template-columns: 1fr;
    }
}

.x99-reg-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    position: relative;
}

/* ─── Huge input variant ─── */
.x99-login-input.x99-login-input--huge {
    height: 56px !important;
    padding: 0 18px !important;
    font-size: 16px !important;
    font-weight: 500;
    border-radius: 14px !important;
}

/* ─── Wizard action row ─── */
.x99-reg-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}
.x99-reg-actions--review { margin-top: 0; justify-content: space-between; }

/* ─── "Começar do zero" reset link — subtle, right-aligned next to Voltar
       when saved wizard state was restored from localStorage. ─── */
.x99-reg-reset {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.15s ease, background 0.15s ease;
}
.x99-reg-reset:hover,
.x99-reg-reset:focus {
    color: #fff;
    background: rgba(255,255,255,0.04);
    outline: none;
}
.x99-reg-reset-icon {
    opacity: 0.8;
    transition: transform 0.4s ease;
}
.x99-reg-reset:hover .x99-reg-reset-icon {
    transform: rotate(-90deg);
    opacity: 1;
}
.x99-reg-reset.hidden { display: none; }
/* When reset is visible, Continuar stays on the right and Reset sits
   in the middle-right (between Voltar and Continuar). */
.x99-reg-actions .x99-reg-reset + .x99-reg-next { margin-left: 0; }

/* ─── In-page confirm dialog for "Começar do zero" ───────────────────────
       Sober neutral-dark styling, aligned with the main content area so
       the modal visually centers over the register card (and not over the
       whole viewport that includes the sidebar). On mobile / when the
       sidebar is offscreen we fall back to full-viewport centering. ─── */
.x99-reg-confirm[hidden] { display: none !important; }
.x99-reg-confirm {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* Offset by the sidebar's width so the modal centers over the main
       content area (the register card), not over the whole viewport
       (which includes the sidebar). The default Lagom sidebar renders at
       140px; the JS modal opener re-measures the live `.app-nav` element
       and writes the actual pixel offset into --x99-sidebar-offset so we
       stay correct even when the sidebar expands / is themed differently. */
    left: var(--x99-sidebar-offset, 140px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.x99-reg-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    animation: x99RegConfirmFade 0.15s ease;
}
.x99-reg-confirm-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: #16181c;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 24px 22px 20px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    animation: x99RegConfirmPop 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    color: rgba(255, 255, 255, 0.9);
}
.x99-reg-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 12px;
}
.x99-reg-confirm-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.95);
}
.x99-reg-confirm-desc {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}
.x99-reg-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.x99-reg-confirm-cancel,
.x99-reg-confirm-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    min-height: 36px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.x99-reg-confirm-cancel {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.65);
}
.x99-reg-confirm-cancel:hover,
.x99-reg-confirm-cancel:focus {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.16);
    outline: none;
}
.x99-reg-confirm-ok {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
}
.x99-reg-confirm-ok:hover,
.x99-reg-confirm-ok:focus {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    outline: none;
}
.x99-reg-confirm-ok-icon { opacity: 0.85; }

@keyframes x99RegConfirmFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes x99RegConfirmPop {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile: sidebar collapses off-canvas, so the modal covers the full
   viewport like a normal dialog. */
@media (max-width: 991px) {
    .x99-reg-confirm { left: 0; }
}
@media (max-width: 480px) {
    .x99-reg-confirm-card { padding: 20px 18px 16px; }
    .x99-reg-confirm-actions { flex-direction: column-reverse; }
    .x99-reg-confirm-actions > button { width: 100%; }
}

.x99-reg-next {
    padding: 10px 18px;
    min-height: 42px;
    background: rgba(239,68,68,0.16);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 10px;
    color: #fca5a5;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    outline: none;
    margin-left: auto;
}
.x99-reg-next:hover,
.x99-reg-next:focus {
    background: rgba(239,68,68,0.26);
    border-color: rgba(239,68,68,0.45);
    color: #fecaca;
}
.x99-reg-next:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.x99-reg-back {
    padding: 8px 14px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
}
.x99-reg-back:hover,
.x99-reg-back:focus {
    color: #fff;
    outline: none;
    text-decoration: none;
}
.x99-reg-back--signin {
    color: rgba(255,255,255,0.55);
}

/* ─── Pill cards (step 3) ─── */
.x99-reg-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}
@media (max-width: 600px) {
    .x99-reg-pills { grid-template-columns: 1fr; }
}
.x99-reg-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 16px;
    min-height: 100px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
    outline: none;
}
.x99-reg-pill:hover,
.x99-reg-pill:focus {
    background: rgba(255,255,255,0.05);
    border-color: rgba(239,68,68,0.35);
}
.x99-reg-pill:active { transform: translateY(1px); }
.x99-reg-pill.selected {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.5);
}
.x99-reg-pill-icon {
    width: 26px;
    height: 26px;
    color: rgba(255,255,255,0.7);
}
.x99-reg-pill.selected .x99-reg-pill-icon {
    color: #fca5a5;
}
.x99-reg-pill-label {
    font-size: 14px;
    font-weight: 600;
    color: inherit;
}

/* ─── Country select (step 5) ─── */
.x99-reg-country-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}
.x99-reg-country-select {
    position: relative;
    flex: 1;
    min-width: 220px;
}
.x99-reg-country-trigger {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    color: rgba(255,255,255,0.92);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
    text-align: left;
}
.x99-reg-country-trigger:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); }
.x99-reg-country-trigger.open {
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.05);
}
.x99-reg-country-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.x99-reg-country-flag {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}
.x99-reg-country-chev {
    flex-shrink: 0;
    color: rgba(255,255,255,0.4);
    transition: transform 0.15s ease;
}
.x99-reg-country-trigger.open .x99-reg-country-chev {
    transform: rotate(180deg);
}
.x99-reg-country-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 280px;
    background: #17171d;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    z-index: 50;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.x99-reg-country-dropdown.open { display: flex; }
.x99-reg-country-search {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.x99-reg-country-search input {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    outline: none;
}
.x99-reg-country-search input:focus {
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.06);
}
.x99-reg-country-list {
    flex: 1;
    overflow-y: auto;
    max-height: 220px;
    padding: 4px 0;
}
.x99-reg-country-item {
    width: 100%;
    padding: 9px 14px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease;
}
.x99-reg-country-item:hover,
.x99-reg-country-item:focus {
    background: rgba(255,255,255,0.05);
    outline: none;
    color: #fff;
}
.x99-reg-country-item.hidden { display: none; }

/* ─── Currency suffix inside the country trigger (mirrors the sidebar
   preferences pattern: "🇧🇷 Brasil · R$") ─── */
.x99-reg-country-currency {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.02em;
    white-space: nowrap;
    position: relative;
    padding-left: 14px;
}
.x99-reg-country-currency::before {
    content: '·';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-52%);
    color: rgba(255,255,255,0.3);
    font-weight: 500;
}
.x99-reg-country-currency.hidden { display: none; }

/* Doc-requirement hint shown under the country picker when the chosen
   country mandates CPF / CNPJ / VAT. */
.x99-reg-doc-required {
    margin: -2px 0 0;
    padding: 9px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 8px;
}
.x99-reg-doc-required.hidden { display: none; }
.x99-reg-doc-required::before {
    content: 'i';
    flex: 0 0 auto;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.75);
    font-size: 10px;
    font-weight: 700;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Country-list dividers between pinned group, EU group, and the rest. */
.x99-reg-country-divider {
    height: 1px;
    margin: 4px 14px;
    background: rgba(255,255,255,0.08);
    pointer-events: none;
}
.x99-reg-country-section {
    padding: 6px 14px 2px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.3);
    pointer-events: none;
}
.x99-reg-country-item[data-pinned="true"] { font-weight: 600; }

/* ─── Document field status indicator ─── */
.x99-reg-doc-status {
    position: absolute;
    right: 14px;
    top: auto;
    bottom: 0;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}
.x99-reg-doc-status.loading { color: rgba(255,255,255,0.5); }
.x99-reg-doc-status.valid   { color: #86efac; }
.x99-reg-doc-status.invalid { color: #fca5a5; }
.x99-reg-doc-status-spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: rgba(255,255,255,0.6);
    border-radius: 50%;
    animation: x99-reg-spin 0.7s linear infinite;
}
@keyframes x99-reg-spin { to { transform: rotate(360deg); } }

/* ─── Review summary (replaces the old chip row) ─── */
.x99-reg-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px 16px;
}
@media (max-width: 600px) {
    .x99-reg-summary { grid-template-columns: 1fr; }
}
/* Summary row rendered as <button>; aggressively reset native button styling
   so our layout wins over the user-agent defaults (grey bg, border, font). */
.x99-reg-summary-row {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    color: rgba(255,255,255,0.85);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-align: left;
    padding: 2px 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    transition: color 0.15s ease;
}
.x99-reg-summary-row:hover,
.x99-reg-summary-row:focus {
    color: #fff;
    outline: none;
}
.x99-reg-summary-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.38);
}
.x99-reg-summary-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.x99-reg-summary-value svg {
    width: 11px; height: 11px;
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.x99-reg-summary-row:hover .x99-reg-summary-value svg {
    color: rgba(255,255,255,0.85);
}
.x99-reg-summary-row--wide { grid-column: span 2; }
@media (max-width: 600px) {
    .x99-reg-summary-row--wide { grid-column: auto; }
}

/* ─── Phone row with country-code selector ─── */
.x99-reg-phone-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}
.x99-reg-phone-cc {
    flex: 0 0 110px !important;
    width: 110px !important;
    max-width: 110px !important;
    min-width: 110px !important;
    height: 48px !important;
    padding: 0 26px 0 10px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    outline: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.45) 50%),
                      linear-gradient(135deg, rgba(255,255,255,0.45) 50%, transparent 50%) !important;
    background-position: calc(100% - 16px) center, calc(100% - 11px) center !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    box-sizing: border-box;
}
.x99-reg-phone-cc:focus {
    border-color: rgba(255,255,255,0.22) !important;
    background-color: rgba(255,255,255,0.05) !important;
}
.x99-reg-phone-inp {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: 48px !important;
}

/* "(optional)" tag next to a field label */
.x99-reg-field-optional {
    font-size: 10px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255,255,255,0.35);
    margin-left: 6px;
}

.x99-reg-sub {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.x99-reg-sub-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.4);
}

.x99-reg-tos {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: rgba(255,255,255,0.4);
    text-align: center;
}
.x99-reg-tos a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
}
.x99-reg-tos a:hover { color: #fff; }

/* ─── Places autocomplete dropdown styling override (Google widget) ─── */
.pac-container {
    background: #17171d !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6) !important;
    margin-top: 4px !important;
    padding: 4px 0 !important;
    font-family: inherit !important;
}
.pac-item {
    padding: 9px 12px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,0.8) !important;
    font-size: 13px !important;
    cursor: pointer !important;
}
.pac-item:hover,
.pac-item-selected {
    background: rgba(255,255,255,0.05) !important;
    color: #fff !important;
}
.pac-item-query,
.pac-matched { color: #fff !important; }
.pac-icon { filter: invert(0.8) !important; }

/* Step 1 (Name) already carries a "← Já tenho conta" action inside its
   own row — hide the duplicate "Já tem conta? Entrar" card-bottom link
   while we're there. It comes back on every subsequent step. */
body.page-clientregister .x99-login-card--wizard[data-current-step="1"] .x99-login-card-bottom {
    display: none !important;
}

/* ─── Captcha slot on review step ─── */
.x99-reg-submit-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin: 4px 0 0;
    padding: 0;
}
.x99-reg-captcha {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
}
.x99-reg-captcha .recaptcha-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
}
.x99-reg-captcha iframe {
    color-scheme: dark;
}
/* Hide tooltip WHMCS shows on unsolved captcha — we handle it inline. */
.x99-reg-captcha .g-recaptcha + .tooltip { display: none !important; }

/* ─── Responsive ─── */
@media (max-width: 600px) {
    body.page-clientregister .x99-login-card--wizard {
        width: 100%;
        min-height: 560px;
        padding: 22px 22px 20px;
    }
    .x99-reg-title { font-size: 19px; }
    .x99-login-input.x99-login-input--huge {
        height: 52px !important;
        font-size: 16px !important;
    }
}