/* ============================================================
   Baoji Sport — Mobile LIFF custom styles
   ============================================================ */
* { -webkit-tap-highlight-color: transparent; }
body { font-family: 'Prompt', sans-serif; -webkit-font-smoothing: antialiased; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block; line-height: 1; vertical-align: middle;
}
.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Phone shell — แสดงผลแบบมือถือเมื่อเปิดบนจอกว้าง */
.device {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  background: #fbf9f8;
  position: relative;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 24px 60px -20px rgba(0,0,0,0.25);
}
@media (min-width: 480px) {
  body.has-device { background: #e7e5e4; padding: 0; }
}

.promo-gradient { background: linear-gradient(135deg, #b7000c 0%, #e60012 100%); }
.line-gradient  { background: linear-gradient(135deg, #06c755 0%, #05a648 100%); }
.qr-gradient    { background: linear-gradient(135deg, #1b1c1c 0%, #303031 100%); }
.action-shadow  { box-shadow: 0 4px 14px rgba(230, 0, 18, 0.28); }
.card-shadow    { box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); }

/* Tabs (Upcoming / History etc.) */
.seg-tab.is-active { border-bottom: 3px solid #b7000c; color: #b7000c; font-weight: 700; }

/* Booking flow time slot selected marker */
.slot-selected { position: relative; }
.slot-selected::after {
  content: ""; position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; background: #fff; border-radius: 50%;
}

/* Inputs */
.field {
  width: 100%; background: #fff; border: 1px solid #e9bcb6;
  border-radius: 8px; padding: 12px 14px; font-size: 16px; color: #1b1c1c;
}
.field:focus { outline: none; border-color: #b7000c; box-shadow: 0 0 0 3px rgba(183,0,12,0.12); }

/* Chips */
.chip {
  border: 1px solid #e9bcb6; border-radius: 9999px; padding: 6px 14px;
  font-size: 13px; font-weight: 600; color: #5f5e5e; background: #fff; cursor: pointer;
}
.chip.is-active { background: #b7000c; color: #fff; border-color: #b7000c; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%) translateY(20px);
  background: #1b1c1c; color: #fff; padding: 12px 18px; border-radius: 10px;
  font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none;
  transition: all 220ms ease; z-index: 200; max-width: 88%; text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Bottom sheet / modal */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 150;
  display: none; align-items: flex-end; justify-content: center;
}
.sheet-backdrop.is-open { display: flex; }
.sheet {
  width: 100%; max-width: 440px; background: #fbf9f8;
  border-radius: 20px 20px 0 0; padding: 8px 20px 28px;
  max-height: 90vh; overflow-y: auto; animation: sheet-up 260ms ease;
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet__grip { width: 40px; height: 4px; border-radius: 9999px; background: #d1d5db; margin: 8px auto 14px; }

/* Status pills */
.pill { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.03em; padding:3px 8px; border-radius:6px; }
.pill--confirmed { background:#16a34a; color:#fff; }
.pill--wait      { background:#717272; color:#fff; }
.pill--pending   { background:#f59e0b; color:#fff; }
.pill--cancelled { background:#ffdad6; color:#93000a; }
.pill--done      { background:#1b1c1c; color:#fff; }