/*!
 * valla-booking — step indicator mobile spacing fix (M2)
 *
 * At narrow widths the 5-step indicator (Address / Service / Contact /
 * Schedule / Payment) merges labels into "SchedulePayment". This file
 * fixes the gap + nowrap behavior of the step labels at < 540px.
 *
 * Selector strategy: targets the rendered step indicator container
 * regardless of which exact class the wizard uses (valla-step-indicator,
 * valla-steps, booking-steps).
 */
@media (max-width: 540px) {
  .valla-step-indicator,
  .valla-steps,
  .booking-steps {
    gap: 6px !important;
    flex-wrap: wrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .valla-step-indicator [class*="step-label"],
  .valla-step-indicator .step,
  .booking-steps .step,
  [data-step] + span {
    white-space: nowrap !important;
    padding: 0 4px;
  }
}

/* Hard-narrow fallback: drop the text labels and keep only the numbered
 * circles. Triggered at iPhone-class widths (<=480) where 5-step flows
 * clip the rightmost chip ("Payment") off the visible area.
 *
 * Selectors:
 *   - .valla-step-indicator [class*="step-label"] / .booking-steps .step .label
 *     -- legacy wizard variants that wrap labels in a child element.
 *   - .valla-step-chip + .valla-chip-dot -- the current "full" variant where
 *     the label is a plain text node directly inside .valla-step-chip; we
 *     zero the chip font-size and restore it on the dot so the number
 *     pseudo-element (::before) still renders. */
@media (max-width: 480px) {
  .valla-step-indicator [class*="step-label"],
  .booking-steps .step .label {
    display: none;
  }
  #valla-booking-root .valla-step-chip {
    font-size: 0;
    gap: 0;
  }
  #valla-booking-root .valla-chip-dot {
    font-size: 12px;
  }
}