/* Header and basic typography for order pages — warm, soft UI */
.order-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:16px 0}
.oh-title{margin:0;font-size:24px;line-height:1.2}
.oh-sub{margin-top:6px;color:var(--fx-muted);font-size:14px}
.oh-progress{margin-top:6px;height:6px;background:var(--fx-surface);border-radius:999px;overflow:hidden}
.oh-progress__bar{height:100%;background:var(--bs-primary);border-radius:999px;box-shadow:0 6px 18px color-mix(in srgb, var(--bs-primary) 14%, black) inset}
.oh-right{display:flex;align-items:center;gap:12px}
.oh-price{font-weight:600;font-size:18px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--fx-radius-pill, 999px);padding:8px 14px;border:1px solid var(--fx-border);}
.btn-neutral:hover{background:var(--fx-bg)}

/* Soft card styles to match warm palette */
.card-2025{background:var(--fx-card);padding:16px;border:1px solid var(--fx-border);box-shadow:var(--fx-shadow)}

/* Typography tweaks */
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:var(--bs-body-color)}
h1,h2,h3,h4{color:var(--bs-body-color)}

/* Small responsive adjustments */
@media (max-width:576px){
  .order-header{flex-direction:column;align-items:stretch;gap:12px}
  .oh-title{font-size:20px}
}

/* tiny helper for subtle progress animation */
.oh-progress__bar{transition:width 420ms cubic-bezier(.2,.8,.2,1)}

/* ===== Overrides: restore stepper bubbles and ensure mobile visibility ===== */
.stepper-list{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.stepper-list li{display:flex;align-items:center;gap:8px;padding:0;margin:0;color:var(--fx-muted);font-size:0.95rem}
.stepper-list .bubble{display:inline-flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;background:var(--fx-surface);color:var(--bs-body-color);font-weight:600;border:1px solid var(--fx-border)}
.stepper-list li.completed .bubble{background:var(--bs-primary);color:var(--fx-card);border-color:transparent}
.stepper-list li.current .bubble{background:var(--fx-card);color:var(--bs-primary);border:2px solid var(--bs-primary)}
.stepper-list .label{display:inline-block}

/* Mobile: show simplified bubble-only stepper even if bootstrap hid it */
@media (max-width:575.98px){
  .stepper.d-none.d-sm-flex{display:flex !important}
  .stepper-list .label{display:none}
}

/* ===== Override for basket CTA visibility conflicts ===== */
.basket-instruction .btn-primary{background-color:var(--bs-primary) !important;color:var(--bs-btn-color, #fff) !important;border-color:transparent !important;opacity:1 !important}
.basket-instruction .btn-primary:hover{background-color:color-mix(in srgb, var(--bs-primary) 85%, black) !important}

.extra-spread .badge {
  background-color: var(--fx-extra-accent);
}
.extra-spread .js-toggle-comment {
  background-color: var(--bs-body-bg);
}
.extra-spread .turn-comment-input, .extra-spread .btn-light, .extra-spread .js-toggle-comment, .extra-spread .btn-outline-secondary, .extra-spread .btn-outline-danger {
  border-color: var(--extra-border);
}