/**
 * 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 ─── */
.apply-section {
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-top: 8px;
}
.apply-section-intro {
    font-size: 13.5px;
    color: var(--ink-2);
    margin: -6px 0 18px;
    line-height: 1.5;
}
.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: 600;
    font-size: 11px;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.apply-required {
    color: var(--brand);
    margin-left: 3px;
}
.apply-input {
    height: 42px;
    padding: 0 14px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: all 150ms ease;
    font-family: inherit;
    width: 100%;
}
.apply-input::placeholder { color: var(--ink-3); }
.apply-input:hover { border-color: var(--ink-3); }
.apply-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
    background: var(--surface);
}
.apply-input:invalid:not(:placeholder-shown) {
    border-color: #C44545;  /* native :invalid feedback */
}
.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;
}
.apply-disclaimer {
    font-size: 11.5px;
    color: var(--ink-3);
    margin: 0;
    line-height: 1.55;
    max-width: 480px;
}

/* ─── 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: 600;
    font-size: 15px;
    color: var(--ink);
    line-height: 1.2;
}
.apply-bar-info-sub {
    font-size: 12.5px;
    color: var(--ink-2);
    margin-top: 2px;
}

/* ─── Brand-coloured primary CTA — used by apply bar + apply submit + filters Update */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    background: var(--brand);
    color: var(--brand-on);
    border: none;
    border-radius: var(--radius);
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    font-weight: 700;
    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;
}

/* Label — match .apply-label */
.cwv3-apply-form .form-group label {
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 11px;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}
/* `required` class on the label marks the field as mandatory.
   Use the same star treatment as .apply-required. */
.cwv3-apply-form .form-group label.required::after {
    content: '*';
    color: var(--brand);
    margin-left: 3px;
}

/* Form control (input, textarea, select). Bootstrap's .form-control
   is the catch-all class; .form-control-lg is the large variant.
   v3 collapses them into one height. */
.cwv3-apply-form .form-control,
.cwv3-apply-form .form-control-lg {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: all 150ms ease;
    font-family: inherit;
    box-sizing: border-box;
}
.cwv3-apply-form textarea.form-control,
.cwv3-apply-form textarea.form-control-lg {
    height: auto;
    min-height: 96px;
    padding: 12px 14px;
    line-height: 1.55;
    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 3px var(--brand-ring);
    background: var(--surface);
}

/* Select needs the same custom chevron the filters modal uses. */
.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='%238A847B' stroke-width='2' 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: 18px;
    padding-right: 40px;
    cursor: pointer;
}
[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' 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;
}
.cwv3-apply-form .form-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 120ms ease;
    font-size: 13.5px;
    user-select: none;
    min-height: 42px;
    box-sizing: border-box;
}
.cwv3-apply-form .form-check:hover {
    border-color: var(--ink-3);
    background: var(--surface-2);
}
.cwv3-apply-form .form-check-input {
    appearance: auto;
    accent-color: var(--brand);
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.cwv3-apply-form .form-check-label {
    color: var(--ink);
    font-weight: 500;
    cursor: pointer;
    margin: 0;
}
/* Selected state for displayAs="buttons" radios/checkboxes. Legacy JS
   toggles .selected-btn on the wrapper when the input is checked. */
.cwv3-apply-form .form-check.selected-btn {
    background: var(--brand-tint);
    border-color: var(--brand);
}
.cwv3-apply-form .form-check.selected-btn .form-check-label {
    color: var(--brand);
    font-weight: 600;
}

/* File upload — visually consistent with other inputs */
.cwv3-apply-form input[type="file"].form-control,
.cwv3-apply-form input[type="file"].form-control-lg {
    padding: 9px 14px;  /* tighter — native file UI is shorter */
}

/* 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. */
.cwv3-apply-form .btn,
.cwv3-apply-form .btn.actionBtn,
.cwv3-apply-form .continue-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    grid-column: 1 / -1;
    width: 100%;
    height: 48px;
    padding: 0 22px !important;
    background: var(--brand) !important;
    color: var(--brand-on) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    font-family: 'Archivo', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
    cursor: pointer;
    transition: all 120ms ease;
    text-decoration: none;
    box-sizing: border-box;
    margin-top: 4px;
}
.cwv3-apply-form .btn:hover,
.cwv3-apply-form .continue-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--brand-tint-strong);
    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;
}
.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: 13.5px;
    line-height: 1.5;
}
.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);
}