/* ==========================================================================
   seat-map.css — ผังที่นั่งทั้งหมดในเฟรมเดียว (VIP / ม่วง / เขียว / เหลือง)
   ========================================================================== */

.seat-map-frame { border: 1px solid var(--line); border-radius: 1rem; background: rgba(0, 0, 0, .22); padding: .5rem; }
.seat-map-scroll {
  overflow-x: auto; padding: .3rem .15rem 1rem;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-behavior: smooth;
}
.seat-map { width: 100%; min-width: 780px; padding: 1rem; }

.stage {
  margin: 0; padding: .65rem; text-align: center;
  border-radius: 50% 50% 12px 12px; letter-spacing: .25em; font-weight: 800; color: #291a02;
  background: linear-gradient(90deg, #8c5d10, #f2d16c, #8c5d10); box-shadow: 0 8px 0 #3e2605;
}

.seat-groups { display: grid; gap: 1.25rem; }
.seat-tier { display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 1.7fr) minmax(min-content, 1fr); gap: .65rem; }
.seat-tier-with-aisles { grid-template-columns: minmax(min-content, 1fr) 1.4rem minmax(min-content, 1.7fr) 1.4rem minmax(min-content, 1fr); }
/* แถว VIP มีป้ายเวทีอยู่แถวกริดที่ 1 (คอลัมน์เดียวกับโซน B1 กลาง) แล้วการ์ดโซนอยู่แถวกริดที่ 2 */
.seat-tier-with-stage { row-gap: 1.25rem; }
.aisle-note { color: rgba(248, 215, 122, .55); font-size: .72rem; letter-spacing: .16em; text-align: center; margin: 0; }
.aisle-col { display: flex; align-items: center; justify-content: center; min-height: 60px; }

/* ป้าย "ช่องทางเดิน" ระหว่างการ์ดโซน (VIP / เขียว / เหลือง ที่ไม่มีทางเดินกลางเป็นคอลัมน์อยู่แล้ว)
   ตัวหนังสือเป็นแนวนอนปกติแล้วหมุน 90° ตามเข็มนาฬิกา ทำให้ขอบล่างของตัวหนังสือชี้ไปทางซ้ายของการ์ด */
.aisle-divider {
  display: flex; align-items: center; justify-content: center; overflow: visible;
  border-left: 1px dashed rgba(213, 168, 61, .28);
  border-right: 1px dashed rgba(213, 168, 61, .28);
}
.aisle-divider span {
  display: inline-block; white-space: nowrap; transform: rotate(90deg);
  color: rgba(248, 215, 122, .5); font-size: .68rem; font-weight: 600; letter-spacing: .2em;
}

.zone-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: .75rem; background: rgba(255, 255, 255, .025); }
.zone-title { padding: .42rem .5rem; font-size: .78rem; font-weight: 700; text-align: center; color: #fff1d5; }

/* แถบสีของแต่ละประเภทโซน — ใช้ร่วมกันทั้งหัวโซนในผังที่นั่งและแถบในการ์ดราคา (แทนอิโมจิ) */
.zone-vip .zone-title, .zone-vip .price-card-band { background: #b83239; color: #fff1d5; }
.zone-purple .zone-title, .zone-purple .price-card-band { background: #8e58bf; color: #fff1d5; }
.zone-green .zone-title, .zone-green .price-card-band { background: #49a978; color: #082219; }
.zone-yellow .zone-title, .zone-yellow .price-card-band { background: #ffd500; color: #1a1300; }

/* หัวการ์ดราคา (VIP / ธรรมดาสีม่วง) ใช้ตัวหนังสือสีดำแทนสีขาว อ่านง่ายกว่าบนพื้นสีนี้ */
.zone-vip .price-card-band, .zone-purple .price-card-band { color: #000; }

.rows { display: flex; flex-direction: column; gap: .25rem; padding: .45rem; }
.seat-row { display: flex; align-items: center; justify-content: center; gap: 2px; }
.row-label { width: 16px; flex: none; color: var(--gold-soft); font-size: .72rem; font-weight: 700; text-align: center; }
.seat-run { display: flex; gap: 2px; flex-wrap: nowrap; }

.seat {
  width: 19px; height: 20px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 4px 4px 7px 7px;
  background: var(--seat-available); color: #fff; cursor: pointer; font-size: 8px; line-height: 1; transition: .15s ease;
}
.seat:hover:not(:disabled) { transform: translateY(-2px); background: var(--seat-available-hover); }
.seat.is-selected { border: 3px solid var(--gold-soft); background: #b82d34; box-shadow: 0 0 14px rgba(241, 205, 98, .55); }
.seat.is-booked { background: var(--seat-booked); border-color: var(--seat-booked-border); color: #d5ffe9; cursor: not-allowed; font-weight: 900; font-size: 10px; }

@media (max-width: 900px) {
  .seat-map { min-width: 720px; }
}

/* มือถือ: ที่นั่งแตะง่ายขึ้นเล็กน้อย และช่องทางเดินแนวตั้งแคบลงอีกนิดให้เหมาะกับจอแคบ */
@media (max-width: 480px) {
  .seat { width: 22px; height: 23px; font-size: 9px; }
  .seat.is-booked { font-size: 11px; }
  .seat-tier-with-aisles { grid-template-columns: minmax(min-content, 1fr) 1.1rem minmax(min-content, 1.7fr) 1.1rem minmax(min-content, 1fr); }
}