/* ==========================================================================
   Bootstrap 4 → 5 compatibility shim  (task: mobile-readiness, Bewerbung form)
   --------------------------------------------------------------------------
   The theme ships Bootstrap 4.5.3, but the Bewerbung (apply) form markup was
   authored with Bootstrap 5 class names. Those BS5 classes are NO-OPS under
   BS4, which leaves selects unstyled, floating labels broken, column gutters
   missing vertical spacing on mobile, and labels un-bolded.

   This file is PURELY ADDITIVE: every rule below targets a class that BS4
   does NOT define, so nothing here overrides a working BS4 rule. It is scoped
   to the apply form via `.apply-wrapper` wherever a class name is generic
   enough to risk colliding with another surface.

   Each rule maps the BS5 class to its intended BS5 behaviour, sized to match
   the theme's BS4 `.form-control` (display:block; width:100%;
   height:calc(1.5em + .75rem + 2px); padding:.375rem .75rem; font-size:1rem;
   line-height:1.5; color:#495057; border:1px solid #ced4da;
   border-radius:.25rem) so styled selects sit flush next to text inputs.

   Only classes PROVEN used in step1–4.htm / success.htm are shimmed:
     form-select, form-select-lg, form-label, form-floating,
     g-1/g-2/g-3/g-4 (vertical gutter), fw-medium/fw-semibold/fw-bold,
     border-start, bi (icons handled as inline SVG, no font shim needed).
   `rounded-pill` is already provided by BS4 — NOT re-declared here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   form-label — BS5 form label (BS4 has no .form-label).
   BS5 default: margin-bottom:.5rem. Additive: BS4 leaves <label> at browser
   default (margin-bottom:.5rem from BS reboot already), so we only normalise
   the bottom margin to match BS5 spacing. Scoped to the form.
   -------------------------------------------------------------------------- */
.apply-wrapper .form-label {
    margin-bottom: .5rem;
}

/* --------------------------------------------------------------------------
   form-select / form-select-lg — BS5 styled <select> (BS4 uses .custom-select).
   Replicates BS5 select styling on top of BS4, matched to the theme's
   .form-control metrics so selects line up with text inputs. The caret is an
   inline SVG data-URI (no extra asset). Scoped to the form.
   -------------------------------------------------------------------------- */
.apply-wrapper .form-select {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.apply-wrapper .form-select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}

/* -lg matches BS4 .form-control-lg metrics (the larger input size step1 uses) */
.apply-wrapper .form-select-lg {
    height: calc(1.5em + 1rem + 2px);
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    font-size: 1.25rem;
    border-radius: .3rem;
}

/* --------------------------------------------------------------------------
   form-floating — BS5 floating-label group (BS4 has nothing here).
   Step2/step3 wrap an input OR select followed by a <label> in .form-floating.
   We give the control extra top padding to make room for the shrunk label,
   absolutely-position the label, and shrink+raise it when the control is
   filled/focused. Works for both .form-control and the shimmed .form-select
   above. Scoped to the form.
   -------------------------------------------------------------------------- */
.apply-wrapper .form-floating {
    position: relative;
}

.apply-wrapper .form-floating > .form-control,
.apply-wrapper .form-floating > .form-select {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
    padding: 1rem .75rem;
}

.apply-wrapper .form-floating > .form-select {
    padding-right: 2.25rem;
}

.apply-wrapper .form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem .75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
    color: #6c757d;
    margin-bottom: 0;
}

/* Float the label up when the field is focused, has a value, or is a select
   (a select always shows its current option, so its label always stays up). */
.apply-wrapper .form-floating > .form-control:focus ~ label,
.apply-wrapper .form-floating > .form-control:not(:placeholder-shown) ~ label,
.apply-wrapper .form-floating > .form-select ~ label {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

/* Number/date inputs in step2/step3 carry a placeholder ("175","70" …) so
   :not(:placeholder-shown) already floats them; text inputs without a
   placeholder need an explicit space placeholder to behave — handled in markup
   if needed. Focus state always floats, so typing is never obscured. */

/* --------------------------------------------------------------------------
   g-* gutters — BS5 row gutters.
   BS4 ALREADY gives every column a hardcoded 15px horizontal padding (so the
   HORIZONTAL gutter is present). What BS4 lacks is BS5's VERTICAL gutter, which
   is what's missing between inputs when columns WRAP (i.e. stack on mobile).
   `row-gap` only adds space between wrapped flex lines — zero effect when the
   columns sit on one line — so this is exactly additive: desktop unchanged,
   mobile gets the vertical breathing room. Scoped to the form.
   -------------------------------------------------------------------------- */
.apply-wrapper .row.g-1 { row-gap: .25rem; }
.apply-wrapper .row.g-2 { row-gap: .5rem; }
.apply-wrapper .row.g-3 { row-gap: 1rem; }
.apply-wrapper .row.g-4 { row-gap: 1.5rem; }

/* --------------------------------------------------------------------------
   Font weights — BS5 utilities (BS4 uses .font-weight-*). Additive aliases.
   Generic enough that we scope to the form to avoid touching other surfaces.
   -------------------------------------------------------------------------- */
.apply-wrapper .fw-medium   { font-weight: 500 !important; }
.apply-wrapper .fw-semibold { font-weight: 600 !important; }
.apply-wrapper .fw-bold     { font-weight: 700 !important; }

/* --------------------------------------------------------------------------
   border-start — BS5 left border (BS4 uses .border-left). The sidebar columns
   use it as a vertical divider on desktop. `border-start-lg` (step1) is not a
   real BS class in either version — it never did anything — so it is NOT
   shimmed; step1's sidebar relies on its ps-lg-4 padding for separation.
   Scoped to the form.
   -------------------------------------------------------------------------- */
.apply-wrapper .border-start {
    border-left: 1px solid #dee2e6 !important;
}

/* --------------------------------------------------------------------------
   ps-lg-* — BS5 left padding at the lg breakpoint (BS4 uses .pl-lg-*).
   Only the values present in the markup: ps-lg-4 (step1) and ps-lg-5
   (step2/3/4). BS5 spacer scale: 4 = 1.5rem, 5 = 3rem. Scoped to the form.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .apply-wrapper .ps-lg-4 { padding-left: 1.5rem !important; }
    .apply-wrapper .ps-lg-5 { padding-left: 3rem !important; }
}

/* --------------------------------------------------------------------------
   Mobile spacing polish — APPLY FORM ONLY.
   On phone widths the step-progress labels crowd at ~320px. Keep the dots,
   hide the text labels below 480px (the dots + the in-heading "(1/4)…" text
   still communicate progress). Also guarantee stacked inputs keep vertical
   spacing even on rows that don't carry a g-* class.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .apply-wrapper .step-progress .progress-label {
        display: none;
    }
    /* Tighten the dot row so 4 dots + lines fit comfortably at 320px. */
    .apply-wrapper .step-progress {
        margin-bottom: 1.25rem;
    }
}

/* Below md, BS4 stacks col-md-* to full width. The g-* row-gap rules above
   already give those stacked columns vertical spacing. For the few rows that
   carry NO g-* class (e.g. step1's flex-column-reverse layout row), add a small
   top margin to wrapped col-md-* siblings so stacked fields never butt together.
   Scoped to rows WITHOUT a gutter class to avoid double-spacing the g-* rows. */
@media (max-width: 767.98px) {
    .apply-wrapper .row:not([class*="g-"]) > [class*="col-md-"] + [class*="col-md-"] {
        margin-top: .75rem;
    }
}