/* میوو سفارش‌ها — پیش‌نمایش محلی پیگیری خرید (با توکن‌های MDS وقتی لایهٔ pages فعال است) */
.od1 {
  --od-coral: var(--ds-action, #d2402f);
  --od-ink: var(--ds-ink-1, #22304a);
  --od-ink2: var(--ds-ink-2, #4b556a);
  --od-ink3: var(--ds-ink-3, #646c7e);
  --od-line: color-mix(in srgb, var(--od-ink) 12%, transparent);
  --od-surface: var(--ds-surface-1, #fff);
  --od-soft: var(--ds-surface-2, #f5f7fb);
  --od-success: var(--ds-success, #087665);
  --od-success-soft: var(--ds-success-soft, #e4f7f1);
  --od-warning: var(--ds-warning, #945f00);
  --od-warning-soft: var(--ds-warning-soft, #fff3d4);
  --od-danger: var(--ds-danger, #b42318);
  --od-danger-soft: var(--ds-danger-soft, #fff0ee);
  --od-ai: var(--ds-ai, #0b6478);
  --od-ai-soft: var(--ds-ai-soft, #e7f7f8);
  --od-radius: var(--ds-radius-xl, 22px);
  --od-shadow: var(--ds-elev-2, 0 10px 28px rgba(26, 40, 64, .08));
  padding: clamp(20px, 4vw, 48px) 0 calc(40px + var(--mio-nav-h, 0px));
  color: var(--od-ink);
}
.od1-wrap { width: min(920px, 100%); margin: 0 auto; padding: 0 clamp(14px, 3vw, 24px); display: grid; gap: 18px; }
.od1-card {
  background: color-mix(in srgb, var(--od-surface) 94%, transparent);
  border: 1px solid var(--od-line);
  border-radius: var(--od-radius);
  box-shadow: var(--od-shadow);
}
.od1-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(140px, .7fr);
  gap: 20px;
  align-items: center;
  padding: clamp(22px, 4vw, 36px);
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--od-ai) 14%, transparent), transparent 40%),
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--od-coral) 12%, transparent), transparent 36%),
    var(--od-surface);
}
.od1-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--od-coral); font-size: .78rem; font-weight: 800;
}
.od1-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--od-coral); box-shadow: 0 0 0 5px color-mix(in srgb, var(--od-coral) 18%, transparent); }
.od1-hero h1 {
  margin: 8px 0 10px;
  font: 800 clamp(1.7rem, 4.4vw, 2.6rem)/1.35 Estedad, Vazirmatn, sans-serif;
}
.od1-hero h1 em { font-style: normal; color: var(--od-ai); }
.od1-hero p { margin: 0 0 16px; color: var(--od-ink2); max-width: 46ch; }
.od1-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.od1-hero__art { justify-self: end; width: min(220px, 100%); }
.od1-hero__art img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 28px rgba(26, 40, 64, .14)); }
.od1-status {
  display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0;
  padding: 6px 12px; border-radius: 999px; background: var(--od-warning-soft); color: var(--od-warning);
  font-size: .78rem; font-weight: 700;
}
.od1-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.od1-btn, .od1-textbtn {
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 750; cursor: pointer;
  transition: transform .12s var(--ds-ease-out, ease-out), box-shadow .18s ease-out, background .18s ease-out;
}
.od1-btn { color: #fff; background: var(--od-coral); box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--od-coral) 85%, transparent); }
.od1-btn:hover { filter: brightness(.97); }
.od1-btn:active { transform: scale(.98); }
.od1-btn--soft { color: var(--od-ai); background: var(--od-ai-soft); box-shadow: none; }
.od1-btn--ghost { color: var(--od-ink2); background: transparent; border: 1px solid var(--od-line); box-shadow: none; }
.od1-btn--danger { color: var(--od-danger); background: var(--od-danger-soft); box-shadow: none; }
.od1-btn:disabled { opacity: .55; cursor: wait; }
.od1-textbtn { padding: 0 4px; color: var(--od-ai); background: transparent; min-height: 40px; }
.od1-textbtn svg, .od1-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.od1-btn:focus-visible, .od1-textbtn:focus-visible, .od1-chip:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--od-ai) 35%, transparent); outline-offset: 2px;
}

.od1-panel { padding: clamp(18px, 3vw, 28px); display: grid; gap: 16px; }
.od1-head h2 { margin: 2px 0 4px; font: 800 1.25rem/1.4 Estedad, Vazirmatn, sans-serif; }
.od1-head p { margin: 0; color: var(--od-ink2); font-size: .92rem; }
.od1-overline { color: var(--od-ink3); font-size: .72rem; font-weight: 800; letter-spacing: .04em; }

.od1-state { display: grid; gap: 14px; justify-items: start; }
.od1-state[hidden] { display: none; }
.od1-empty {
  padding: 36px 18px; text-align: center; justify-items: center;
  background: var(--od-soft); border: 1px dashed color-mix(in srgb, var(--od-ink) 18%, transparent); border-radius: 18px;
}
.od1-empty img { width: 120px; height: auto; }
.od1-empty h2 { margin: 8px 0 4px; font: 800 1.2rem/1.4 Estedad, Vazirmatn, sans-serif; }
.od1-empty p { margin: 0 0 14px; color: var(--od-ink2); max-width: 36ch; }

.od1-list { display: grid; gap: 12px; }
.od1-item {
  display: grid; gap: 12px; padding: 16px 18px;
  background: var(--od-surface); border: 1px solid var(--od-line); border-radius: 18px;
  transition: border-color .18s ease-out, box-shadow .18s ease-out, transform .18s ease-out;
}
.od1-item:hover { border-color: color-mix(in srgb, var(--od-ai) 35%, var(--od-line)); box-shadow: var(--od-shadow); }
.od1-item.is-open { border-color: color-mix(in srgb, var(--od-ai) 45%, transparent); box-shadow: var(--od-shadow); }
.od1-item__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.od1-item__top h3 { margin: 0; font: 750 1rem/1.4 Estedad, Vazirmatn, sans-serif; font-variant-numeric: tabular-nums; }
.od1-item__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--od-ink3); font-size: .78rem; }
.od1-item__meta b { color: var(--od-ink); font-weight: 750; }
.od1-pill {
  padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800;
  color: var(--od-ai); background: var(--od-ai-soft);
}
.od1-pill--warn { color: var(--od-warning); background: var(--od-warning-soft); }
.od1-pill--ok { color: var(--od-success); background: var(--od-success-soft); }
.od1-pill--off { color: var(--od-ink3); background: var(--od-soft); }
.od1-pill--danger { color: var(--od-danger); background: var(--od-danger-soft); }

.od1-track {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
  margin: 2px 0 4px;
}
.od1-track li {
  list-style: none; display: grid; gap: 6px; justify-items: center; text-align: center;
  color: var(--od-ink3); font-size: .68rem; font-weight: 700;
}
.od1-track i {
  width: 100%; height: 6px; border-radius: 999px; background: var(--od-soft);
  border: 1px solid var(--od-line);
}
.od1-track .is-done i { background: var(--od-success); border-color: transparent; }
.od1-track .is-current i { background: var(--od-coral); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--od-coral) 16%, transparent); }
.od1-track .is-stopped i { background: var(--od-danger); border-color: transparent; }
.od1-track .is-done, .od1-track .is-current { color: var(--od-ink); }

.od1-lines { margin: 0; padding: 0; display: grid; gap: 8px; }
.od1-lines li {
  list-style: none; display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 12px; background: var(--od-soft); border-radius: 12px; font-size: .88rem;
}
.od1-lines small { color: var(--od-ink3); }
.od1-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.od1-note {
  display: flex; gap: 10px; align-items: flex-start; margin: 0;
  padding: 12px 14px; border-radius: 14px; background: var(--od-ai-soft); color: var(--od-ink2); font-size: .86rem;
}
.od1-note svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--od-ai); stroke-width: 1.8; margin-top: 2px; }
.od1-msg { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: .84rem; }
.od1-msg.is-error { color: var(--od-danger); background: var(--od-danger-soft); }
.od1-msg.is-ok { color: var(--od-success); background: var(--od-success-soft); }

.od1-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.od1-chip {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--od-line);
  background: var(--od-surface); color: var(--od-ink2); font: inherit; font-weight: 700; cursor: pointer;
}
.od1-chip[aria-pressed="true"] { color: #fff; background: var(--od-ink); border-color: transparent; }

.od1-confirm {
  border: 0; padding: 0; max-width: min(420px, calc(100% - 24px));
  background: var(--od-surface); border-radius: 22px; box-shadow: var(--od-shadow); color: var(--od-ink);
}
.od1-confirm::backdrop { background: rgba(20, 28, 44, .42); }
.od1-confirm__body { padding: 22px; display: grid; gap: 14px; }
.od1-confirm h2 { margin: 0; font: 800 1.15rem/1.4 Estedad, Vazirmatn, sans-serif; }
.od1-confirm p { margin: 0; color: var(--od-ink2); font-size: .92rem; }
.od1-confirm__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

@media (max-width: 760px) {
  .od1-hero { grid-template-columns: 1fr; }
  .od1-hero__art { justify-self: center; width: min(160px, 46vw); order: -1; }
  .od1-track { grid-template-columns: 1fr; }
  .od1-track li { grid-template-columns: 28px 1fr; align-items: center; text-align: start; justify-items: start; }
  .od1-track i { width: 28px; height: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .od1-btn, .od1-item { transition: none; }
}