/* ===================================================================
   MenuFresh - Customize Wizard
   Mode A (画面遷移型) と Mode B (アコーディオン型) 両対応
   =================================================================== */

/* ===== Container ===== */
.wizard {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-divider);
  overflow: hidden;
}

/* ===== Step Block ===== */
.wiz-step {
  border-bottom: 1px solid var(--color-divider);
}

.wiz-step:last-of-type {
  border-bottom: none;
}

/* 適用外ステップ(例: サイズを持たないメインを選んだときの「サイズを選ぶ」)は
   非表示。DOM には残す(絶対 index でのサージカル更新を保つ)が描画しない。 */
.wiz-step--hidden {
  display: none;
}

.wiz-step__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  color: var(--color-text-primary);
  transition: background var(--duration-fast);
}

.wiz-step__header:hover {
  background: var(--fill-1);
}

.wiz-step__num {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fill-2);
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-number);
  font-size: 1.15rem;
  font-weight: 700;
  flex-shrink: 0;
  transition:
    background var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-bounce);
}

/* Green-✓ "done" appearance is reserved for steps the customer has
   actually touched. A step that's "completed" purely because of a
   default value (applyStepDefaults) stays neutral so the user isn't
   shown ✓ for decisions they didn't make. */
.wiz-step.is-completed.is-user-confirmed .wiz-step__num {
  background: var(--color-success, #4ade80);
  color: var(--color-bg-base);
}

.wiz-step.is-active .wiz-step__num {
  background: var(--color-accent-primary);
  color: var(--color-bg-base);
  box-shadow: 0 0 0 4px var(--accent-tint-3);
}

/* ── Number ↔ Check crossfade ─────────────────────────────────────
   Both spans stack in the same place; .is-completed flips opacity
   and scale on them so the number gracefully gives way to a green
   check rather than swapping abruptly. */
.wiz-step__num-number,
.wiz-step__num-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-bounce);
  pointer-events: none;
}
.wiz-step__num-number { opacity: 1; transform: scale(1); }
.wiz-step__num-check  { opacity: 0; transform: scale(0.4) rotate(-20deg); }
.wiz-step__num-check svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* Cross-fade to ✓ only when the customer has actually confirmed. */
.wiz-step.is-completed.is-user-confirmed .wiz-step__num-number {
  opacity: 0;
  transform: scale(0.4) rotate(20deg);
}
.wiz-step.is-completed.is-user-confirmed .wiz-step__num-check {
  opacity: 1;
  transform: scale(1) rotate(0);
}

/* While a step is actively being edited, always show its number badge
   (override any completed-state ✓). Keeps the active orange chip
   self-consistent. */
.wiz-step.is-active .wiz-step__num-number {
  opacity: 1 !important;
  transform: scale(1) rotate(0) !important;
}
.wiz-step.is-active .wiz-step__num-check {
  opacity: 0 !important;
  transform: scale(0.4) rotate(-20deg) !important;
}

.wiz-step__title-block {
  flex: 1;
  min-width: 0;
}

.wiz-step__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-text-primary);
}

.wiz-step__selection {
  font-size: 0.85rem;
  color: var(--color-accent-secondary);
  margin: 4px 0 0;
  font-weight: 600;
}
/* 「スキップ可」「未選択」など no-value 状態は控えめに。
 * 黄色アクセントだと「重要な情報がある」と誤読される + ノイズ感が強い。
 * グレーの軽量ラベルで「補助情報」と一目で分かる扱いに。
 * !important を付けるのは、wizard.js 側の class 付与が古い JS cache で
 * 効かない端末でも、ラベル文字列パターン (「スキップ」を含む) を
 * 拾える別系統の defensive 対策と組ませるため (下のグローバル fallback)。 */
.wiz-step__selection.is-skip {
  color: var(--color-text-tertiary) !important;
  opacity: 0.6 !important;
  font-weight: 500 !important;
  font-size: 0.78rem !important;
}

.wiz-step__chevron {
  width: 24px;
  height: 24px;
  color: var(--color-text-tertiary);
  transition: transform var(--duration-normal) var(--ease-out);
}

.wiz-step.is-open .wiz-step__chevron {
  transform: rotate(180deg);
  color: var(--color-accent-primary);
}

.wiz-step__chevron svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

/* Body (collapsed/expanded) ─ uses grid-template-rows so the height
   animates to the body's natural size (no 6000px cap; no eaten time
   on short steps). Modern browsers (Chrome 117+, Safari 17.4+, Firefox
   137+) support animating between 0fr and 1fr. The max-height rule is
   a fallback for older engines. */
.wiz-step__body {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.42s var(--ease-out);
  /* Fallback for browsers that don't animate grid-template-rows: */
  max-height: 0;
}

.wiz-step.is-open .wiz-step__body {
  grid-template-rows: 1fr;
  max-height: 6000px;
}

/* Direct child of the grid container needs min-height: 0 so it can
   actually collapse to 0 (default is content-min). */
.wiz-step__body-inner {
  min-height: 0;
  padding: 0 28px 28px;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.32s var(--ease-out),
    transform 0.42s var(--ease-out);
}

.wiz-step.is-open .wiz-step__body-inner {
  opacity: 1;
  transform: translateY(0);
  /* Slight delay so the height starts expanding before content fades in */
  transition-delay: 0.08s, 0.04s;
}

/* ===== Selection Cards (universal) ===== */
.opt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.opt-grid--mains {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.opt-grid--sizes {
  grid-template-columns: repeat(4, 1fr);
  max-width: 600px;
}

.opt-grid--toppings {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.opt-grid--spice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 700px;
}

/* Option Card */
.opt-card {
  position: relative;
  background: var(--fill-1);
  border: 2px solid transparent;
  border-radius: var(--radius-card);
  padding: 0;
  cursor: pointer;
  /* Explicit transition list so border / shadow / bg / transform all
     ease in unison when .is-selected toggles — `transition: all` was
     causing micro-jitter as different properties used different
     resolved durations. */
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--color-text-primary);
}

.opt-card:hover {
  background: var(--fill-2);
  transform: translateY(-2px);
}

.opt-card.is-selected {
  border-color: var(--color-accent-primary);
  background: var(--accent-tint-1);
  box-shadow: 0 6px 20px var(--accent-glow);
}

.opt-card__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent-primary);
  color: var(--color-bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.95rem;
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--duration-fast) var(--ease-bounce);
  z-index: 2;
}

.opt-card.is-selected .opt-card__check {
  opacity: 1;
  transform: scale(1);
}

/* Brief tap-confirmation pulse — fires for ~400ms after tap, before
   the wizard auto-advances to the next step */
.opt-card.is-just-tapped {
  animation: optTapPulse 0.5s var(--ease-bounce);
}

@keyframes optTapPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 var(--accent-glow); }
  40% { transform: scale(1.04); box-shadow: 0 0 0 10px transparent; }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}

.opt-card.is-just-tapped .opt-card__check {
  animation: checkBouncePop 0.5s var(--ease-bounce);
}

@keyframes checkBouncePop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.opt-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.opt-card__body {
  padding: 12px 14px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.opt-card__name {
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 4px;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.opt-card__sub {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin: 0;
  line-height: 1.4;
}

.opt-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.2em;
  margin-top: 8px;
  font-family: var(--font-number);
  color: var(--color-accent-primary);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.opt-card__price-cur {
  font-size: 0.6em;
  opacity: 0.7;
}

/* "〜" between min and max in a range price (legacy — kept for fallback) */
.opt-card__price-sep {
  font-size: 0.7em;
  opacity: 0.55;
  margin: 0 0.15em;
  font-weight: 500;
}

/* ── Size-by-size price grid (matches detail modal style) ──
   Used in main-style wizard cards when the item has size variants.
   2-column on most viewports, collapses to single column on very narrow ones.
*/
.opt-card__price-sizes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  margin-top: 8px;
  padding: 8px;
  /* 旧: rgba(0,0,0,0.25) の濃いグレー固定 → ライトテーマで濁って浮いた。
     テーマ追従の淡い面塗りに。 */
  background: var(--fill-2);
  border-radius: 10px;
  border: 1px solid var(--hairline);
}
.opt-card__price-size-cell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  font-family: var(--font-body);
}
/* Highlight the default (並盛) row so customers see the canonical price.
   清潔な白セル + アクセント枠で「これが基準サイズ」と分かるように。 */
.opt-card__price-size-cell.is-default {
  background: var(--color-bg-surface, #fff);
  border: 1.5px solid var(--accent-line);
}
.opt-card__price-size-label {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.opt-card__price-size-cell.is-default .opt-card__price-size-label {
  color: var(--color-accent-primary);
}
.opt-card__price-size-value {
  font-family: var(--font-number);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.opt-card__price-size-cell.is-default .opt-card__price-size-value {
  color: var(--color-accent-primary);
}

/* Size variant: simpler cards */
.opt-card--size {
  padding: 16px 12px;
  align-items: center;
  text-align: center;
  aspect-ratio: 1;
  justify-content: center;
}

.opt-card--size .opt-card__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.opt-card--size .opt-card__sub {
  font-size: 0.7rem;
}

.opt-card--size .opt-card__price-modifier {
  font-family: var(--font-number);
  font-size: 1rem;
  font-weight: 700;
  margin-top: 6px;
  color: var(--color-accent-primary);
}

/* Topping variant: card with main area + quantity bar */
.opt-card--topping {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  min-height: 80px;
  gap: 0;
}

/* Generic clickable card area — vertical (image on top, body below).
   This is the default for "main"-style cards (single-pick categories
   like メインカレー, drinks, ...). Topping cards override below. */
.opt-card__main {
  display: block;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  color: inherit;
}

/* Topping override — image left, body right (compact cards). */
.opt-card--topping .opt-card__main {
  display: flex;
  align-items: stretch;
  flex: 1;
}

/* Backwards-compat alias for older cached HTML still using the
   `.opt-card--topping__main` class name. */
.opt-card--topping__main {
  display: flex;
  align-items: stretch;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  color: inherit;
  flex: 1;
}

/* "Main" card body: tighter padding on top of vertical image */
.opt-card--main .opt-card__body {
  padding: 12px 14px 16px;
}
.opt-card--main .opt-card__name {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.3;
  color: var(--color-text-primary);
}
.opt-card--main .opt-card__sub {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
  margin: 0 0 6px;
  line-height: 1.45;
  /* Limit to 2 lines for grid alignment */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.opt-card--main .opt-card__price {
  font-size: 1.15rem;
  margin-top: 6px;
}

.opt-card--topping .opt-card__image {
  width: 88px;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.opt-card--topping .opt-card__body {
  padding: 10px 12px;
  justify-content: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.opt-card--topping .opt-card__name {
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.3;
  /* Allow up to 2 lines, then ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.opt-card--topping .opt-card__price {
  font-size: 1.15rem;
  font-weight: 800;
  margin-top: 4px;
  display: inline-flex;
  align-items: baseline;
  /* Price always below name; doesn't need right padding to avoid icon */
}

.opt-card__price-multiplier {
  font-size: 0.75em;
  color: var(--color-accent-primary);
  margin-left: 0.3em;
  font-weight: 700;
}

/* Quantity Control */
.qty-control {
  display: flex;
  align-items: stretch;
  height: 40px;
  border-top: 1px solid var(--hairline-2);
  background: rgba(0, 0, 0, 0.2);
}

.qty-control--hint {
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
  color: inherit;
  /* 押せると分かるアフォーダンス: アクセント淡色の帯 */
  background: var(--accent-tint-2);
  transition: background var(--duration-fast);
}

.qty-control--hint:hover {
  background: var(--accent-tint-2);
}

.qty-control--hint:active {
  background: var(--accent-tint-3);
}

.qty-hint {
  font-size: 0.88rem;
  color: var(--color-accent-primary);
  letter-spacing: 0.03em;
  font-weight: 800;
}

.opt-card--topping.is-selected .qty-control {
  background: var(--accent-tint-2);
}

.qty-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-accent-secondary);
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--duration-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  user-select: none;
  -webkit-user-select: none;
}

.qty-btn:hover {
  background: var(--accent-tint-3);
  color: var(--color-text-primary);
}

.qty-btn:active {
  transform: scale(0.92);
  background: var(--accent-glow);
}

.qty-btn--minus {
  border-right: 1px solid var(--hairline-2);
}

.qty-btn--plus {
  border-left: 1px solid var(--hairline-2);
}

.qty-display {
  flex: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-number);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
  min-width: 40px;
  user-select: none;
  -webkit-user-select: none;
}

/* Selected card visual: hide check (replaced by qty) */
.opt-card--topping.is-selected .opt-card__check {
  display: none;
}

/* Info icon (ⓘ) for toppings — positioned over the IMAGE area's top-right
   (image is 88px wide, so we use left positioning to anchor to image's
   right edge rather than the entire card's right edge). This keeps the
   body area unobstructed for the topping name and price. */
.opt-card__info {
  position: absolute;
  top: 8px;
  /* Default: top-right corner. Topping card (horizontal layout) overrides
     to position relative to its 88px image strip on the left. */
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* 押せる「詳細(i)」ボタンだと分かる清潔な白丸 + アクセントの i。
     旧: 濃色半透明+セリフ斜体 i は写真に埋もれ、押せると分かりにくかった。 */
  background: rgba(255, 255, 255, 0.96);
  color: var(--color-accent-primary);
  border: 1.5px solid var(--color-accent-primary);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 1.02rem;
  font-weight: 800;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

/* トッピングカード: 画像 88px + ボディ右側。
 * 旧設計では info アイコンを画像エリアの右上 (left:54px) に重ねていたが、
 * 同じ画像エリアにバッジ (🌱/★/低) も置くので両者が干渉して意味不明
 * (画像が見えなくなる / アイコン同士が重なる) に。
 * → info アイコンはボディ側 (=カード全体の右上) に移動し、画像エリアは
 *   写真とバッジだけのクリーンな状態を保つ。役割の空間分離。
 * サイズも 28px → 24px に縮めてカード全体を圧迫しないように。 */
.opt-card--topping .opt-card__info {
  top: 6px !important;
  right: 6px !important;
  left: auto !important;
  bottom: auto !important;
  width: 27px !important;
  height: 27px !important;
  font-size: 0.92rem !important;
  z-index: 6;
}
/* ボディ側の name は info アイコンと衝突しないように右に少し余白 */
.opt-card--topping .opt-card__body {
  padding-right: 36px !important;
}

.opt-card__info:hover {
  background: var(--color-accent-primary);
  color: var(--color-bg-base);
  border-color: var(--color-accent-primary);
  transform: scale(1.15);
}

.opt-card__info:active {
  transform: scale(0.95);
}

.opt-card--topping.is-selected .opt-card__info {
  background: var(--color-accent-primary);
  color: var(--color-bg-base);
  border-color: var(--color-accent-primary);
}

/* Spice level variant — vertical layout (icons above text) */
.opt-grid--spice {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  max-width: none;
}

.opt-card--spice {
  flex-direction: column;
  align-items: center;
  padding: 18px 12px 14px;
  gap: 8px;
  text-align: center;
  min-height: 140px;
  justify-content: flex-start;
}

.opt-card__spice-icons {
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: 4px;
}

.opt-card__spice-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin: 0;
  color: var(--color-text-primary);
}

.opt-card__spice-note {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  margin: 0;
  line-height: 1.4;
}

.opt-card__spice-extra {
  font-family: var(--font-number);
  font-size: 0.9rem;
  color: var(--color-accent-secondary);
  font-weight: 700;
  margin-top: auto;
  padding: 4px 10px;
  background: var(--accent-tint-2);
  border-radius: 100px;
}

/* Help text */
.wiz-help {
  font-size: 0.92rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  margin: 0 0 16px;
}

/* ===== Sticky Bottom Bar (running total) ===== */
.wiz-bottom {
  position: sticky;
  bottom: 0;
  /* Solid background — previously a transparent-top gradient was eating
     clicks meant for option cards (mains/sizes) directly above the bar */
  background: rgba(20, 17, 13, 0.96);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  /* padding-bottom にホームバー (iPhone safe-area-inset-bottom) を加算して
     ホームインジケータと内容が被らないようにする */
  padding: 24px 28px calc(24px + env(safe-area-inset-bottom, 0px)) 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--color-divider);
  z-index: 5;
}

/* Soft fade just ABOVE the bar (visual continuity), no click capture */
.wiz-bottom::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(180deg, transparent, rgba(20, 17, 13, 0.55));
  pointer-events: none;
}
/* ライト系テーマ(白地)では、黒いフッターの上に出る暗いフェードがグレーの
   汚れのように見えるため出さない。ダーク系テーマでは自然なので維持する。 */
[data-theme="linen"] .wiz-bottom::before,
[data-theme="garden"] .wiz-bottom::before,
[data-theme="paper"] .wiz-bottom::before,
[data-theme="citrus"] .wiz-bottom::before {
  display: none;
}

.wiz-bottom__total-label {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--color-text-tertiary);
  margin: 0;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 「テイクアウト価格」表示: 合計に上乗せ料金が含まれるときだけ出す。
   合計が動いて初めて出るので「これは持ち帰り価格だ」と認識できる。 */
.wiz-bottom__takeout-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  /* 文字は本文色でテーマ問わず可読、アクセントは枠線で。
     (ベタ塗り+白文字は明るいアクセントのテーマで読めなくなる) */
  background: var(--accent-tint-2, rgba(232, 155, 59, 0.16));
  color: var(--color-text-primary, #fff);
  border: 1px solid var(--accent-line, rgba(232, 155, 59, 0.32));
  white-space: nowrap;
}
.wiz-bottom__takeout-tag.is-hidden {
  display: none;
}

.wiz-bottom__total-value {
  font-family: var(--font-number);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-accent-secondary);
  letter-spacing: 0.02em;
  line-height: 1;
}

.wiz-bottom__cur {
  font-size: 0.55em;
  opacity: 0.8;
  margin-right: 4px;
}

.wiz-bottom__suffix {
  font-size: 0.45em;
  color: var(--color-text-tertiary);
  font-family: var(--font-body);
  font-weight: 400;
  margin-left: 8px;
}

.wiz-bottom__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.wiz-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.wiz-btn--primary {
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-warm));
  color: var(--color-bg-base);
  box-shadow: 0 4px 14px var(--accent-glow);
}

.wiz-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--accent-glow);
}

.wiz-btn--ghost {
  background: var(--fill-2);
  color: var(--color-text-secondary);
}

.wiz-btn--ghost:hover {
  background: var(--fill-3);
  color: var(--color-text-primary);
}

/* ===== Mode A (Screen-flow) Specific ===== */
.wizard.is-mode-a .wiz-step {
  display: none;
}

.wizard.is-mode-a .wiz-step.is-active {
  display: block;
}

.wizard.is-mode-a .wiz-step__header {
  pointer-events: none;
}

.wizard.is-mode-a .wiz-step__chevron {
  display: none;
}

.wizard.is-mode-a .wiz-step__body {
  max-height: none !important;
  overflow: visible !important;
}

/* Progress bar (Mode A) */
.wiz-progress {
  display: none;
  padding: 22px 28px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid var(--color-divider);
}

.wizard.is-mode-a .wiz-progress {
  display: block;
}

.wiz-progress__bar {
  height: 4px;
  background: var(--fill-3);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 8px;
}

.wiz-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-warm));
  border-radius: 100px;
  transition: width 0.5s var(--ease-out);
}

.wiz-progress__text {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.1em;
  font-weight: 600;
  margin: 0;
}

.wiz-progress__text strong {
  color: var(--color-accent-secondary);
  font-family: var(--font-number);
  font-size: 1.1em;
}

/* ===== Order Summary Modal ===== */
.wiz-summary {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.wiz-summary.is-open {
  display: flex;
}

.wiz-summary__card {
  width: 100%;
  max-width: 540px;
  background: linear-gradient(180deg, var(--color-bg-elevated), var(--color-bg-surface));
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: var(--shadow-elevated);
  max-height: 90vh;
  overflow-y: auto;
  animation: scaleIn var(--duration-normal) var(--ease-bounce);
}

.wiz-summary__title-block {
  text-align: center;
  margin-bottom: 24px;
}

.wiz-summary__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-warm));
  color: var(--color-bg-base);
  font-size: 1.6rem;
  margin-bottom: 12px;
  animation: scaleIn 0.5s var(--ease-bounce);
}

.wiz-summary__eyebrow {
  display: block;
  color: var(--color-accent-secondary);
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.wiz-summary__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0;
}

.wiz-summary__rows {
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  padding: 16px 0;
  margin-bottom: 20px;
}

.wiz-summary__row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 0.95rem;
  align-items: baseline;
  border-bottom: 1px dashed var(--hairline-3);
}

.wiz-summary__row:last-child {
  border-bottom: none;
}

.wiz-summary__row-label {
  color: var(--color-text-secondary);
}

.wiz-summary__row-value {
  color: var(--color-text-primary);
  font-weight: 600;
  text-align: right;
}

.wiz-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
}

.wiz-summary__total-label {
  font-size: 1rem;
  color: var(--color-text-secondary);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* テイクアウト価格の明示 (注文内容モーダル)。文字は本文色で全テーマ可読、
   アクセントは枠線で。 */
.wiz-summary__takeout-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-tint-2, rgba(232, 155, 59, 0.16));
  color: var(--color-text-primary, #fff);
  border: 1px solid var(--accent-line, rgba(232, 155, 59, 0.32));
  white-space: nowrap;
}
.wiz-summary__takeout-note {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  text-align: right;
  margin: -16px 0 20px;
}

.wiz-summary__total-value {
  font-family: var(--font-number);
  font-size: 2.4rem;
  color: var(--color-accent-secondary);
  font-weight: 700;
}

.wiz-summary__hint {
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
  text-align: center;
  margin: 0 0 20px;
  padding: 14px;
  background: var(--accent-tint-1);
  border: 1px solid var(--accent-tint-3);
  border-radius: 12px;
}

.wiz-summary__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== Mobile responsive ===== */
@media (max-width: 640px) {
  .wiz-step__header {
    padding: 18px 16px;
  }
  .wiz-step__body-inner {
    padding: 0 16px 20px;
  }
  .opt-grid--sizes {
    grid-template-columns: repeat(2, 1fr);
  }
  .opt-grid--toppings {
    grid-template-columns: 1fr;
  }
  .wiz-bottom {
    padding: 16px 18px;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .wiz-bottom__total-value {
    font-size: 1.8rem;
  }
}

/* Mode toggle indicator (subtle) */
.wiz-mode-badge {
  position: absolute;
  top: -8px;
  right: 12px;
  background: var(--color-accent-secondary);
  color: var(--color-bg-base);
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}