/**
 * v3 careerweb — apply form + apply bar + the brand-coloured primary
 * button. Form lives inline at the bottom of the detail body when the
 * job's redirection_type !== 'apply-start'.
 */

/* ─── Inline apply section ───
   Modern minimal — flat surface, generous radius, no gradient
   strip. The Stripe/Linear/Vercel aesthetic: a quiet white slab
   that lets the field affordances do the visual work. */
.apply-section {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 32px 32px 28px;
    margin-top: 8px;
}
.apply-section-intro {
    font-size: var(--fs-meta);
    color: var(--ink-2);
    margin: -6px 0 24px;
    line-height: var(--lh-body);
    max-width: 56ch;
}
.apply-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.apply-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.apply-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.apply-field-full { grid-column: 1 / -1; }
.apply-label {
    font-family: 'Archivo', sans-serif;
    font-weight: var(--fw-bold);
    font-size: var(--fs-eyebrow);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.apply-required {
    color: var(--brand);
    margin-left: 3px;
}
.apply-field { position: relative; }

/* Modern minimal input. Flat fill, hairline border, generous
   rounded corners. The focus state replaces the brand-ring with
   a quieter brand-on-ink border transition — Linear / Vercel
   style. No decorative underlines, no filled-state pips: those
   read as 2020-era flourishes. The visual hierarchy comes from
   the label-above + input geometry alone. */
.apply-input {
    height: 50px;
    padding: 0 16px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-lg);
    font-size: var(--fs-h3);
    color: var(--ink);
    outline: none;
    transition: border-color 160ms ease, box-shadow 200ms ease;
    font-family: inherit;
    width: 100%;
}
.apply-input::placeholder { color: var(--ink-3); }
.apply-input:hover { border-color: var(--ink-2); }
.apply-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-ring);
    background-color: var(--surface);
}
.apply-input:invalid:not(:placeholder-shown) {
    border-color: #C44545;
}
.apply-form-foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.apply-submit {
    align-self: flex-start;
    min-width: 200px;
    justify-content: center;
}
/* Legal disclaimer that sits beneath the Apply Now button. Reads
   as a footnote, not a wall of grey text — small shield icon on
   the left, a soft surface backdrop with a hairline rule, brand-
   coloured link. The icon + container give it the "consent
   notice" affordance you see on Stripe / Linear sign-up footers. */
.apply-disclaimer {
    position: relative;
    display: block;
    margin: 14px 0 0;
    padding: 14px 16px 14px 44px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--ink-3);
    letter-spacing: -0.005em;
}
.apply-disclaimer::before {
    /* Tabler shield-check icon — communicates "consent / privacy"
       without taking visual weight from the Apply Now CTA above. */
    content: '';
    position: absolute;
    left: 16px;
    top: 14px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A847B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5 -3.5 8.5 -8 9c-4.5 -0.5 -8 -4 -8 -9V6l8 -3'/%3E%3Cpath d='M9 12l2 2l4 -4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.85;
}
.apply-disclaimer a {
    color: var(--brand);
    font-weight: var(--fw-bold);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: filter 120ms ease;
}
/* Light-brand override — yellow / lime link text on white is
   unreadable. Keep the underline brand-coloured (line-style elements
   need less contrast than text) and swap the text to ink. brand.js
   sets body.brand-light when brand luminance > 0.55. */
body.brand-light .apply-disclaimer a {
    color: var(--ink);
    text-decoration-color: var(--brand);
}
.apply-disclaimer a:hover { filter: brightness(0.85); }
/* Brand-light tenants: brand colour on small underlined text drops
   contrast below WCAG AA. Swap to ink + brand underline so the
   link still reads as a link. */
body.brand-light .apply-disclaimer a {
    color: var(--ink);
    text-decoration-color: var(--brand);
    text-decoration-thickness: 2px;
}

/* ─── Sticky apply bar at the bottom of the detail ─── */
.apply-bar {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 18px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 10;
}
.apply-bar-info { flex: 1; }
.apply-bar-info-title {
    font-family: 'Archivo', sans-serif;
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    color: var(--ink);
    line-height: var(--lh-snug);
}
.apply-bar-info-sub {
    font-size: var(--fs-meta);
    color: var(--ink-2);
    margin-top: 2px;
}

/* ─── Brand-coloured primary CTA — used by apply bar + apply submit + filters Update.
   CTA at fs-h3 (16px) so it lands ~7% larger than body 15px — research
   guidance is 20-30% but that drifts into shouty territory inside a
   dense list; +1 step on the scale + the bold weight + brand fill
   already pulls plenty of weight. Padding is 14px y / 22px x ≈ 2×
   font-size, matching the "padding equals 2× font size" rule for
   comfortable buttons. */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    background: var(--brand);
    color: var(--brand-on);
    border: none;
    border-radius: var(--radius);
    font-family: 'Archivo', sans-serif;
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: all 120ms ease;
    letter-spacing: -0.005em;
    text-decoration: none;
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--brand-tint-strong);
    filter: brightness(0.92);
}
.btn-primary:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}
.btn-primary i { font-size: 16px; }

/* ═══════════════════════════════════════════════════════════════════
 * Legacy apply form (careerwebJobApplyCustomForm.js) — v3 styling
 *
 * The legacy form ships Bootstrap-class markup (form-group, form-control,
 * form-check, btn, col-12, col-6 etc.). v3 doesn't load Bootstrap, so
 * we translate the legacy classes into v3-tokenised styles, all scoped
 * under .cwv3-apply-form so they only apply inside the mounted form
 * and never leak into other components.
 *
 * Visual goal: identical fields/inputs/buttons to the rest of the v3
 * apply UI — same heights, same radii, same brand-coloured focus ring.
 * ═══════════════════════════════════════════════════════════════════ */

.cwv3-apply-form .apply-form-inner {
    display: block;
    margin: 0;
}

/* Legacy form-loader is suppressed in v3 — the v3 detail-panel
   shimmer (.detail--form-loading in detail.css) is the single
   loading indicator for the right pane. The legacy careerweb script
   still calls $('.jobApplicationFormLoader').show()/.hide() on every
   getForms() / submit; this rule overrides the inline style jQuery
   sets, keeping the legacy loader invisible regardless. */
.cwv3-apply-form .jobApplicationFormLoader,
.cwv3-apply-form .jobApplicationFormLoader[style*="block"],
.cwv3-apply-form .jobApplicationFormLoader[style*="flex"] {
    display: none !important;
}

/* Page sections — legacy wraps each .form-page in a row so flex-row
   spreads the .col-* children. Use grid here so col-6 + col-6 land
   side-by-side and col-12 spans the row. */
.cwv3-apply-form .form-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 14px;
    margin: 0;
}
.cwv3-apply-form .form-page.d-none {
    display: none !important;
}

/* Field group — equivalent of v3-native .apply-field. */
.cwv3-apply-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.cwv3-apply-form .col-12,
.cwv3-apply-form .form-group:not(.half-width) {
    grid-column: 1 / -1;
}
.cwv3-apply-form .col-6,
.cwv3-apply-form .form-group.half-width {
    grid-column: span 1;
}

/* Default label — sentence case, sits above the field. Used by
   form rows that DON'T get the floating-label enhancement: chip
   groups (radio / checkbox lists), file inputs, date inputs. */
.cwv3-apply-form .form-group label {
    font-family: 'Geist', sans-serif;
    font-weight: var(--fw-bold);
    font-size: var(--fs-meta);
    color: var(--ink-2);
    text-transform: none;
    letter-spacing: -0.005em;
    line-height: 1.4;
    margin: 0;
}
.cwv3-apply-form .form-group label.required::after {
    content: '*';
    color: var(--brand);
    margin-left: 4px;
    font-weight: var(--fw-bold);
}


/* Legacy form-control — mirrors .apply-input above. Same modern
   minimal aesthetic: flat fill, hairline border, generous radius,
   quiet focus state with brand-tint glow + ink border. No
   decorative pseudo-elements. */
.cwv3-apply-form .form-group { position: relative; }
/* Form inputs — verbatim copy of LP V2's .apply-form-container-v2
   .form-control rules (css/v2_revamp.css:3171-3187). 44px tall, 1.5px
   hairline border, 16px radius, 14px Inter body text on pure white.
   `!important` everywhere mirrors LP's specificity strategy so the
   values win over any cascading rule that lands on the same input,
   matching LP byte-for-byte. The :not() guard excludes the choice
   wrappers and file inputs from this rule — those have their own
   variants below. */
.cwv3-apply-form .form-control:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]),
.cwv3-apply-form .form-control-lg:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]) {
    width: 100% !important;
    height: 44px !important;
    padding: 0 14px !important;
    background: #fff !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 16px !important;
    font-family: 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    color: var(--ink) !important;
    outline: none !important;
    transition: border-color 160ms ease, box-shadow 200ms ease !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}
.cwv3-apply-form .form-control:not(.noBorder):hover,
.cwv3-apply-form .form-control-lg:not(.noBorder):hover {
    border-color: #d1d5db !important;
}
.cwv3-apply-form textarea.form-control,
.cwv3-apply-form textarea.form-control-lg {
    height: auto !important;
    min-height: 112px !important;
    padding: 12px 14px !important;
    line-height: var(--lh-body) !important;
    resize: vertical !important;
}
.cwv3-apply-form .form-control::placeholder { color: var(--ink-3); }
.cwv3-apply-form .form-control:not(.noBorder):focus {
    border-color: #d1d5db !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06) !important;
    /* background-color (not the `background` shorthand) — the
       shorthand resets background-repeat/-position/-size, which
       wrecks the custom select chevron underneath since the SVG
       starts tiling once -repeat reverts to the initial `repeat`
       value. */
    background-color: #fff !important;
}

/* Select — custom chevron + brand-tint chevron-on-focus. Native
   selects can't be fully styled cross-browser; the trick here is
   appearance: none + a background-image SVG. The chevron lives at
   its own opacity so the focus ring on the input doesn't visually
   compete with it. */
.cwv3-apply-form select.form-control,
.cwv3-apply-form select.form-control-lg {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A554D' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 20px;
    padding-right: 44px;
    cursor: pointer;
}
.cwv3-apply-form select.form-control:focus,
.cwv3-apply-form select.form-control-lg:focus {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4571B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-theme="dark"] .cwv3-apply-form select.form-control,
[data-theme="dark"] .cwv3-apply-form select.form-control-lg {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8A299' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Choice groups (singleChoice / multipleChoice / displayAs=buttons).
   Markup mirrors LP V2 — the LABEL is the chip, not the wrapper. The
   .form-check wrapper is invisible; .form-check-input is hidden; the
   .form-check-label carries the pill geometry, padding, border, and
   background. Sibling `:checked + .form-check-label` lights up the
   brand-coloured selected state. Matches lpApplyCustomForm_revamped
   visually (see css/v2_revamp.css:3220-3277) so the two surfaces look
   identical. No ::before pip, no native input glyph — pure text in a
   pill. Unified per VP review 2026-05-28. */

/* Chip values copied verbatim from LP V2 (.apply-form-container-v2,
   css/v2_revamp.css:3223-3277). v3 was previously routing through
   --surface-2 / --border-2 / --ink-2 which resolve to v3's cream
   palette (#F2EFEA) instead of LP's gray (#f1f3f5) — same selector
   structure, wrong tokens. Hardcoding the LP literals so the two
   surfaces are pixel-identical regardless of v3 theming. */
.cwv3-apply-form .holdSingleChoice,
.cwv3-apply-form .holdMuiltpleChoice,
.cwv3-apply-form .noBorder {
    border: 0 none !important;
    background: transparent !important;
    height: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.cwv3-apply-form .form-check {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    min-height: 0 !important;
}

.cwv3-apply-form .form-check-input {
    display: none !important;
}

.cwv3-apply-form .form-check-label {
    display: inline-block !important;
    padding: 8px 19px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #f1f3f5 !important;
    color: #4b5563 !important;
    cursor: pointer !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s !important;
    user-select: none !important;
}

.cwv3-apply-form .form-check-label:hover {
    border-color: var(--brand) !important;
    color: var(--ink) !important;
}

.cwv3-apply-form .form-check-input:checked + .form-check-label,
.cwv3-apply-form .form-check.selected-btn .form-check-label {
    background: var(--brand) !important;
    color: var(--brand-on, #fff) !important;
    border-color: var(--brand) !important;
}

/* File upload — quiet ink-bordered field, dark button on left.
   Drops the dashed "drop zone" look (too 2018) in favour of a
   single-row field that lines up with the other inputs. */
.cwv3-apply-form input[type="file"].form-control,
.cwv3-apply-form input[type="file"].form-control-lg {
    height: 50px;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-lg);
    cursor: pointer;
    color: var(--ink-2);
    font-size: var(--fs-meta);
    transition: border-color 160ms ease, box-shadow 200ms ease;
}
.cwv3-apply-form input[type="file"].form-control:hover { border-color: var(--ink-2); }
.cwv3-apply-form input[type="file"].form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-ring);
}
.cwv3-apply-form input[type="file"]::-webkit-file-upload-button {
    background: var(--brand);
    color: var(--brand-on);
    border: none;
    border-radius: var(--radius);
    padding: 8px 14px;
    font-family: 'Geist', sans-serif;
    font-weight: var(--fw-bold);
    font-size: var(--fs-meta);
    cursor: pointer;
    margin-right: 12px;
    transition: filter 120ms ease;
}
.cwv3-apply-form input[type="file"]::-webkit-file-upload-button:hover { filter: brightness(0.92); }
/* Brand-light tenants — bright yellow / pastel fills won't contrast
   white text. Swap to ink for legibility while keeping the brand
   tint behind it. */
body.brand-light .cwv3-apply-form input[type="file"]::-webkit-file-upload-button {
    color: var(--ink);
}

/* Error states. Legacy adds .input-error to invalid fields and
   .submit-error to required fields left blank. Style both with the
   same red treatment so error feedback reads consistently. */
.cwv3-apply-form .input-error,
.cwv3-apply-form .submit-error {
    border-color: #C44545 !important;
    background: rgba(196, 69, 69, 0.04);
}
.cwv3-apply-form .form-check.input-error,
.cwv3-apply-form .form-check.submit-error,
.cwv3-apply-form .holdSingleChoice.submit-error,
.cwv3-apply-form .holdMuiltpleChoice.submit-error {
    /* Choice groups don't have borders by default — give them one when
       in the error state so the user can spot what's missing. */
    border: 1px solid #C44545 !important;
    padding: 6px;
    border-radius: var(--radius);
}

/* Buttons rendered into #customForm by the legacy script:
     - Continue (per page break)            .btn.continue-btn
     - Submit                                .btn.actionBtn.btn-apply
   Inline styles in the legacy script already set background +
   color from brand/buttonTextColor; we just normalise sizing /
   shape / interaction states. */
/* Submit — flat brand fill, generous radius, subtle 1-layer
   shadow. Linear/Stripe/Vercel pattern: zero gradient, zero
   chrome, the colour does all the work. Arrow slides on hover
   for momentum cue. */
.cwv3-apply-form .btn,
.cwv3-apply-form .btn.actionBtn,
.cwv3-apply-form .continue-btn {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    grid-column: 1 / -1;
    width: 100%;
    height: 54px;
    padding: 0 24px !important;
    background: var(--brand) !important;
    color: var(--brand-on) !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    font-family: 'Geist', sans-serif !important;
    font-size: var(--fs-h3) !important;
    font-weight: var(--fw-bold) !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    cursor: pointer;
    transition: background-color 160ms ease, box-shadow 200ms ease,
                transform 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
    text-decoration: none;
    box-sizing: border-box;
    margin-top: 8px;
    box-shadow: 0 1px 2px rgba(14, 14, 14, 0.05);
}
.cwv3-apply-form .btn::after,
.cwv3-apply-form .btn.actionBtn::after {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.brand-light .cwv3-apply-form .btn::after,
body.brand-light .cwv3-apply-form .btn.actionBtn::after {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0E0E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}
.cwv3-apply-form .btn:hover,
.cwv3-apply-form .continue-btn:hover {
    box-shadow:
        0 1px 2px rgba(14, 14, 14, 0.05),
        0 8px 24px var(--brand-tint-strong);
    filter: brightness(0.96);
}
.cwv3-apply-form .btn:hover::after,
.cwv3-apply-form .btn.actionBtn:hover::after {
    transform: translateX(4px);
}
.cwv3-apply-form .btn:active {
    transform: translateY(1px);
    filter: brightness(0.92);
}
.cwv3-apply-form .continue-btn { background: var(--ink) !important; color: var(--bg) !important; }
.cwv3-apply-form .continue-btn:hover { background: var(--brand) !important; color: var(--brand-on) !important; }

/* reCAPTCHA container — center the widget so it doesn't sit awkwardly
   against the left edge. */
.cwv3-apply-form .g-recaptcha {
    margin: 4px 0 8px;
}

@media (prefers-reduced-motion: reduce) {
    .cwv3-apply-form .btn::after,
    .cwv3-apply-form .form-check { transition: none; }
}

/* ─── Apply-form skeleton ───
   Shown inside #customForm during the legacy fetchCustomForm XHR.
   Each row mimics the geometry of a real field: label-sized line
   above a 50px input-sized line, with the third row showing chip
   placeholders for radio / checkbox groups. The legacy script
   overwrites #customForm.innerHTML when its response lands, so
   these placeholder elements vanish automatically — no JS hook
   needed. */
.cwv3-form-skeleton {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 4px;
}
.cwv3-skel-row { display: flex; flex-direction: column; gap: 8px; }
.cwv3-skel-label {
    width: 32%;
    height: 12px;
    margin: 0;
}
.cwv3-skel-label--md { width: 50%; }
.cwv3-skel-label--lg { width: 68%; }
.cwv3-skel-input {
    width: 100%;
    height: 50px;
    border-radius: var(--radius-lg);
    margin: 0;
}
.cwv3-skel-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cwv3-skel-chip {
    width: 110px;
    height: 48px;
    border-radius: var(--radius);
    margin: 0;
}
@media (max-width: 860px) {
    .cwv3-skel-chip { flex: 1 1 calc(50% - 4px); width: auto; }
}
.cwv3-apply-form .form-group.mb-3.mt-3 {
    grid-column: 1 / -1;
}

/* Bootstrap utility classes the legacy script sprinkles in. Most are
   spacing — collapse to v3's gap-based layout. */
.cwv3-apply-form .mb-3 { margin-bottom: 0; }
.cwv3-apply-form .mt-3 { margin-top: 0; }
.cwv3-apply-form .align-content-end { align-items: stretch; }

/* Feedback banner (legacy showFeedback writes into .feedback element) */
.cwv3-apply-form .feedback {
    grid-column: 1 / -1;
    padding: 12px 14px;
    border-radius: var(--radius);
    font-size: var(--fs-meta);
    line-height: var(--lh-body);
}
.cwv3-apply-form .feedback.feedback-error,
.cwv3-apply-form .feedback.error,
.cwv3-apply-form .feedback.Error {
    background: rgba(196, 69, 69, 0.08);
    color: #C44545;
    border: 1px solid rgba(196, 69, 69, 0.25);
}
.cwv3-apply-form .feedback.feedback-success,
.cwv3-apply-form .feedback.success,
.cwv3-apply-form .feedback.Success {
    background: var(--success-tint);
    color: var(--success);
    border: 1px solid var(--success);
}