/* Platform landing page (index.php) - marketing + self-service
   registration. Standalone page, deliberately NOT using the per-tenant
   theming system (buildThemeAssets()) - this is platform-level chrome
   with its own fixed blue "cloud tech" identity, not any one company's
   branding. Its own small token set, same "standalone page defines its
   own tiny palette" precedent as link-page-public.css/group-units.css. */

:root {
    --reg-blue-dark: #0b1f3a;
    --reg-blue-mid: #123a6b;
    --reg-blue-accent: #2f6fed;
    --reg-blue-light: #7ea6f7;
    --reg-white: #ffffff;
    --reg-text: #1a202c;
    --reg-muted: #718096;
    --reg-border: #e2e8f0;
    --reg-radius: 12px;
    --reg-radius-sm: 8px;
    --reg-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Manrope", sans-serif;
    color: var(--reg-text);
    line-height: 1.4;
}

.reg-page {
    display: flex;
    min-height: 100vh;
}

/* ---------- Left: marketing panel (60%) ---------- */
.reg-marketing {
    flex: 0 0 60%;
    max-width: 58%;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.06) 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(255,255,255,0.05) 0%, transparent 40%),
        linear-gradient(150deg, var(--reg-blue-dark) 0%, var(--reg-blue-mid) 55%, var(--reg-blue-accent) 130%);
    color: var(--reg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 48px;
}

.reg-marketing-inner {
    width: 90%;
}

.reg-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}

/* A wide wordmark (icon + "ONESCROLL" text), not the small square icon
   this box was originally sized for - object-fit: contain (not cover)
   keeps its own aspect ratio, and the light background card gives its
   pastel gradient linework enough contrast against this page's own dark
   navy backdrop, which its light colors alone wouldn't have. */
.reg-brand-logo {
    width: auto;
    max-width: 250px;
    padding: 8px 14px;
    border-radius: var(--reg-radius-sm);
    object-fit: contain;
    background: var(--reg-white);
}

.reg-brand-name {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}

.reg-headline {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
}

.reg-subheadline {
    font-size: 1rem;
    color: rgba(255,255,255,0.82);
    margin-bottom: 36px;
    max-width: 480px;
}

/* ---------- Marketing "point" slider (one slide per point - big icon
   left, header + brief text right) ---------- */
.reg-benefits-slider {
    position: relative;
    overflow: hidden;
    margin-bottom: 32px;
}

.reg-benefits-track {
    display: flex;
    transition: transform 0.4s ease-in-out;
}

.reg-benefit-slide {
    flex: 0 0 100%;
    width: 100%;
    min-height: 130px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.reg-benefit-icon {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    border-radius: 20px;
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
}

.reg-benefit-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reg-benefit-text h3 {
    font-size: 1.15rem;
    font-weight: 800;
}

.reg-benefit-text p {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.5;
}

.reg-benefits-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
}

.reg-benefits-arrow {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--reg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s;
}

.reg-benefits-arrow:hover {
    background: rgba(255,255,255,0.22);
}

/* This page's own Font Awesome icons don't inherit the frontend/admin
   panels' shared `i.fa-solid` rule (which fades icons to 50% opacity and
   adds margin-right:5px for icon+label pairs) - this override is applied
   proactively anyway, matching the exact fix already needed for
   program-detail.php's photo-slider arrows this same session, so an
   icon-only button here never ships with the same off-center/dimmed bug. */
.reg-benefits-arrow i.fa-solid {
    opacity: 1;
    margin-right: 0;
}

.reg-benefits-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reg-benefits-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.reg-benefits-dot:hover {
    background: rgba(255,255,255,0.55);
}

.reg-benefits-dot.active {
    background: var(--reg-white);
    transform: scale(1.25);
}

.reg-trust {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.65);
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Right: registration form (40%) ---------- */
.reg-form-column {
    flex: 0 0 100%;
    max-width: 42%;
    background: var(--reg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    overflow-y: auto;
}

.reg-form-wrap {
    width: 90%;
}

.reg-form-wrap h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.reg-form-sub {
    color: var(--reg-muted);
    font-size: 0.88rem;
    margin-bottom: 24px;
}

.reg-form-sub a {
    color: var(--reg-blue-accent);
    font-weight: 600;
    text-decoration: none;
}

.reg-form-sub a:hover {
    text-decoration: underline;
}

.reg-alert {
    background: #fed7d7;
    color: #742a2a;
    border: 1px solid #feb2b2;
    border-radius: var(--reg-radius-sm);
    padding: 12px 14px;
    font-size: 0.85rem;
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.reg-form-row {
    margin-bottom: 16px;
}

.reg-form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.reg-form-row label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--reg-text);
}

.reg-optional {
    font-weight: 400;
    color: var(--reg-muted);
}

.reg-form-row input[type="text"],
.reg-form-row input[type="email"],
.reg-form-row input[type="tel"],
.reg-form-row input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--reg-border);
    border-radius: var(--reg-radius-sm);
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.reg-form-row input:focus {
    outline: none;
    border-color: var(--reg-blue-accent);
}

/* Side-by-side by default - auto-fit naturally gives 2 (or more) columns
   whenever there's enough width for cards at least 150px wide, and
   collapses to 1 column on its own when the container is too narrow
   (e.g. this page's own <480px mobile breakpoint below), without
   hardcoding an exact plan count or container width anywhere. */
.reg-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.reg-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 18px 14px 14px;
    border: 2px solid var(--reg-border);
    border-radius: var(--reg-radius);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.reg-plan-card:has(input:checked) {
    border-color: var(--reg-blue-accent);
    background: #eff6ff;
}

.reg-plan-card input[type="radio"] {
    position: absolute;
    top: 16px;
    right: 14px;
    width: 17px;
    height: 17px;
    accent-color: var(--reg-blue-accent);
    cursor: pointer;
}

.reg-plan-name {
    font-weight: 700;
    font-size: 0.92rem;
    padding-right: 22px; /* room for the radio sitting in the top-right corner */
}

.reg-plan-price {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--reg-blue-accent);
    margin-top: 4px;
}

.reg-plan-meta {
    font-size: 0.72rem;
    color: var(--reg-muted);
}

.reg-plan-desc {
    font-size: 0.76rem;
    color: var(--reg-muted);
    margin-top: 4px;
}

/* "MOST POPULAR"-style plan gets real visual weight, not just the badge -
   a permanently-visible accent border/tint (not just on :checked, like
   the base .reg-plan-card above) plus a subtle lift, so it stands out on
   the picker before anything is even selected - this is what actually
   does the "nudge toward this plan" work the badge alone can't. */
.reg-plan-card-featured {
    border-color: var(--reg-blue-accent);
    background: linear-gradient(180deg, #eff6ff 0%, var(--reg-white) 65%);
    box-shadow: 0 6px 18px rgba(47, 111, 237, 0.16);
    transform: translateY(-3px);
}

.reg-plan-card-featured:has(input:checked) {
    background: #eff6ff;
}

.reg-plan-badge {
    position: absolute;
    top: -10px;
    left: 14px;
    padding: 2px 10px;
    background: var(--reg-blue-accent);
    color: #fff;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.reg-plan-features {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding: 0;
    list-style: none;
}

.reg-plan-features li {
    font-size: 0.74rem;
    color: var(--reg-text);
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

.reg-plan-features li i {
    color: #16a34a;
    font-size: 0.66rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ---------- 2-step flow: indicator + selected-plan summary ---------- */
.reg-form-sub-top {
    margin-bottom: 20px;
}

.reg-steps-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.reg-step-dot {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--reg-muted);
    white-space: nowrap;
}

.reg-step-dot-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--reg-border);
    color: var(--reg-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.reg-step-dot-active {
    color: var(--reg-text);
}

.reg-step-dot-active .reg-step-dot-num {
    background: var(--reg-blue-accent);
    color: #fff;
}

.reg-step-dot-done .reg-step-dot-num {
    background: #16a34a;
    color: #fff;
}

.reg-step-dot-line {
    flex: 1;
    height: 2px;
    background: var(--reg-border);
    max-width: 32px;
}

.reg-selected-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid var(--reg-blue-light);
    border-radius: var(--reg-radius-sm);
    margin-bottom: 22px;
}

.reg-selected-plan-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reg-selected-plan-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--reg-muted);
    font-weight: 700;
}

.reg-selected-plan-name {
    font-size: 0.85rem;
    font-weight: 700;
}

.reg-change-plan-btn {
    background: none;
    border: none;
    color: var(--reg-blue-accent);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
    flex-shrink: 0;
}

.reg-change-plan-btn:hover {
    background: rgba(47, 111, 237, 0.1);
}

.reg-no-plans {
    color: var(--reg-muted);
    font-size: 0.88rem;
    padding: 12px;
    background: #f7fafc;
    border-radius: var(--reg-radius-sm);
}

.reg-submit-btn {
    width: 100%;
    padding: 13px 16px;
    margin-top: 8px;
    border: none;
    border-radius: var(--reg-radius-sm);
    background: linear-gradient(135deg, var(--reg-blue-mid) 0%, var(--reg-blue-accent) 100%);
    color: var(--reg-white);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.reg-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--reg-shadow);
}

.reg-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .reg-page {
        flex-direction: column;
    }
    .reg-marketing,
    .reg-form-column {
        flex: 0 0 auto;
        max-width: 100%;
    }
    .reg-marketing {
        padding: 40px 24px;
    }
    .reg-headline {
        font-size: 1.6rem;
    }
    .reg-benefit-slide {
        gap: 16px;
        min-height: 0;
    }
    .reg-benefit-icon {
        width: 60px;
        height: 60px;
        border-radius: 16px;
        font-size: 24px;
    }
    .reg-form-column {
        padding: 36px 24px;
    }
}

@media (max-width: 480px) {
    .reg-form-row-split {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .reg-plans {
        grid-template-columns: 1fr;
    }
    .reg-plan-card-featured {
        transform: none;
    }
}

/* ---------- Shared: signup/payment-return.php status page ---------- */
.reg-status-body {
    font-family: "Manrope", sans-serif;
    background: var(--reg-blue-dark);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.reg-status-card {
    background: var(--reg-white);
    border-radius: 16px;
    padding: 44px 36px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.reg-status-icon {
    font-size: 44px;
    margin-bottom: 18px;
}

.reg-status-icon-success { color: #48bb78; }
.reg-status-icon-pending { color: var(--reg-blue-accent); }
.reg-status-icon-error { color: #e53e3e; }

.reg-status-card h1 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.reg-status-card p {
    color: var(--reg-muted);
    font-size: 0.92rem;
    margin-bottom: 22px;
    line-height: 1.5;
}

.reg-btn-primary {
    display: inline-block;
    padding: 11px 26px;
    border-radius: var(--reg-radius-sm);
    background: linear-gradient(135deg, var(--reg-blue-mid) 0%, var(--reg-blue-accent) 100%);
    color: var(--reg-white);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
}