/* ==========================================================================
   Lebenshilfe Wien – Bewerbungsablauf (application flow)
   Source: Figma "Responsive Newsletter Template" → page "Dev"
           Form Flow B (desktop, 2093:1298) · Mobile B (2093:1562)

   Everything is scoped to .lhw-apply so WordPress theme styles cannot leak in.

   SCALING
   All sizes are written as calc(N * var(--u)), where N is the pixel value
   from Figma. --u is "one design pixel":
     < 768px   mobile page    1u = 1/393 of the viewport (Figma mobile frame),
                              clamped 0.875px … 1.1px  → 320px phones up to large phones
     768–1440  tablet/desktop 1u = 1px (designed at 1440)
     > 1440    large / 4K     1u grows with the viewport (1/1440 vw), max 2.667px at 3840px
   To make the whole thing bigger/smaller, change --u only.
   ========================================================================== */

.lhw-apply {
  /* ---- Tokens (from Figma styles) ---- */
  --lhw-brand: var(--lh-green, #1d8740);   /* theme --lh-green · Figma Brand/Main */
  --lhw-brand-hover: #176c33;
  --lhw-text: var(--lh-black, #333333);    /* theme --lh-black · Figma Schwarz */
  --lhw-heading: #000000;
  --lhw-tint-bg: rgba(29, 135, 64, 0.05);
  --lhw-tint-border: rgba(29, 135, 64, 0.15);
  --lhw-input-border: #cfd9e0;     /* gray/300 */
  --lhw-placeholder: #67728a;      /* gray/500 */
  --lhw-counter: #414d63;          /* gray/700 */
  --lhw-step-label: #170f49;       /* neutrals/neutral-800 */
  --lhw-error: var(--lh-red, #e40000);     /* theme --lh-red (same red as the site's other forms) */
  --lhw-danger: var(--lh-red, #e40000);    /* upload failed */
  --lhw-notice-bg: #f7f7d8;
  --lhw-leave-bg: rgba(255, 0, 0, 0.04);
  --lhw-leave-text: #851717;
  --lhw-muted: var(--lh-dark-gray, #6e6e6e);
  --lhw-track: #fafafa;
  --lhw-progress: var(--lhw-brand); /* Figma uses kit blue #1849d6 – see README */
  --lhw-divider: rgba(51, 51, 51, 0.1);
  --lhw-backdrop: rgba(51, 51, 51, 0.5);

  /* Same family the theme loads (fonts/ArialNovaCond*.woff2). The demo embeds it via lhw-apply-fonts.css. */
  --lhw-font: "Arial Nova Cond", "Arial Narrow", Arial, sans-serif;

  /* ---- Scale unit (see header) ---- */
  --u: clamp(0.875px, calc(100vw / 393), 1.1px);
  --gutter: calc(24 * var(--u));
}

@media (min-width: 768px) {
  .lhw-apply { --u: 1px; }
}
@media (min-width: 1441px) {
  .lhw-apply { --u: clamp(1px, calc(100vw / 1440), 2.6667px); }
}

/* ---------- Reset inside the component (beats typical theme rules) ---------- */
.lhw-apply,
.lhw-apply *,
.lhw-apply *::before,
.lhw-apply *::after { box-sizing: border-box; }

.lhw-apply :where(h1, h2, h3, p, ul, ol, li, fieldset, legend, figure) {
  margin: 0; padding: 0; border: 0;
}
.lhw-apply :where(ul, ol) { list-style: none; }
/* The theme gives every ul > li a green square bullet, margin and position:relative,
   and Bootstrap fades <hr>. Neutralise both inside the component. */
.lhw-apply :where(li)::before { content: none; display: none; }
.lhw-apply :where(li) { margin: 0; }
.lhw-apply :where(hr) { opacity: 1; color: inherit; }
.lhw-apply :where(h1, h2, h3) { overflow: visible; }
.lhw-apply :where(label) { margin: 0; }
.lhw-apply :where(button, input, select, textarea) {
  font: inherit; color: inherit; letter-spacing: normal; text-transform: none;
  margin: 0; box-shadow: none; min-height: 0;
}
.lhw-apply :where(button) { background: none; border: 0; padding: 0; cursor: pointer; }
.lhw-apply img { display: block; max-width: none; height: auto; }
.lhw-apply [hidden] { display: none !important; }
.lhw-apply .lhw-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.lhw-apply :focus-visible {
  outline: calc(2 * var(--u)) solid var(--lhw-brand);
  outline-offset: calc(2 * var(--u));
}

/* ==========================================================================
   Shell: page on mobile, popup from 768px
   ========================================================================== */
.lhw-apply {
  font-family: var(--lhw-font);
  font-size: calc(16 * var(--u));
  line-height: 1.5;
  color: var(--lhw-text);
  background: #fff;
  border: 0;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;

  /* Mobile: full page */
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.lhw-apply[open] { display: flex; }

.lhw-apply::backdrop { background: var(--lhw-backdrop); }

.lhw-apply__form {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  flex: 1;
}

/* ---- Header ---- */
.lhw-apply__header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: none;
  padding: calc(29 * var(--u)) var(--gutter) 0;
  padding-top: max(calc(29 * var(--u)), env(safe-area-inset-top));
}
.lhw-apply__close { display: none; }
.lhw-apply__close img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }

.lhw-apply__leave {
  background: var(--lhw-leave-bg);
  color: var(--lhw-leave-text);
  font-size: calc(12 * var(--u));
  line-height: 1.6;
  padding: calc(8 * var(--u));
  border-radius: calc(10 * var(--u));
  white-space: nowrap;
}
.lhw-apply__leave:hover { background: rgba(255, 0, 0, 0.08); }
.lhw-apply[data-current="3"] .lhw-apply__leave { display: none; } /* done – "Fertig" closes the page */

/* ---- Scrolling body ---- */
.lhw-apply__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: calc(17 * var(--u));
  padding: calc(18 * var(--u)) var(--gutter) 0;
  width: 100%;
  max-width: calc(560px + 2 * var(--gutter)); /* keeps lines readable on large phones / landscape */
  margin-inline: auto;
}

/* ---- Step sections ---- */
.lhw-step {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.lhw-step__content {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}
.lhw-step__heading { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }

.lhw-step__actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(12 * var(--u));
  margin-top: auto;
  padding: calc(33 * var(--u)) 0 max(calc(24 * var(--u)), env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff calc(20 * var(--u)));
}
.lhw-step__actions--end { justify-content: flex-end; }

/* ==========================================================================
   Typography
   ========================================================================== */
.lhw-h1 {
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 1.34;
  color: var(--lhw-text);
}
.lhw-h2 {
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: 1.34;
  color: var(--lhw-heading);
}
.lhw-lead { font-size: calc(16 * var(--u)); line-height: 1.6; }
.lhw-step--intro .lhw-lead { line-height: 1.5; }
.lhw-h1:focus, .lhw-h2:focus, .lhw-success p:focus { outline: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.lhw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: 1.5;
  padding: calc(12 * var(--u)) calc(32 * var(--u));
  border-radius: calc(10 * var(--u));
  border: 1px solid var(--lhw-brand);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.lhw-btn--primary { background: var(--lhw-brand); color: #fff; }
.lhw-btn--primary:hover { background: var(--lhw-brand-hover); border-color: var(--lhw-brand-hover); }
.lhw-btn--secondary { background: #fff; color: var(--lhw-brand); }
.lhw-btn--secondary:hover { background: var(--lhw-tint-border); }
.lhw-btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.lhw-btn--block-mobile { width: 100%; line-height: 1.4; }

/* ==========================================================================
   Cards (intro)
   ========================================================================== */
.lhw-step--intro .lhw-step__content { gap: calc(30 * var(--u)); }
.lhw-intro__heading { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.lhw-intro__cards { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }

.lhw-card {
  border: 1px solid var(--lhw-tint-border);
  border-radius: calc(14 * var(--u));
  padding: calc(12 * var(--u));
}
.lhw-card--tint { background: var(--lhw-tint-bg); }

.lhw-job { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.lhw-job__eyebrow { font-size: calc(14 * var(--u)); line-height: 1.6; opacity: .8; }
.lhw-job__title { font-size: calc(18 * var(--u)); font-weight: 700; line-height: 1.6; }
.lhw-tags { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.lhw-tag {
  background: #fff;
  border: 1px solid var(--lhw-tint-border);
  border-radius: calc(14 * var(--u));
  padding: calc(5 * var(--u)) calc(10 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: 1.6;
  white-space: nowrap;
}

.lhw-overview { display: flex; flex-direction: column; gap: calc(22 * var(--u)); }
.lhw-overview__text { font-size: calc(16 * var(--u)); line-height: 1.5; }
.lhw-overview__list { display: flex; flex-direction: column; }
.lhw-overview__item {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
}
.lhw-overview__item + .lhw-overview__item {
  margin-top: calc(16 * var(--u));
  padding-top: calc(16 * var(--u));
  border-top: 1px solid var(--lhw-tint-border);
}
.lhw-overview__num {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(45 * var(--u));
  height: calc(45 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--lhw-tint-bg);
  border: 1px solid var(--lhw-tint-border);
  font-size: calc(16 * var(--u));
  font-weight: 700;
}
.lhw-overview__item strong { display: block; font-size: calc(15 * var(--u)); line-height: 1.5; font-weight: 700; }
.lhw-overview__item small { display: block; font-size: calc(14 * var(--u)); line-height: 1.5; opacity: .7; }

.lhw-privacy-note { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.lhw-privacy-note__title {
  display: flex; align-items: center; gap: calc(6 * var(--u));
  font-size: calc(16 * var(--u)); font-weight: 700; line-height: 1.5;
}
.lhw-privacy-note__title img { width: calc(21 * var(--u)); height: calc(20.875 * var(--u)); flex: none; }
.lhw-privacy-note__text { font-size: calc(14 * var(--u)); line-height: 1.5; }
.lhw-privacy-note__text a { color: var(--lhw-brand); font-weight: 700; text-decoration: underline; }

/* ==========================================================================
   Stepper
   ========================================================================== */
.lhw-stepper { display: flex; flex-direction: column; gap: calc(17 * var(--u)); flex: none; }
.lhw-stepper__list {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(8 * var(--u));
  background: var(--lhw-tint-bg);
  border: 1px solid var(--lhw-tint-border);
  border-radius: calc(10 * var(--u));
}
.lhw-stepper__item { display: flex; align-items: center; gap: calc(16 * var(--u)); flex: none; }
.lhw-stepper__dot {
  display: grid;
  place-items: center;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: calc(8 * var(--u));
  border: 1px solid var(--lhw-tint-border);
  background: #fbfdfb;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--lhw-text);
}
.lhw-stepper__num { opacity: .5; }
.lhw-apply .lhw-stepper__check { display: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.lhw-stepper__label {
  display: none; /* mobile shows the current step under the bar instead */
  font-size: calc(14 * var(--u));
  line-height: 1.15;
  color: var(--lhw-step-label);
  opacity: .5;
}
.lhw-stepper__item.is-active .lhw-stepper__dot,
.lhw-stepper__item.is-done .lhw-stepper__dot { background: var(--lhw-brand); color: #fff; }
.lhw-stepper__item.is-active .lhw-stepper__num { opacity: 1; }
.lhw-stepper__item.is-active .lhw-stepper__label,
.lhw-stepper__item.is-done .lhw-stepper__label { opacity: 1; }
.lhw-stepper__item.is-done .lhw-stepper__num { display: none; }
.lhw-apply .lhw-stepper__item.is-done .lhw-stepper__check { display: block; }

.lhw-stepper__bar {
  flex: 1;
  height: calc(2 * var(--u));
  margin-inline: calc(10 * var(--u));
  border-radius: calc(40 * var(--u));
  background: var(--lhw-tint-border);
  position: relative;
  overflow: hidden;
}
.lhw-stepper__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  background: var(--lhw-brand);
  border-radius: inherit;
  transition: width .3s ease, height .3s ease;
}
.lhw-stepper[data-progress="2"] .lhw-stepper__fill { width: 100%; }

.lhw-stepper__current { font-size: calc(14 * var(--u)); line-height: calc(15 * var(--u)); color: #313131; }

/* ==========================================================================
   Form fields
   ========================================================================== */
.lhw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(24 * var(--u)) calc(13 * var(--u));
}
.lhw-field { display: flex; flex-direction: column; gap: calc(8 * var(--u)); min-width: 0; }
.lhw-label { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: var(--lhw-text); }

.lhw-input {
  display: block;
  width: 100%;
  height: calc(40 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  font-size: max(calc(14 * var(--u)), 16px); /* ≥16px stops iOS zoom-on-focus */
  line-height: calc(20 * var(--u));
  color: #000;
  background: #fff;
  border: 1px solid var(--lhw-input-border);
  border-radius: calc(10 * var(--u));
  box-shadow: inset 0 calc(2 * var(--u)) 0 rgba(231, 235, 238, .2);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
@media (min-width: 768px) {
  .lhw-input { font-size: calc(14 * var(--u)); }
}
.lhw-input::placeholder { color: var(--lhw-placeholder); opacity: .6; }
.lhw-input:hover { border-color: #b4c2cc; }
.lhw-input:focus { outline: none; border-color: var(--lhw-brand); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(29, 135, 64, .15); }
.lhw-input[aria-invalid="true"] { border-color: var(--lhw-error); }
.lhw-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 calc(3 * var(--u)) rgba(228, 0, 0, .12); }

.lhw-error {
  display: flex;
  gap: calc(8 * var(--u));
  align-items: flex-start;
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  color: var(--lhw-error);
}
.lhw-error::before {
  content: "";
  flex: none;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  margin-right: calc(-3 * var(--u)); /* Figma: 20px icon in a 17px slot */
  background: url("../assets/icons/warning-octagon.svg") center / contain no-repeat;
}

/* Select (custom trigger; the native <select> stays hidden as the form value) */
.lhw-select { position: relative; }
.lhw-select__native {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0;
}
.lhw-select__trigger {
  display: flex;
  align-items: center;
  text-align: left;
  padding-right: calc(40 * var(--u));
  cursor: pointer;
}
.lhw-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lhw-select__trigger.is-placeholder .lhw-select__value { color: rgba(103, 114, 138, .6); }
.lhw-select__trigger[aria-expanded="true"] { border-color: var(--lhw-brand); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(29, 135, 64, .15); }
.lhw-select__icon {
  position: absolute;
  right: calc(12 * var(--u));
  top: calc(20 * var(--u));
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  transform: translateY(-50%);
  pointer-events: none;
  transition: transform .15s;
}
.lhw-select__trigger[aria-expanded="true"] ~ .lhw-select__icon { transform: translateY(-50%) rotate(180deg); }

/* Date */
.lhw-date { position: relative; display: flex; }
.lhw-date .lhw-input { border-top-right-radius: 0; border-bottom-right-radius: 0; flex: 1; min-width: 0; }
.lhw-date__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  border: 1px solid var(--lhw-input-border) !important;
  border-left-width: 1px;
  margin-left: -1px;
  border-radius: 0 calc(10 * var(--u)) calc(10 * var(--u)) 0 !important;
  background: #fff !important;
}
.lhw-date__btn img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.lhw-date__btn:hover,
.lhw-date__btn[aria-expanded="true"] { background: var(--lhw-tint-bg) !important; }

.lhw-divider { border: 0; border-top: 1px solid var(--lhw-divider); margin: 0; height: 0; }

/* Textarea + counter */
.lhw-textarea {
  height: calc(104 * var(--u));
  min-height: calc(64 * var(--u));
  resize: vertical;
}
.lhw-counter {
  display: flex;
  justify-content: space-between;
  font-size: calc(12 * var(--u));
  line-height: calc(20 * var(--u));
  opacity: .7;
}
.lhw-counter > span:first-child { color: var(--lhw-placeholder); }
.lhw-counter > span:last-child { color: var(--lhw-counter); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Documents step
   ========================================================================== */
.lhw-notice {
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--u));
  align-self: flex-start;
  margin-top: calc(12 * var(--u));
  padding: calc(8 * var(--u)) calc(11 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--lhw-notice-bg);
  font-size: calc(15 * var(--u));
  line-height: 1.6;
}
.lhw-notice img { width: calc(22 * var(--u)); height: calc(22 * var(--u)); flex: none; margin-top: calc(1 * var(--u)); }

.lhw-upload { display: flex; flex-direction: column; gap: calc(13 * var(--u)); }

.lhw-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(24 * var(--u));
  background: #fff;
  border: 1px dashed var(--lhw-brand);
  border-radius: calc(16 * var(--u));
  text-align: center;
  cursor: pointer;
  transition: background-color .15s;
}
.lhw-dropzone:hover,
.lhw-dropzone.is-dragover { background: rgba(29, 135, 64, .05); }
.lhw-dropzone:focus-within { outline: calc(2 * var(--u)) solid var(--lhw-brand); outline-offset: calc(2 * var(--u)); }
.lhw-dropzone__icon { position: relative; width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.lhw-dropzone__doc { position: absolute; left: 50%; top: 0; width: calc(32 * var(--u)); height: calc(40 * var(--u)); transform: translateX(-50%); }
.lhw-dropzone__corner { position: absolute; left: 60%; top: 0; width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.lhw-dropzone__text { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: #0b0b0b; }
.lhw-dropzone__text strong { color: var(--lhw-brand); font-weight: 700; }
.lhw-dropzone__hint { margin-top: calc(-4 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: var(--lhw-muted); }
.lhw-dropzone__input {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0);
}

.lhw-files { display: flex; flex-direction: column; gap: calc(13 * var(--u)); }
.lhw-files:empty { display: none; }
.lhw-file {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  min-height: calc(70 * var(--u));
  padding: calc(16 * var(--u)) calc(12 * var(--u));
  border: 1px dashed rgba(0, 0, 0, .25);
  border-radius: calc(10 * var(--u));
}
.lhw-file__icon { flex: none; width: calc(26.25 * var(--u)); height: calc(34.125 * var(--u)); }
.lhw-file__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.lhw-file__name {
  font-size: calc(13 * var(--u));
  line-height: normal;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lhw-file__meta { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: rgba(0, 0, 0, .4); }
.lhw-file__progress { display: none; align-items: center; gap: calc(8 * var(--u)); }
.lhw-file__track {
  position: relative; flex: 1; height: calc(8 * var(--u));
  background: var(--lhw-track); border-radius: calc(100 * var(--u)); overflow: hidden;
}
.lhw-file__bar {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--lhw-progress); border-radius: inherit; transition: width .2s linear;
}
.lhw-file__pct { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: var(--lhw-muted); min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.lhw-file__action { display: none; flex: none; padding: calc(2 * var(--u)); border-radius: calc(6 * var(--u)); }
.lhw-file__action:hover { background: rgba(0, 0, 0, .05); }
.lhw-file__action img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.lhw-file__action[data-action="cancel"] img { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

/* states */
.lhw-file[data-state="uploading"] .lhw-file__meta { display: none; }
.lhw-file[data-state="uploading"] .lhw-file__progress { display: flex; }
.lhw-file[data-state="uploading"] [data-action="cancel"] { display: block; align-self: flex-start; }
.lhw-file[data-state="uploading"] .lhw-file__info { padding-right: 0; }

.lhw-file[data-state="done"] {
  background: var(--lhw-tint-bg);
  border: 1px solid var(--lhw-brand);
}
.lhw-file[data-state="done"] [data-action="delete"] { display: block; }

.lhw-file[data-state="error"] .lhw-file__meta { color: var(--lhw-danger); }
.lhw-file[data-state="error"] [data-action="retry"] { display: block; }
.lhw-file[data-state="error"] [data-action="delete"] { display: block; }

/* Consent */
.lhw-consent { display: flex; flex-direction: column; gap: calc(12 * var(--u)); min-width: 0; }
.lhw-consent__title {
  float: left; /* lets <legend> sit inside the flex flow */
  width: 100%;
  margin-bottom: calc(12 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: 1.34;
}
.lhw-consent__card { clear: both; display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(12 * var(--u)); }
.lhw-consent__text,
.lhw-consent__more p { font-size: calc(14 * var(--u)); line-height: 1.6; }
.lhw-consent__more { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }

.lhw-checkbox { position: relative; display: flex; align-items: center; gap: calc(12 * var(--u)); cursor: pointer; }
.lhw-checkbox input { position: absolute; opacity: 0; width: calc(21 * var(--u)); height: calc(21 * var(--u)); margin: 0; cursor: pointer; }
.lhw-checkbox__box {
  flex: none;
  width: calc(21 * var(--u));
  height: calc(21 * var(--u));
  border: 1.5px solid var(--lhw-input-border);
  border-radius: calc(4 * var(--u));
  background: #fff;
}
.lhw-checkbox input:checked + .lhw-checkbox__box {
  border: 0;
  background: url("../assets/icons/checkbox-checked.svg") center / contain no-repeat;
}
.lhw-checkbox input:focus-visible + .lhw-checkbox__box { outline: calc(2 * var(--u)) solid var(--lhw-brand); outline-offset: calc(2 * var(--u)); }
.lhw-checkbox input[aria-invalid="true"] + .lhw-checkbox__box { border-color: var(--lhw-error); }
.lhw-checkbox__label { font-size: calc(16 * var(--u)); line-height: 1.5; }

.lhw-more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: calc(6 * var(--u));
  padding: calc(6 * var(--u)) 0;
  border-radius: 999px;
  color: var(--lhw-brand);
  font-size: calc(12 * var(--u));
  font-weight: 700;
  line-height: 1.4;
}
.lhw-more img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); transition: transform .2s; }
.lhw-more[aria-expanded="true"] img { transform: rotate(180deg); }


/* ==========================================================================
   Pickers (select list + calendar)
   ≥768px: dropdown directly below the field · <768px: bottom sheet
   ========================================================================== */
.lhw-pop { background: #fff; color: var(--lhw-text); }

/* ---- Dropdown (desktop / tablet) ---- */
.lhw-pop--dropdown {
  position: absolute;
  top: calc(100% + 6 * var(--u));
  left: 0;
  z-index: 20;
  min-width: 100%;
  padding: calc(6 * var(--u));
  border: 1px solid rgba(16, 24, 40, .08);
  border-radius: calc(12 * var(--u));
  box-shadow: 0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(16, 24, 40, .12), 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(16, 24, 40, .06);
  animation: lhw-drop .14s ease-out;
}
.lhw-pop--dropdown.lhw-pop--calendar { min-width: 0; padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)); }
.lhw-date .lhw-pop--dropdown { left: auto; right: 0; }
.lhw-step__actions { z-index: 1; }

/* ---- Bottom sheet (mobile) ---- */
.lhw-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, .35);
  animation: lhw-fade .2s ease-out;
}
.lhw-pop--sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 51;
  display: flex;
  flex-direction: column;
  max-height: 80dvh;
  border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0;
  box-shadow: 0 calc(-8 * var(--u)) calc(32 * var(--u)) rgba(0, 0, 0, .12);
  padding-bottom: max(calc(16 * var(--u)), env(safe-area-inset-bottom));
  transition: transform .2s ease-out;
  animation: lhw-sheet-up .26s cubic-bezier(.2, .8, .2, 1);
}
.lhw-pop__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  padding: calc(22 * var(--u)) var(--gutter) calc(12 * var(--u));
  touch-action: none;
  cursor: grab;
}
.lhw-pop__handle {
  position: absolute;
  top: calc(8 * var(--u));
  left: 50%;
  width: calc(40 * var(--u));
  height: calc(4 * var(--u));
  border-radius: 999px;
  background: #d9dde1;
  transform: translateX(-50%);
}
.lhw-pop__title { font-size: calc(18 * var(--u)); font-weight: 700; line-height: 1.34; }
.lhw-pop__close { flex: none; border-radius: 50%; }
.lhw-pop__close img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.lhw-pop--sheet .lhw-pop__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 calc(12 * var(--u));
}
.lhw-apply.has-sheet .lhw-apply__body { overflow: hidden; }

/* ---- Option list ---- */
.lhw-listbox { max-height: calc(264 * var(--u)); overflow-y: auto; outline: none; }
.lhw-pop--sheet .lhw-listbox { max-height: none; overflow: visible; padding-bottom: calc(8 * var(--u)); }
.lhw-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  min-height: calc(40 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: calc(6 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  cursor: pointer;
  user-select: none;
}
.lhw-pop--sheet .lhw-option {
  min-height: calc(52 * var(--u));
  padding: calc(14 * var(--u)) calc(12 * var(--u));
  border-radius: calc(10 * var(--u));
  font-size: calc(16 * var(--u));
}
.lhw-option.is-active { background: #f2f5f3; }
.lhw-listbox:focus-visible .lhw-option.is-active { box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(29, 135, 64, .35); }
.lhw-option[aria-selected="true"] { color: var(--lhw-brand); font-weight: 700; background: rgba(29, 135, 64, .08); }
.lhw-option__check {
  display: none;
  flex: none;
  place-items: center;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border-radius: 50%;
  background: var(--lhw-brand);
}
.lhw-option__check img { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.lhw-option[aria-selected="true"] .lhw-option__check { display: grid; }

/* ---- Calendar ---- */
.lhw-cal { display: flex; flex-direction: column; gap: calc(6 * var(--u)); outline: none; }
.lhw-pop--sheet .lhw-cal { max-width: calc(420 * var(--u)); margin: 0 auto; padding: 0 calc(4 * var(--u)) calc(8 * var(--u)); }
.lhw-cal__head { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); padding-bottom: calc(4 * var(--u)); }
.lhw-cal__picks, .lhw-cal__navs { display: flex; align-items: center; gap: calc(2 * var(--u)); }
.lhw-cal__pick {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: 1.3;
  color: var(--lhw-text);
}
.lhw-cal__pick:hover, .lhw-cal__pick.is-open { background: #f2f5f3; }
.lhw-cal__caret { width: calc(14 * var(--u)); height: calc(14 * var(--u)); transition: transform .15s; }
.lhw-cal__pick.is-open .lhw-cal__caret { transform: rotate(180deg); }
.lhw-cal__nav {
  display: grid;
  place-items: center;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: 50%;
}
.lhw-cal__nav:hover:not(:disabled) { background: #f2f5f3; }
.lhw-cal__nav:disabled { opacity: .3; cursor: default; }
.lhw-cal__nav img { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.lhw-cal__nav--prev img { transform: rotate(90deg); }
.lhw-cal__nav--next img { transform: rotate(-90deg); }

.lhw-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: calc(4 * var(--u)); }
.lhw-cal__wd {
  padding: calc(2 * var(--u)) 0 calc(6 * var(--u));
  text-align: center;
  font-size: calc(13 * var(--u));
  line-height: calc(16 * var(--u));
  color: var(--lhw-placeholder);
}
.lhw-cal__day {
  justify-self: center;
  display: grid;
  place-items: center;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  border-radius: 50%;
  font-size: calc(15 * var(--u));
  font-variant-numeric: tabular-nums;
  color: var(--lhw-text);
  transition: background-color .1s;
}
.lhw-pop--sheet .lhw-cal__day { width: calc(44 * var(--u)); height: calc(44 * var(--u)); font-size: calc(16 * var(--u)); }
.lhw-cal__day:hover:not(:disabled) { background: #f2f5f3; }
.lhw-cal__day.is-today { background: rgba(29, 135, 64, .12); font-weight: 700; }
.lhw-cal__day.is-selected { background: var(--lhw-brand) !important; color: #fff; font-weight: 700; }
.lhw-cal__day:disabled { opacity: .3; cursor: default; }

.lhw-cal__cell {
  display: grid;
  place-items: center;
  height: calc(40 * var(--u));
  border-radius: 999px;
  font-size: calc(15 * var(--u));
  font-variant-numeric: tabular-nums;
  transition: background-color .1s;
}
.lhw-cal__cell:hover:not(:disabled) { background: #f2f5f3; }
.lhw-cal__cell.is-selected { background: var(--lhw-brand) !important; color: #fff; font-weight: 700; }
.lhw-cal__cell:disabled { opacity: .3; cursor: default; }
.lhw-cal__months { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--u)); padding-top: calc(4 * var(--u)); }
.lhw-cal__years {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(6 * var(--u));
  max-height: calc(272 * var(--u));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(14 * var(--u)) calc(2 * var(--u));
  -webkit-mask-image: linear-gradient(transparent, #000 calc(12 * var(--u)), #000 calc(100% - 12 * var(--u)), transparent);
  mask-image: linear-gradient(transparent, #000 calc(12 * var(--u)), #000 calc(100% - 12 * var(--u)), transparent);
}
.lhw-pop--sheet .lhw-cal__years { max-height: 46dvh; }
.lhw-pop--sheet .lhw-cal__cell { height: calc(48 * var(--u)); font-size: calc(16 * var(--u)); }
.lhw-pop--dropdown.lhw-pop--calendar { width: calc(330 * var(--u)); }

@keyframes lhw-drop { from { opacity: 0; transform: translateY(calc(-4 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes lhw-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lhw-pop, .lhw-scrim { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Success
   ========================================================================== */
.lhw-step--success { justify-content: flex-start; }
.lhw-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(34 * var(--u));
  padding-top: calc(20 * var(--u));
  padding-bottom: calc(24 * var(--u));
}
.lhw-success__logo { width: calc(185 * var(--u)); height: calc(50.083 * var(--u)); }
.lhw-success__text {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.6;
  text-align: center;
  opacity: .8;
}
.lhw-success__btn { width: 100%; }

/* ==========================================================================
   Very small phones (< 360px): single-column fields
   ========================================================================== */
@media (max-width: 359.98px) {
  .lhw-grid { grid-template-columns: minmax(0, 1fr); }
  .lhw-step__actions .lhw-btn { padding-inline: calc(24 * var(--u)); }
}

/* ==========================================================================
   ≥ 768px — POPUP (tablet + desktop)
   ========================================================================== */
@media (min-width: 768px) {
  .lhw-apply {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(calc(900 * var(--u)), calc(100vw - 48px));
    height: fit-content;
    max-height: calc(100dvh - 48px);
    border-radius: calc(20 * var(--u));
    box-shadow: 0 calc(24 * var(--u)) calc(64 * var(--u)) rgba(0, 0, 0, .18);
  }
  .lhw-apply::backdrop {
    background: var(--lhw-backdrop);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  /* steps 1 + 2 keep a fixed height so the dialog doesn't jump between steps */
  .lhw-apply[data-current="1"],
  .lhw-apply[data-current="2"] { height: min(calc(900 * var(--u)), calc(100dvh - 48px)); }
  .lhw-apply[data-current="3"] { width: min(calc(760 * var(--u)), calc(100vw - 48px)); }

  .lhw-apply__header {
    position: relative;
    padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u));
  }
  .lhw-apply__header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    border-bottom: 1px solid var(--lhw-divider);
  }
  .lhw-apply[data-current="0"] .lhw-apply__header { padding-inline: calc(30 * var(--u)); }
  .lhw-apply[data-current="3"] .lhw-apply__header { padding-inline: calc(60 * var(--u)); }

  .lhw-apply__close { display: block; border-radius: 50%; }
  .lhw-apply__close:hover { filter: brightness(.96); }
  .lhw-apply__leave { display: none; }

  .lhw-apply__body {
    max-width: none;
    margin: 0;
    padding: calc(20 * var(--u)) calc(20 * var(--u)) 0;
    gap: calc(24 * var(--u));
  }
  .lhw-apply[data-current="0"] .lhw-apply__body { padding: calc(24 * var(--u)) calc(30 * var(--u)) 0; }

  /* Typography (desktop sizes) */
  .lhw-h1 { font-size: calc(28 * var(--u)); }
  .lhw-lead,
  .lhw-step--intro .lhw-lead { font-size: calc(18 * var(--u)); line-height: 1.6; }

  /* Intro */
  .lhw-card { padding: calc(16 * var(--u)); }
  .lhw-job__eyebrow { font-size: calc(16 * var(--u)); }
  .lhw-job__title { font-size: calc(22 * var(--u)); }
  .lhw-tag { font-size: calc(14 * var(--u)); }
  .lhw-overview { gap: calc(14 * var(--u)); }
  .lhw-overview__text { line-height: 1.6; padding-bottom: calc(8 * var(--u)); }
  .lhw-privacy-note__title { font-size: calc(17 * var(--u)); }
  .lhw-privacy-note__text { font-size: calc(16 * var(--u)); }
  .lhw-step--intro .lhw-step__actions { padding-top: calc(24 * var(--u)); padding-bottom: calc(21 * var(--u)); }
  .lhw-btn--block-mobile { width: auto; }

  .lhw-step__actions { padding: calc(24 * var(--u)) 0 calc(20 * var(--u)); }

  .lhw-notice { white-space: normal; }
  .lhw-step--docs .lhw-step__content { gap: calc(26 * var(--u)); }

  /* Success */
  .lhw-success { gap: calc(24 * var(--u)); padding-top: calc(40 * var(--u)); padding-bottom: calc(36 * var(--u)); }
  .lhw-success__logo { width: calc(228 * var(--u)); height: calc(61.7238 * var(--u)); }
  .lhw-success__text { gap: calc(13 * var(--u)); font-size: calc(18 * var(--u)); max-width: calc(616 * var(--u)); }
  .lhw-success__btn { width: calc(150 * var(--u)); }
}

/* ≥ 1024px — vertical stepper sidebar next to the form (as in Figma) */
@media (min-width: 1024px) {
  .lhw-apply[data-current="1"] .lhw-apply__body,
  .lhw-apply[data-current="2"] .lhw-apply__body {
    flex-direction: row;
    align-items: stretch;
  }
  .lhw-stepper {
    position: sticky;
    top: 0;
    align-self: flex-start;
    width: calc(185 * var(--u));
  }
  .lhw-stepper__list {
    flex-direction: column;
    align-items: stretch;
    gap: calc(16 * var(--u));
    padding: calc(12 * var(--u));
  }
  .lhw-stepper__label { display: block; padding-top: calc(2 * var(--u)); }
  .lhw-stepper__bar {
    flex: none;
    width: calc(2.5 * var(--u));
    height: calc(40 * var(--u));
    margin: 0 0 0 calc(16 * var(--u));
  }
  .lhw-stepper__fill { inset: 0 0 auto 0; width: 100%; height: 50%; }
  .lhw-stepper[data-progress="2"] .lhw-stepper__fill { height: 100%; }
  .lhw-stepper__current { display: none; }
}

/* ==========================================================================
   Motion
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .lhw-apply[open] { animation: lhw-in .22s ease-out; }
  .lhw-apply[open]::backdrop { animation: lhw-fade .22s ease-out; }
  .lhw-step:not([hidden]) { animation: lhw-fade .2s ease-out; }
  @media (min-width: 768px) {
    .lhw-apply[open] { animation: lhw-pop .22s ease-out; }
  }
}
@keyframes lhw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lhw-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lhw-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* Body scroll lock while open */
html.lhw-open { overflow: hidden; }