/* Customer website */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(6, 35, 26, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--cream); }
/* Soft cream halo so the logo's black lettering reads on the dark felt background */
.logo { height: 58px; width: auto; display: block; margin: -6px 0; filter: drop-shadow(0 0 1.5px rgba(246,241,231,0.9)) drop-shadow(0 0 6px rgba(246,241,231,0.35)); }
.brand-name { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.06em; }
.site-nav { display: flex; gap: 1.25rem; align-items: center; }
.hero-logo { height: clamp(160px, 30vw, 270px); width: auto; margin: -1rem auto 0.5rem; display: block; filter: drop-shadow(0 0 2px rgba(246,241,231,0.95)) drop-shadow(0 0 14px rgba(246,241,231,0.35)) drop-shadow(0 14px 30px rgba(0,0,0,0.5)); }

/* Social + contact links */
.social { display: inline-flex; align-items: center; gap: 0.5rem; }
.social a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--cream-dim); text-decoration: none; border-radius: 999px; transition: color 0.15s, background 0.15s; }
.social a:hover { color: var(--brass-light); }
.social svg { width: 20px; height: 20px; fill: currentColor; }
.social-sm a { padding: 0.35rem; }
.social-lg { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.social-lg a { padding: 0.55rem 0.9rem; border: 1px solid var(--border); background: rgba(0,0,0,0.2); font-weight: 600; font-size: 0.9rem; }
.social-lg a:hover { background: rgba(214,165,76,0.12); border-color: var(--brass); }
.social-lg svg { width: 22px; height: 22px; }
.contact-line { display: flex; align-items: center; gap: 0.75rem; color: var(--cream); text-decoration: none; padding: 0.45rem 0; border-radius: 8px; }
.contact-line:hover { color: var(--brass-light); }
.contact-line svg { width: 22px; height: 22px; fill: currentColor; color: var(--brass); flex-shrink: 0; }
.contact-line > span { display: flex; flex-direction: column; line-height: 1.25; }
.contact-line small { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.contact-address { font-weight: 600; }
.contact-address small { text-transform: none; letter-spacing: 0; color: var(--brass-light); margin-top: 0.15rem; }
.btn-whatsapp { margin-top: 0.6rem; background: #25d366; border-color: #25d366; color: #062b17; }
.btn-whatsapp:hover { background: #3ee07a; border-color: #3ee07a; }
.btn-whatsapp svg { width: 20px; height: 20px; fill: currentColor; }
.footer-inner a[data-href] { color: var(--cream-dim); text-decoration: none; }
.footer-inner a[data-href]:hover { color: var(--brass-light); }
.site-nav a { color: var(--cream-dim); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.site-nav a:hover { color: var(--cream); }
.site-nav .staff-link { padding: 0.35rem 0.8rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.8rem; }

.hero { padding: 5rem 0 3.5rem; text-align: center; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.75rem; color: var(--brass); font-weight: 700; margin-bottom: 0.75rem; }
.hero-title { font-size: clamp(3rem, 8vw, 6rem); line-height: 0.95; }
.hero-sub { color: var(--cream-dim); font-size: 1.15rem; max-width: 560px; margin: 1rem auto 1.75rem; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 1.25rem; flex-wrap: wrap; }
.hero-hours { color: var(--cream-dim); font-size: 0.95rem; }
.hero-hours strong { color: var(--cream); }

.reserve { padding: 1rem 0 3rem; }
.section-head h2 { font-size: 2.4rem; }
.section-head { margin-bottom: 1.25rem; }

/* Activity picker (billiards / PS5 / ping pong) */
.panel-kinds { margin-bottom: 1.25rem; }
.kind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; }
.kind-btn { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem; border-radius: 14px; border: 1px solid var(--border); background: rgba(0,0,0,0.2); color: var(--cream-dim); cursor: pointer; text-align: left; transition: all 0.15s; }
.kind-btn .icon { font-size: 2rem; line-height: 1; }
.kind-btn .name { display: block; font-family: var(--font-display); font-size: 1.45rem; letter-spacing: 0.04em; color: var(--cream); line-height: 1.05; }
.kind-btn .count { display: block; font-size: 0.78rem; margin-top: 0.15rem; }
.kind-btn { grid-template-columns: auto 1fr auto; }
.kind-btn .price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.15; }
.kind-btn .price strong { font-size: 1.05rem; color: var(--brass-light); }
.kind-btn .price small { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }
.kind-btn .price em { font-style: normal; font-size: 0.68rem; color: var(--green); margin-top: 0.2rem; white-space: nowrap; }
.kind-btn.active .price strong, .kind-btn.active .price em { color: var(--felt-900); }

/* Happy hour banner + price list */
.hh-banner { margin: 0 0 1rem; padding: 0.7rem 1rem; border-radius: 12px; background: rgba(62,201,138,0.12); border: 1px solid rgba(62,201,138,0.4); color: var(--cream); font-size: 0.95rem; }
.hh-banner strong { color: var(--green); }
.prices { padding: 0 0 3rem; }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0.9rem; }
.price-card strong { white-space: normal; line-height: 1.05; }
.price-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; padding: 1rem 1.25rem; border-radius: var(--radius); border: 1px solid var(--border); background: rgba(255,255,255,0.035); }
.price-card .icon { font-size: 1.9rem; }
.price-card strong { display: block; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.04em; }
.price-card span { font-size: 0.78rem; color: var(--cream-dim); }
.price-card .amount { font-family: var(--font-display); font-size: 1.7rem; color: var(--brass-light); white-space: nowrap; padding-left: 0.4rem; }
.price-card.hh { border-color: rgba(62,201,138,0.45); background: rgba(62,201,138,0.08); }
.price-card.hh .amount { color: var(--green); }
.price-line { display: block; margin-top: 0.35rem; color: var(--cream); }
.price-line em { font-style: normal; color: var(--green); font-size: 0.85rem; }
.kind-btn:hover { border-color: rgba(246,241,231,0.3); background: rgba(255,255,255,0.05); }
.kind-btn.active { background: var(--brass); border-color: var(--brass); color: rgba(6,35,26,0.75); }
.kind-btn.active .name { color: var(--felt-900); }

/* Two-panel booking layout: days on the left, times on the right */
.reserve-layout { display: grid; grid-template-columns: minmax(250px, 1fr) 2.6fr; gap: 1.25rem; align-items: stretch; min-height: 520px; }
.panel { background: rgba(255,255,255,0.035); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; display: flex; flex-direction: column; min-width: 0; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.panel-head h3 { font-size: 1.5rem; color: var(--brass-light); }
.panel-sub { font-size: 0.85rem; color: var(--cream-dim); }
.panel-days { position: relative; }
.date-list { position: absolute; left: 1.25rem; right: 1.25rem; top: 4.4rem; bottom: 1.25rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.45rem; padding-right: 0.25rem; scrollbar-width: thin; scrollbar-color: rgba(246,241,231,0.25) transparent; }
.date-chip { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: 0.75rem; width: 100%; padding: 0.55rem 0.8rem; border-radius: 12px; border: 1px solid var(--border); background: rgba(0,0,0,0.2); cursor: pointer; text-align: left; color: var(--cream-dim); transition: all 0.15s; }
.date-chip .day { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--cream); text-align: center; }
.date-chip .meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.date-chip .dow { font-size: 0.95rem; font-weight: 600; color: var(--cream); }
.date-chip .mon { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
.date-chip .tag { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.2rem 0.5rem; border-radius: 999px; background: var(--green-soft); color: var(--green); }
.date-chip .tag-soft { background: rgba(255,255,255,0.08); color: var(--cream-dim); }
.date-chip:hover { border-color: rgba(246,241,231,0.3); background: rgba(255,255,255,0.05); }
.date-chip.active { background: var(--brass); border-color: var(--brass); color: var(--felt-900); }
.date-chip.active .day, .date-chip.active .dow { color: var(--felt-900); }
.date-chip.active .tag { background: rgba(6,35,26,0.18); color: var(--felt-900); }

.panel-times .slot-grid { flex: 1; align-content: start; }
.legend { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--cream-dim); margin-bottom: 0.9rem; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-available { background: var(--green); }
.dot-taken { background: var(--red); }
.dot-past { background: #55635b; }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.7rem; min-height: 120px; }
.slot-loading, .slot-empty { grid-column: 1 / -1; color: var(--muted); text-align: center; padding: 2rem; }
.slot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem;
  padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.03); text-align: left; cursor: pointer; transition: all 0.15s;
  color: var(--cream);
}
.slot .time { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }
.slot .state { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: flex-start; gap: 0.35rem; line-height: 1.3; }
.slot .state .dot { flex: 0 0 auto; margin-top: 0.22em; } /* sits on the first line even when the label wraps */
.slot .tables { font-size: 0.75rem; color: var(--muted); }
.slot-available { border-color: rgba(62, 201, 138, 0.35); }
.slot-available .state { color: var(--green); }
.slot-available:hover { background: var(--green-soft); border-color: var(--green); transform: translateY(-2px); }
.slot-taken { border-color: rgba(217, 83, 79, 0.35); background: rgba(217, 83, 79, 0.08); cursor: not-allowed; }
.slot-taken .state { color: #ff9e9a; }
.slot-past { opacity: 0.45; cursor: not-allowed; }
.slot-past .state { color: var(--muted); }

.live-note { margin-top: 1rem; font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 0.5rem; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; box-shadow: 0 0 0 0 rgba(62,201,138,0.6); animation: pulse 2s infinite; }
.live-note.offline .live-dot { background: var(--muted); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(62,201,138,0.6); } 70% { box-shadow: 0 0 0 8px rgba(62,201,138,0); } 100% { box-shadow: 0 0 0 0 rgba(62,201,138,0); } }

/* Party reservations – enquiry only (WhatsApp / phone) */
.party { padding: 0 0 3rem; }
.party-card { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; padding: 2rem; border-radius: var(--radius); border: 1px solid rgba(214,165,76,0.35); background: linear-gradient(135deg, rgba(214,165,76,0.14), rgba(255,255,255,0.03) 55%, rgba(34,116,86,0.18)); }
.party-card h2 { font-size: 2.6rem; margin-bottom: 0.5rem; }
.party-text p { color: var(--cream-dim); }
.party-text .eyebrow { margin-bottom: 0.3rem; }
.party-points { margin: 0; padding-left: 1.2rem; color: var(--cream-dim); line-height: 1.7; }
.party-points li::marker { color: var(--brass); }
.party-actions { display: flex; flex-direction: column; gap: 0.7rem; align-items: stretch; }
.btn-lg { padding: 0.9rem 1.4rem; font-size: 1.05rem; justify-content: center; }
.btn-lg svg, .btn-icon { width: 20px; height: 20px; fill: currentColor; }
.party-actions .btn-whatsapp { margin-top: 0; }
.party-alt { text-align: center; color: var(--cream-dim); font-size: 0.9rem; text-decoration: none; }
.party-alt:hover { color: var(--brass-light); }
.party-alt span { color: var(--cream); font-weight: 600; }

.info { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; padding-bottom: 3rem; }
.info h3 { font-size: 1.4rem; margin-bottom: 0.6rem; color: var(--brass-light); }
.info p { margin: 0; color: var(--cream-dim); white-space: pre-line; }
.info p strong { color: var(--cream); }

.site-footer { border-top: 1px solid var(--border); padding: 1.5rem 0; color: var(--muted); font-size: 0.85rem; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.site-footer .staff-link { color: var(--cream-dim); text-decoration: none; font-weight: 600; }
.site-footer .staff-link:hover { color: var(--brass-light); }

.start-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.start-row input[type="time"] { width: auto; min-width: 140px; color-scheme: dark; font-size: 1.05rem; font-weight: 600; }
.start-note { font-size: 0.85rem; color: var(--green); }
.start-note.warn { color: var(--amber); }
.duration-empty { color: var(--muted); font-size: 0.9rem; padding: 0.5rem 0; }
.duration-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.45rem; }
.duration-btn { padding: 0.55rem 0.5rem; border-radius: 10px; border: 1px solid var(--border); background: rgba(0,0,0,0.25); color: var(--cream); cursor: pointer; font-weight: 600; font-size: 0.9rem; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.duration-btn small { font-size: 0.7rem; color: var(--muted); font-weight: 400; }
.duration-btn:hover { border-color: rgba(246,241,231,0.35); }
.duration-btn.active { background: var(--brass); border-color: var(--brass); color: var(--felt-900); }
.duration-btn.active small { color: rgba(6,35,26,0.7); }
.duration-btn.open { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 0.5rem; }
.duration-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.duration-summary { margin: 0.5rem 0 0; font-size: 0.88rem; color: var(--cream-dim); }
.duration-summary strong { color: var(--brass-light); }

.confirm-box { background: rgba(0,0,0,0.25); border: 1px solid var(--border); border-radius: 12px; padding: 0.5rem 1rem; margin-bottom: 1rem; }
.confirm-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.confirm-row:last-child { border-bottom: none; }
.confirm-row span { color: var(--muted); }
#doneCode { color: var(--brass-light); font-size: 1.1rem; }

/* Tablet / phone: stack the panels; the day list becomes a horizontal strip */
@media (max-width: 860px) {
  .party-card { grid-template-columns: 1fr; padding: 1.4rem; }
  .reserve-layout { grid-template-columns: 1fr; min-height: 0; }
  .date-list { position: static; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding-bottom: 0.4rem; }
  .date-chip { width: auto; flex: 0 0 auto; grid-template-columns: auto; justify-items: center; text-align: center; min-width: 84px; padding: 0.55rem 0.6rem; gap: 0.15rem; }
  .date-chip .meta { align-items: center; }
  .date-chip .dow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
  .date-chip .mon { display: none; }
  .date-chip .tag { display: none; }
  .date-chip .day { font-size: 1.6rem; }
}

@media (max-width: 640px) {
  .site-nav > a:not(.staff-link), .site-nav .social { display: none; }
  .logo { height: 40px; }
  .brand-name { font-size: 1.2rem; }
  .hero { padding: 3rem 0 2.5rem; }
  .form-row { grid-template-columns: 1fr; }
}