/* Registration Forms - public stylesheet */
* { box-sizing: border-box; }
body { margin: 0; }

/* The `.regforms-page` wrapper paints the full-bleed page background
   (admin-configurable per form) and centres the two-panel container
   so it floats mid-page on top of that background. */
.regforms-page {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1f2937;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

body:not(.regforms-standalone-body) .regforms-page {
    align-items: center;
    min-height: clamp(620px, 78vh, 100vh);
    padding-top: clamp(24px, 6vh, 64px);
    padding-bottom: clamp(24px, 10vh, 96px);
}

/* The two-toned container: rounded corners, soft shadow, and
   `overflow:hidden` so each panel's own background colour reaches the
   rounded edges cleanly. */
.regforms-shell {
    display: flex;
    width: 100%;
    max-width: 1100px;
    min-height: 640px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08);
}
.regforms-shell--reverse { flex-direction: row-reverse; }
.regforms-back-wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 0 12px;
}
.regforms-back-link {
    color: #4f46e5;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.regforms-back-link:hover { text-decoration: underline; }
.regforms-back-arrow { width: 16px; height: 16px; flex-shrink: 0; }
.regforms-logo-link { display: inline-block; }
.regforms-info-panel,
.regforms-form-panel { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: 48px; }
.regforms-info-inner,
.regforms-form-inner { width: 100%; max-width: 480px; }

.regforms-form-inner h1 { margin-top: 0; font-size: 28px; }
.regforms-form-inner label { display: block; margin: 0 0 14px; font-size: 14px; }
.regforms-form-inner input,
.regforms-form-inner select { display: block; width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; margin-top: 4px; }
.regforms-form-inner .regforms-row { display: flex; gap: 12px; }
.regforms-form-inner .regforms-row .regforms-col { flex: 1; }

.regforms-checkbox { font-size: 13px; }
.regforms-checkbox input { width: auto; display: inline-block; margin-right: 8px; }

.regforms-terms-assumed { font-size: 13px; color: #6b7280; margin: 16px 0; line-height: 1.5; }
.regforms-terms-assumed strong { color: #1f2937; }
.regforms-terms-assumed a { color: #4f46e5; text-decoration: none; font-weight: 500; }
.regforms-terms-assumed a:hover { text-decoration: underline; }

.regforms-submit { display: inline-block; padding: 12px 22px; border: 0; border-radius: 8px; background: #4f46e5; color: #fff; font-size: 16px; cursor: pointer; }
.regforms-submit:hover { background: #4338ca; }
.regforms-submit--full-width { display: block; width: 100%; box-sizing: border-box; }

.regforms-signin { font-size: 13px; margin-top: 16px; }
.regforms-signin--center { text-align: center; }

@media (max-width: 800px) {
    .regforms-page { padding: 16px; }
    .regforms-shell { flex-direction: column; min-height: 0; border-radius: 12px; }
    .regforms-info-panel { display: none; }
}

.regforms-state-shell { max-width: 480px; margin: 80px auto; text-align: center; padding: 0 16px; }
.regforms-state-icon { width: 72px; height: 72px; line-height: 72px; border-radius: 50%; margin: 0 auto 24px; font-size: 36px; background: #eef2ff; color: #4f46e5; }
.regforms-state-failed .regforms-state-icon { background: #fee2e2; color: #b91c1c; }
.regforms-state-pending .regforms-state-icon { background: #fef3c7; color: #b45309; }
.regforms-cta { display: inline-block; margin-top: 16px; padding: 10px 18px; border-radius: 8px; background: #4f46e5; color: #fff; text-decoration: none; }

/* Company logo at the top of the info panel (sourced from WHMCS
   General Settings -> Logo URL). */
.regforms-logo { margin-bottom: 24px; }
.regforms-logo img { max-width: 220px; max-height: 80px; height: auto; width: auto; display: block; }

/* Inline WHMCS sign-in form shown in place of the registration form
   when the visitor clicks "Already have an account? Sign in.". */
.regforms-signin-form h2 { margin: 0 0 16px; font-size: 24px; }
.regforms-signin-form label { display: block; margin-bottom: 12px; }
.regforms-signin-form input[type="email"],
.regforms-signin-form input[type="password"] {
    display: block;
    width: 100%;
    padding: 8px 10px;
    margin-top: 4px;
    border: 1px solid #ccd1d9;
    border-radius: 6px;
    box-sizing: border-box;
}


/* Inline server-side error banner shown above the registration form
   when the controller returns a 4xx with a human-readable detail
   (e.g. "AddClient failed: Your phone number is not valid"). */
.regforms-alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.4;
}
.regforms-alert .regforms-alert-message { display: block; }
.regforms-alert .regforms-alert-contact {
    display: inline-block;
    margin-top: 6px;
    color: #991b1b;
    text-decoration: underline;
    font-weight: 600;
}

/* Phone number uses the WHMCS theme's intl-tel-input plugin, which
   renders its own flag/dial-code/number composite control. We just
   provide a minimal wrapper so the field has consistent top-margin
   alongside the other form rows; all the heavy styling comes from the
   theme's bundled intlTelInput stylesheet. */
.regforms-phone-group { margin-top: 4px; margin-bottom: 12px; }
.regforms-phone-group .iti { width: 100%; display: block; }
.regforms-phone-group .regforms-phone-number { width: 100%; }

.regforms-country { width: 100%; }

/* Google Places Autocomplete web component (`<gmp-place-autocomplete>`).
   The element renders its own `<input>` inside a closed shadow DOM that
   we cannot reach with normal selectors. Per Google's official styling
   support, only a small set of host-level properties pass through:
   `background-color`, `color-scheme`, `border`, `border-radius`, and
   inheritable typography (`font-family`, `font-size`). We use those to
   align the host with the rest of the form's inputs (border colour,
   radius, font-size) so the field visually matches the surrounding
   First-name / Last-name / Email rows rather than rendering as the
   default outsized pill. */
.regforms-form-inner gmp-place-autocomplete,
.regforms-form-inner .regforms-place-autocomplete {
    display: block;
    width: 100%;
    margin-top: 4px;
    color-scheme: light;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    /* Pin the host height so it matches the surrounding inputs
       (`padding: 10px 12px; font-size: 15px; border: 1px` ≈ 42px).
       Without an explicit height, Google's web component grows to
       fit its internal shadow-DOM padding once it hydrates,
       producing a visible "size jump" after the page paints. */
    height: 42px;
    line-height: 20px;
    box-sizing: border-box;
    /* `overflow: visible` is critical — Google's web component renders
       its prediction dropdown as a child of the host (inside the
       shadow DOM) positioned below the input. Clipping the host with
       `overflow: hidden` would hide every suggestion row. */
    overflow: visible;
}
.regforms-form-inner gmp-place-autocomplete:focus-within,
.regforms-form-inner .regforms-place-autocomplete:focus-within {
    border-color: #9ca3af;
}
.regforms-address-autocomplete .regforms-address-manual-toggle {
    margin: 6px 0 14px;
    font-size: 13px;
}
/* Hide the original address `<input>` from the initial paint when
   Google Places autocomplete is enabled. The shim repurposes it as a
   hidden form-payload field anyway, but without this rule the input
   renders briefly at the standard input size and then gets replaced
   by the larger `<gmp-place-autocomplete>` element once Google's JS
   loads, producing a visible "size jump" flash. */
.regforms-address-autocomplete[data-autocomplete="google"] #regforms-address-input {
    display: none;
}

/* Hide the WHMCS client-area page heading and breadcrumb on the
   public registration form pages. The form supplies its own heading
   inside the split-panel layout, so the theme's `.header-lined` h1
   and breadcrumb just add visual noise above it. */
#main-body > .header-lined,
#main-body > ol.breadcrumb,
#main-body > ul.breadcrumb,
.main-content > .header-lined,
.main-content > ol.breadcrumb,
.main-content > ul.breadcrumb { display: none !important; }


/* Payment-method selector (Credit Card / PayPal tabs) and saved
   paymethod list: use flex so the radio circle and the label text
   sit on the same baseline rather than the radio appearing as a
   full-width block above the text. */
.regforms-family-option,
.regforms-paymethod {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.regforms-family-option input[type="radio"],
.regforms-paymethod input[type="radio"] {
    display: inline-block;
    width: auto;
    flex-shrink: 0;
    margin-top: 0;
}

/* ----------------------------------------------------------------
 * Placeholders-instead-of-labels mode (Content & Styling toggle).
 * Visually hides each `.regforms-label-text` while keeping it in
 * the accessibility tree, so the form renders compactly with
 * placeholder text serving as the visible field cue.
 * ---------------------------------------------------------------- */
.regforms-placeholders .regforms-label-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.regforms-placeholders label {
    margin-bottom: 8px;
}

/* ----------------------------------------------------------------
 * Submission Loader Overlay.
 * ---------------------------------------------------------------- */
.regforms-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.regforms-loader-overlay.is-active {
    display: flex;
}

.regforms-loader-spinner {
    width: 60px;
    height: 60px;
    border: 5px solid #e5e7eb;
    border-top: 5px solid #4f46e5;
    border-radius: 50%;
    animation: regforms-spin 1s linear infinite;
}

@keyframes regforms-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}