/* Order controls belong to the current step and never restart the order. */
.wizard-page .mobile-cta { display: none; }
.wizard-page .cookie { position: static; width: min(calc(100% - 32px), 760px); margin: 16px auto 0; }
.wizard-step-status { margin: 0; color: var(--muted); font-size: .9rem; }
.wizard .style-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wizard .lyric-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wizard .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wizard .field, .wizard .option, .wizard .cols-2 > *, .wizard .summary-box { min-width: 0; }
.wizard .option, .wizard .summary-box, .wizard .checkrow span { overflow-wrap: anywhere; }
.wizard input, .wizard select, .wizard textarea { min-width: 0; max-width: 100%; }
.wizard .summary-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.wizard .summary-row > strong { min-width: 0; text-align: right; }
.wizard .checkrow input { flex-shrink: 0; }
.wizard .btn:focus-visible, .wizard .option:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.wizard [hidden] { display: none; }
.confirmation-page .summary-box { overflow-wrap: anywhere; }
.wizard .event-date-field { min-width: 0; padding: 0; border: 0; }
.event-date-field legend { padding: 0; margin-bottom: 7px; font-weight: 700; }
.event-date-grid { display: grid; grid-template-columns: .75fr 1.4fr 1fr; gap: 8px; }
.event-date-grid .date-part { display: grid; gap: 5px; min-width: 0; }
.wizard .event-date-grid label { font-size: .85rem; font-weight: 400; color: var(--muted); }
.wizard .event-date-grid select { min-height: 48px; padding: 10px 6px; font-size: 16px; }
.event-date-field small { line-height: 1.4; }
.date-error { margin: 0; font-size: .9rem; color: #ffb8c5; }
.date-clear { justify-self: start; min-height: 44px; padding: 6px 0; border: 0; background: transparent; color: #9eefff; text-decoration: underline; cursor: pointer; }
.date-clear:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (max-width: 760px) {
  .wizard-page { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .confirmation-page { padding-bottom: 0; }
  .wizard-page .wizard-wrap { padding: 24px 0 32px; }
  .wizard-page .wizard-intro { margin-bottom: 22px !important; }
  .wizard-page .wizard-intro h1 { font-size: clamp(1.9rem, 7.6vw, 2.4rem) !important; line-height: 1.2; }
  .wizard-page .wizard { padding: 18px; }
  .wizard-page .wstep h2 { font-size: clamp(1.5rem, 6.4vw, 2rem); line-height: 1.25; }
  .wizard .cols-2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wizard .style-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wizard .lyric-options { grid-template-columns: minmax(0, 1fr); }
  .wizard .style-options .option { text-align: center; padding: 12px 8px; min-height: 56px; }
  .wizard .field input, .wizard .field select, .wizard .field textarea { font-size: 16px; }
  .wizard .wstep.active .wizard-actions {
    position: fixed; z-index: 70; inset: auto 0 0;
    margin: 0; padding: 12px max(14px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
    background: #0d1224; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0,0,0,.2);
    align-items: center; gap: 10px;
  }
  .wizard-actions > span:empty { display: none; }
  .wizard-actions .btn { min-height: 48px; padding: 10px 14px; line-height: 1.25; font-size: .94rem; }
  .wizard-actions .btn-primary { flex: 1; min-width: 0; }
  .wizard-actions .btn-secondary { flex-shrink: 0; }
  .wizard .field, .wizard .checkrow, .wizard [data-payment-message] { scroll-margin-top: 90px; scroll-margin-bottom: 110px; }
  .wizard-page footer { padding-bottom: 26px; }
  .confirmation-page .wizard { padding: 24px 18px !important; }
  .confirmation-page .btn { max-width: 100%; height: auto; padding: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .wizard-page { scroll-behavior: auto; }
  .wizard .progress span { transition: none; }
}
