/* ===========================================================================
   Impact1More — Volunteer Onboarding Portal
   ---------------------------------------------------------------------------
   Standalone stylesheet for the public wizard. Shares nothing with the
   Pixinvent admin theme: the portal is its own light, card-based design with a
   five-node action stepper, bookended by two dark full-bleed screens.

   Every class is prefixed `vp-` so this file can never collide with the theme.

   Brand red is #CF0709, sampled from static/images/logo/
   impact-one-more-logo-v1.png. Bootstrap's btn-danger (#ff4961) is visibly
   off-brand against it and must not be used here.
   =========================================================================== */

:root {
    --vp-red:        #CF0709;
    --vp-red-dark:   #A80507;
    --vp-red-tint:   #FDECEC;
    --vp-red-soft:   #FBDDDE;

    --vp-ink:        #16171B;   /* headings */
    --vp-body:       #4B4C55;   /* paragraphs */
    --vp-muted:      #8A8B95;   /* captions, todo steps */
    --vp-line:       #E6E7EB;   /* borders, rules */
    --vp-line-soft:  #F1F2F4;

    --vp-page:       #FFFFFF;
    --vp-card:       #FFFFFF;
    --vp-card-soft:  #FAFAFB;

    --vp-dark:       #121216;   /* hero + completion screens */
    --vp-dark-card:  #1D1E23;
    --vp-dark-line:  #2C2D34;

    --vp-ok:         #2E9E5B;

    --vp-radius:     12px;
    --vp-radius-btn: 8px;
    --vp-maxw:       860px;     /* action screens */
    --vp-maxw-narrow:560px;
    --vp-gutter:     20px;
    --vp-header-h:   62px;

    --vp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body.vp {
    margin: 0;
    background: var(--vp-page);
    color: var(--vp-body);
    font-family: var(--vp-font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* --- Header (light) ----------------------------------------------------- */

.vp-header {
    background: #fff;
    border-bottom: 1px solid var(--vp-line);
    padding-top: env(safe-area-inset-top);
}
.vp-header-inner {
    height: var(--vp-header-h);
    max-width: var(--vp-maxw);
    margin: 0 auto;
    padding: 0 var(--vp-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.vp-logo { display: flex; align-items: center; text-decoration: none; }
.vp-logo img { display: block; height: 30px; width: auto; }
.vp-header-label {
    font-size: 13px;
    color: var(--vp-muted);
    white-space: nowrap;
}

/* --- Layout ------------------------------------------------------------- */

.vp-main {
    max-width: var(--vp-maxw);
    margin: 0 auto;
    padding: 26px var(--vp-gutter) 56px;
}
.vp-main--narrow { max-width: var(--vp-maxw-narrow); }

/* --- Action heading ----------------------------------------------------- */

.vp-action-label {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vp-red);
}
.vp-title {
    margin: 0 0 6px;
    font-size: clamp(25px, 4.6vw, 32px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--vp-ink);
}
.vp-subtitle { margin: 0 0 14px; color: var(--vp-body); }

/* The short red rule under the subtitle in the design. */
.vp-rule {
    width: 54px;
    height: 3px;
    border-radius: 2px;
    background: var(--vp-red);
    margin: 0 0 26px;
}

/* --- Five-node action stepper ------------------------------------------ */

.vp-stepper {
    /* Columns are generated from the number of stops, not fixed at five:
       every page leadership adds becomes another stop, and a hard-coded five
       made the sixth wrap onto its own row with a stray connector line.
       Below about seven stops the row scrolls sideways rather than squashing
       the labels into unreadable slivers. */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(62px, 1fr);
    overflow-x: auto;
    margin: 0 0 28px;
    padding-bottom: 2px;
    scrollbar-width: thin;
}
.vp-stepper-node { position: relative; text-align: center; }

/* Connector runs back toward the previous node, so its colour reflects the
   node on its left. */
.vp-stepper-node::before {
    content: '';
    position: absolute;
    top: 14px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--vp-line);
}
.vp-stepper-node:first-child::before { display: none; }
.vp-stepper-node.is-done::before,
.vp-stepper-node.is-current::before { background: var(--vp-red); }

.vp-stepper-dot {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: var(--vp-line-soft);
    border: 1px solid var(--vp-line);
    color: var(--vp-muted);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vp-stepper-node.is-done .vp-stepper-dot,
.vp-stepper-node.is-current .vp-stepper-dot {
    background: var(--vp-red);
    border-color: var(--vp-red);
    color: #fff;
}
.vp-stepper-text {
    display: block;
    font-size: 11px;
    line-height: 1.3;
    color: var(--vp-muted);
}
.vp-stepper-node.is-current .vp-stepper-text {
    color: var(--vp-red);
    font-weight: 600;
}
.vp-stepper-node.is-done .vp-stepper-text { color: var(--vp-body); }

/* --- Cards -------------------------------------------------------------- */

.vp-card {
    background: var(--vp-card-soft);
    border: 1px solid var(--vp-line);
    border-radius: var(--vp-radius);
    padding: 22px;
    margin-bottom: 18px;
}
.vp-card--plain { background: #fff; }
.vp-card h2 { margin: 0 0 8px; font-size: 17px; color: var(--vp-ink); }
.vp-card p:last-child { margin-bottom: 0; }

.vp-card-row { display: flex; gap: 16px; align-items: flex-start; }

/* Pink circle with a red glyph, used on several cards in the design. */
.vp-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--vp-red-tint);
    color: var(--vp-red);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vp-icon--sm { width: 42px; height: 42px; }

.vp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* --- Lists -------------------------------------------------------------- */

.vp-ticks { list-style: none; margin: 12px 0 0; padding: 0; }
.vp-ticks li {
    position: relative;
    padding: 5px 0 5px 26px;
    color: var(--vp-body);
}
.vp-ticks li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 12px;
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--vp-red);
    border-bottom: 2px solid var(--vp-red);
    transform: rotate(-45deg);
}

.vp-numbers { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: vpn; }
.vp-numbers li {
    counter-increment: vpn;
    position: relative;
    padding: 5px 0 5px 28px;
    color: var(--vp-body);
}
.vp-numbers li::before {
    content: counter(vpn) '.';
    position: absolute;
    left: 2px;
    top: 5px;
    color: var(--vp-red);
    font-weight: 700;
}

/* Small inline action next to a numbered instruction. */
.vp-inline-actions { display: inline-flex; gap: 8px; margin-left: 8px; }
.vp-inline-btn {
    display: inline-block;
    padding: 3px 11px;
    border: 1px solid var(--vp-red);
    border-radius: 999px;
    color: var(--vp-red);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.vp-inline-btn:hover { background: var(--vp-red); color: #fff; }

/* --- Buttons ------------------------------------------------------------ */

.vp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 12px 26px;
    border: 0;
    border-radius: var(--vp-radius-btn);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease;
}
.vp-btn--primary { background: var(--vp-red); color: #fff; }
.vp-btn--primary:hover, .vp-btn--primary:active { background: var(--vp-red-dark); color: #fff; }

.vp-btn--back { background: var(--vp-line-soft); color: var(--vp-ink); }
.vp-btn--back:hover { background: var(--vp-line); }

.vp-btn--ghost {
    background: transparent;
    color: var(--vp-ink);
    border: 1px solid var(--vp-line);
}
.vp-btn--block { display: flex; width: 100%; }

.vp-btn:disabled, .vp-btn--disabled {
    background: var(--vp-line);
    color: var(--vp-muted);
    cursor: not-allowed;
    pointer-events: none;
}

/* Back on the left, primary on the right. */
.vp-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}
.vp-actions--end { justify-content: flex-end; }

/* --- Forms -------------------------------------------------------------- */

.vp-field { margin-bottom: 16px; }
.vp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.vp-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vp-ink);
}
.vp-req { color: var(--vp-red); margin-left: 2px; }
.vp-optional-tag { font-weight: 400; color: var(--vp-muted); }

/* 16px keeps iOS Safari from zooming the viewport on focus. */
.vp-input, .vp-select {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    font-family: inherit;
    font-size: 16px;
    color: var(--vp-ink);
    background: #fff;
    border: 1px solid var(--vp-line);
    border-radius: var(--vp-radius-btn);
    appearance: none;
}
.vp-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238A8B95' stroke-width='2'%3E%3Cpolyline points='1 1 6 6 11 1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 36px;
}
.vp-input:focus, .vp-select:focus {
    outline: none;
    border-color: var(--vp-red);
    box-shadow: 0 0 0 3px var(--vp-red-tint);
}
.vp-input::placeholder { color: #B4B5BD; }
.vp-field-error .vp-input, .vp-field-error .vp-select { border-color: var(--vp-red); }
.vp-error { display: block; margin-top: 5px; font-size: 13px; color: var(--vp-red); }
.vp-help { display: block; margin-top: 5px; font-size: 12px; color: var(--vp-muted); }

.vp-fieldset-title {
    margin: 4px 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--vp-muted);
}

.vp-check { display: flex; align-items: flex-start; gap: 11px; }
.vp-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 19px; height: 19px; margin-top: 1px;
    accent-color: var(--vp-red);
}
.vp-check label { font-size: 14px; line-height: 1.45; color: var(--vp-body); }

/* Signature box with a pen glyph, matching the design. */
.vp-sign {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 4px 12px;
    background: #fff;
    border: 1px solid var(--vp-line);
    border-radius: var(--vp-radius-btn);
}
.vp-sign svg { flex: 0 0 auto; color: var(--vp-red); }
.vp-sign .vp-input {
    border: 0;
    box-shadow: none;
    padding-left: 0;
    font-family: 'Segoe Script', 'Bradley Hand', cursive;
    font-size: 18px;
}
.vp-sign .vp-input:focus { box-shadow: none; }

/* --- Notices ------------------------------------------------------------ */

.vp-note {
    border-radius: var(--vp-radius-btn);
    padding: 13px 15px;
    margin-top: 16px;
    font-size: 14px;
    background: var(--vp-red-tint);
    color: #7d1113;
}
.vp-note--muted { background: var(--vp-line-soft); color: var(--vp-body); }
.vp-note--ok { background: #E8F6EE; color: #1d6b3c; }

.vp-alert {
    border-radius: var(--vp-radius-btn);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 14px;
    background: var(--vp-line-soft);
    border-left: 3px solid var(--vp-line);
}
.vp-alert--error { background: var(--vp-red-tint); border-left-color: var(--vp-red); color: #7d1113; }
.vp-alert--success { background: #E8F6EE; border-left-color: var(--vp-ok); }

/* --- Media -------------------------------------------------------------- */

.vp-media {
    border-radius: var(--vp-radius);
    overflow: hidden;
    margin-bottom: 20px;
    background: #000;
}

.vp-media img { display: block; width: 100%; height: auto; }

/* An uploaded still is illustrative, not a hero: cap its height so it cannot
   push the step content below the fold.
   These rules MUST come after `.vp-media img` above - they have identical
   specificity, so order decides. When `width:100%` won, `max-height` squashed
   the picture instead of scaling it, and a 4:3 photo rendered visibly
   distorted. object-fit is belt-and-braces for any odd aspect ratio. */
.vp-media--image {
    background: var(--vp-card-soft);
    border: 1px solid var(--vp-line);
    padding: 10px;
}
/* A centred block, not inline-block (baseline gap) and not a flex item (the
   image collapsed to zero). With width and height both auto, max-height scales
   a replaced element proportionally, which is exactly what is wanted. */
.vp-media--image img {
    display: block;
    margin: 0 auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 260px;
    border-radius: 6px;
}

/* Uploaded video files play inline, with no dependency on an embed host. */
.vp-media-video {
    display: block;
    width: 100%;
    max-height: 420px;
    background: #000;
}
.vp-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vp-video-fallback { margin: -10px 0 18px; text-align: center; font-size: 13px; color: var(--vp-muted); }
.vp-video-fallback a { color: var(--vp-red); }

/* Play-button facade for a linked video (see _media.html for the reasoning).
   The 16:9 box is held by padding-bottom on the CONTAINER rather than
   aspect-ratio on the button: a <button> does not honour aspect-ratio
   reliably, and the poster collapsed to a ~25px black strip - the "black line"
   the client reported. */
.vp-video-facade {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    background: #0d0d10;
}
.vp-video-facade > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.vp-video-poster {
    display: block;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background-color: #0d0d10;
    background-size: cover;
    background-position: center;
}
.vp-video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--vp-red);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
    padding-left: 4px;
}
.vp-video-poster:hover .vp-video-play { background: var(--vp-red-dark); }

/* The "can't play here" card sizes to its content, so release the aspect box. */
.vp-video-facade.vp-video-unavailable {
    height: auto;
    padding-bottom: 0;
    background: var(--vp-card-soft);
    border: 1px solid var(--vp-line);
}
.vp-video-facade.vp-video-unavailable > * { position: static; height: auto; }
.vp-video-fallback-card { padding: 26px 22px; text-align: center; }
.vp-video-fallback-card p { margin: 0 0 8px; color: var(--vp-body); }
.vp-video-fallback-card p strong { color: var(--vp-ink); }
.vp-video-fallback-card .vp-btn { display: inline-flex; width: auto; margin-top: 10px; }

/* --- Dark screens (hero + completion) ---------------------------------- */

.vp-dark {
    position: relative;
    min-height: 100vh;
    background: var(--vp-dark);
    background-size: cover;
    background-position: center;
    color: #C9CAD2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px var(--vp-gutter);
}
.vp-dark-inner { max-width: 520px; margin: 0 auto; width: 100%; }
.vp-dark-logo { margin-bottom: 34px; }
/* impact-one-more-logo-light.png is white line-art on transparent, derived
   from the org's own mono logo, so it sits directly on the dark ground with no
   containing chip. */
.vp-dark-logo img { height: 66px; width: auto; }
.vp-dark h1 {
    margin: 0 0 12px;
    font-size: clamp(34px, 8vw, 48px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
}
.vp-dark-intro { margin: 0 0 18px; font-size: 17px; color: #D6D7DE; }
.vp-dark-body { margin: 0 0 26px; color: #9FA0AA; }

.vp-values { list-style: none; margin: 0 0 30px; padding: 0; }
.vp-values li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.vp-values svg { flex: 0 0 auto; color: var(--vp-red); margin-top: 2px; }
.vp-value-label { display: block; font-weight: 700; color: #fff; margin-bottom: 1px; }
.vp-value-text { display: block; font-size: 14px; color: #9FA0AA; }

.vp-dark-card {
    background: var(--vp-dark-card);
    border: 1px solid var(--vp-dark-line);
    border-radius: var(--vp-radius);
    padding: 24px;
    margin-bottom: 26px;
}
.vp-dark-card h2 { margin: 0 0 8px; font-size: 20px; color: #fff; }
.vp-dark-card p { margin: 0; color: #9FA0AA; }

.vp-dark-foot { margin-top: 22px; text-align: center; font-size: 13px; color: #7B7C86; }
.vp-dark-foot a { color: var(--vp-red); }

.vp-dark-link { text-align: center; margin-top: 16px; font-size: 14px; color: #9FA0AA; }
.vp-dark-link a { color: var(--vp-red); font-weight: 600; }

/* A photo behind the landing screen needs a heavy scrim, or white text on a
   bright patch becomes unreadable. */
.vp-dark--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
                rgba(12, 12, 15, .95) 0%,
                rgba(12, 12, 15, .88) 45%,
                rgba(12, 12, 15, .72) 100%);
}
.vp-dark-inner { position: relative; z-index: 1; }

/* --- Preview banner (staff previewing draft content) ------------------- */

.vp-preview-bar {
    background: #C9A227;
    color: #2b2205;
    text-align: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 640px) {
    .vp-grid-2 { grid-template-columns: 1fr; }
    .vp-field-row { grid-template-columns: 1fr; gap: 0; }
    .vp-stepper-text { font-size: 10px; }
    .vp-header-label { display: none; }
    .vp-actions { flex-direction: column-reverse; align-items: stretch; }
    .vp-actions .vp-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Custom page blocks

   Leadership can build a page out of headings, text, questions and signature
   lines. The question controls reuse .vp-input / .vp-check / .vp-sign; only
   the radio and checkbox groups need markup of their own, because Django
   renders those as a list of labelled inputs.
   ───────────────────────────────────────────────────────────────────────── */

.vp-block-heading {
    margin: 26px 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--vp-ink);
}

.vp-block-heading:first-child { margin-top: 0; }

.vp-options { display: grid; gap: 9px; margin-top: 4px; }

/* Django wraps each option in a <div>; older markup uses <ul><li>. */
.vp-options ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.vp-options div,
.vp-options li { display: block; }

.vp-options label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border: 1.5px solid var(--vp-line);
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    line-height: 1.45;
    color: var(--vp-body);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.vp-options label:hover { border-color: var(--vp-red); background: var(--vp-red-tint); }

.vp-options input[type="radio"],
.vp-options input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    accent-color: var(--vp-red);
}

/* :has() keeps the selected option highlighted; browsers without it simply
   show the native control, which is still perfectly usable. */
.vp-options label:has(input:checked) {
    border-color: var(--vp-red);
    background: var(--vp-red-tint);
    color: var(--vp-ink);
}

.vp-field-error .vp-options label { border-color: var(--vp-red-soft); }

.vp-card--error {
    border-color: var(--vp-red);
    background: var(--vp-red-tint);
}

.vp-card--error p { margin: 0; color: var(--vp-red-dark); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   2026 REDESIGN LAYER (Nov 8, 2026) — "modern, sleek, matching the hub"
   ---------------------------------------------------------------------------
   The wizard now sits on the hub's deep navy → purple world (same family as
   the hub login page): gradient page ground, the colour logo on a white
   tile, white content cards with a neon hairline, hub-purple primary
   buttons, and the hub accent palette (purple #7367F0, cyan #00CFE8,
   green #28C76F, amber #FFCF5C). Brand red survives only where it carries
   meaning: required marks and errors. Presentation only — every class,
   field and flow above is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --vp-radius:     16px;
    --vp-radius-btn: 12px;
    --vp-purple:     #7367F0;
    --vp-purple-dk:  #666EE8;
    --vp-purple-tint:#EFEDFD;
    --vp-cyan:       #00CFE8;
    --vp-green:      #28C76F;
    --vp-amber:      #FFCF5C;
    --vp-display:    'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                     Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body.vp {
    background: #13131f;
    background-image:
        radial-gradient(720px 480px at 12% -6%, rgba(115,103,240,.34), rgba(115,103,240,0) 62%),
        radial-gradient(640px 460px at 96% 4%, rgba(0,207,232,.20), rgba(0,207,232,0) 60%),
        radial-gradient(760px 620px at 55% 112%, rgba(244,113,181,.13), rgba(244,113,181,0) 62%),
        linear-gradient(160deg, #191930 0%, #13131f 55%, #1d1440 100%);
    background-attachment: fixed;
    color: #D8D8E4;
}

/* --- Header: glass bar, logo on the white tile (the hub sidebar treatment) */
.vp-header {
    background: rgba(19,19,31,.72);
    border-bottom: 1px solid rgba(115,103,240,.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.vp-logo {
    background: #fff;
    border-radius: 10px;
    padding: 6px 12px;
    box-shadow: 0 4px 14px rgba(5,5,15,.35);
}
.vp-logo img { height: 28px; }
.vp-header-label {
    color: rgba(255,255,255,.85);
    font-family: var(--vp-display);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 12px;
}

/* --- Headings on the gradient ------------------------------------------- */
.vp-action-label { color: var(--vp-cyan); letter-spacing: .05em; text-transform: uppercase; font-size: 12px; }
.vp-title { color: #fff; font-family: var(--vp-display); font-weight: 700; }
.vp-subtitle { color: rgba(255,255,255,.78); }
.vp-rule { background: linear-gradient(90deg, var(--vp-purple), var(--vp-cyan)); width: 64px; height: 4px; }

/* --- Stepper: green = done, glowing purple = current --------------------- */
.vp-stepper-node::before { background: rgba(255,255,255,.18); }
.vp-stepper-node.is-done::before { background: var(--vp-green); }
.vp-stepper-node.is-current::before { background: var(--vp-purple); }
.vp-stepper-dot {
    width: 32px; height: 32px;
    background: rgba(255,255,255,.08);
    border: 1.5px solid rgba(255,255,255,.28);
    color: rgba(255,255,255,.55);
}
.vp-stepper-node.is-done .vp-stepper-dot {
    background: var(--vp-green); border-color: var(--vp-green); color: #fff;
}
.vp-stepper-node.is-current .vp-stepper-dot {
    background: linear-gradient(135deg, var(--vp-purple), var(--vp-purple-dk));
    border-color: var(--vp-purple); color: #fff;
    box-shadow: 0 0 0 5px rgba(115,103,240,.28), 0 6px 16px rgba(115,103,240,.5);
}
.vp-stepper-text { color: rgba(255,255,255,.5); }
.vp-stepper-node.is-done .vp-stepper-text { color: rgba(255,255,255,.85); }
.vp-stepper-node.is-current .vp-stepper-text { color: #fff; font-weight: 700; }

/* --- Cards: crisp white, soft shadow, neon hairline ---------------------- */
.vp-card {
    position: relative;
    background: #fff;
    border: none;
    border-radius: var(--vp-radius);
    box-shadow: 0 18px 40px rgba(5,5,18,.42);
    padding: 26px;
    overflow: hidden;
}
.vp-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--vp-purple), var(--vp-cyan), #F471B5);
}
.vp-card--plain { background: #fff; }
.vp-card h2 { font-family: var(--vp-display); }
.vp-icon { background: var(--vp-purple-tint); color: var(--vp-purple); }
.vp-ticks li::before { border-left-color: var(--vp-purple); border-bottom-color: var(--vp-purple); }
.vp-numbers li::before { color: var(--vp-purple); }
.vp-inline-btn { border-color: var(--vp-purple); color: var(--vp-purple); }
.vp-inline-btn:hover { background: var(--vp-purple); color: #fff; }
.vp-block-heading { font-family: var(--vp-display); }

/* --- Buttons -------------------------------------------------------------- */
.vp-btn {
    min-height: 50px;
    border-radius: var(--vp-radius-btn);
    font-family: var(--vp-display);
    font-weight: 700;
    letter-spacing: .01em;
    transition: transform .13s ease-out, box-shadow .13s ease-out, background .13s ease-out;
}
.vp-btn--primary {
    background: linear-gradient(135deg, var(--vp-purple), var(--vp-purple-dk));
    box-shadow: 0 8px 22px rgba(115,103,240,.45);
    color: #fff;
}
.vp-btn--primary:hover, .vp-btn--primary:active {
    background: linear-gradient(135deg, #8176F5, var(--vp-purple));
    color: #fff;
    transform: translateY(-1px);
}
.vp-btn--back { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.vp-btn--back:hover { background: rgba(255,255,255,.18); }
.vp-btn--ghost { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.vp-btn--ghost:hover { background: rgba(255,255,255,.14); }
.vp-btn:disabled, .vp-btn--disabled {
    background: rgba(255,255,255,.14); color: rgba(255,255,255,.45); box-shadow: none;
}

/* --- Forms (inside the white cards) --------------------------------------- */
.vp-input, .vp-select { border: 1.5px solid var(--vp-line); border-radius: var(--vp-radius-btn); min-height: 50px; }
.vp-input:focus, .vp-select:focus {
    border-color: var(--vp-purple);
    box-shadow: 0 0 0 3px rgba(115,103,240,.2);
}
.vp-check input[type="checkbox"] { accent-color: var(--vp-purple); }
.vp-sign svg { color: var(--vp-purple); }
.vp-sign:focus-within { border-color: var(--vp-purple); box-shadow: 0 0 0 3px rgba(115,103,240,.2); }
.vp-options label { border-radius: 12px; }
.vp-options label:hover { border-color: var(--vp-purple); background: var(--vp-purple-tint); }
.vp-options input[type="radio"], .vp-options input[type="checkbox"] { accent-color: var(--vp-purple); }
.vp-options label:has(input:checked) { border-color: var(--vp-purple); background: var(--vp-purple-tint); }
.vp-note { background: var(--vp-purple-tint); color: #3D348B; }
.vp-note--muted { background: var(--vp-line-soft); color: var(--vp-body); }
.vp-note--ok { background: #E8F6EE; color: #1D6B3C; }
.vp-video-fallback a { color: var(--vp-purple); }
.vp-video-play { background: linear-gradient(135deg, var(--vp-purple), var(--vp-purple-dk)); }
.vp-video-poster:hover .vp-video-play { background: linear-gradient(135deg, #8176F5, var(--vp-purple)); }

/* --- Alerts (they sit on the gradient, above the cards) ------------------- */
.vp-alert {
    background: rgba(27,27,42,.85);
    border: 1px solid rgba(255,255,255,.14);
    border-left: 4px solid var(--vp-cyan);
    color: #E9E9F2;
    border-radius: 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.vp-alert--error { background: rgba(90,20,22,.6); border-left-color: #EA5455; color: #FFD7D7; }
.vp-alert--success { background: rgba(16,60,38,.6); border-left-color: var(--vp-green); color: #C9F5DD; }

/* --- Dark screens (hero + completion): same world, purple glow ------------ */
.vp-dark {
    background-color: #13131f;
    background-image:
        radial-gradient(720px 480px at 12% -6%, rgba(115,103,240,.3), rgba(115,103,240,0) 62%),
        radial-gradient(640px 460px at 96% 4%, rgba(0,207,232,.16), rgba(0,207,232,0) 60%),
        linear-gradient(160deg, #191930 0%, #13131f 55%, #1d1440 100%);
}
.vp-dark--photo::before {
    background: linear-gradient(to right,
                rgba(15, 13, 30, .96) 0%,
                rgba(15, 13, 30, .9) 45%,
                rgba(15, 13, 30, .74) 100%);
}
.vp-dark h1 { font-family: var(--vp-display); }
.vp-values svg { color: var(--vp-cyan); }
.vp-dark-card {
    background: rgba(27,27,42,.82);
    border: 1px solid rgba(115,103,240,.35);
    border-radius: var(--vp-radius);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.vp-dark-card h2 { font-family: var(--vp-display); }
.vp-dark-foot a, .vp-dark-link a { color: #A89FF5; }

/* --- Small screens --------------------------------------------------------- */
@media (max-width: 640px) {
    .vp-card { padding: 20px 18px; }
    .vp-main { padding-top: 20px; }
}

/* Bare-content safety net (Nov 8, 2026): labels, headings and helper text
   that sit directly on the gradient — the resume form, custom-page blocks,
   any field outside a card — stay readable in white; inside the white cards
   the original ink colours apply. */
.vp-label { color: #fff; }
.vp-card .vp-label { color: var(--vp-ink); }
.vp-fieldset-title { color: rgba(255,255,255,.65); }
.vp-card .vp-fieldset-title { color: var(--vp-muted); }
.vp-help { color: rgba(255,255,255,.6); }
.vp-card .vp-help { color: var(--vp-muted); }
.vp-check label { color: #E9E9F2; }
.vp-card .vp-check label { color: var(--vp-body); }
.vp-block-heading { color: #fff; }
.vp-card .vp-block-heading { color: var(--vp-ink); }
.vp-error { color: #FF9C9C; }
.vp-card .vp-error { color: var(--vp-red); }
.vp-optional-tag { color: rgba(255,255,255,.55); }
.vp-card .vp-optional-tag { color: var(--vp-muted); }