/* =====================================================================
   SnookSnook — public site theme layer (inspired by kinsta.com's style).
   Loaded AFTER each page's own CSS (index/*.html), so it re-skins every
   customer page without touching their files:
     • warm cream page, white cards, big light serif headlines
     • dark "ink" zones with large rounded corners + a soft mint glow
       (floating nav, owners section, closing CTA, footer)
     • colours: SnookSnook green (brand / active / available) · ink black
       (main buttons, dark zones) · mint (small highlights only)
   The back office (Owner/, Admin/) uses Style/backoffice.css instead.
   ===================================================================== */
:root {
  --bg: #FAF6F1; --bg-2: #F3ECE4; --panel: #FFFFFF; --line: #E7DED3;
  --cream: #1C1916; --muted: #6F665D;
  --btn: #1F7A50; --btn-hover: #17633F; --gold: #2E9E6A; --gold-2: #1F7A50;
  --danger: #D9483B; --ok: #1F9D63; --radius: 16px;
  --ink: #17140F; --ink-2: #221D17;
  --accent: #8FE3B8; --accent-2: #B5EFD0; --accent-text: #1F7A50; --accent-soft: #E6F7EE;
  --glow: 0 30px 80px -24px rgba(143, 227, 184, .55);
  --serif: "Noto Serif Thai", "IBM Plex Sans Thai", Georgia, serif;
  --sans: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Dark zones: same variable names, dark values — everything inside flips automatically. */
.topbar, .owners, .cta, .site-footer, .shop-overlay, .shop-card .cover {
  --bg: #17140F; --bg-2: #1F1A14; --panel: #241E18; --line: rgba(255, 255, 255, .12);
  --cream: #F7F2EC; --muted: #B5AC9F; --gold: #7FD3A8; --gold-2: #8FDDB5;
  color: var(--cream);   /* text colour is inherited as a value, so each zone resets it */
}

/* ---------- base ---------- */
body { background: var(--bg); color: var(--cream); font-family: var(--sans); }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; line-height: 1.22; }
h1 { font-size: clamp(38px, 5.6vw, 72px); }
h2 { font-size: clamp(28px, 3.4vw, 46px); }
h3 { font-family: var(--sans); font-weight: 600; }
p { color: var(--muted); }
.eyebrow { color: var(--accent-text); font-weight: 600; letter-spacing: .04em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- floating dark nav ---------- */
.topbar { top: 10px; padding: 10px 16px 0; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.topbar .wrap { height: 64px; padding: 0 22px; background: var(--ink); border-radius: 14px; box-shadow: 0 10px 30px rgba(23, 20, 15, .18); }
.logo { font-family: var(--sans); color: #fff; }
.nav { gap: 30px; font-size: 15px; }
.nav a { color: #EDE6DD; opacity: .85; }
.nav a:not(.nav-cta):hover { color: #fff; opacity: 1; }
.nav a[aria-current="page"]:not(.nav-cta)::after { background: var(--accent); }
.nav .nav-cta { background: var(--btn); color: #fff; border-radius: 10px; padding: 10px 20px; transition: background .2s, box-shadow .2s, transform .2s; }
.nav .nav-cta:hover { background: var(--btn-hover); box-shadow: 0 8px 22px rgba(143, 227, 184, .45); transform: translateY(-1px); }
.nav .nav-cta[aria-current="page"] { box-shadow: 0 0 0 2px var(--accent); }
.menu-btn { background: var(--ink-2); }
.menu-panel { box-shadow: 0 18px 40px rgba(23, 20, 15, .3); }
.menu-panel a:hover, .menu-panel button.menu-login:hover { background: rgba(255, 255, 255, .06); }

/* ---------- buttons: ink with a mint glow ---------- */
.btn { background: var(--ink); color: #fff; border-radius: 10px; font-weight: 600; transition: background .2s, box-shadow .2s, transform .2s, border-color .2s; }
.btn:hover { background: #000; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(143, 227, 184, .45); }
.btn.ghost { background: var(--panel); color: var(--cream); border: 1px solid #D9CFC3; }
.btn.ghost:hover { background: var(--panel); border-color: var(--cream); color: var(--cream); box-shadow: none; }
.topbar .btn.ghost, .owners .btn.ghost, .cta .btn.ghost { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.owners .btn, .cta .btn { background: #fff; color: var(--ink); }
.owners .btn:hover, .cta .btn:hover { background: #fff; }

/* ---------- cards, chips, inputs ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); transition: box-shadow .25s, transform .25s; }
.chip { background: var(--panel); border-color: var(--line); }
.icon-tile { background: #E6F4EC; color: var(--btn); border-radius: 12px; }
input, select, textarea, .feedback-form textarea { background: var(--panel) !important; border-color: #DDD3C7; color: var(--cream); }
input:focus, select:focus, textarea:focus { border-color: var(--btn); box-shadow: 0 0 0 3px rgba(31, 122, 80, .14); }
.topbar input, .owners input { background: var(--ink-2) !important; }
.notice { background: var(--accent-soft); border-color: #BFE8D2; color: var(--accent-text); }

/* ---------- home hero: full-width photo that fades out across the left half ---------- */
/* The fade colour follows the mode (cream in light, ink in dark) so the headline stays readable. */
.hero { --fade: 250, 246, 241; min-height: max(600px, calc(100vh - 84px)); background: rgb(var(--fade)); }
:root[data-theme="dark"] .hero { --fade: 18, 16, 13; }
.hero::before { inset: 0; border-radius: 0; }
.hero::after { display: block; background:
    linear-gradient(90deg, rgba(var(--fade), .97) 0%, rgba(var(--fade), .82) 32%, rgba(var(--fade), .3) 62%, rgba(var(--fade), .05) 100%),
    linear-gradient(180deg, rgba(var(--fade), .45) 0%, rgba(var(--fade), 0) 28%, rgba(var(--fade), 0) 75%, rgba(var(--fade), .7) 100%); }
.hero-copy { max-width: 680px; }
.hero p { color: var(--muted); }
.hero h1 .hl { color: var(--btn); }
.hero-points li { background: rgba(var(--fade), .75); border-color: var(--line); color: var(--cream); backdrop-filter: blur(4px); }
.hero-points .ico { color: var(--btn); }
@media (max-width: 900px) {
  /* Narrow screens: the copy covers the whole width, so fade top-to-bottom instead. */
  .hero::after { background: linear-gradient(180deg, rgba(var(--fade), .55) 0%, rgba(var(--fade), .86) 45%, rgba(var(--fade), .97) 100%); }
}

/* ---------- home sections ---------- */
.cust-item.is-active { background: linear-gradient(90deg, #E6F4EC, transparent 80%); border-left-color: var(--btn); }
.cust-item.is-active h3 { color: var(--btn); }
.roll-track::before { background: repeating-linear-gradient(to bottom, rgba(28, 25, 22, .16) 0 8px, transparent 8px 18px); }
.step-ico { color: var(--accent-2); }
.price-strip .num { color: var(--cream); font-family: var(--serif); font-weight: 500; }
.price-strip .card.best { border-color: var(--accent); box-shadow: 0 12px 30px -12px rgba(143, 227, 184, .45); }
.price-strip .card.best .badge { color: var(--accent-text); border-color: #BFE8D2; background: var(--accent-soft); }

/* Owners: a dark rounded panel with a mint glow (no wood rails) */
.owners { margin: 40px 16px 80px; border: 0; border-radius: 32px; box-shadow: var(--glow);
  background: radial-gradient(900px 420px at 85% 0%, rgba(31, 122, 80, .35), transparent 70%), radial-gradient(700px 400px at 0% 100%, rgba(143, 227, 184, .14), transparent 70%), var(--ink); }
.owners .eyebrow { color: var(--accent-2); }
.owner-feats li, .owner-steps li { background: rgba(255, 255, 255, .04); }
.owner-feats li:hover { border-color: rgba(143, 227, 184, .5); }
.owners .icon-tile { background: rgba(127, 211, 168, .12); color: var(--gold-2); }
.fee-card { background: linear-gradient(150deg, rgba(143, 227, 184, .16), var(--panel) 60%); border-color: rgba(143, 227, 184, .45); }
.fee-card .icon-tile { background: rgba(143, 227, 184, .18); color: var(--accent-2); }

/* Closing CTA: dark rounded panel too */
.cta { margin: 24px 16px 72px; border: 0; border-radius: 28px; background: var(--ink); box-shadow: var(--glow); }
.cta p { color: var(--muted); }

/* ---------- footer: ink, mint CTA ---------- */
.site-footer { background: var(--ink); border-top: 0; border-radius: 28px 28px 0 0; }
.footer-bottom { background: #110E0A; }
.footer-col a:hover, .footer-phone:hover { color: var(--accent-2); }
.footer-contact p span { color: var(--accent-2); }
.footer-cta { color: #0F1F17; background: linear-gradient(90deg, var(--accent), #5CC795); box-shadow: 0 14px 30px rgba(143, 227, 184, .45); }
.footer-cta:hover { color: #0F1F17; background: linear-gradient(90deg, #6FD3A4, var(--accent)); }

/* ---------- booking, shops, history, account ---------- */
.carousel { border-radius: 22px; }
.shop-overlay h1, .shop-overlay .chip { color: #fff; }
.shop-overlay .eyebrow { color: var(--accent-2); }
.cal-day:disabled { color: #CFC5B9; }
.cal-day[aria-pressed="true"] { background: var(--btn); color: #fff; }
.cell.off { background: #F1EBE3; }
.sw.off { background: #E7DED3; }
.sh-table { border: 1px solid var(--line); border-left: 4px solid #8B5A2B; }
.summary .price { color: var(--cream); font-family: var(--serif); font-weight: 500; }
.opt input:checked + span { background: var(--btn); border-color: var(--btn); }
.badge.upcoming { color: #B26A00; border-color: #F3D7A1; background: #FFF8EA; }
.badge.completed { color: #157347; border-color: #BFE5CF; background: #EEF8F2; }
.badge.cancelled { color: var(--danger); border-color: #F5C3BE; background: #FDF1EF; }
.stat .num { color: var(--cream); font-family: var(--serif); font-weight: 500; }
.row { background: var(--panel); }
.avatar { background: var(--btn); }
.shop-card .cover { background: radial-gradient(ellipse at center, #1d6a47, #0c2a1d 80%); }

/* ---------- login ---------- */
.auth-main::after { background: radial-gradient(ellipse at center, rgba(250, 246, 241, .55) 0%, rgba(250, 246, 241, .9) 60%, var(--bg) 100%); }
.auth-card { background: var(--panel) !important; box-shadow: 0 30px 70px -20px rgba(23, 20, 15, .25), var(--glow); border: 1px solid var(--line); }
.login-mark, .cta .cta-mark { filter: none; }
.auth-card .login-mark { filter: invert(1) brightness(.2); }
.tabs { background: var(--bg-2); border-color: var(--line); }
.tabs button.active, .tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.btn-google { border-color: #DDD3C7; }

/* ---------- small screens ---------- */
@media (max-width: 800px) {
  .topbar { padding: 8px 10px 0; }
  .topbar .wrap { padding: 0 14px; }
  .owners, .cta { margin-left: 10px; margin-right: 10px; border-radius: 22px; }
}

/* Snooker-ball step numbers keep their own ink */
.ball.yellow { color: #1C1916; }

/* ===================== Dark mode — the only mode (<html data-theme="dark"> on every page) ===================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12100D; --bg-2: #1A1612; --panel: #1E1A15; --line: rgba(255, 255, 255, .10);
  --cream: #F3EEE7; --muted: #ADA398;
  --btn: #1F7F55; --btn-hover: #23855A; --gold: #6FCF9F; --gold-2: #7FD8AA;
  --ok: #4CC38A; --danger: #F07A6E;
  --accent-text: #8FE3B8; --accent-soft: rgba(143, 227, 184, .14);
  --glow: 0 30px 80px -30px rgba(143, 227, 184, .4);
}
/* Dark zones sit one step lighter than the page so they still read as panels. */
[data-theme="dark"] .topbar .wrap, [data-theme="dark"] .owners, [data-theme="dark"] .cta, [data-theme="dark"] .site-footer { background-color: #1B1712; border: 1px solid rgba(255, 255, 255, .08); }
[data-theme="dark"] .owners { background: radial-gradient(900px 420px at 85% 0%, rgba(31, 122, 80, .3), transparent 70%), radial-gradient(700px 400px at 0% 100%, rgba(143, 227, 184, .12), transparent 70%), #1B1712; }
[data-theme="dark"] .topbar, [data-theme="dark"] .owners, [data-theme="dark"] .cta, [data-theme="dark"] .site-footer, [data-theme="dark"] .shop-overlay, [data-theme="dark"] .shop-card .cover { --panel: #26201A; }
[data-theme="dark"] .footer-bottom { background: #0E0C09; }

/* Buttons: light "ink" on dark */
[data-theme="dark"] .btn { background: #F3EEE7; color: #17140F; }
[data-theme="dark"] .btn:hover { background: #fff; }
[data-theme="dark"] .btn.ghost { background: transparent; color: var(--cream); border-color: rgba(255, 255, 255, .22); }
[data-theme="dark"] .btn.ghost:hover { border-color: var(--cream); background: rgba(255, 255, 255, .04); }

/* Surfaces that were tinted for the light theme */
[data-theme="dark"] .icon-tile { background: rgba(111, 207, 159, .14); color: var(--gold-2); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .feedback-form textarea { background: #17130F !important; border-color: rgba(255, 255, 255, .14); color: var(--cream); }
[data-theme="dark"] .notice { border-color: rgba(143, 227, 184, .35); }
[data-theme="dark"] .cust-item.is-active { background: linear-gradient(90deg, rgba(111, 207, 159, .12), transparent 80%); }
[data-theme="dark"] .roll-track::before { background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .16) 0 8px, transparent 8px 18px); }
[data-theme="dark"] .price-strip .card.best .badge { border-color: rgba(143, 227, 184, .4); }
[data-theme="dark"] .badge.upcoming { color: #F5C55B; border-color: rgba(245, 197, 91, .35); background: rgba(245, 197, 91, .1); }
[data-theme="dark"] .badge.completed { color: #6FCF9F; border-color: rgba(111, 207, 159, .35); background: rgba(111, 207, 159, .1); }
[data-theme="dark"] .badge.cancelled { color: #F07A6E; border-color: rgba(240, 122, 110, .35); background: rgba(240, 122, 110, .1); }
[data-theme="dark"] .cal-day:disabled { color: rgba(255, 255, 255, .4); }
[data-theme="dark"] .cell.off { background: rgba(255, 255, 255, .05); }
[data-theme="dark"] .sw.off { background: rgba(255, 255, 255, .12); }
[data-theme="dark"] .sh-table { border-color: rgba(255, 255, 255, .1); border-left-color: #8B5A2B; }
[data-theme="dark"] .ball.yellow { color: #1C1916; }
[data-theme="dark"] .auth-main::after { background: radial-gradient(ellipse at center, rgba(18, 16, 13, .45) 0%, rgba(18, 16, 13, .88) 60%, var(--bg) 100%); }
[data-theme="dark"] .auth-card .login-mark { filter: none; }
[data-theme="dark"] .tabs button.active, [data-theme="dark"] .tabs button[aria-selected="true"] { background: var(--btn); }
[data-theme="dark"] .card:hover { box-shadow: none; }

/* Auto-hiding header (Script/header-scroll.js) */
.topbar { transition: transform .28s ease; will-change: transform; }
.topbar.is-hidden { transform: translateY(calc(-100% - 14px)); }
@media (prefers-reduced-motion: reduce) { .topbar { transition: none; } }

/* Booking calendar: days of this week that already went by — own colour, not clickable */
.cal-day.passed:disabled { background: rgba(255, 255, 255, .05); color: #8A8278; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .35); cursor: not-allowed; }
.cal-day.passed.today:disabled { box-shadow: inset 0 0 0 1px rgba(143, 227, 184, .6); }

/* Minimal scrollbars everywhere (page, pop-ups, tables, grids): thin, rounded, no track, no arrow buttons.
   Chrome / Edge / Safari use the ::-webkit-scrollbar rules; Firefox gets the standard properties. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .32); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
}

/* Big page heading with a leading icon (shops page: ร้านสนุ๊ก) */
.h1-ico { display: flex; align-items: center; gap: .28em; }
.h1-ico .ico { width: .82em; height: .82em; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* "ใช้ตำแหน่งของฉัน" toggle: on = filled green */
[data-theme="dark"] .shop-tools #use-location { transition: background .2s, border-color .2s, color .2s; }
[data-theme="dark"] .shop-tools #use-location[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: #fff; }
[data-theme="dark"] .shop-tools #use-location[aria-pressed="true"]:hover { background: var(--btn-hover); border-color: var(--btn-hover); }

/* Booking: photo of the chosen table, at the top of the price summary (snooker_tables.photo, 012) */
.summary .table-photo { margin: 0 0 20px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); animation: tp-in .25s ease; }
.summary .table-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.summary .table-photo figcaption { padding: 8px 12px; font-size: 13px; color: var(--muted); }
@keyframes tp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .summary .table-photo { animation: none; } }

/* Booking: "ราคาปกติ" crossed out next to the price (price types, 013) */
.summary .price s { font-size: .45em; color: var(--muted); margin-left: 6px; text-decoration-thickness: 1px; }

/* Booking: VIP tag on a table (014) */
.vip-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--vip); color: var(--vip-text); font: 700 10px/1.4 inherit; letter-spacing: .06em; font-style: normal; vertical-align: middle; }

/* Booking grid: โต๊ะสนุ๊ก section above, โต๊ะพูล below; VIP rows framed in gold (the one gold accent, by request) */
:root { --vip: #D4AF37; --vip-text: #E8C766; }
.sched { position: relative; }
.sched-wrap { padding: 4px; }
.sh-group { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; margin: 10px 0 2px; padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-weight: 600; font-size: 14px; color: inherit; }
.sh-group small { font-weight: 400; font-size: 12px; color: var(--muted); }
.vip-frame { position: absolute; grid-column: 1 / -1; inset: -3px; border: 2px solid var(--vip); border-radius: 11px; pointer-events: none; z-index: 2; box-shadow: 0 0 0 3px rgba(212, 175, 55, .14), 0 0 22px rgba(212, 175, 55, .3); }
.sh-table b { display: flex; align-items: center; white-space: nowrap; }
.sh-table .vip-tag { margin-left: 4px; padding: 0 4px; font-size: 10px; }
@media (prefers-reduced-motion: no-preference) { .vip-frame { animation: vip-glow 2.4s ease-in-out infinite alternate; } }
@keyframes vip-glow { from { box-shadow: 0 0 0 3px rgba(212, 175, 55, .1), 0 0 12px rgba(212, 175, 55, .2); } to { box-shadow: 0 0 0 3px rgba(212, 175, 55, .2), 0 0 26px rgba(212, 175, 55, .4); } }

/* VIP frame: gold ring with a light sweeping around it (conic gradient rotated via @property) */
@property --vip-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.vip-frame { border: 0; }
.vip-frame::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--vip-a), #A8862A, #C9A43A 18%, #E6CC78 25%, #C9A43A 32%, #A8862A 50%, #C9A43A 68%, #E6CC78 75%, #C9A43A 82%, #A8862A);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
@media (prefers-reduced-motion: no-preference) {
  .vip-frame::before { animation: vip-spin 7s linear infinite; }
}
@keyframes vip-spin { to { --vip-a: 360deg; } }

/* Customer side: no row frame — the VIP tag itself gets the gold ring with a light running round it */
.vip-tag { position: relative; border-color: transparent; color: var(--vip-text); background: rgba(212, 175, 55, .1); }
.vip-tag::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--vip-a), #A8862A, #C9A43A 18%, #E6CC78 25%, #C9A43A 32%, #A8862A 50%, #C9A43A 68%, #E6CC78 75%, #C9A43A 82%, #A8862A);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
@media (prefers-reduced-motion: no-preference) { .vip-tag::before { animation: vip-spin 4s linear infinite; } }

/* Summary card when a VIP table is picked: gold frame with the same light running round it */
.summary.is-vip { border-color: transparent; box-shadow: 0 0 0 1px rgba(212, 175, 55, .25), 0 18px 40px -20px rgba(212, 175, 55, .45); }
.summary.is-vip::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--vip-a), #A8862A, #C9A43A 18%, #E6CC78 25%, #C9A43A 32%, #A8862A 50%, #C9A43A 68%, #E6CC78 75%, #C9A43A 82%, #A8862A);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
@media (prefers-reduced-motion: no-preference) { .summary.is-vip::before { animation: vip-spin 7s linear infinite; } }
@media (max-width: 800px) { .summary.is-vip { position: relative; top: auto; } }   /* top: the desktop sticky offset would push it 100px onto the reviews */

/* ♥ likes, star ratings, reviews (017) — shared by shops / booking / history */
.shop-media { position: relative; }
.fav-btn { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; min-width: 40px; height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font: 600 13px inherit; cursor: pointer; backdrop-filter: blur(4px); }
.fav-btn .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.fav-btn[aria-pressed="true"] { color: #FF6B81; }
.fav-btn[aria-pressed="true"] .ico { fill: currentColor; }
.fav-btn span:empty { display: none; }
.fav-filter[aria-pressed="true"] { border-color: #FF6B81; color: #FF6B81; }
.fav-filter .ico { fill: none; }
.fav-filter[aria-pressed="true"] .ico { fill: currentColor; }
.stars { color: #F2C14E; letter-spacing: 1px; }
.stars .off { color: rgba(255, 255, 255, .2); }
.shop-rating { margin: 4px 0 0; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.shop-rating span { color: var(--muted); }
.shop-rating.none { color: var(--muted); font-size: 13px; }

/* Booking page: ♥ on the photo, rating chip, reviews section */
.hero-fav { top: 16px; right: 16px; z-index: 3; }
.rating-chip { text-decoration: none; color: inherit; }
.reviews { margin-top: 24px; }
.rv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rv-head h2 { margin: 0; font-size: 22px; }
.rv-score { display: flex; align-items: center; gap: 8px; }
.rv-score b { font-size: 26px; }
.rv-score span { color: var(--muted); font-size: 14px; }
.rv-form { margin: 16px 0 8px; padding: 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); }
.rv-form-title { margin: 0 0 8px; font-weight: 600; }
.rv-stars { display: flex; gap: 4px; margin-bottom: 10px; }
.rv-stars button { border: 0; background: none; padding: 2px; font-size: 30px; line-height: 1; color: rgba(255, 255, 255, .4); cursor: pointer; }   /* 27 ต.ค.: empty stars .2 → .4 white (1.9 → 3.9:1, a control needs 3:1) */
.rv-stars button[aria-pressed="true"] { color: #F2C14E; }
.rv-form textarea { width: 100%; resize: none; }
.rv-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.rv-actions .fine { margin: 0 auto 0 0; }
.rv-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.rv-list li { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .03); }
.rv-list li.mine { border: 1px solid rgba(143, 227, 184, .3); }
.rv-list li.empty { color: var(--muted); }
.rv-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-top time { margin-left: auto; color: var(--muted); font-size: 13px; }
.rv-list p { margin: 6px 0 0; }

/* About page: players / owners, 3 steps, contact admin */
.about-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 40px 0; }
.about-col h2 { margin: 6px 0 16px; font-size: clamp(24px, 3vw, 32px); }
.about-points { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.about-points li { display: flex; align-items: flex-start; gap: 14px; }
.about-points strong { display: block; }
.about-points span:not(.icon-tile) { color: var(--muted); font-size: 14px; }
.about-steps { margin: 48px 0; }
.about-steps h2 { margin-bottom: 18px; }
.steps-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps-row li { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); }
.steps-row b { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 50%; background: var(--btn); color: #fff; }
.steps-row span { color: var(--muted); font-size: 14px; }
.contact-box { margin: 0 0 80px; }
.contact-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.contact-head h2 { margin: 0 0 4px; }
.contact-head p { margin: 0; color: var(--muted); }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; }
.contact-form .full { grid-column: 1 / -1; }
.contact-form textarea { resize: none; }
.contact-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.contact-actions .fine { margin: 0 auto 0 0; }
@media (max-width: 760px) {
  .about-split, .steps-row, .contact-form { grid-template-columns: 1fr; }
}

/* Login: forgot password · Account: name + password */
.si-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.link-btn { border: 0; background: none; padding: 0; color: var(--accent, #8FE3B8); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.acc-settings { margin-top: 24px; }
.acc-form { display: flex; flex-direction: column; gap: 8px; }
.acc-form .card-title { margin-bottom: 4px; }
.acc-form label { font-size: 14px; color: var(--muted); }
.acc-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 6px; }
.acc-actions .fine { margin: 0 auto 0 0; }
.acc-form.highlight { border-color: var(--accent, #8FE3B8); box-shadow: 0 0 0 2px rgba(143, 227, 184, .25); }

/* Home: live shops instead of the old sample price strip */
.home-shops { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.home-shop { display: flex; flex-direction: column; gap: 12px; padding: 0; overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s, border-color .2s; }
.home-shop:hover { transform: translateY(-3px); border-color: var(--accent, #8FE3B8); }
.home-shop img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.home-shop img.contain { object-fit: contain; padding: 16px; }
.home-shop > div { padding: 0 18px 18px; }
.home-shop h3 { margin: 0 0 4px; }
.home-shop p { margin: 0; color: var(--muted); font-size: 14px; }
.home-shop .hs-meta { margin-top: 8px; color: inherit; }
.fav-filter[hidden], .contact-form [hidden], .shop-tools [hidden] { display: none !important; }
.rating-chip[hidden] { display: none !important; }
/* Stars keep their gold even inside rows that grey out their <span>s (.shop-rating span / .rv-score span) */
.shop-rating .stars, .rv-score .stars, .rating-chip .stars, .rv-top .stars, .hs-meta .stars { color: #F2C14E; }
.shop-rating .stars .off, .rv-score .stars .off, .rating-chip .stars .off, .rv-top .stars .off, .hs-meta .stars .off { color: rgba(255, 255, 255, .2); }

/* Shop cards (ร้านสนุ๊ก): bigger, airier info · booking buttons bottom-right */
.shop-card { grid-template-columns: 300px 1fr; gap: 36px; align-items: stretch; padding: 32px 36px; }
.shop-card .shop-media { display: block; align-self: center; }   /* hugs the picture so the ♥ sits on its corner */
.shop-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.shop-top h2 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.2; }
.shop-card .dist { font-size: 16px; padding: 6px 14px; }
.shop-card .shop-area { margin: 0; font-size: 17px; gap: 8px; color: var(--muted); }
.shop-card .shop-area .ico { width: 19px; height: 19px; flex: none; }
.shop-card .shop-rating { margin: 0; font-size: 16px; gap: 8px; }
.shop-card .shop-rating .stars { font-size: 17px; }
.shop-card .mini-chips { gap: 10px; }
.shop-card .mini-chips .chip { font-size: 15px; padding: 8px 14px; gap: 8px; }
.shop-card .mini-chips .chip .ico { width: 17px; height: 17px; }
.shop-card .shop-actions { margin-top: auto; padding-top: 10px; justify-content: flex-end; gap: 12px; }
.shop-card .shop-actions .btn { font-size: 16px; padding: 13px 26px; }
@media (max-width: 760px) {
  .shop-card { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .shop-card .shop-actions { justify-content: stretch; }
  .shop-card .shop-actions .btn { flex: 1; justify-content: center; }
}

/* Reviews: filter by stars + the shop's answer (020) */
.rv-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.rv-filter button { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: inherit; font: inherit; font-size: 14px; cursor: pointer; }
.rv-filter button span { color: var(--muted); margin-left: 2px; }
.rv-filter button[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: #fff; }
.rv-filter button[aria-pressed="true"] span { color: #fff; }   /* 27 ต.ค.: 80 % white on green was 3.8:1 */
.rv-filter button:disabled { opacity: .35; cursor: default; }
.rv-reply { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--accent, #8FE3B8); border-radius: 0 10px 10px 0; background: rgba(143, 227, 184, .06); }
.rv-reply b { font-size: 13px; color: var(--accent, #8FE3B8); }
.rv-reply p { margin: 4px 0 0; }
.rv-list li.flash { animation: rv-flash 2.4s ease; }
@keyframes rv-flash { 0%, 40% { box-shadow: 0 0 0 2px var(--accent, #8FE3B8); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Reviews: bigger writing box and easier-to-read comments */
.rv-form textarea { height: 140px; min-height: 140px; max-height: 140px; overflow-y: auto; field-sizing: fixed; padding: 14px 16px; font: inherit; font-size: 17px; line-height: 1.6; border-radius: 12px; }
.rv-form textarea::placeholder { font-size: 16px; }
.rv-form-title { font-size: 18px; }
.rv-stars button { font-size: 36px; }
.rv-list li { padding: 16px 18px; }
.rv-top { font-size: 16px; }
.rv-top time { font-size: 14px; }
.rv-list p { font-size: 17px; line-height: 1.65; margin-top: 8px; }
.rv-reply p { font-size: 16px; }
.rv-reply b { font-size: 14px; }
/* Review text in clear white */
.rv-list p, .rv-reply p, .rv-top b, .rv-form textarea { color: #F5F1EA; }

/* Payment step (021) */
.pay-dlg { width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; margin: auto; padding: 22px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .12); background: #1E1B16; color: #F5F1EA; }
.pay-dlg::backdrop { background: rgba(0, 0, 0, .7); }
.pay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pay-head h2 { margin: 0; font-size: 22px; }
.pay-timer { font-weight: 700; color: #F2C14E; font-variant-numeric: tabular-nums; }
.pay-lines { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 6px; }
.pay-lines li { display: flex; justify-content: space-between; font-size: 16px; }
.pay-lines li span { color: var(--muted); }
.pay-lines li.total { padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 20px; }
.pay-lines li.total span { color: inherit; }
.pay-target { text-align: center; }
.pay-target canvas { width: 240px; max-width: 70vw; height: auto; border-radius: 12px; }
.pay-target p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.pay-target .pay-name { color: inherit; font-weight: 600; }
.pay-target .btn.sm { min-height: 44px; padding: 8px 20px; border-radius: 999px; font-size: 14px; }   /* "บันทึก QR" in the pay dialog */
.pay-bank { display: grid; gap: 6px; justify-items: center; padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.pay-bank b { font-size: 24px; letter-spacing: 1px; }
.pay-slip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 16px; padding: 18px; border: 2px dashed rgba(143, 227, 184, .45); border-radius: 14px; cursor: pointer; text-align: center; }
.pay-slip:hover { background: rgba(143, 227, 184, .06); }
.pay-slip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pay-slip small { color: var(--muted); }
.pay-slip[hidden] { display: none; }
.pay-msg { min-height: 1.4em; margin: 12px 0 0; text-align: center; }
.pay-msg[data-kind="ok"] { color: var(--accent, #8FE3B8); font-weight: 700; }
.pay-msg[data-kind="error"] { color: #F87171; }
.pay-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-top: 14px; }
.pay-actions .danger-text { color: #F87171; }
.pay-chip { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(255, 255, 255, .15); color: var(--muted); }
.pay-chip.paid { color: var(--accent, #8FE3B8); border-color: rgba(143, 227, 184, .4); }
.pay-chip.review { color: #F2C14E; border-color: rgba(242, 193, 78, .4); }
.btn.pay-now { margin-top: 6px; }

/* Unpaid-booking count (021): red number on "ประวัติการจอง" + dot on the menu button; history "ติดตามการโอน" */
.nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: #E5484D; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: 2px; font-variant-numeric: tabular-nums; }
.nav-count[hidden] { display: none; }
.menu-btn.has-count { position: relative; }
.menu-btn.has-count::after { content: ""; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 2px #17140F; }
.pay-track { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); color: #F5F1EA; font: inherit; font-size: 15px; cursor: pointer; transition: .2s; }
.pay-track .ico { width: 18px; height: 18px; }
.pay-track .nav-count { margin-left: 0; }
.pay-track:hover { border-color: rgba(111, 207, 159, .55); color: #6FCF9F; }
.pay-track[aria-pressed="true"] { border-color: #6FCF9F; background: rgba(111, 207, 159, .12); color: #6FCF9F; }
.pay-track[hidden] { display: none; }
.pay-left { display: block; margin-top: 4px; font-size: 12px; color: #F2C14E; font-variant-numeric: tabular-nums; }
.pay-actions [hidden] { display: none; }
/* ร้านของฉัน: what waits for the shop team (red = needs action) */
.shop-card .todo { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.shop-card .todo a { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #F5F1EA; }
.shop-card .todo a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #E5484D; }
.shop-card .todo a:hover { color: #6FCF9F; }
.btn .nav-count { margin-left: 8px; vertical-align: 1px; }
.shop-card .btns .btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
/* QR check-in (028) */
.btn.ci-btn { margin-top: 6px; }
.ci-shop { margin: 4px 0 0; color: var(--muted); }
.ci-code { font: 700 22px/1.2 "Prompt", system-ui, sans-serif; letter-spacing: 2px; color: #F5F1EA !important; }
.ci-done { padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #6FCF9F; border: 1px solid rgba(111, 207, 159, .45); }
.ci-done[hidden] { display: none; }
/* Contact form: free-text subject, big message box, larger type (user, 22 ต.ค.) */
.contact-form input, .contact-form textarea { font-size: 17px; line-height: 1.6; }
.contact-form label { font-size: 16px; }
.contact-form textarea { height: 240px; min-height: 240px; max-height: 240px; overflow-y: auto; field-sizing: fixed; padding: 14px 16px; }
/* Shop contact buttons on the booking-page photo (030) */
.shop-contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.shop-contact[hidden] { display: none; }
.contact-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(23, 20, 15, .72); border: 1px solid rgba(255, 255, 255, .18); color: #F5F1EA; backdrop-filter: blur(6px); transition: background .15s, border-color .15s, transform .15s; }
.contact-btn .ico { width: 18px; height: 18px; }
.contact-btn:hover { background: #1F7A50; border-color: #1F7A50; transform: translateY(-2px); }
.contact-btn.line:hover { background: #06C755; border-color: #06C755; }
.contact-btn.youtube:hover { background: #E5302A; border-color: #E5302A; }
.contact-btn.email:hover { background: #EA4335; border-color: #EA4335; }
.shop-contact { pointer-events: auto; }
/* "เกี่ยวกับเรา" dropdown in the top nav → สำหรับลูกค้า / สำหรับเจ้าของร้าน (user, 22 ต.ค.) */
.nav-drop { position: relative; display: inline-flex; align-items: center; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; border: 0; background: none; font: inherit; color: #EDE6DD; opacity: .85; cursor: pointer; position: relative; }
.nav-drop-btn:hover, .nav-drop:focus-within .nav-drop-btn, .nav-drop.open .nav-drop-btn { color: #fff; opacity: 1; }
.nav-drop.is-current .nav-drop-btn { opacity: 1; }
.nav-drop.is-current .nav-drop-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--accent); }
.nav-chev { width: 14px; height: 14px; transition: transform .2s; }
.nav-drop:hover .nav-chev, .nav-drop:focus-within .nav-chev, .nav-drop.open .nav-chev { transform: rotate(180deg); }
.nav-drop-menu { position: absolute; top: 100%; left: 50%; z-index: 30; min-width: 200px; margin-top: 10px; padding: 8px; border-radius: 14px; background: #1E1B16; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .16s, transform .16s, visibility .16s; }
.nav-drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* keeps the hover while the mouse moves down */
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu, .nav-drop.open .nav-drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav .nav-drop-menu a { display: block; padding: 10px 14px; border-radius: 10px; white-space: nowrap; color: #EDE6DD; opacity: 1; }
.nav .nav-drop-menu a:hover { background: rgba(111, 207, 159, .14); color: #6FCF9F; }
.nav .nav-drop-menu a[aria-current="page"] { color: #6FCF9F; }
.nav .nav-drop-menu a[aria-current="page"]::after { display: none; }
.hero-ctas { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- UX/UI pass (22 ต.ค.): readable headings, clear focus, comfortable tap targets ---------- */
h1, h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }
[data-theme="dark"] input:focus-visible, [data-theme="dark"] select:focus-visible, [data-theme="dark"] textarea:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(143, 227, 184, .38); }
[data-theme="dark"] a:focus-visible, [data-theme="dark"] button:focus-visible, [data-theme="dark"] summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.footer-contact p a { display: inline-block; padding: 3px 0; min-height: 28px; }
.back-link { min-height: 32px; padding: 4px 8px 4px 0; }
.link-btn { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
.nav-drop-btn, .menu-btn { touch-action: manipulation; }
button, a, [role="button"] { -webkit-tap-highlight-color: rgba(143, 227, 184, .18); }

/* ---------- Pager (Script/pager.js): page numbers + arrows under long lists ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 8px; }
.pager button { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--cream); font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer; display: inline-grid; place-items: center; transition: background .15s, border-color .15s, color .15s; touch-action: manipulation; }
.pager button:hover:not(:disabled):not([aria-current]) { border-color: var(--gold); color: var(--gold-2); background: rgba(111, 207, 159, .1); }
.pager button[aria-current="page"] { background: var(--btn); border-color: var(--btn); color: #fff; cursor: default; }
.pager button:disabled { opacity: .3; cursor: default; }
.pager .ico { width: 18px; height: 18px; }
.pager .pg-gap { min-width: 20px; text-align: center; color: var(--muted); }
.pager .pg-info { flex-basis: 100%; text-align: center; font-size: 13px; color: var(--muted); }
.h-group, .shop-list { scroll-margin-top: 96px; }
.group-title small { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 4px; }
@media (max-width: 420px) { .pager { gap: 3px; } .pager button { min-width: 34px; padding: 0 6px; } }

/* Drop-down lists: solid dark rows + light text (a see-through select made Windows draw grey rows, user 23 ต.ค.) */
[data-theme="dark"] select { color-scheme: dark; }
[data-theme="dark"] option, [data-theme="dark"] optgroup { background: #1E1A15; color: #F3EEE7; }
[data-theme="dark"] option:checked { background: #1F7F55; color: #fff; }

/* Drop-downs drawn by Script/fancy-select.js — same look as the header's "เกี่ยวกับเรา" menu (user, 23 ต.ค.) */
.fs { position: relative; }
.fs > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.fs-btn { display: inline-flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 14px 6px 36px; border-radius: 999px; border: 1px solid var(--line);
  background: #15120E; color: var(--cream); font: inherit; font-size: 14px; cursor: pointer; text-align: left; white-space: nowrap; transition: border-color .2s, color .2s; }
.fs-btn:hover { border-color: rgba(255, 255, 255, .22); }
.fs-btn.on { border-color: var(--btn); color: var(--accent-text); }
.fs-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fs-label { flex: 1; }
.fs-chev { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .2s; }
.fs.open .fs-chev { transform: rotate(180deg); }
.fs-menu { position: absolute; top: 100%; left: 0; z-index: 40; min-width: 100%; margin: 10px 0 0; padding: 8px; list-style: none; border-radius: 14px;
  background: #1E1B16; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; }
.fs.open .fs-menu { opacity: 1; visibility: visible; transform: none; }
.fs-menu.right, .sort .fs-menu { left: auto; right: 0; }
.fs-menu li { padding: 10px 14px; border-radius: 10px; white-space: nowrap; color: #EDE6DD; font-size: 15px; cursor: pointer; outline: none; transition: background .15s, color .15s; }
.fs-menu li:hover, .fs-menu li:focus-visible { background: rgba(111, 207, 159, .14); color: #6FCF9F; }
.fs-menu li[aria-selected="true"] { color: #6FCF9F; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .fs-menu, .fs-chev { transition: none; } }

/* QR check-in card (Script/checkin-card.js, user 23 ต.ค.): "จองสำเร็จ" banner + save as picture */
.snk-ci .ci-hello { display: flex; align-items: center; gap: 12px; margin: -4px 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(143, 227, 184, .1); border: 1px solid rgba(143, 227, 184, .3); }
.snk-ci .ci-hello[hidden] { display: none; }
.snk-ci .ci-hello-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #1F7F55; color: #fff; }
.snk-ci .ci-hello-ic .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; }
.snk-ci .ci-hello b { display: block; color: #8FE3B8; font-size: 16px; }
.snk-ci .ci-hello span { font-size: 13px; color: var(--muted); }
.snk-ci .ci-save { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
@media (max-width: 380px) { .snk-ci .ci-save { grid-template-columns: 1fr; } }
.snk-ci .ci-save .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 999px; font-size: 15px; }
.snk-ci .ci-save .btn .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.snk-ci .ci-save .btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.snk-ci .ci-msg { margin: 8px 0 0; min-height: 1em; text-align: center; font-size: 13px; color: #8FE3B8; }
.snk-ci .ci-msg:empty { display: none; }
.snk-ci .pay-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.snk-ci .pay-actions .btn { min-height: 44px; border-radius: 999px; padding: 10px 20px; }
.snk-ci .pay-actions .btn[hidden] { display: none; }
.snk-ci .pay-target canvas { border-radius: 16px; }
.confirm-actions .link-btn { margin-right: 12px; }

.snk-ci .ci-save .btn { white-space: nowrap; }

/* อ่านเพิ่มเติม for long review / reply text (user, 24 ต.ค.) */
.rv-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; }
.rv-clamp.open { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.rv-more { display: inline-flex; align-items: center; min-height: 32px; margin: 2px 0 0; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: #8FE3B8; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rv-more:hover { color: #B5EFD0; }
.rv-more[hidden] { display: none; }

/* รีวิวของคุณ — the sent review folds into a card with แก้ไข (user, 25 ต.ค.) */
.rv-mine { margin: 16px 0 8px; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(143, 227, 184, .3); background: rgba(143, 227, 184, .06); }
.rv-mine[hidden] { display: none; }
.rv-mine-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-mine-top b { font-size: 16px; }
.rv-sent { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #8FE3B8; background: rgba(143, 227, 184, .12); }
.rv-sent .ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; }
.rv-sent.pop { animation: rv-pop .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes rv-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.rv-mine-top .btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; min-height: 40px; padding: 6px 16px; font-size: 14px; }
.rv-mine-top .btn .ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.rv-mine-stars { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; }
.rv-mine-stars time { font-size: 13px; color: var(--muted); }
.rv-mine p { margin: 0; line-height: 1.6; }
.rv-mine-empty, .rv-mine-hidden { color: var(--muted); font-size: 14px; }
.rv-mine-hidden { color: #F2C14E; margin-top: 6px !important; }
@media (prefers-reduced-motion: reduce) { .rv-sent.pop { animation: none; } }
.rv-mine-top .btn.danger-text { color: #F0A091; border-color: rgba(240, 122, 110, .4); }
.rv-mine-top .btn.danger-text:hover { background: rgba(240, 122, 110, .1); }

/* ---------- Pre-launch UI pass (27 ต.ค., ui-ux-pro-max): shared fixes for every customer page ---------- */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--btn); color: #fff; font-weight: 600; transition: top .15s; }
.skip-link:focus { top: 12px; }
.menu-btn { width: 44px; height: 44px; }
.socials a { width: 44px; height: 44px; }
/* "SnookSnook" in the green footer badge: the light-mint half was 4.4:1 on #1F7F55 → darker green badge (6.4:1) */
[data-theme="dark"] .footer-badge { background: #17633F; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }
.vip-tag { font-size: 11px; }
.sh-table .vip-tag { font-size: 11px; }
.price-note a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }   /* 27 ต.ค.: 23 px tall link → 44 px tap area */
main:focus { outline: none; }

/* ---------- Home: web-app downloads + install (28 ต.ค., supabase/061) ---------- */
.app-proof { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 18px; }
.app-proof[hidden], .app-count[hidden], .app-install[hidden] { display: none; }
.app-count { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 6px 14px 6px 10px; border-radius: 999px;
  border: 1px solid rgba(143, 227, 184, .3); background: rgba(18, 16, 13, .55); color: var(--cream); font-size: 15px; backdrop-filter: blur(6px); }
.app-count .ico { width: 18px; height: 18px; color: var(--accent); }
.app-count b { color: var(--accent); font: 700 17px "Prompt", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.app-count.bump { animation: app-bump .9s ease-out; }
@keyframes app-bump { 0% { box-shadow: 0 0 0 0 rgba(143, 227, 184, .55); } 100% { box-shadow: 0 0 0 14px rgba(143, 227, 184, 0); } }
.app-install { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22);
  background: transparent; color: var(--cream); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.app-install:hover { border-color: var(--accent); color: var(--accent); background: rgba(143, 227, 184, .06); }
.app-install .ico { width: 18px; height: 18px; }
.app-ios { max-width: 380px; width: calc(100% - 32px); padding: 26px 24px 22px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .12); background: #1E1A15; color: var(--cream); }
.app-ios::backdrop { background: rgba(0, 0, 0, .6); }
.app-ios h2 { font-size: 22px; margin: 0 0 14px; }
.app-ios ol { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 10px; line-height: 1.6; }
.app-ios li .ico { width: 18px; height: 18px; vertical-align: -3px; color: var(--accent); }
.app-ios .btn { width: 100%; min-height: 46px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .app-count.bump { animation: none; } .app-install { transition: none; } }

/* Page-to-page without the blank flash (29 ต.ค.: in the installed app every link "closed" the screen for a moment).
   Same-site navigations keep the old page on screen until the new one is ready, then cross-fade (Chrome / Edge 126+,
   Safari 18.2+; other browsers just navigate as before). The dark page colour is set on <html> so nothing white shows. */
@view-transition { navigation: auto; }
html { background: #12100D; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Thai headlines: "สนุ๊ก" is not in the browser dictionary, so it split mid-word (จองโต๊ะสนุ้ / ก…). Break only between these groups. */
.hero h1 .nw { white-space: nowrap; }
/* the count is a <p> inside the hero: undo the hero paragraph size / margin so it lines up with the install button (29 ต.ค.) */
.hero .app-proof { align-items: center; }
.hero .app-count { margin: 0; max-width: none; min-height: 44px; padding: 6px 16px 6px 12px; font-size: 15px; line-height: 1.4; color: var(--cream); }
.hero .app-count b { font-size: 16px; }
.hero .app-install { min-height: 44px; }

/* Floating "ติดตั้งแอป" (29 ต.ค.): bottom-right on every customer page, slides away while scrolling down */
.app-fab { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 10px 20px 10px 16px; border-radius: 999px; border: 1px solid rgba(143, 227, 184, .45); background: #1F7F55; color: #fff;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7), 0 0 0 4px rgba(143, 227, 184, .12);
  transition: transform .28s ease, opacity .28s ease, background .2s; }   /* same timing as the top bar */
.app-fab:hover { background: #23855A; }
.app-fab .ico { width: 19px; height: 19px; }
.app-fab[hidden] { display: none; }
.app-fab.away { transform: translateY(calc(100% + 32px)); opacity: 0; pointer-events: none; }
@media (max-width: 520px) { .app-fab { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .app-fab { transition: opacity .2s; } .app-fab.away { transform: none; } }

/* Confirm pop-up (Script/auth.js: ออกจากระบบ? · ยกเลิก / ออกจากระบบ) — 29 ต.ค. */
.snook-confirm { max-width: 380px; width: calc(100% - 32px); padding: 28px 24px 22px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .12); background: #1E1A15; color: #F3EEE7; text-align: center; }
.snook-confirm[open] { animation: sc-in .18s ease-out; }
.snook-confirm::backdrop { background: rgba(0, 0, 0, .6); }
@keyframes sc-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.snook-confirm .sc-ico { width: 52px; height: 52px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 16px; background: rgba(143, 227, 184, .12); color: #8FE3B8; }
.snook-confirm .sc-ico .ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.snook-confirm h2 { font-family: "Prompt", system-ui, sans-serif; font-size: 22px; font-weight: 600; margin: 0 0 6px; color: #F3EEE7; }
.snook-confirm p { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: #B9B0A4; }
.snook-confirm .sc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.snook-confirm .btn { min-height: 46px; border-radius: 999px; justify-content: center; width: 100%; }
.snook-confirm .btn:disabled { opacity: .7; cursor: wait; }
@media (prefers-reduced-motion: reduce) { .snook-confirm[open] { animation: none; } }

/* dialogs sit in the middle of the screen (a page reset sets margin: 0 on everything) */
.snook-confirm, .app-ios { margin: auto; }
.snook-confirm .btn:not(.ghost) { background: #1F7F55; border-color: #1F7F55; color: #fff; }
.snook-confirm .btn:not(.ghost):hover { background: #23855A; }
.footer-contact a { overflow-wrap: break-word; }   /* long e-mail on phones: breaks after "@" (<wbr>, 29 ต.ค.) */

/* Pop-ups keep the scroll to themselves (30 ต.ค.: scrolling past the end of the pack pop-up moved the page behind it):
   the page behind any open modal stays still, and a pop-up's own scroll never hands over to the page. */
html:has(dialog[open]) { overflow: hidden; }
dialog { overscroll-behavior: contain; }

/* Top menu (30 ต.ค., + "ติดต่อแอดมิน"): words never break ("ร้าน / สนุ๊ก"); below 1180 px the ☰ menu takes over
   (a signed-in member has up to 7 links + the account button, which no longer fit in one line there) */
.topbar .nav > a, .topbar .nav-drop-btn { white-space: nowrap; }
@media (max-width: 1180px) {
  .topbar .nav { display: none; }
  .topbar .menu { display: block; }
}

/* Home hero on phones (user, 31 ต.ค.: "หน้าที่มีพื้นหลังโต๊ะสนุ้กมันดูแคบไปอึดอัด"): the photo shows at the top, the copy sits
   at the bottom with a calmer headline, compact chips and two equal buttons. */
@media (max-width: 600px) {
  .hero { min-height: calc(100svh - 72px); align-items: flex-end; padding: 120px 0 48px; }
  .hero::before { background-position: 60% center; }
  .hero-copy { max-width: none; }
  .hero .eyebrow { font-size: 13px; }
  .hero h1 { font-size: clamp(32px, 9.2vw, 40px); line-height: 1.22; margin-bottom: 20px; }
  .hero-points { gap: 8px; margin-bottom: 26px; }
  .hero-points li { padding: 7px 12px; font-size: 14px; gap: 6px; }
  .hero-points .ico { width: 16px; height: 16px; }
  .hero .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero .btn-row .btn { display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px 10px; min-height: 52px; }
}

/* Hero photo (31 ต.ค.): our own copy — Unsplash License (Rafael Otaki, unsplash.com/photos/YwLS7ZtZKK0). Phones get a
   tighter portrait crop with the balls in the upper half, above the headline. */
.hero::before { background-position: 70% center; }
@media (max-width: 600px) {
  .hero::before { background-image: url("/Assets/hero-snooker-m.jpg"); background-position: center top; }
  /* the photo is already dark: keep its top clear, fade only behind the copy */
  .hero::after { background: linear-gradient(180deg, rgba(var(--fade), .15) 0%, rgba(var(--fade), .2) 38%, rgba(var(--fade), .88) 58%, rgba(var(--fade), .97) 100%); }
}

/* for_players "จองเสร็จใน 3 ขั้นตอน" (review 31 ต.ค.: same 3 steps as home) — about.css lays out 4 */
@media (min-width: 961px) { .pl-steps.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }