@charset "UTF-8";
/* แผนภาพ "เดินตามลูกค้า" (หน้าแรก v2 #flow · เจ้าของเลือกแบบ 1 จาก /lab/flow 30 ต.ค.) — ห้ามขอบสีด้านเดียว */
.walk__inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; align-items: center; min-height: 520px; }
.walk__road { position: relative; padding-top: 120px; }
.walk__line { position: absolute; left: 12.5%; right: 12.5%; top: 150px; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.walk__line i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--indigo), var(--gold)); }
.walk__cat { position: absolute; top: 34px; left: 12.5%; width: 120px; height: auto; transform: translateX(-50%); filter: drop-shadow(0 12px 14px rgba(21, 24, 51, .18)); z-index: 2; }
.walk__stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.walk__stop { position: relative; text-align: center; padding-top: 50px; }
.walk__stop::before { content: ""; position: absolute; left: 50%; top: 21px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--line); transition: box-shadow .3s, background .3s; }
.walk__stop.is-on::before { background: var(--indigo); box-shadow: 0 0 0 6px rgba(47, 63, 176, .18); }
.walk__stop > b { font: 600 18px/1.3 var(--f-display); }
.wcard { margin-top: 14px; padding: 14px; border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow-sm); text-align: left; opacity: .25; transform: translateY(14px) scale(.97); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.walk__stop.is-on .wcard { opacity: 1; transform: none; }
.wcard__k { display: block; font-size: 12px; font-weight: 600; color: var(--indigo); margin-bottom: 8px; }
.mock { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.mock--bar { padding: 10px 12px; border-radius: 10px; background: #c2410c; color: #fff; text-align: center; font-weight: 600; }
.mock--bar em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; background: rgba(0, 0, 0, .22); border-radius: 999px; padding: 2px 8px; }
.mock__tag { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--red); color: #fff; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.mock--price s { color: var(--ink-2); }
.mock--price strong { font: 600 18px var(--f-display); color: var(--red); white-space: nowrap; }
.mock--ship strong { color: var(--ok); }
.mock__meter { display: block; margin-top: 8px; height: 8px; border-radius: 8px; background: var(--mist); overflow: hidden; }
.mock__meter i { display: block; height: 100%; width: 100%; background: var(--ok); }
.mock--tier { padding: 12px; border-radius: 8px; background: linear-gradient(135deg, #e9ecf4, #c9cfdd); }
.mock--tier span { display: block; font: 600 18px var(--f-display); }
.receipt { padding: 22px; border-radius: var(--r-lg); background: var(--ink); color: #fff; box-shadow: var(--shadow); }
.receipt__h { margin: 0 0 12px; font: 600 17px var(--f-display); }
.receipt__h small { display: block; font: 400 12px var(--f-body); color: rgba(255, 255, 255, .6); }
.receipt__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-height: 140px; }
.receipt__rows li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, .85); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.receipt__rows li.is-on { opacity: 1; transform: none; }
.receipt__rows .ok { color: #7fd8a8; }
.receipt__total { display: flex; align-items: baseline; gap: 6px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .18); }
.receipt__total span { flex: 1; color: rgba(255, 255, 255, .7); font-size: 14px; }
.receipt__total b { font: 600 34px/1 var(--f-display); color: var(--gold); }


@media (max-width: 860px) {
  /* จอแคบ: เส้นเวลาแนวตั้ง แมวเดินลงตามเส้น (js/walk.js ใส่ .is-vertical) · ไม่มี JS / ลดการเคลื่อนไหว = การ์ดครบแบบนิ่ง */
  .walk__inner { grid-template-columns: 1fr; gap: 26px; }
  .walk__road { padding: 6px 0 6px 62px; }
  .walk__line { display: block; left: 25px; right: auto; top: 0; bottom: 0; width: 6px; height: auto; }
  .walk__line i { transform-origin: 50% 0; transform: scaleY(1); background: linear-gradient(180deg, var(--indigo), var(--gold)); }
  .walk__cat { display: none; }
  .walk__stops { grid-template-columns: 1fr; gap: 22px; }
  .walk__stop { padding-top: 0; text-align: left; }
  .walk__stop::before { left: -48px; top: 2px; margin-left: 0; }
  .walk__stop > b { font-size: 17px; }
  .wcard { margin-top: 8px; }
  .wcard, .receipt__rows li { opacity: 1; transform: none; }
  .walk.is-vertical .walk__line i { transform: scaleY(0); }
  .walk.is-vertical .walk__cat { display: block; left: 28px; top: 0; width: 60px; transform: translate(-50%, -62%); transition: top .12s linear; }
  .walk.is-vertical .wcard { opacity: .3; transform: translateX(10px); }
  .walk.is-vertical .walk__stop.is-on .wcard { opacity: 1; transform: none; }
  .walk.is-vertical .receipt__rows li { opacity: 0; }
  .walk.is-vertical .receipt__rows li.is-on { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .wcard, .receipt__rows li { opacity: 1; transform: none; } }

/* มือถือ (เจ้าของสั่ง 30 ต.ค.): จุดเล็กลงและอยู่กึ่งกลางเส้น · เส้นไล่สีฟ้า → น้ำเงิน
   เส้นกว้าง 6px เริ่มที่ 25px ของราง = กึ่งกลาง 28px · การ์ดเริ่มที่ 62px → จุด 14px วางที่ 28 − 7 − 62 = −41px */
@media (max-width: 860px) {
  .walk__stop::before { width: 14px; height: 14px; left: -41px; top: 6px; box-shadow: 0 0 0 3px var(--line); }
  .walk__stop.is-on::before { box-shadow: 0 0 0 4px rgba(47, 63, 176, .2); }
  .walk__line i { background: linear-gradient(180deg, #5ab4ff, var(--indigo)); }
}