/* =========================================================================
   สไตล์เฉพาะโปรเจกต์ — เขียนเพิ่มที่นี่เท่านั้น (ชื่อไฟล์ site.css ไม่เกี่ยวกับ ke-site.css ของธีม)

   ห้ามแก้ css/ke-core.css, css/ke-site.css และ css/brands/*.css
   ไฟล์เหล่านั้นคัดลอกมาจาก KE Theme และจะถูกเขียนทับเมื่ออัปเดตธีม (templates/dotnet/sync-assets.sh)

   ใช้ token ของธีมแทนการใส่สีตรง ๆ เช่น
     .my-panel { background: var(--cs-surface); color: var(--cs-ink); }
   ========================================================================= */

/* Crystal Sports: หน้าที่เนื้อหาสั้น (login, ชำระเงิน) footer ต้องอยู่ล่างจอ ไม่ลอยกลางจอ */
body.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body.site > .site-main {
  flex: 1 0 auto;
}
/* หน้า login / สมัคร / OTP: พื้นเทาเต็มถึง footer ไม่เหลือแถบขาว */
.site-main:has(> .site-auth) {
  background: var(--cs-surface);
}

/* Crystal Sports: หน้าจองใช้ลิงก์ (ทำงานโดยไม่ต้องมี JS) จึงใช้ .is-selected / .is-disabled แทน :has(input:checked) — ค่าเดียวกับธีม */
.site .choice-card.is-selected {
  box-shadow: inset 0 0 0 2px var(--cs-primary);
  background: color-mix(in srgb, var(--cs-primary) 3%, var(--cs-card));
}
.site .choice-card.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.choice-card.is-selected + .choice-detail,
.choice-card.is-selected .choice-detail {
  display: block;
}
.date-chip.is-selected {
  background: var(--cs-primary);
  color: var(--cs-on-primary);
  box-shadow: none;
}
.date-chip.is-selected .date-dow,
.date-chip.is-selected .date-mon {
  color: inherit;
  opacity: 0.8;
}
.date-chip.is-disabled {
  background: var(--cs-surface);
  color: var(--cs-placeholder);
  box-shadow: none;
  cursor: not-allowed;
}
.date-chip.is-disabled .date-dow,
.date-chip.is-disabled .date-mon {
  color: var(--cs-placeholder);
}
/* วันที่มีสนามที่เลือกไว้ (ตะกร้าข้ามวัน) */
.date-chip.has-pick::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cs-accent, var(--cs-primary));
}
.date-chip.is-selected.has-pick::after { background: var(--cs-on-primary); }
.summary-day { margin-top: 12px; font-size: 0.875rem; font-weight: 600; }
.slot.is-selected {
  background: var(--cs-primary);
  color: var(--cs-on-primary);
  box-shadow: none;
}
.slot.is-selected .slot-meta {
  color: inherit;
  opacity: 0.85;
}
.slot.is-disabled {
  background: var(--cs-surface);
  box-shadow: none;
  color: var(--cs-placeholder);
  cursor: not-allowed;
}
.slot.is-disabled .slot-time {
  text-decoration: line-through;
}
.slot.is-disabled .slot-meta {
  color: var(--cs-placeholder);
}
.choice-card.is-selected {
  box-shadow: inset 0 0 0 2px var(--cs-primary);
}
a.date-chip, a.slot, a.choice-card { text-decoration: none; color: inherit; }
a.slot.is-disabled, a.choice-card.is-disabled { pointer-events: none; }
.qr-pay img { width: 100%; max-width: 280px; height: auto; display: block; margin: 0 auto; background: #fff; padding: 8px; border-radius: 12px; }

/* ---- ผังคอร์ต (หน้าจอง ขั้น 4) เหมือนเว็บเดิม: ตาราง 3 ช่องตาม sort_order ---- */
.court-map { border-radius: 14px; padding: 16px 12px 12px; color: #fff; }
.court-map.is-teal { background: #005859; }
.court-map.is-slate { background: #2a3e52; }
.court-map-title { font-size: 1.15rem; font-weight: 600; margin: 0 4px 12px; }
.court-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; align-items: center; }
.court-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1.5px solid transparent;
  border-radius: 10px; color: #fff; text-decoration: none; text-align: center; transition: background .15s, border-color .15s; }
.court-tile img { width: 64px; max-width: 100%; height: auto; border-radius: 3px; box-shadow: 0 0 18px rgba(0, 0, 0, .25); }
.court-tile.is-wide { grid-column: span 2; }
.court-tile.is-wide img { width: 100%; max-width: 300px; }
.court-tile.is-tall img { width: 80%; max-width: 110px; }
.court-name { font-size: .95rem; font-weight: 500; line-height: 1.2; }
.court-status { font-size: .75rem; opacity: .8; }
a.court-tile:hover { background: rgba(255, 255, 255, .08); }
.court-tile.is-selected { border-color: #fff; background: rgba(255, 255, 255, .12); }
.court-tile.is-selected .court-status { opacity: 1; font-weight: 600; }
.court-tile.is-disabled { opacity: .4; pointer-events: none; }
.court-tile.is-disabled img { filter: grayscale(.8); }
.court-tile:focus-visible { outline: 2px solid #d6ff22; outline-offset: 2px; }
.court-map-loc { margin-top: 14px; text-align: center; letter-spacing: .3em; text-transform: uppercase; font-size: 1.1rem; opacity: .35; }
@media (min-width: 768px) { .court-tile img { width: 80px; } .court-map { padding: 20px 18px 16px; } }

/* ---- มือถือ / แท็บเล็ต (ต้นแบบ docs/prototype/customer-click) ---------------------------------
   แถบล่างของธีมเว้นที่ด้วย .site:has(> .mobile-cta) แต่ .mobile-cta อยู่ใน <main> จึงไม่ตรง → เนื้อหาท้ายหน้าถูกบัง */
@media (max-width: 991px) {
  .site:has(.mobile-cta) { padding-bottom: calc(76px + var(--site-safe-b)); }
  .site:has(.mobile-cta) .back-to-top { bottom: calc(76px + 16px + var(--site-safe-b)); }
  /* แท็บเล็ต: หน้าจองเป็นคอลัมน์เดียว (< 992px) สรุปอยู่ท้ายหน้า → ใช้แถบปุ่มล่างเหมือนมือถือ */
  .mobile-cta { display: flex; transition: transform .2s ease; }
  .mobile-cta.is-hidden { transform: translateY(110%); }
}
/* แท็บเล็ต: เมนูบนหุบเป็นปุ่ม ☰ ตั้งแต่ < 1100px จึงแสดง tabbar ต่อ (จัดกลาง ไม่ยืดเต็มจอ) */
@media (min-width: 768px) and (max-width: 1099px) {
  .tabbar { display: grid; }
  .site:has(> .tabbar) { padding-bottom: calc(var(--site-tabbar-h) + var(--site-safe-b)); }
  .site:has(> .tabbar) .back-to-top { bottom: calc(var(--site-tabbar-h) + 16px + var(--site-safe-b)); }
}
/* แตะยอดรวมในแถบล่าง = เปิดรายการที่เลือก (ไม่มี JS = ลิงก์ไปสรุปท้ายหน้า) */
.mobile-cta-info[data-open] { padding: 4px 8px 4px 0; min-height: var(--site-touch); justify-content: center; color: inherit; text-decoration: none; }
.mobile-cta-info .cta-more { display: inline-flex; align-items: center; gap: 2px; color: var(--cs-primary); font-weight: 600; }
/* สรุปการจอง: บรรทัดแรก คอร์ท · เวลา (ตัวเข้ม) · บรรทัดสอง ชื่อสาขาตัวเล็ก · ปุ่มลบเป็นไอคอนถังขยะวงกลม */
#bk-summary .summary-row { align-items: center; }
.summary-court { display: block; font-weight: 600; color: var(--cs-ink); }
.summary-loc { display: block; font-size: 12.5px; color: var(--cs-slate); }
.summary-price { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.summary-remove { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--cs-slate); text-decoration: none; transition: background .15s, color .15s; }
.summary-remove i { font-size: 16px; }
.summary-remove:hover, .summary-remove:focus-visible { background: color-mix(in srgb, var(--cs-danger, #d92d20) 10%, transparent); color: var(--cs-danger, #d92d20); }
/* ตัวเลขขั้นตอน (.steps ของธีม) */
.checkout-steps .step-label { font-size: 14px; }
/* ขั้นการจอง: เลื่อนมาถึงแล้วไม่ถูกหัวเว็บบัง (ลิงก์ในหน้าจองพากลับมาที่ขั้นเดิมด้วย #step-…) */
.booking-step { scroll-margin-top: calc(var(--site-header-h-sm) + 8px); }
/* 1. วันที่: แถบเลื่อนชนขอบจอ ให้รู้ว่าเลื่อนได้ และจิ้มง่ายขึ้น */
@media (max-width: 575px) {
  .date-strip { margin-inline: calc(var(--site-gutter) * -1); padding-inline: var(--site-gutter); scroll-padding-inline: var(--site-gutter); }
  .date-chip { width: 60px; height: 76px; }
  .date-day { font-size: 21px; }
}
/* 2. สาขา: 2 ช่องเคียงกันบนมือถือ */
.booking-loc .choice-card { padding-right: 16px; }
/* สาขาที่เลือก: พื้นสีหลักทึบเหมือนวัน/เวลาที่เลือก (กรอบบาง + พื้นจาง 3% ดูไม่ออกว่าเลือกอันไหน) */
.site .booking-loc .choice-card.is-selected { background: var(--cs-primary); color: var(--cs-on-primary); box-shadow: none; }
.booking-loc .choice-card.is-selected .choice-text { color: inherit; opacity: 0.8; }
.booking-loc .choice-card.is-selected .choice-icon { background: color-mix(in srgb, var(--cs-on-primary) 15%, transparent); color: inherit; }
@media (max-width: 575px) {
  .booking-loc.choice-list.is-2 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .booking-loc .choice-card { min-height: 0; padding: 12px; gap: 8px; }
  .booking-loc .choice-icon { display: none; }
  .booking-loc .choice-title { font-size: 14.5px; line-height: 1.3; }
}
/* 3. เวลา: มือถือ 4 คอลัมน์ · ชั่วโมงที่จบแล้วแสดงเป็นสีเทา (ไม่ซ่อน) */
@media (max-width: 575px) {
  .slot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .slot { min-height: 54px; }
  .slot-meta { font-size: 11.5px; }
}
/* 4. ผังคอร์ต: ย่อให้เห็นทั้งผังในจอเดียวบนมือถือ */
@media (max-width: 575px) {
  .court-map { padding: 12px 8px 10px; }
  .court-map-title { font-size: 1rem; margin-bottom: 8px; }
  .court-grid { gap: 6px 4px; }
  .court-tile { padding: 6px 2px; min-height: var(--site-touch); }
  .court-tile img { width: 40px; }
  .court-tile.is-tall img { width: 52px; }
  .court-tile.is-wide img { max-width: 170px; }
  .court-name { font-size: .875rem; }
  .court-map-loc { margin-top: 8px; font-size: .875rem; }
}
/* ยืนยันการจอง: วิธีชำระกระชับขึ้นบนมือถือ */
@media (max-width: 575px) {
  .pay-methods { gap: 8px; }
  .pay-methods .choice-card { min-height: 60px; padding-block: 10px; }
  .pay-methods .choice-icon { width: 36px; height: 36px; }
}

/* ---- หน้าแรก: แดชบอร์ดลูกค้า ---------------------------------------------------------------- */
.dash { --flow: 16px; }
.dash-section { padding-top: 32px; }
/* แบนเนอร์ทักทาย: navy ล้วน + เส้นคอร์ท (มุมบน) สีขาวจาง ~7% ชิดขวา — ให้กลิ่นกีฬาโดยไม่แย่งกล่อง Wallet
   (พื้นหลังหน้าอื่น = ลูกเทนนิส .site-main::after) */
.dash-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; min-height: 172px; padding: 24px 28px; border-radius: var(--site-radius-lg); background: var(--cs-navy-900); color: #fff; }
.dash-hero::after { content: ""; position: absolute; z-index: -1; top: 50%; right: -70px; width: 560px; aspect-ratio: 600 / 320; transform: translateY(-50%) rotate(-8deg); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 320' fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='3'%3E%3Crect x='20' y='20' width='560' height='280'/%3E%3Cpath d='M20 55H580M20 265H580M160 55V265M440 55V265M160 160H440'/%3E%3Cpath d='M300 12V308' stroke-width='5' stroke-opacity='.09'/%3E%3C/svg%3E") center / contain no-repeat; }
.dash-hero-date { margin: 0; font-size: 14px; color: rgb(255 255 255 / .85); }
.dash-hero h1 { margin: 2px 0 0; color: #fff; font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.15; }
@media (max-width: 575px) {
  .dash-section { padding-top: 16px; }
  .dash-hero { min-height: 196px; padding: 18px; align-content: space-between; }
  .dash-hero::after { top: 0; right: -120px; width: 420px; transform: rotate(-8deg); }   /* มือถือ: เส้นอยู่มุมขวาบน เหนือกล่อง Wallet */
}
/* พื้นหลังทุกหน้า (minimal + gimmick): พื้นขาวอมเทา + ลูกเทนนิสรูปจริง (images/tennis-ball.webp) ลูกใหญ่มุมขวาล่างของจอ (เงาบนพื้นใต้ลูก)
   · เลื่อนหน้าลง = ลูกกลิ้งไปทางซ้าย เลื่อนขึ้น = กลิ้งกลับ (scroll-driven animation · เบราว์เซอร์ที่ไม่รองรับ = ลูกอยู่นิ่ง)
   · body.ball-hop (site.js ใส่ให้เมื่อ <body data-ball-hop>) = ลูกเด้งหนึ่งครั้ง: ชำระเงินสำเร็จ / เลือกเวลา–สนาม
   · ตั้ง "ลดการเคลื่อนไหว" ในเครื่อง = ไม่ขยับ */
.site { background: #f7f8fa; }
.site-main { position: relative; isolation: isolate; --ball: 112px; --ball-r: 48px; --ball-b: 96px; --ball-roll: min(260px, 30vw); }   /* desktop: สูงพ้นท้ายเว็บ (64px) */
.site > .site-footer { position: relative; z-index: 1; }   /* ท้ายเว็บอยู่เหนือพื้นหลัง (main เป็น positioned จึงวาดทับท้ายเว็บถ้าไม่ยก) */
.site-main::before, .site-main::after { content: ""; position: fixed; z-index: -1; pointer-events: none; }
/* เงาบนพื้น (ไม่หมุน ตามลูกไปแนวนอน) */
.site-main::before { right: calc(var(--ball-r) + var(--ball) * .1); bottom: calc(var(--ball-b) - var(--ball) * .07); width: calc(var(--ball) * .8); height: calc(var(--ball) * .14);
  border-radius: 50%; background: radial-gradient(closest-side, rgb(7 19 62 / .16), transparent); }
.site-main::after { right: var(--ball-r); bottom: var(--ball-b); width: var(--ball); height: var(--ball);
  background: url(../images/tennis-ball.webp) center / contain no-repeat; }
@keyframes cs-ball-roll { to { transform: translateX(calc(var(--ball-roll) * -1)) rotate(-540deg); } }
@keyframes cs-ball-shadow { to { transform: translateX(calc(var(--ball-roll) * -1)); } }
@keyframes cs-ball-hop { 0%, 100% { translate: 0 0; } 30% { translate: 0 -60px; } 55% { translate: 0 0; } 72% { translate: 0 -18px; } 86% { translate: 0 0; } }
@supports (animation-timeline: scroll()) {
  .site-main::after { animation: cs-ball-roll linear both; animation-timeline: scroll(root); }
  .site-main::before { animation: cs-ball-shadow linear both; animation-timeline: scroll(root); }
  .site.ball-hop > .site-main::after { animation: cs-ball-roll linear both, cs-ball-hop .9s cubic-bezier(.3, .7, .4, 1); animation-timeline: scroll(root), auto; }
}
@supports not (animation-timeline: scroll()) {
  .site.ball-hop > .site-main::after { animation: cs-ball-hop .9s cubic-bezier(.3, .7, .4, 1); }
}
@media (max-width: 767px) { .site-main { --ball: 76px; --ball-r: 16px; --ball-b: 24px; --ball-roll: 40vw; } }
@media (max-width: 1099px) { .site:has(> .tabbar) > .site-main { --ball-b: calc(var(--cs-tabbar-space) + 12px); } }   /* อยู่เหนือแถบเมนูลอย */
@media (prefers-reduced-motion: reduce) { .site-main::before, .site-main::after, .site.ball-hop > .site-main::after { animation: none; } }
.dash-grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-grid > .is-full { grid-column: 1 / -1; } }
.dash-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--cs-slate); }
.dash-next { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; }
.dash-next-date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80px; border-radius: var(--site-radius-lg); background: var(--cs-primary); color: var(--cs-on-primary); line-height: 1.15; }
.dash-next-date b { font-size: 26px; }
.dash-next-date span { font-size: 12.5px; opacity: .85; }
.dash-next-title { font-weight: 700; font-size: 17px; }
.dash-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.dash-actions .btn { padding-inline: 8px; gap: 6px; white-space: nowrap; }
.dash-cal, .dash-cal > .btn { width: 100%; }
.dash-rebook { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.dash-rebook li { display: flex; justify-content: space-between; gap: 8px; color: var(--cs-slate); }
.dash-rebook li.is-taken > span { text-decoration: line-through; color: var(--cs-placeholder); }
.dash-rebook li.is-taken > span:last-child { text-decoration: none; }
.dash-quick-loc + .dash-quick-loc { margin-top: 14px; }
.dash-quick-loc-name { margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.dash-times { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.dash-times::-webkit-scrollbar { display: none; }
.dash-time { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 74px; min-height: 52px; padding: 6px 10px; border-radius: var(--site-radius); box-shadow: inset 0 0 0 1px var(--cs-border-strong); background: var(--cs-card); color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.dash-time b { font-size: 15px; }
.dash-time span { font-size: 11.5px; color: var(--cs-success); }
.dash-time:hover { box-shadow: inset 0 0 0 1px var(--cs-ink); }
.dash-grid > .card { margin: 0; }   /* ธีมใส่ margin ให้ .card + .card ซ้อนกับ gap */
@media (max-width: 1099px) { .dash-book { display: none; } }    /* tabbar มีปุ่ม "จองสนาม" ตรงกลางอยู่แล้ว */
/* desktop: ปุ่ม "จองสนาม" ลอยกลางจอด้านล่าง พื้นน้ำเงิน ตัวอักษรเขียวสะท้อนแสง (แบบเดียวกับปุ่มกลาง tabbar บนมือถือ)
   sticky (ปุ่มอยู่ท้ายเนื้อหาใน view): ระหว่างเลื่อนลอยติดขอบล่าง เลื่อนสุดแล้วหยุดเหนือท้ายเว็บบนพื้นหน้าเว็บ ไม่มีแถบรองพื้น
   จัดกลางด้วย margin auto (ไม่ใช้ transform — ธีมขยับปุ่มด้วย transform ตอนกด) */
@media (min-width: 1100px) {
  .site .dash-book {
    position: sticky; bottom: 32px; z-index: 35;
    display: flex; width: fit-content; margin: 24px auto 32px; padding-inline: 26px; border-radius: var(--cs-radius-pill);
    background: var(--cs-navy-900); color: var(--cs-lime);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cs-lime) 25%, transparent), 0 10px 28px color-mix(in srgb, var(--cs-navy-900) 35%, transparent);
  }
  .site .dash-book:hover { background: var(--cs-navy-700); color: var(--cs-lime); }
  .site .dash-book > i { color: inherit; }
}

/* ---- กะทัดรัด (< 992px): ลดช่องว่างกับขนาดกล่อง · ตัวอักษร 16px และปุ่มสูง ≥ 44px คงเดิม ---------------- */
@media (max-width: 991px) {
  .section { padding-block: 20px 28px; }                         /* ธีม 48–96px เป็นระยะหน้าการตลาด */
  .page-hero { padding-block: 16px; }
  .page-hero .container { gap: 6px; }
  .page-hero h1 { font-size: 24px; line-height: 1.2; margin: 0; }
  .page-hero-desc { display: none; }                             /* หน้าจอง: ลูกค้ารู้อยู่แล้วว่ากำลังจอง */
  .page-hero + .container { margin-top: 16px; }
  .section-title { font-size: 24px; }
  .site .card { padding: 20px; }
  .booking-step + .booking-step { margin-top: 24px; }
  .dash, .dash.flow { --flow: 12px; }
  .dash-grid { gap: 12px; }
  .dash-label { margin-bottom: 6px; }
  .dash-actions { margin-top: 12px; }
}
@media (max-width: 575px) {
  .site .card { padding: 16px; }
  .page-hero h1, .section-title { font-size: 22px; }
  .dash-next { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; }
  .dash-next-date { height: 66px; }
  .dash-next-date b { font-size: 22px; }
  .dash-next-title { font-size: 16px; }
}
/* แท็บเล็ต: ผังสนามไม่ยืดตามความกว้างจอ (เดิมสูง ~780px) */
@media (min-width: 576px) and (max-width: 991px) {
  .court-map { max-width: 560px; margin-inline: auto; }
  .court-tile img { width: 60px; }
  .court-tile.is-tall img { max-width: 76px; }
  .court-tile.is-wide img { max-width: 220px; }
}
/* ---- iPad + desktop (≥ 768px): หน้าจอง 2 คอลัมน์ ------------------------------------------------------
   วันที่เต็มแถว · สาขา + เวลาซ้าย · ผังสนามขวา ค้างไว้ขณะเลื่อน (sticky) · เลือกเวลาแล้วเห็นสนามข้าง ๆ ทันที
   (feedback 7 พ.ย.: desktop ใช้แบบ iPad ด้วย — เดิม desktop เป็นคอลัมน์เดียว + สรุปด้านข้าง) */
.booking-pick, .booking-pick + .booking-step { margin-top: 32px; }   /* แทน .booking-step + .booking-step ของธีม (มีตัวห่อคั่น) */
@media (max-width: 991px) { .booking-pick, .booking-pick + .booking-step { margin-top: 24px; } }
@media (min-width: 768px) {
  /* แถวสุดท้าย 1fr: ผังสนามสูงกว่าคอลัมน์ซ้าย ส่วนเกินไปอยู่ใต้ "เลือกเวลา" ไม่แทรกระหว่างขั้น */
  .booking-main:has(> #step-court) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "steps steps" "alert alert" "date date" "pick court"; column-gap: 24px; align-items: start; }
  .booking-main:has(> #step-court) > #bk-steps { grid-area: steps; }   /* แถบขั้นเต็มแถว (เดิมตกไปอยู่คอลัมน์เดียว ชื่อขั้นทับกัน) */
  .booking-main:has(> #step-court) > .alert { grid-area: alert; }
  .booking-main:has(> #step-court) > #step-date { grid-area: date; }
  .booking-main:has(> #step-court) > .booking-pick { grid-area: pick; }
  .booking-main:has(> #step-court) > #step-court { grid-area: court; }
  .booking-pick .booking-loc.choice-list.is-2 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .booking-pick .booking-loc .choice-card { min-height: 0; padding: 12px; gap: 8px; }
  .booking-pick .booking-loc .choice-icon { display: none; }
  .booking-pick .booking-loc .choice-title { font-size: 14.5px; line-height: 1.3; }
  .booking-main:has(> #step-court) .slot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .booking-main:has(> #step-court) .slot { min-height: 54px; }
  #step-court .court-map { max-width: none; }
  .court-tile img { width: 56px; }
  .court-tile.is-tall img { max-width: 72px; }
  .court-tile.is-wide img { max-width: 200px; }
}
/* จอกว้าง (≥ 992px · iPad แนวนอน + desktop): สรุปย้ายลงท้ายหน้า ใช้แถบปุ่มล่างแทน (ผังสนามได้ความกว้างเต็ม) */
@media (min-width: 992px) {
  .booking-layout:has(#step-date) { grid-template-columns: minmax(0, 1fr); }
  /* วันที่ย้ายไปคอลัมน์ซ้าย ผังสนามเริ่มตั้งแต่แถวบน */
  .booking-main:has(> #step-court) { grid-template-areas: "steps steps" "alert alert" "date court" "pick court"; }
  .booking-main:has(> #step-court) > .booking-pick { margin-top: 24px; }
  .booking-main:has(> #step-court) > #step-court { margin-top: 0; }
  .site:has(#step-date):has(.mobile-cta) { padding-bottom: calc(76px + var(--site-safe-b)); }
  .site:has(#step-date) .back-to-top { bottom: calc(76px + 16px + var(--site-safe-b)); }
  .site:has(#step-date) .mobile-cta { display: flex; transition: transform .2s ease; }
  .site:has(#step-date) .mobile-cta.is-hidden { transform: translateY(110%); }
}
/* iPad แนวนอน: หัวหน้ากะทัดรัดเหมือนแนวตั้ง (หน้ายืนยัน / ชำระเงิน) */
@media (min-width: 992px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .page-hero { padding-block: 16px; }
  .page-hero .container { gap: 6px; }
  .page-hero h1 { font-size: 26px; line-height: 1.2; margin: 0; }
  .page-hero-desc { display: none; }
  .page-hero + .container { margin-top: 16px; }
}

/* ---- หัวเว็บ / ท้ายเว็บแบบกะทัดรัด --------------------------------------------------------------
   หัวเว็บ: 72 → 60px (มือถือ 52px) ให้เนื้อหาขึ้นมาเห็นในจอแรกมากขึ้น · ปุ่มยังสูง 44px ตาม --site-touch
   ท้ายเว็บ: แถบเดียว (โลโก้ + ลิขสิทธิ์ + ลิงก์กฎหมาย) ไม่ใช้ .footer-grid — ลิงก์เมนูซ้ำกับหัวเว็บ / tabbar อยู่แล้ว */
:root { --site-header-h: 60px; --site-header-h-sm: 56px; }
.site-logo { --brand-logo-h: 34px; }
@media (max-width: 767px) {
  :root { --site-header-h: 52px; --site-header-h-sm: 52px; }
  .site-logo { --brand-logo-h: 28px; }
}
.site-footer.is-compact { padding-top: 0; font-size: 13.5px; }
.site-footer.is-compact .footer-bottom { margin-top: 0; padding-block: 14px calc(14px + var(--site-safe-b)); border-top: 0; gap: 4px 24px; }
.site-footer.is-compact .footer-id { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.site-footer.is-compact .site-logo { --brand-logo-h: 24px; min-height: 0; margin-right: 0; color: inherit; }
.site-footer.is-compact .site-logo-mark { width: 28px; height: 28px; font-size: 16px; background: var(--cs-lime); color: var(--cs-on-lime); }
.site-footer.is-compact .footer-legal { gap: 0 18px; }
@media (max-width: 575px) {
  .site-footer.is-compact .footer-bottom { gap: 2px; }
}
/* จอใหญ่ (เมนูบนแสดง ≥ 1100px): เมนู + ปุ่มบัญชีชิดขวา โลโก้อยู่ซ้ายเดี่ยว ๆ (จอเล็กธีมดันขวาด้วย .site-logo margin-right: auto อยู่แล้ว) */
@media (min-width: 1100px) { .site-nav { margin-left: auto; } .site-logo { margin-right: 12px; } .site-logo + .site-actions { margin-left: auto; } }   /* ยังไม่ login = ไม่มีเมนู: TH | EN ชิดขวา */
/* หัวเว็บพื้นน้ำเงินแบรนด์ทุกขนาดจอ (ทั้งโหมดสว่าง/มืด) โลโก้สีขาว เมนูที่เลือกขีดเส้นเขียว */
.site-header, .site-header.is-scrolled {
  background: var(--cs-navy-900);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
.site-header.is-scrolled { box-shadow: 0 6px 20px color-mix(in srgb, var(--cs-navy-900) 25%, transparent); }
.site-header .brand-logo-dark { display: none !important; }
.site-header .brand-logo-light { display: block !important; }
.site-header .site-nav-link { color: #fff; }
.site-header .site-nav-link:hover { background: color-mix(in srgb, #fff 10%, transparent); }
.site-header .site-nav-link.active { color: var(--cs-lime); }
.site-header .icon-btn { color: #fff; }
.site-header .icon-btn:hover { background: color-mix(in srgb, #fff 10%, transparent); }
.site-header .lang-switch { background: color-mix(in srgb, #fff 10%, transparent); }
.site-header .lang-switch a { color: var(--cs-meta-on-navy); }
.site-header .lang-switch a.active { background: var(--cs-lime); color: var(--cs-on-lime); box-shadow: none; }
.site-header .btn-secondary { background: var(--cs-lime); color: var(--cs-on-lime); box-shadow: none; }

/* แถบเมนูล่าง (มือถือ / แท็บเล็ต) พื้นน้ำเงินเหมือนหัวเว็บ · ปุ่ม "จองสนาม" ตรงกลางขอบเป็นน้ำเงินกลืนกับแถบ */
.tabbar { background: var(--cs-navy-900); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent); }   /* เส้นบาง: แยกจากท้ายเว็บที่เป็นน้ำเงินเหมือนกัน */
.tabbar-item { color: var(--cs-meta-on-navy); }
.tabbar-item.active, .tabbar-item[aria-current='page'] { color: var(--cs-lime); }
.tabbar-item.is-main { color: #fff; }
.tabbar-item.is-main > i { box-shadow: 0 0 0 4px var(--cs-navy-900), 0 0 0 5px color-mix(in srgb, var(--cs-lime) 35%, transparent), 0 6px 16px color-mix(in srgb, var(--cs-navy-900) 30%, transparent); }

/* จอเล็ก (< 1100px): ปุ่มเมนู ☰ ชิดขวาสุด (หลังปุ่มบัญชี) — จิ้มด้วยนิ้วโป้งมือขวาได้ง่าย · เมนูข้างเลื่อนออกจากขวาตามปุ่ม (_SiteMenu ไม่ใช้ .drawer-left) */
@media (max-width: 1099px) { .site-menu-toggle { order: 1; margin-left: 0; margin-right: -10px; } }


/* Crystal Sports: ปุ่ม TH | EN บนหัวเว็บ — ธีมจัดสไตล์ให้ <button> และซ่อนบนจอเล็ก ที่นี่ใช้ลิงก์และแสดงทุกขนาดจอ */
.site .site-actions .lang-switch {
  display: inline-flex;
  margin-right: 0;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--cs-radius-pill);
  color: var(--cs-slate);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.lang-switch a.active {
  background: var(--cs-card);
  color: var(--cs-ink);
  box-shadow: var(--cs-inset-border);
}

/* Crystal Sports: โลโก้วิธีชำระ (Alipay / WeChat Pay) แบบเส้นสีเดียว — ขนาดเท่าไอคอนตัวอักษรในปุ่ม · ใน .choice-icon ธีมกำหนดขนาด svg เอง */
.pay-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}


/* <input type="date"> แสดงวันที่แบบ "6 พ.ย. 2026" ทุกเครื่อง (site.js ซ้อนข้อความทับ ซ่อนข้อความของเบราว์เซอร์) */
.date-th { position: relative; display: inline-block; width: 100%; vertical-align: middle; }
.date-th > input { width: 100%; color: transparent; caret-color: transparent; }
.date-th-text { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; white-space: nowrap; }
.date-th-text.is-empty { color: var(--cs-placeholder); }

/* ---- section "มีการจองแล้ว" (หน้ายืนยัน / หน้าจอง) — สีเทาแยกจากรายการที่จะจอง: ช่องที่มีคนจองไปก่อน ไม่ถูกจอง ไม่คิดเงิน ---- */
.bk-gone {
  margin-bottom: 4px;
  padding: 16px;
  border-radius: var(--site-radius-lg);
  background: var(--cs-surface);
  border: 1px dashed var(--cs-border-strong);
  scroll-margin-top: 80px;
}
.bk-gone-head { display: flex; gap: 12px; align-items: flex-start; }
.bk-gone-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cs-border-strong); color: var(--cs-slate); font-size: 20px; }
.bk-gone-title { margin: 0; font-size: 17px; line-height: 1.35; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-gone-count { padding: 2px 10px; border-radius: 999px; background: var(--cs-slate); color: var(--cs-card); font-size: 12.5px; font-weight: 600; }
.bk-gone-desc { margin: 2px 0 0; font-size: 14px; color: var(--cs-slate); }
.bk-gone-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.bk-gone-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--site-radius); background: color-mix(in srgb, var(--cs-card) 55%, var(--cs-surface)); color: var(--cs-placeholder); }
.bk-gone-what { min-width: 0; display: flex; flex-direction: column; }
.bk-gone-what b, .bk-gone-what small { text-decoration: line-through; }
.bk-gone-what small { font-size: 13px; }
.bk-gone-why { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--cs-card); box-shadow: inset 0 0 0 1px var(--cs-border-strong); color: var(--cs-slate); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.bk-section-title { margin-top: 8px; font-size: 15px; font-weight: 700; }

/* ---- ปรับ UX รอบ 7 พ.ย. (Docs/02 หัวข้อ 10) ---- */
/* N2 / N3: เติมเงินแบบปุ่มลัด — ช่องจำนวนเงินอ่านอย่างเดียวแต่ไม่ดูเหมือนใช้ไม่ได้ · ปุ่มเท่ากัน 4 ช่อง */
/* เติมเงินทีละขั้น (/wallet/topup): ช่องจำนวนเงินตัวใหญ่ชิดขวา มี ฿ นำหน้า · ทางลัด 4 ปุ่ม · ปุ่มย้อนกลับ / ถัดไป */
.topup-amount { position: relative; }
.topup-amount .input { width: 100%; padding-left: 40px; text-align: right; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.topup-amount .input::placeholder { font-size: 16px; font-weight: 400; }
.topup-currency { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 700; color: var(--cs-slate); pointer-events: none; }
.topup-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.topup-presets .btn { padding-inline: 4px; }
/* หน้าเติมเงิน: แถบ 3 ขั้นแสดงชื่อทุกขั้น (ธีมซ่อนชื่อขั้นที่ไม่ active บนจอ < 768px) · มือถือ = ชื่ออยู่ใต้จุด เส้นเชื่อมระหว่างจุด */
@media (max-width: 767px) {
  .topup-steps { align-items: flex-start; }
  .topup-steps .step, .topup-steps .step:last-child, .topup-steps .step.active { flex: 1 1 0; flex-direction: column; gap: 6px; position: relative; max-width: none; text-align: center; }
  .topup-steps .step-label, .topup-steps .step.active .step-label { display: block; white-space: normal; font-size: 12.5px; line-height: 1.3; }
  .topup-steps .step::after { position: absolute; top: 14px; left: calc(50% + 20px); right: calc(-50% + 20px); min-width: 0; }
  .topup-steps .step-label-part { display: block; }   /* "ระบุจำนวนเงิน" / "และวิธีชำระ" คนละบรรทัด (ภาษาไทยไม่มีช่องว่างให้ตัดคำเอง) */
}
/* หน้าเติมเงิน: หัวข้อ "เลือกวิธีชำระเงิน" มีเส้นคั่นจากส่วนจำนวนเงิน */
.topup-method-label { margin: 8px 0 0; padding-top: 18px; border-top: 1px solid var(--cs-border); }
.topup-nav { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.topup-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding-block: 14px; }
.topup-summary b { font-size: 20px; }
.topup-summary .link { margin-left: auto; }
.topup-confirm { display: grid; gap: 10px; margin: 0; }
.topup-confirm > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--cs-border); }
.topup-confirm > div:last-child { padding-bottom: 0; border-bottom: 0; }
.topup-confirm dt { color: var(--cs-slate); }
.topup-confirm dd { margin: 0; text-align: right; }
.topup-confirm dd .link { margin-left: 8px; }
.topup-confirm b { font-size: 18px; }
/* การ์ดตัวเลือกแบบย่อ 2 คอลัมน์ (วิธีชำระหน้าเติมเงิน, คอร์ตหน้าจองให้ลูกค้า) — ปุ่มหลักไม่ตกจอบนมือถือ */
.choice-list.is-compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.site .choice-list.is-compact .choice-card { min-height: 52px; padding: 10px 40px 10px 12px; gap: 10px; }
.site .choice-list.is-compact .choice-card > input[type='radio'] { right: 12px; }
.choice-list.is-compact .choice-icon { width: 32px; height: 32px; font-size: 18px; }
.choice-list.is-compact .choice-icon svg { width: 20px; height: 20px; }
.choice-list.is-compact .choice-title { font-size: 14px; line-height: 1.3; }
.choice-list.is-compact .choice-text { font-size: 12.5px; }
@media (max-width: 400px) { .choice-list.is-compact .choice-icon { display: none; } }
/* N5: แถบ CTA ล่างจอบนหน้าที่มี tab bar — ยกขึ้นเหนือ tab bar (หน้าจองให้ลูกค้าของโค้ช) */
@media (max-width: 767px) {
  .site:has(> .tabbar) .mobile-cta { bottom: calc(var(--site-tabbar-h) + var(--site-safe-b)); padding-bottom: 10px; }
  .site:has(> .tabbar) .mobile-cta.is-hidden { transform: translateY(calc(100% + var(--site-tabbar-h) + var(--site-safe-b))); }
}
/* N6: แท็บเมนูโค้ชเลื่อนแนวนอนได้ + เงาจางที่ขอบบอกว่ามีต่อ */
.coach-tabs { position: relative; }
.coach-tabs .tabs { flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.coach-tabs .tab { flex: none; scroll-snap-align: start; }
.coach-tabs::after { content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 28px; pointer-events: none; background: linear-gradient(to right, transparent, var(--cs-app-bg)); }
.coach-tabs.at-end::after { display: none; }
@media (min-width: 768px) { .coach-tabs::after { display: none; } }

/* ==== Group 1 (Docs/02 หัวข้อ 3 · U1 / U8) — 1 สี = 1 ความหมาย ====
   เลือกอยู่ = พื้น navy ตัวอักษร lime ไม่มี ✓ (feedback 7 พ.ย. · เดิมพื้น lime + ✓) · คอร์ตที่เลือก = ลูกเทนนิส · ชำระแล้ว = น้ำเงิน · รอชำระ = ส้มเข้ม · ยกเลิก ✕ / หมดเวลา ◔ (เทา) */
:root {
  --cs-picked: var(--cs-navy-900, #07133e);
  --cs-on-picked: var(--cs-lime, #d6ff22);
  --cs-picked-edge: var(--cs-navy-900, #07133e);
  --cs-amber-text: #8a5a12;   /* amber บนพื้นขาว 5.9:1 (เดิม #b7791f 3.6:1 ไม่ผ่าน AA) */
}
.date-chip.is-selected, .slot.is-selected, .slot:has(input:checked) { background: var(--cs-picked); color: var(--cs-on-picked); box-shadow: inset 0 0 0 1.5px var(--cs-picked-edge); }
.date-chip.is-selected .date-dow, .date-chip.is-selected .date-mon { color: inherit; opacity: .75; }
.date-chip.is-selected.has-pick::after { background: var(--cs-on-picked); }
.slot.is-selected .slot-meta, .slot:has(input:checked) .slot-meta { color: inherit; opacity: .8; }
.site .booking-loc .choice-card.is-selected { background: var(--cs-picked); color: var(--cs-on-picked); box-shadow: inset 0 0 0 1.5px var(--cs-picked-edge); }
.booking-loc .choice-card.is-selected .choice-icon { background: color-mix(in srgb, var(--cs-on-picked) 10%, transparent); }
.site .choice-card:has(input:checked), .site .choice-card.is-selected { background: var(--cs-picked); color: var(--cs-on-picked); box-shadow: inset 0 0 0 2px var(--cs-picked-edge); }
.site .choice-card:has(input:checked) :is(.choice-title, .choice-text), .site .choice-card.is-selected :is(.choice-title, .choice-text) { color: inherit; }
.site .choice-card:has(input:checked) .choice-text, .site .choice-card.is-selected .choice-text { opacity: .8; }
.site .choice-card:has(input:checked) .choice-icon, .site .choice-card.is-selected .choice-icon { background: #fff; color: var(--cs-navy-900); }   /* โลโก้ Alipay / WeChat ยังเห็นสีเดิม */
.site .choice-card > input[type='radio'], .site .choice-card > input[type='checkbox'] { accent-color: var(--cs-lime); }
.site .chip.on, .site .chip:has(input:checked) { background: var(--cs-picked); color: var(--cs-on-picked); box-shadow: inset 0 0 0 1.5px var(--cs-picked-edge); }
.slot-legend .is-selected i { background: var(--cs-picked); box-shadow: inset 0 0 0 1.5px var(--cs-picked-edge); }
/* วันถัดไปที่ยังไม่เปิดจอง (BOOKING_OPEN_TIME) */
.date-chip.is-soon { background: var(--cs-surface); color: var(--cs-slate); box-shadow: none; outline: 1px dashed var(--cs-border-strong); outline-offset: -1px; cursor: default; }
.date-chip.is-soon .date-mon { color: var(--cs-slate); font-size: 10.5px; white-space: nowrap; }
/* วิธีชำระที่ใช้อยู่ (หน้าชำระเงิน): "เลือกอยู่ ✓" แทนปุ่มจาง ๆ ที่อ่านว่าใช้ไม่ได้ */
.btn.is-current { background: var(--cs-picked); box-shadow: none; color: var(--cs-on-picked); pointer-events: none; }
/* สถานะ: ข้อความอ่านง่ายขึ้น + ยกเลิก / หมดเวลา ต่างกันด้วยไอคอน */
.badge-amber, .badge-warning { color: var(--cs-amber-text); }
.badge-muted { color: var(--cs-slate); }
.badge-cancel::before, .badge-expired::before { width: auto; height: auto; border-radius: 0; background: none; font-weight: 700; margin-right: 2px; }
.badge-cancel::before { content: "✕"; }
.badge-expired::before { content: "◔"; }
.countdown:not(.is-ended) { color: var(--cs-amber-text); }

/* กล่อง Wallet แบบเว็บเดิม (_WalletCard): ไอคอนกระเป๋า + วงกลม lime มุมขวาบน · "Your / Wallet" ซ้าย
   "Total / Baht." + ยอดตัวใหญ่ navy ขวา · ปุ่ม Topup ทรงแคปซูลใต้ยอด */
.wallet-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 10px 20px;
  padding: 16px 20px; border-radius: var(--site-radius-lg); background: var(--cs-card); box-shadow: var(--cs-inset-border); color: var(--cs-navy-900); }
.wallet-card-id { grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.wallet-card-icon { position: relative; isolation: isolate; display: inline-grid; place-items: center; width: 44px; height: 40px; font-size: 34px; line-height: 1; }
.wallet-card-icon::before { content: ""; position: absolute; z-index: -1; top: -9px; right: -12px; width: 30px; height: 30px; border-radius: 50%; background: var(--cs-lime); }
.wallet-card-name { display: flex; flex-direction: column; font-size: 16px; line-height: 1.15; }
.wallet-card-name b { font-weight: 800; }
.wallet-card-total { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.wallet-card-label { display: flex; flex-direction: column; align-items: flex-end; font-size: 17px; line-height: 1.05; }
.wallet-card-label small { font-size: 11px; color: var(--cs-slate); }
.wallet-card-amount { font-size: clamp(28px, 8vw, 36px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.wallet-card-topup { justify-self: end; min-width: 110px; border-radius: 999px; box-shadow: 0 4px 12px color-mix(in srgb, var(--cs-navy-900) 30%, transparent); }
.dash-hero .wallet-card { align-self: flex-end; margin-left: auto; min-width: min(100%, 320px); background: #fff; box-shadow: 0 4px 14px rgb(0 0 0 / .25); backdrop-filter: blur(6px); }
@media (max-width: 575px) { .dash-hero .wallet-card { width: 100%; margin-left: 0; } }

/* แถบเมนูล่างแบบลอย (floating): แคปซูลห่างขอบจอ 12px มีเงา + เส้นขอบ lime จาง (แบบปุ่ม "จองสนาม" บน desktop)
   ปุ่มกลางยื่นพ้นแคปซูล · ระยะเผื่อด้านล่างของหน้า / CTA / toast / back-to-top = ความสูงแถบ + ช่องลอย */
@media (max-width: 1099px) {
  .site { --cs-tabbar-gap: 12px; --cs-tabbar-space: calc(var(--site-tabbar-h) + var(--cs-tabbar-gap) * 2 + var(--site-safe-b)); }
  .site .tabbar {
    left: var(--cs-tabbar-gap); right: var(--cs-tabbar-gap); bottom: calc(var(--cs-tabbar-gap) + var(--site-safe-b));
    max-width: 480px; margin-inline: auto; height: var(--site-tabbar-h); padding: 0 10px;
    border-radius: var(--cs-radius-pill);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cs-lime) 22%, transparent), 0 10px 28px rgb(7 19 62 / .35);
  }
  .site .tabbar-item.active::before, .site .tabbar-item[aria-current='page']::before { display: none; }   /* แถบบนชนขอบแคปซูล — ใช้สี lime อย่างเดียว */
  .site:has(> .tabbar) { padding-bottom: var(--cs-tabbar-space); }
  .site:has(> .tabbar) .back-to-top, .site:has(> .tabbar) .toast-stack { bottom: calc(var(--cs-tabbar-space) + 8px); }
}
@media (max-width: 767px) {
  .site:has(> .tabbar) .mobile-cta { bottom: var(--cs-tabbar-space); }
  .site:has(> .tabbar) .mobile-cta.is-hidden { transform: translateY(calc(100% + var(--cs-tabbar-space))); }
}

/* หน้าแรก: หัวการ์ดแต่ละส่วนชัดขึ้น — ไอคอนขาวในกล่อง navy + ตัวหนาสีเข้ม + เส้นคั่นใต้หัว (เดิมตัวเล็กสีเทา แยกส่วนยาก) */
.dash-label { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--cs-border); }
.dash-label-title { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 16px; font-weight: 700; color: var(--cs-navy-900); }
.dash-label-title > i, .dash-label-title > .dash-label-num { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--cs-navy-900); color: #fff; font-size: 17px; }
.dash-label > .link { font-size: 13.5px; }
@media (max-width: 991px) { .dash-label { margin-bottom: 12px; padding-bottom: 10px; } }
/* การจองถัดไป: ทั้งบล็อกเป็นลิงก์ไปรายละเอียด · บรรทัด 2 = สาขา · โค้ช + ป้ายจำนวนผู้เรียน lime (แบบเว็บเดิม) */
a.dash-next { color: inherit; text-decoration: none; border-radius: var(--site-radius-lg); }
a.dash-next:hover .dash-next-title { text-decoration: underline; text-underline-offset: 3px; }
.dash-next-sub { margin-top: 2px; font-size: 14px; color: var(--cs-slate); }
.dash-coach-pkg { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; vertical-align: 1px; padding: 1px 9px; border-radius: 999px; background: var(--cs-lime); color: var(--cs-on-lime); font-size: 12.5px; font-weight: 700; }
.dash-coach-pkg i { font-size: 13px; }
/* การ์ดแต่ละส่วนหน้าแรก: พื้นสีเดียวกับกล่อง Wallet บน hero (ขาว 94% บน navy ≈ #f0f1f3) + เงาแทนเส้นขอบ */
.dash-grid > .card { --cs-dash-card: #fff; background: var(--cs-dash-card);   /* หน้าแรก: การ์ดพื้นขาว (เดิมเทาอมน้ำเงิน 6%) */ box-shadow: 0 4px 14px rgb(7 19 62 / .12); }
.dash-grid > .card .dash-label { border-bottom-color: color-mix(in srgb, var(--cs-navy-900) 12%, transparent); }

/* การจองถัดไป: ปุ่มลงปฏิทินอยู่ขวาแถวเดียวกัน · มือถือ (< 576px) เหลือไอคอนสี่เหลี่ยม */
.dash-next-row { display: flex; align-items: center; gap: 12px; }
.dash-next-row > .dash-next { flex: 1; min-width: 0; }
.dash-next-row > .dash-actions { display: block; flex: none; margin: 0; }
.dash-next-row .dash-cal, .dash-next-row .dash-cal > .btn { width: auto; }
@media (max-width: 575px) {
  .dash-next-row .dash-cal > .btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .dash-next-row .dash-cal > .btn > i { margin: 0; font-size: 20px; }
  .dash-cal-text { display: none; }
}

/* ท้ายเว็บอยู่ล่างสุด: body.site เป็น flex คอลัมน์อยู่แล้ว (ต้นไฟล์) */
/* มือถือ / iPad (< 1100px มี tabbar ลอย): ซ่อนท้ายเว็บ (ชนกับ tabbar) — ลิงก์ข้อกฎหมายอยู่ท้ายเมนู ☰ (.site-menu-legal) */
@media (max-width: 1099px) { .site > .site-footer { display: none; } }
@media (min-width: 1100px) { .site-menu-legal { display: none; } }

/* ลิงก์ข้อกฎหมายท้ายเมนู ☰ (แทนท้ายเว็บบนมือถือ / iPad) */
.site-menu .drawer-footer:has(.site-menu-legal) { flex-direction: column; align-items: flex-start; }   /* ออกจากระบบ อยู่บน · ลิงก์ข้อกฎหมายใต้ */
.site-menu-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 4px; font-size: 13px; color: var(--cs-slate); }
.site-menu-legal a, .site-menu-legal button { padding: 6px 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.site-menu-legal a:hover, .site-menu-legal button:hover { color: var(--cs-ink); text-decoration: underline; }
.site-menu-legal small { flex-basis: 100%; font-size: 12px; }

/* หัวหน้าแบบแบนเนอร์ navy (Wallet / จองสนาม / การจองของฉัน) — ใช้ .dash-hero ของหน้าแรก แต่เตี้ยกว่า หัวข้อเล็กกว่า */
.dash-hero.page-banner { min-height: 112px; }
.dash-hero.page-banner h1 { font-size: clamp(26px, 3.4vw, 36px); }
.page-banner-desc { margin: 4px 0 0; font-size: 14px; color: rgb(255 255 255 / .8); }
.page-banner-wrap { margin-top: clamp(16px, 3vw, 32px); margin-bottom: 8px; }
/* หน้าการจองของฉัน / Wallet / โค้ช / บัญชี: ระยะบน-ล่างเท่าหน้าจอง (ธีม .section 48–96px เป็นระยะหน้าการตลาด) */
.section.app-page { padding-block: clamp(16px, 3vw, 32px) calc(40px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 991px) { .page-banner-desc { display: none; } }   /* หน้าจอง: ลูกค้ารู้อยู่แล้วว่ากำลังจอง (เหมือนเดิม) */
@media (max-width: 575px) { .dash-hero.page-banner { min-height: 0; padding: 18px; } .dash-hero.page-banner:not(:has(.wallet-card)) { min-height: 84px; } }

/* ---- แถบขั้นการจอง (Booking/_BookingSteps): 1 วัน·สาขา → 2 เวลา → 3 สนาม → 4 ยืนยัน → 5 ชำระ · หน้าจองยังเป็นหน้าเดียว ---- */
.booking-steps { margin-bottom: 16px; }
.booking-steps .step-link { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.booking-steps .step-link:hover .step-label { text-decoration: underline; }
.booking-step + .booking-step { margin-top: 24px; }
/* ชั่วโมงที่จบแล้ว: สีเทา แตะไม่ได้ (ชั่วโมงที่กำลังเล่นยังเป็นช่องปกติ จองได้จนกว่าจะจบ) */
.site .slot.is-past { background: var(--cs-surface); color: var(--cs-placeholder); box-shadow: none; }
.site .slot.is-past .slot-meta { color: inherit; }

/* ผังคอร์ตกะทัดรัด: ตาราง 3 ช่องตามตำแหน่งจริง · รูปคอร์ตเต็มช่อง ชื่ออยู่บนรูป · ที่เลือก = ลูกเทนนิสกลางคอร์ต (เหมือนลูกวางบนเน็ต) */
/* พื้นผังเต็มกล่อง = สีเดิมของสาขา (CourtLayout.Theme · เดียวกับขอบรูปคอร์ตต้นฉบับ) · รูปคอร์ตตัดขอบแล้วจึงวางบนพื้นสีเดียวกันต่อเนื่อง */
.site .court-map { max-width: 520px; margin-inline: auto; padding: 12px; border-radius: 16px; color: #fff; background: #005a5a; box-shadow: none; }
.site .court-map.is-slate { background: #2a3e52; }
.site .court-map-loc { display: block; margin: 12px 0 0; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .35em; text-transform: uppercase; color: rgb(255 255 255 / .6); opacity: 1; }
.site .court-map-loc.is-top { margin: 0 0 12px; }
.site .court-grid { grid-template-columns: repeat(3, minmax(0, 92px)); justify-content: center; gap: 10px 12px; align-items: center; }   /* ช่องเล็ก = เห็นทั้งผังในจอเดียว */
.site .court-tile { position: relative; display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: none; box-shadow: none; }
.site .court-tile img, .site .court-tile.is-tall img { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 174 / 337; object-fit: cover; border-radius: 0; box-shadow: none; }   /* รูปตัดกรอบแล้ว (*-crop.jpg) */
.site .court-tile.is-wide img { aspect-ratio: 537 / 278; }
.site a.court-tile:hover { background: none; }
.site a.court-tile:hover img { filter: brightness(1.08); }
.site .court-tile.is-selected { border: 0; background: none; box-shadow: none; }
.site .court-name { position: absolute; left: 0; right: 0; bottom: 7%; padding-inline: 4px; color: #fff; font-size: clamp(12px, 3.3vw, 15px); font-weight: 800; line-height: 1.1;
  text-align: center; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 1px 3px rgb(0 0 0 / .5); }
.site .court-status, .site .court-price { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px;
  background: rgb(7 19 62 / .78); color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; opacity: 1; }
.site .court-tile.is-disabled { opacity: 1; }
.site .court-tile.is-disabled img { filter: grayscale(1) brightness(1.1); opacity: .5; }   /* จองแล้ว / ปิด: เทาจางบนพื้นสีสาขา */
.site .court-tile.is-disabled .court-name { color: rgb(255 255 255 / .75); }
.court-ball { position: absolute; left: 50%; top: 50%; width: 44%; min-width: 30px; max-width: 58px; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M15 24.5l6 6 12-13' fill='none' stroke='%2307133e' stroke-opacity='.35' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 24.5l6 6 12-13' fill='none' stroke='%23fff' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    url(../images/tennis-ball.webp) center / contain no-repeat;
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / .35)); animation: court-ball-in .35s cubic-bezier(.3, 1.5, .5, 1); }
.court-tile.is-wide .court-ball { width: 21%; }
@keyframes court-ball-in { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .court-ball { animation: none; } }
@media (min-width: 768px) { .site .court-grid { grid-template-columns: repeat(3, minmax(0, 112px)); gap: 14px 16px; } .site .court-map { padding: 16px; } }
.booking-step-hint { margin: -4px 0 10px; font-size: 13.5px; color: var(--cs-slate); }
.site .slot.is-past .slot-time { text-decoration: none; }   /* ผ่านแล้ว = สีเทาอย่างเดียว ไม่ขีดฆ่า */

/* หน้ารอโหลด: ลูกเทนนิสเด้งกลางจอ (site.js ข้อ 12 — แสดงเมื่อเปลี่ยนหน้า / ส่งฟอร์มแล้วรอเกิน 800ms) · พื้นจางให้รู้ว่ากำลังโหลด */
.ball-loader { position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; justify-items: center; gap: 0; pointer-events: none;
  background: rgb(247 248 250 / .72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .15s, visibility 0s .15s; }
.ball-loader.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .15s; }
.ball-loader-ball { width: 64px; height: 64px; background: url(../images/tennis-ball.webp) center / contain no-repeat; animation: ball-loader-bounce .7s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.ball-loader-shadow { width: 54px; height: 10px; margin-top: 6px; border-radius: 50%; background: radial-gradient(closest-side, rgb(7 19 62 / .28), transparent); animation: ball-loader-shadow .7s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.ball-loader-text { margin-top: 10px; font-size: 13.5px; color: var(--cs-slate); }
@keyframes ball-loader-bounce { 0% { transform: translateY(-72px) rotate(0); } 88% { transform: translateY(0) rotate(160deg) scale(1, 1); } 100% { transform: translateY(2px) rotate(180deg) scale(1.08, .9); } }
@keyframes ball-loader-shadow { 0% { transform: scale(.45); opacity: .45; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ball-loader-ball, .ball-loader-shadow { animation: none; } }

/* แถบขั้น (การจอง / เติมเงิน): สีเขียว lime แทน navy — ขั้นปัจจุบัน = พื้น lime ตัวเลข navy · ขั้นที่ผ่านแล้ว = lime อ่อน + ✓ · เส้นเชื่อม lime */
.checkout-steps .step.active .step-dot { background: var(--cs-lime); color: var(--cs-navy-900); box-shadow: inset 0 0 0 1.5px #a8cc00; }
.checkout-steps .step.done .step-dot { background: color-mix(in srgb, var(--cs-lime) 35%, var(--cs-card)); color: var(--cs-navy-900); box-shadow: inset 0 0 0 1.5px #a8cc00; }
.checkout-steps .step.done::after { background: #a8cc00; }
/* วัน / สาขา / เวลาที่เลือก: พื้น navy ตัวขาว (วิธีชำระ / เติมเงินยังเป็นตัว lime) */
.date-chip.is-selected, .slot.is-selected, .slot:has(input:checked), .site .booking-loc .choice-card.is-selected { color: #fff; }
.date-chip.is-selected.has-pick::after { background: #fff; }

/* หน้าจอง: แต่ละขั้นเป็นการ์ดแบบหน้าแรก (พื้นเดียวกับกล่อง Wallet + เงา + หัวมีไอคอน) */
.booking-step.card { --cs-dash-card: #fff; margin: 0; background: var(--cs-dash-card);   /* พื้นขาวเหมือนการ์ดหน้าแรก */ box-shadow: 0 4px 14px rgb(7 19 62 / .12); }
.booking-step.card .dash-label { border-bottom-color: color-mix(in srgb, var(--cs-navy-900) 12%, transparent); }
.booking-step.card .booking-step-hint { margin-top: 0; }
.booking-step.card .date-strip { margin-inline: 0; padding-inline: 0; }
/* 2 คอลัมน์ (≥ 768px): การ์ดผังสนามสูงเท่าคอลัมน์ซ้ายพอดี — ยืดตามแถวของ grid (container-type: size = ความสูงไม่ขึ้นกับเนื้อหาในผัง)
   แล้วคำนวณขนาดคอร์ตจากความสูงที่ได้ (cqh) / ความกว้าง (cqw) เลือกค่าที่เล็กกว่า · 260px ≈ หัวการ์ด + คำแนะนำ + ชื่อสาขาบน/ล่าง + ระยะห่าง
   ช่องเวลาน้อย (คอลัมน์ซ้ายเตี้ย) = อย่างน้อย 520px · คอร์ตกว้าง 56–112px · รูปคอร์ตแนวตั้ง กว้าง : สูง = 174 : 337 */
@media (min-width: 768px) {
  .booking-main:has(> #step-court) > #step-court { align-self: stretch; container-type: size; min-height: 520px; display: flex; flex-direction: column; }
  #step-court .court-map { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; }
  .site #step-court .court-grid { grid-template-columns: repeat(3, clamp(56px, min((100cqw - 120px) / 3, (100cqh - 260px) / 3 * 174 / 337), 112px)); }
}
/* ยังไม่เลือกเวลา: ทุกคอร์ตแตะไม่ได้ สีเทาแบบเดียวกับคอร์ตที่จองแล้ว (ถือว่ายังจองไม่ได้) */
.site .court-map.is-locked .court-tile { pointer-events: none; }
/* เวลา: ว่าง = ตัวเขียว (เดิม) · เต็ม / ผ่านแล้ว = เทาอ่อน ไม่ขีดฆ่า · ไม่มี "เหลือน้อย" */
.site .slot.is-disabled, .site .slot.is-past { background: #f0f1f4; color: #b4b9c5; box-shadow: none; }
.site .slot.is-disabled .slot-time { text-decoration: none; }
.site .slot.is-disabled .slot-meta { color: inherit; }
/* แถบขั้น: ขั้นที่ผ่านแล้ว = จุด lime เปล่า (ไม่มีเลข / ✓ — บางเครื่องแสดง ✓ เป็นอักษรแปลก) */
.checkout-steps .step.done .step-dot { background: var(--cs-lime); box-shadow: inset 0 0 0 1.5px #a8cc00; }
.checkout-steps .step.done .step-dot:empty::before { content: none; }
/* 2 คอลัมน์ (≥ 768px): ผังอยู่คอลัมน์ขวาที่แคบกว่า → ชื่อคอร์ตบรรทัดเดียว ตัวเล็กลง */
@media (min-width: 768px) { .site .court-name { font-size: 12px; letter-spacing: 0; white-space: nowrap; } }
@media (min-width: 1200px) { .site .court-name { font-size: 13.5px; } }
.dash-label-num { font-size: 16px; font-weight: 800; line-height: 1; }   /* หน้าจอง: เลขขั้นในกล่อง navy แทนไอคอน */
/* แถบขั้น: ชื่อขั้นไม่ถูกบีบ (เดิมเส้นเชื่อม flex: 1 แย่งที่ → ชื่อเหลืออักษรเดียว "ว…" "เ…") · เส้นเชื่อมใช้ที่ที่เหลือ */
.checkout-steps .step > .step-link, .checkout-steps .step-label { flex: none; }
.checkout-steps .step-label { overflow: visible; text-overflow: clip; }
/* iPad แนวตั้ง (768–991px): ผังอยู่แถวเดียวกับสาขา → ขอบบนตรงกับการ์ดสาขา (ระยะ 24px เท่ากัน) · คอร์ตเล็ก → ชื่อตัวเล็กขึ้นบรรทัดใหม่ได้ ไม่โดนตัด */
@media (min-width: 768px) and (max-width: 991px) {
  .booking-main:has(> #step-court) > #step-court { margin-top: 24px; }
  .site #step-court .court-name { font-size: 10px; line-height: 1.1; white-space: normal; bottom: 5%; }
}

/* การ์ดสาขา: ชื่อสาขา (และ "เต็มทุกช่วงเวลา") อยู่กลางการ์ด */
.site .booking-loc .choice-card { justify-content: center; text-align: center; }
.site .booking-loc .choice-body { flex: 0 1 auto; align-items: center; }

/* ยืนยันการจอง — วิธีชำระ: แถวละ 2 ช่อง ขนาดเท่ากัน (Wallet ช่องแรก มียอดคงเหลือ) · แตะทั้งการ์ด ไม่เห็นวงกลม radio */
.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.site .pay-grid .pay-card { position: relative; min-height: 64px; padding: 10px 14px; gap: 10px; align-items: center; cursor: pointer; }
.site .pay-grid .pay-card .choice-icon { width: 36px; height: 36px; flex: none; }
.site .pay-grid .pay-card .choice-title { font-size: 14.5px; line-height: 1.3; }
.site .pay-grid .pay-card .choice-body { min-width: 0; gap: 0; }
.site .pay-grid .pay-card .choice-text { font-size: 12.5px; line-height: 1.3; }
.site .pay-grid .pay-card:has(input:focus-visible) { outline: 2px solid var(--cs-lime); outline-offset: 2px; }
.site .pay-grid .pay-card:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.pay-hint { margin: 8px 2px 0; font-size: 12.5px; color: var(--cs-slate); }
@media (max-width: 575px) {
  .pay-grid { gap: 8px; }
  .site .pay-grid .pay-card { min-height: 58px; padding: 8px 10px; gap: 8px; }
  .site .pay-grid .pay-card .choice-icon { width: 32px; height: 32px; }
  .site .pay-grid .pay-card .choice-title { font-size: 13.5px; }
}
/* หมายเหตุ (ใต้ช่องทางชำระ) แบบระบบเดิม: ไอคอน ! หน้าหัวข้ออย่างเดียว · รายการจุดธรรมดา ตัวเล็ก · "กดยืนยัน = ยอมรับข้อตกลง" แถบล่าง (ไม่ต้องติ๊ก) */
.bk-terms { margin-top: 16px; border-radius: 14px; background: #f4f5f8; font-size: 12.5px; line-height: 1.6; color: var(--cs-slate); overflow: hidden; }
.bk-terms-title { display: flex; align-items: center; gap: 6px; padding: 12px 16px 2px; font-size: 13.5px; font-weight: 700; color: var(--cs-navy-900, #07133e); }
.bk-terms-title i { font-size: 15px; }
.bk-terms-list { list-style: disc; margin: 0; padding: 2px 16px 0 34px; }
.bk-terms-list li + li { margin-top: 2px; }
.bk-terms-foot { margin: 8px 16px 12px; }
.bk-terms-foot a { color: var(--cs-navy-900, #07133e); text-decoration: underline; font-weight: 600; white-space: nowrap; }
.bk-terms-accept { margin: 0; padding: 10px 16px; background: #fff; border-top: 1px solid rgb(7 19 62 / .08); font-size: 13px; font-weight: 600; color: var(--cs-navy-900, #07133e); }
.bk-accept-note { margin-top: 4px; font-size: 12.5px; }

/* แถบปุ่มล่างจอ (.mobile-cta): แคปซูลลอยสีน้ำเงินแบบแถบเมนูล่าง — แยกจากเนื้อหาชัด ไม่กลืนกับข้อความด้านหลัง
   ซ้าย = ยอดรวม (ตัวขาวใหญ่) + บรรทัดเล็กบอกจำนวน / วิธีชำระ · ขวา = ปุ่ม lime · ซ่อน (.is-hidden) = เลื่อนลงพ้นจอ */
.site .mobile-cta {
  --cta-gap: 12px;
  left: var(--cta-gap); right: var(--cta-gap); bottom: calc(var(--cta-gap) + var(--site-safe-b));
  max-width: 640px; margin-inline: auto; padding: 8px 8px 8px 20px; gap: 16px;
  border-radius: 20px; background: var(--cs-navy-900, #07133e); color: #fff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cs-lime) 22%, transparent), 0 10px 28px rgb(7 19 62 / .35);
}
.site .mobile-cta.is-hidden { transform: translateY(calc(100% + var(--cta-gap) * 2 + var(--site-safe-b))); }
.site .mobile-cta-info { min-width: 0; gap: 1px; font-size: 12.5px; color: rgb(255 255 255 / .7); }
.site .mobile-cta-info b { font-size: 20px; line-height: 1.15; color: #fff; }
.site .mobile-cta-info .cta-more { color: var(--cs-lime); }
.site .mobile-cta .btn { flex: 1; max-width: 300px; margin-left: auto; min-height: 48px; border-radius: 14px; gap: 6px;
  background: var(--cs-lime); border-color: var(--cs-lime); color: var(--cs-navy-900, #07133e); font-weight: 700; }
.site .mobile-cta .btn:hover { filter: brightness(1.05); }
.site .mobile-cta .btn:disabled, .site .mobile-cta .btn.disabled { background: rgb(255 255 255 / .18); border-color: transparent; color: rgb(255 255 255 / .6); }
.site .mobile-cta .btn i { font-size: 18px; }
@media (max-width: 991px) {
  .site:has(.mobile-cta) { padding-bottom: calc(88px + var(--site-safe-b)); }
  .site:has(.mobile-cta) .back-to-top { bottom: calc(88px + 16px + var(--site-safe-b)); }
}
@media (min-width: 992px) {
  .site:has(#step-date):has(.mobile-cta) { padding-bottom: calc(88px + var(--site-safe-b)); }
}
@media (max-width: 767px) {
  .site:has(> .tabbar) .mobile-cta { bottom: var(--cs-tabbar-space); }
  .site:has(> .tabbar) .mobile-cta.is-hidden { transform: translateY(calc(100% + var(--cs-tabbar-space))); }
}

/* หน้า Wallet: กล่องรายการล่าสุด · ประวัติรายการ: ปุ่ม "โหลดเพิ่ม" ต่อท้ายในกล่องรายการ */
.points-list > .load-more { padding-top: 12px; }
.wallet-recent > .card-header { margin-bottom: 0; }
.wallet-recent > .card-header .link { display: inline-flex; align-items: center; gap: 2px; }
.wallet-recent > .points-list { padding: 0 20px 4px; }
.wallet-recent-empty { padding: 12px 20px 18px; }
/* บัญชีของฉัน: ประเภทสมาชิกเป็น chip ข้างชื่อหน้า · ปุ่มออกจากระบบสีเทาชิดขวา */
.account-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.account-head h1 { margin: 0 4px 0 0; }
/* chip บนแบนเนอร์กรมท่า: สมาชิก = ขาวโปร่ง · โค้ช / VIP = เขียวมะนาว */
.account-role { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); font-size: 13.5px; font-weight: 700; color: #fff; }
.account-role.is-coach, .account-role.is-vip { background: var(--cs-lime); color: var(--cs-on-lime); box-shadow: none; }
.account-logout { display: flex; justify-content: flex-end; }
.btn-gray { background: color-mix(in srgb, var(--cs-slate) 14%, var(--cs-card)); color: var(--cs-ink); }
.btn-gray:hover:not(:disabled) { background: color-mix(in srgb, var(--cs-slate) 22%, var(--cs-card)); }
/* หน้าแรก: ปุ่มผูกบัญชี LINE อยู่ใต้ชื่อใน "สวัสดี คุณ…" ทุกขนาดจอ */
.dash-hero-name { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dash-hero-name > .btn-line { flex: none; }
/* หน้าจอง: เว้นที่ใต้กล่องสรุปการจอง (มือถือกล่องอยู่ท้ายหน้า ไม่ให้ชิดขอบล่างจอ) */
.booking-layout { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
/* หน้าจอง: แถบวันที่บน desktop มีปุ่มเลื่อนซ้าย / ขวา (มือถือ / แท็บเล็ตจอสัมผัสปัดเลื่อนเหมือนเดิม ไม่แสดงปุ่ม) */
.date-strip-wrap { position: relative; }
.date-strip-nav { display: none; }
@media (hover: hover) and (pointer: fine) {
  .date-strip-nav { display: grid; place-items: center; position: absolute; top: 50%; z-index: 2; width: 36px; height: 36px; margin-top: -21px; padding: 0; border: 0; border-radius: 50%;
    background: var(--cs-card); color: var(--cs-ink); font-size: 18px; cursor: pointer; box-shadow: 0 2px 10px rgb(7 19 62 / .18), inset 0 0 0 1px var(--cs-border-strong); transition: opacity .15s ease; }
  .date-strip-nav:hover { background: var(--cs-surface); }
  .date-strip-nav.is-prev { left: -10px; }
  .date-strip-nav.is-next { right: -10px; }
  .date-strip-nav:disabled { opacity: 0; pointer-events: none; }
  .date-strip { cursor: grab; }
  .date-strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .date-strip.is-dragging .date-chip { pointer-events: none; }
}
/* หน้าจอง: เว้นระยะระหว่างการ์ด "เลือกสาขา" กับ "เลือกเวลา" (.booking-step.card ตั้ง margin 0 ไว้ การ์ดเลยชิดกัน) */
.booking-pick > .booking-step.card + .booking-step.card { margin-top: 24px; }
/* มือถือ: การ์ด "เลือกสนาม" ใต้การ์ดเวลาก็ชิดกันด้วยเหตุเดียวกัน (2 คอลัมน์มีกฎของ #step-court ที่แรงกว่าคุมอยู่แล้ว) */
.booking-pick + .booking-step.card { margin-top: 24px; }
/* หน้าแรก (บัญชีโค้ช): แดชบอร์ดโค้ช — ตารางสอนวันนี้ · ทางลัดเมนูโค้ช */
.coach-dash { margin: 0; background: #fff; box-shadow: 0 4px 14px rgb(7 19 62 / .12); }
.coach-dash .dash-label { border-bottom-color: color-mix(in srgb, var(--cs-navy-900) 12%, transparent); }
.coach-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.coach-actions > .btn-primary { grid-column: 1 / -1; }   /* มือถือ: จองให้ลูกค้าเต็มแถว อีก 2 ปุ่มครึ่งแถว */
@media (min-width: 768px) { .coach-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); } .coach-actions > .btn-primary { grid-column: auto; } }
.coach-today { display: flex; flex-direction: column; }
.coach-today-row + .coach-today-row { border-top: 1px solid var(--cs-border); }
.coach-today-empty { margin: 0; padding: 12px 0; color: var(--cs-slate); }
.coach-today-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; font-size: 14.5px; }
.coach-today-row b { font-variant-numeric: tabular-nums; }
.coach-today-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cs-slate); }