/* SP4 wizard styles. Tokens (colors/space) come from styles.css. */
/* The HTML `hidden` attribute must win over the author display rules below
   (.apply-step{display:grid} etc.) — otherwise every step/conditional shows
   at once and apply.js's show/hide is visually inert. Idiomatic [hidden] guard. */
[hidden] { display: none !important; }
.apply-intro { font-size: 1rem; line-height: 1.8; margin-bottom: var(--space-8, 2rem); }
.apply-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.apply-progress { display: flex; gap: 6px; margin-bottom: var(--space-8, 2rem); }
.apply-progress > span { flex: 1; height: 5px; border-radius: 3px; background: #eee; }
.apply-progress > span.done { background: #E91E8A; }
.apply-step { display: grid; gap: var(--space-5, 1.25rem); }
.apply-step label { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; }
.apply-step input, .apply-step select, .apply-step textarea {
  font: inherit; padding: 10px 12px; border: 1px solid #d8d8d8; border-radius: 8px; width: 100%;
}
/* Checkboxes must NOT inherit the full-width text-input styling above —
   width:100% + padding + border stretches the box and shoves the label
   text aside / makes it wrap. Reset them to native sizing everywhere. */
.apply-step input[type="checkbox"],
.repeat-row--labeled input[type="checkbox"] {
  width: auto; min-width: 0; padding: 0; border: 0; border-radius: 0;
  margin: 0; flex: 0 0 auto;
}
.apply-step small { display: block; font-weight: 400; color: #888; margin-top: 4px; font-size: .8rem; }
.apply-step fieldset { border: 1px solid #eee; border-radius: 10px; padding: 14px; }
.apply-step legend { font-weight: 600; padding: 0 6px; }
.repeat-row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px dashed #eee; }
@media (min-width: 720px) { .repeat-row { grid-template-columns: repeat(3, 1fr); } }
.apply-nav { display: flex; gap: 12px; margin-top: var(--space-8, 2rem); }
.apply-nav .btn { flex: 1; }
.apply-error { color: #c00; margin-top: 12px; font-size: .9rem; }
.apply-error-list { margin: 4px 0 0 1.2em; padding: 0; font-size: .85rem; }
.apply-hint { color: #888; font-size: .85rem; }
/* Specificity bumped to .apply-step label.apply-checkbox so the inline flex
   layout wins over .apply-step label{display:grid} above. Without this the
   checkbox stacks above its text label. */
.apply-step label.apply-checkbox { display: flex; align-items: center; gap: 8px; font-weight: 400; }
/* Phone group: code dropdown + number input side by side */
.apply-phone-group { display: grid; grid-template-columns: 180px 1fr; gap: 10px; }
.apply-phone-code-label { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; }
.apply-phone-number-label { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; }
@media (max-width: 480px) { .apply-phone-group { grid-template-columns: 1fr; } }
.slots-label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.slots-counter { font-weight: 400; color: #888; font-variant-numeric: tabular-nums; }
.slots-counter--full { color: #E91E8A; font-weight: 600; }
#slots-picker { display: grid; gap: 8px; }
.slot-day { font-weight: 600; margin-top: 10px; }
.slot-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.slot-grid button { padding: 8px 12px; border: 1px solid #d8d8d8; border-radius: 999px; background: #fff; cursor: pointer; }
.slot-grid button.sel { background: #E91E8A; color: #fff; border-color: #E91E8A; }

/* Repeat-row labeled layout — each sub-field gets its own label above the input */
.repeat-row--labeled {
  display: grid; gap: 12px; padding: 14px;
  border: 1px solid #eee; border-radius: 10px; background: #fafafa;
  margin-bottom: 10px;
}
.repeat-row--labeled label {
  display: grid; gap: 4px; font-size: .8rem; font-weight: 600; color: #444;
}
.repeat-row--labeled input,
.repeat-row--labeled select {
  font: inherit; padding: 8px 10px; border: 1px solid #d8d8d8;
  border-radius: 6px; background: #fff; font-weight: 400;
}
/* Finding 3: override the grid label rule for checkbox labels inside repeat-row.
   .repeat-row--labeled label.apply-checkbox is 0,2,1 which beats .repeat-row--labeled label 0,1,1 */
.repeat-row--labeled label.apply-checkbox {
  display: flex; align-items: center; gap: 8px; font-weight: 400;
}
@media (min-width: 720px) {
  .repeat-row--labeled { grid-template-columns: repeat(2, 1fr); }
  .repeat-row--labeled > button[data-del] { grid-column: 1 / -1; justify-self: end; max-width: 200px; }
}
/* Finding 5: referral checkbox grid — clean vertical list, each row inline */
#referral-box { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
#referral-box label.apply-checkbox { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }

/* SP8 experience form. The .apply-step rules above were written for the SP4
   wizard where one step is visible at a time; experience.html renders all 4
   sections together, so labels need to bond to their own input and sections
   need clear separation. Radios also need the same width:auto reset as
   checkboxes — without it the .apply-step input{width:100%} rule stretches
   each radio to full width. All selectors scoped to #experience-form so SP4
   apply wizard is untouched. */
#experience-form input[type="radio"] {
  width: auto; min-width: 0; padding: 0; border: 0; border-radius: 0;
  margin: 0; flex: 0 0 auto;
}
#experience-form { display: grid; gap: var(--space-8, 2rem); }
#experience-form .apply-step { gap: 8px; }
#experience-form fieldset label { display: flex; align-items: center; gap: 8px; font-weight: 400; }