/**
 * 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;
}
.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; }
.cwv3-apply-form .form-control,
.cwv3-apply-form .form-control-lg {
    width: 100%;
    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;
    box-sizing: border-box;
}
.cwv3-apply-form .form-control:hover,
.cwv3-apply-form .form-control-lg:hover {
    border-color: var(--ink-2);
}
.cwv3-apply-form textarea.form-control,
.cwv3-apply-form textarea.form-control-lg {
    height: auto;
    min-height: 112px;
    padding: 12px 14px;
    line-height: var(--lh-body);
    resize: vertical;
}
.cwv3-apply-form .form-control::placeholder { color: var(--ink-3); }
.cwv3-apply-form .form-control:hover { border-color: var(--ink-3); }
.cwv3-apply-form .form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-ring);
    /* 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: var(--surface);
}

/* 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).
   Legacy wraps them in .holdSingleChoice / .holdMuiltpleChoice with
   .noBorder so the field container looks borderless. */
.cwv3-apply-form .holdSingleChoice,
.cwv3-apply-form .holdMuiltpleChoice,
.cwv3-apply-form .noBorder {
    border: none;
    background: transparent;
    padding: 0;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* Chip — designed to read as "tappable selection" rather than a
   form-control. Rounded corners, generous padding, brand-coloured
   inset glow on hover so the affordance feels physical. */
.cwv3-apply-form .form-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px 11px 16px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease,
                transform 140ms cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 180ms ease;
    font-size: var(--fs-meta);
    user-select: none;
    min-height: 48px;
    box-sizing: border-box;
}
.cwv3-apply-form .form-check:hover {
    border-color: var(--brand);
    background: var(--surface-2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 14, 14, 0.06);
}
.cwv3-apply-form .form-check:active { transform: translateY(0); }

/* Hide the native input; the wrapper itself is the visible chip
   and a custom check pip is painted via ::before below. Keeping
   the input rendered (opacity 0) preserves keyboard focus and
   form-submit semantics. */
.cwv3-apply-form .form-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Custom check / radio target — square chip for checkboxes,
   round for radios. The pip stays present in the unchecked state
   as a subtle empty outline so the user sees the chip is
   interactive, then fills with the brand on selection. */
.cwv3-apply-form .form-check::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border-2);
    border-radius: 4px;
    background: var(--surface);
    transition: all 160ms ease;
}
.cwv3-apply-form .form-check:has(input[type="radio"])::before {
    border-radius: 50%;
}
.cwv3-apply-form .form-check:hover::before {
    border-color: var(--brand);
}

.cwv3-apply-form .form-check-label {
    color: var(--ink);
    font-weight: var(--fw-bold);
    cursor: pointer;
    margin: 0;
    text-transform: none;
    letter-spacing: -0.005em;
}

/* Selected state — brand-tint backdrop on the chip, brand border,
   and a fully filled brand swatch with a hand-built glyph inside.
   The previous mask-image approach rendered a thin, slightly off-
   centered Tabler check that looked sketched at 12px. The CSS
   double-border tick below is sharper at small sizes, scales
   pixel-perfectly with the swatch, and shares its geometry with
   the radio dot for a consistent selected language across both
   control types.
     Checkbox: brand-filled swatch + tick drawn from a 5×9 box
               with right + bottom borders, rotated 45° to form
               a thick "✓".
     Radio:    brand-filled swatch + inset brand-on ring for
               the central dot. */
.cwv3-apply-form .form-check.selected-btn {
    background: var(--brand-tint);
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand);
}
.cwv3-apply-form .form-check.selected-btn::before {
    background-color: var(--brand);
    border-color: var(--brand);
}
/* Label stays at default --ink on selected chips. The border +
   outer ring + brand-filled swatch + brand-tint backdrop already
   communicate "chosen" — adding brand-coloured text collapses to
   invisible on pale-brand tenants (yellow / lime / pastel) where
   brand-on-brand-tint falls below WCAG AA contrast. Dropping it
   makes the selected state work uniformly for every tenant. */

/* No tick glyph — the filled brand swatch + brand-tint chip
   backdrop + brand border + brand label colour already do enough
   work to communicate "selected". Adding a ✓ on top of that
   reads as belt-and-braces and clutters small chips. */

/* Radio dot — inset ring on the brand-filled swatch. brand-on
   default; ink fallback on pale-brand tenants for the same
   contrast reason as the checkbox tick above. */
.cwv3-apply-form .form-check:has(input[type="radio"]).selected-btn::before {
    box-shadow: inset 0 0 0 4px var(--brand-on);
}
body.brand-light .cwv3-apply-form .form-check:has(input[type="radio"]).selected-btn::before {
    box-shadow: inset 0 0 0 4px var(--ink);
}

/* 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);
}