/* WizardUx Modal Header
 * Step counter, progress bar, and title
 * Desktop-first - DO NOT modify these base styles for mobile
 */

/* ==========================================================================
   HEADER CONTAINER
   ========================================================================== */

.wizard-modal__header {
  flex: none;
  padding: var(--wizard-spacing-block) var(--wizard-spacing-inline);
  border-block-end: 1px solid var(--wizard-color-border);
}

/* ==========================================================================
   HEADER META (Step counter + progress bar wrapper)
   ========================================================================== */

.wizard-modal__meta {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wizard-spacing-block) / 4);
  margin-block-end: calc(var(--wizard-spacing-block) / 2);
}

/* ==========================================================================
   STEP COUNTER
   ========================================================================== */

.wizard-modal__step-counter {
  font-size: var(--wizard-text-small);
  color: var(--wizard-color-text-subtle);
}

/* ==========================================================================
   TITLE
   ========================================================================== */

.wizard-modal__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: var(--wizard-line-height);
  color: var(--wizard-color-text);
}