/* ============================================================
   ZiNRAi BackOffice — Intake Funnel Styles (funnel.css)
   Ported from FrontEnd for funnel pages (ZN-648).
   Defines the --zn-* token set + funnel-specific rules.
   Does not collide with BackOffice's --accent-* / --mud-* tokens.
   ============================================================ */

/* === Token set (from FrontEnd/wwwroot/css/theme-variables.css) === */

:root {
    /* Brand palette */
    --zn-black: #0B0B0B;
    --zn-dark: #111111;
    --zn-darker: #0A0A0A;
    --zn-white: #ffffff;

    /* Gray scale (matches Tailwind gray-*) */
    --zn-gray-50:  #f9fafb;
    --zn-gray-100: #f3f4f6;
    --zn-gray-200: #e5e7eb;
    --zn-gray-300: #d1d5db;
    --zn-gray-400: #9ca3af;
    --zn-gray-500: #6b7280;
    --zn-gray-600: #4b5563;
    --zn-gray-700: #374151;
    --zn-gray-800: #1f2937;
    --zn-gray-900: #111827;

    /* Accent colors (brand purple — aligned with BackOffice) */
    --zn-accent-primary: #8b5cf6;
    --zn-accent-primary-hover: #7c3aed;
    --zn-accent-primary-light: rgba(139, 92, 246, 0.1);
    --zn-accent-primary-pale: #c4b5fd;
    --zn-accent-primary-glow-soft: rgba(139, 92, 246, 0.18);
    --zn-accent-primary-glow-softer: rgba(139, 92, 246, 0.12);
    --zn-accent-primary-shadow: rgba(139, 92, 246, 0.7);
    /* ZN-1155: the accent darkened for TEXT use. --zn-accent-primary (#8b5cf6) is
       3.6:1 on white — it clears the 3:1 non-text minimum for borders, fills and
       icons, but fails the 4.5:1 minimum for body text and links. This is 6.7:1 on
       white. Use it for any accent-coloured text; keep --zn-accent-primary for the
       non-text parts. */
    --zn-accent-primary-ink: #6d28d9;

    /* Dark glass surfaces (intake-complete / payment-success cards) */
    --zn-card-overlay-dark: rgba(17, 17, 17, 0.72);
    --zn-card-border-light: rgba(255, 255, 255, 0.08);

    /* Modal / dialog backdrop overlay */
    --zn-overlay-backdrop: rgba(0, 0, 0, 0.5);

    /* Status colors */
    --zn-color-success: #10b981;
    --zn-color-success-bg: rgba(16, 185, 129, 0.1);
    --zn-color-warning: #f59e0b;
    --zn-color-warning-bg: rgba(245, 158, 11, 0.1);
    --zn-color-error: #ef4444;
    --zn-color-error-bg: rgba(239, 68, 68, 0.1);
    --zn-color-info: #3b82f6;
    --zn-color-info-bg: rgba(59, 130, 246, 0.1);

    /* Status / accent (legacy) */
    --zn-red-50:   #fef2f2;
    --zn-red-200:  #fecaca;
    --zn-red-600:  #dc2626;
    --zn-red-700:  #b91c1c;
    --zn-yellow-200: #fef08a;

    /* Semantic text colors */
    --zn-text-primary: #1f2937;
    --zn-text-secondary: #6b7280;
    --zn-text-muted: #9ca3af;
    --zn-text-link: #3b82f6;
    --zn-text-link-hover: #2563eb;

    /* Border colors */
    --zn-border-primary: #e5e7eb;
    --zn-border-input: #d1d5db;
    --zn-border-input-focus: #8b5cf6;

    /* Page-specific accents */
    --zn-form-label: var(--zn-gray-700);
    --zn-form-submit: #b5ade6;
    --zn-form-bg: #f0f0f4;
    --zn-form-heading: #2e3655;

    /* Typography */
    --zn-font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    --zn-font-heading: 'Inter', system-ui, -apple-system, sans-serif;

    /* Spacing scale (rem) */
    --zn-space-1:  0.25rem;
    --zn-space-2:  0.5rem;
    --zn-space-3:  0.75rem;
    --zn-space-4:  1rem;
    --zn-space-5:  1.25rem;
    --zn-space-6:  1.5rem;
    --zn-space-8:  2rem;
    --zn-space-10: 2.5rem;
    --zn-space-12: 3rem;
    --zn-space-16: 4rem;
    --zn-space-20: 5rem;
    --zn-space-24: 6rem;

    /* Border radius */
    --zn-radius-sm:   0.375rem;
    --zn-radius-md:   0.5rem;
    --zn-radius-lg:   0.75rem;
    --zn-radius-xl:   1rem;
    --zn-radius-full: 9999px;

    /* Container widths */
    --zn-container-xl:  80rem;   /* 1280px */
    --zn-container-lg:  72rem;   /* 1152px */
    --zn-container-md:  64rem;   /* 1024px */
    --zn-container-sm:  56rem;   /* 896px */
    --zn-container-xs:  48rem;   /* 768px */
    --zn-container-xxs: 36rem;   /* 576px */

    /* Shadows */
    --zn-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
    --zn-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --zn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --zn-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --zn-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);
}

/* === Layout containers (from FrontEnd/wwwroot/css/zinrai-theme.css) ===
 *
 * ZN-1155: the ZN-648 port brought the --zn-container-* TOKENS across but not the
 * classes that consume them, and those classes are defined only in FrontEnd's
 * zinrai-theme.css, which BackOffice does not load. So `class="zn-container-md"` on
 * StartNowPage's signup card resolved to nothing and the card stretched to the full
 * viewport — 1370px on a 1440px screen, putting the consent copy at ~150 characters
 * per line. Restores the intended 1024px measure. StartNowPage is the only BackOffice
 * markup using these classes; its session-expired and forbidden cards also carry an
 * inline max-width, which still wins over the class as it did before. */
.zn-container      { max-width: var(--zn-container-xl); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.zn-container-lg   { max-width: var(--zn-container-lg); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.zn-container-md   { max-width: var(--zn-container-md); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.zn-container-sm   { max-width: var(--zn-container-sm); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.zn-container-xs   { max-width: var(--zn-container-xs); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.zn-container-narrow { max-width: var(--zn-container-xxs); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }

/* === Funnel keyframes (from FrontEnd/wwwroot/css/app.css) === */

@keyframes intake-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes intake-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Agreement HTML body (from FrontEnd/wwwroot/css/app.css) === */

/* MarkupString-rendered HTML does NOT receive Blazor scoped-CSS attributes,
   so styles for the long-form Quill output need to live here, not in a
   scoped .razor.css. */
.agreement-body-html h1,
.agreement-body-html h2,
.agreement-body-html h3 {
    margin: 1rem 0 0.5rem;
    color: var(--zn-black);
    line-height: 1.3;
}
.agreement-body-html h1 { font-size: 1.4rem; }
.agreement-body-html h2 { font-size: 1.2rem; }
.agreement-body-html h3 { font-size: 1.05rem; }
.agreement-body-html p {
    margin: 0 0 0.75rem;
    color: var(--zn-gray-800);
    line-height: 1.6;
    font-size: 0.95rem;
}
.agreement-body-html ul,
.agreement-body-html ol {
    margin: 0 0 0.75rem 1.25rem;
    color: var(--zn-gray-800);
    line-height: 1.6;
}
.agreement-body-html a {
    color: var(--zn-form-submit);
    text-decoration: underline;
}

/* === Intake-complete screen (from FrontEnd/wwwroot/css/app.css) === */

.intake-complete {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 0%, var(--zn-accent-primary-glow-soft), transparent 55%),
        radial-gradient(circle at 80% 100%, var(--zn-accent-primary-glow-softer), transparent 55%),
        var(--zn-black);
    color: var(--zn-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
    overflow: hidden;
    font-family: var(--zn-font-primary);
    /* This is a full-bleed dark hero, but it lives inside .funnel-body which is
       a centered flex column with padding (var(--zn-space-10) var(--zn-space-4)).
       Without these, the section shrinks to its card width and the light
       --zn-gray-100 layout background shows around it (the "weird white
       background"). Stretch to the body's full width and cancel its padding so
       the dark gradient covers edge to edge below the header. */
    align-self: stretch;
    margin: calc(var(--zn-space-10) * -1) calc(var(--zn-space-4) * -1);
}
.intake-complete__glow {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    opacity: 0.55;
}
.intake-complete__glow--top    { top: -180px; left: -160px; background: var(--zn-accent-primary); }
.intake-complete__glow--bottom { bottom: -200px; right: -180px; background: var(--zn-accent-primary-hover); }

.intake-complete__card {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: var(--zn-card-overlay-dark);
    border: 1px solid var(--zn-card-border-light);
    border-radius: var(--zn-radius-xl);
    box-shadow: var(--zn-shadow-2xl);
    backdrop-filter: blur(14px);
    padding: 3rem 2.25rem 2.5rem;
    text-align: center;
    animation: intake-fade-up 0.6s ease both;
}
/* Widened from 220px when the mark changed from the 3.3:1 knot raster to the
   4.04:1 wordmark lockup, so the rendered height above the checkmark holds.
   NOTE: ClientIntakeCompletePage.razor.css overrides width (and the section/card
   backgrounds) for the only page that uses this class - keep the two widths in step. */
.intake-complete__logo {
    width: 210px;
    max-width: 60%;
    height: auto;
    object-fit: contain;
    margin: 0 auto 1.5rem;
}
.intake-complete__check {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    color: var(--zn-color-success);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zn-color-success-bg);
    border-radius: 50%;
    animation: intake-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 0.15s;
}
.intake-complete__check svg { width: 100%; height: 100%; }

.intake-complete__title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(90deg, var(--zn-accent-primary) 0%, var(--zn-accent-primary-pale) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.5rem;
}
.intake-complete__lead {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--zn-white);
    margin-bottom: 0.5rem;
}
.intake-complete__welcome {
    font-size: 1rem;
    color: var(--zn-gray-300);
    margin-bottom: 1.25rem;
}
.intake-complete__brand {
    color: var(--zn-accent-primary);
    font-weight: 700;
}
.intake-complete__body {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--zn-gray-300);
    max-width: 480px;
    margin: 0 auto 2rem;
}

.intake-complete__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--zn-accent-primary);
    color: var(--zn-white);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.85rem 2rem;
    border-radius: var(--zn-radius-md);
    box-shadow: 0 10px 24px -10px var(--zn-accent-primary-shadow);
}
.intake-complete__button:hover {
    background: var(--zn-accent-primary-hover);
    transform: translateY(-1px);
}

.intake-complete__next {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--zn-card-border-light);
}
.intake-complete__next-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--zn-white);
    margin-bottom: 1rem;
}
.intake-complete__list {
    display: inline-block;
    text-align: left;
    margin: 0 auto;
}
.intake-complete__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--zn-gray-300);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}
.intake-complete__list-icon {
    color: var(--zn-color-success);
    font-weight: 700;
    flex: 0 0 auto;
    margin-top: 1px;
}
.intake-complete__contact {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--zn-gray-400);
}
.intake-complete__contact a {
    color: var(--zn-accent-primary);
    text-decoration: none;
}
.intake-complete__contact a:hover { text-decoration: underline; }
.intake-complete__footer {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--zn-gray-500);
    line-height: 1.6;
}

/* === Payment-success interstitial (from FrontEnd/wwwroot/css/app.css) === */

.payment-success {
    background: var(--zn-black);
    color: var(--zn-white);
    /* Same full-bleed fix as .intake-complete above (see its comment for the
       why): .funnel-body is a centered flex column with
       var(--zn-space-10) var(--zn-space-4) padding, so without these the dark
       panel shrank to its 480px card width and the light --zn-gray-100 layout
       background framed it on all four sides. Stretch to the body's full width
       and cancel its padding so the black covers edge to edge below the header.
       Keep the two blocks in step.
       flex: 1 replaces the old min-height: 100vh, because .funnel-layout is a
       100vh scroll container with a 64px header: 100vh here overflowed by
       exactly the header height and left a scrollbar on a page with nothing to
       scroll. Growing to fill .funnel-body (itself flex: 1) covers the same
       space with no hardcoded header height. */
    align-self: stretch;
    flex: 1;
    margin: calc(var(--zn-space-10) * -1) calc(var(--zn-space-4) * -1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    font-family: var(--zn-font-primary);
}
.payment-success__panel {
    width: 100%;
    max-width: 480px;
    text-align: center;
    animation: intake-fade-up 0.5s ease both;
}
/* See .intake-complete__logo — same ratio change, same reason. */
.payment-success__logo {
    width: 280px;
    max-width: 70%;
    height: auto;
    object-fit: contain;
    margin: 0 auto 1.5rem;
}
.payment-success__check {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    color: var(--zn-color-success);
    background: var(--zn-color-success-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: intake-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 0.1s;
}
.payment-success__check svg { width: 100%; height: 100%; }
.payment-success__title {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}
.payment-success__body {
    font-size: 1rem;
    color: var(--zn-gray-300);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}
.payment-success__hint {
    font-size: 0.95rem;
    color: var(--zn-gray-400);
    margin-bottom: 1.5rem;
}
.payment-success__fineprint {
    font-size: 0.75rem;
    color: var(--zn-gray-400);
    margin-bottom: 0;
}
.payment-success__button {
    background: var(--zn-accent-primary);
    color: var(--zn-white);
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0.85rem 2.25rem;
    border-radius: var(--zn-radius-md);
    box-shadow: 0 10px 24px -10px var(--zn-accent-primary-shadow);
}
.payment-success__button:hover {
    background: var(--zn-accent-primary-hover);
    transform: translateY(-1px);
}

/* === Funnel form classes (from FrontEnd/wwwroot/css/zinrai-theme.css) === */

.form-input-lg {
    width: 100%;
    border: 1px solid var(--zn-gray-200);
    border-radius: var(--zn-radius-sm);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: var(--zn-gray-700);
    background-color: var(--zn-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input-lg::placeholder { color: var(--zn-gray-400); }
.form-input-lg:focus {
    outline: none;
    border-color: var(--zn-gray-300);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.form-label-accent {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--zn-form-label);
    margin-bottom: 0.375rem;
}

.form-error { font-size: 0.75rem; color: var(--zn-red-600); margin-top: 0.25rem; }

/* ZN-946: .form-error is shared between the always-light funnel pages (locked
   to data-theme="light" by FunnelLayout's lockFunnelTheme(), where --zn-red-600
   on white measures ~4.83:1 -- fine) and BackOffice.razor dashboard pages like
   BillingPage's New Payment tab, where the same --zn-red-600 sits on the dark
   --bg-card surface and measures ~3.64:1 (fails WCAG AA). --zn-red-600 is a
   fixed light-palette token (no per-theme override, also consumed directly by
   the funnel sign/payment pages' required-field asterisks), so repointing the
   token itself would move those asterisks too -- scope the brighter red to
   dark theme only instead. */
[data-theme="dark"] .form-error {
    color: var(--color-error-bright);
}

.form-alert {
    border-radius: var(--zn-radius-md);
    border: 1px solid var(--zn-red-200);
    background-color: var(--zn-red-50);
    color: var(--zn-red-700);
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
}

.form-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--zn-radius-sm);
    border: 1px solid var(--zn-gray-300);
}

.grid-form { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) {
    .grid-form { grid-template-columns: repeat(2, 1fr); }
}

.heading-form { font-size: 2.25rem; font-weight: 700; color: var(--zn-form-heading); }

/* BackOffice override (ZN-648): the funnel was built for FrontEnd's light
   marketing theme, but BackOffice app.css darkens bare input/select/textarea
   and checkboxes for the dashboard via --bg-input (#131925). Re-assert the
   light theme for funnel form controls, scoped under .funnel-layout so the
   dashboard is untouched. The .funnel-layout + type.class selectors outrank
   app.css's bare element rule. */
/* BackOffice app.css locks page scrolling for its dashboard (html, body {
   overflow: hidden; height: 100% }) and relies on an inner panel scrolling
   instead. The funnel uses FunnelLayout, which has no such inner scroller, so
   tall steps (sign/payment) couldn't scroll to their Continue button. Make
   .funnel-layout its own full-height scroll container. (ZN-648) */
.funnel-layout {
    height: 100vh;
    overflow-y: auto;
}

/* Light-theme ALL funnel form fields. The email field uses .form-input-lg, but
   the credit-card fields (payment step) and the signature name/file/date fields
   (sign step) are bare <input>s — app.css darkens them all via --bg-input. The
   :not() selectors raise specificity above app.css's bare element rule (and its
   input:focus), so the white background also holds on focus. */
.funnel-layout input:not([type="checkbox"]):not([type="radio"]),
.funnel-layout select,
.funnel-layout textarea {
    background-color: var(--zn-white);
    color: var(--zn-gray-700);
}
.funnel-layout input:not([type="checkbox"]):not([type="radio"])::placeholder,
.funnel-layout textarea::placeholder { color: var(--zn-gray-400); }
.funnel-layout .form-input-lg { border: 1px solid var(--zn-gray-200); }
.funnel-layout input.form-input-lg:focus,
.funnel-layout select.form-input-lg:focus,
.funnel-layout textarea.form-input-lg:focus {
    border-color: var(--zn-gray-300);
}
/* Fully custom checkbox: native appearance + accent-color rendered
   inconsistently here (BackOffice app.css forces a dark `input` background, so
   the checked fill only showed on hover). appearance:none + a drawn checkmark
   is reliable and matches the light marketing theme. */
/* Covers both the age-confirm checkbox (.form-checkbox) and the ROSCA consent
   checkboxes on the payment step (bare input[type=checkbox]). */
.funnel-layout input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    border: 1px solid var(--zn-gray-300);
    border-radius: var(--zn-radius-sm);
    background-color: var(--zn-white);
    cursor: pointer;
    position: relative;
}
.funnel-layout input[type="checkbox"]:checked {
    background-color: var(--zn-accent-primary);
    border-color: var(--zn-accent-primary);
}
.funnel-layout input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 0.4375rem;
    top: 0.125rem;
    width: 0.375rem;
    height: 0.6875rem;
    border: solid var(--zn-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Funnel MudDialogs (e.g. Sponsor Confirmation) are light marketing cards, but
   BackOffice app.css forces .mud-paper dark via !important — which hid the
   dark dialog text. MudDialogs portal to <body> (outside .funnel-layout), so
   scope by the explicit Class="funnel-dialog" on the dialog. (ZN-648) */
.funnel-dialog.mud-paper,
.funnel-dialog .mud-dialog-content {
    background-color: var(--zn-white) !important;
    color: var(--zn-text-primary) !important;
}