/* ============================================================
   SPORTERRA PLAY — Facilities booking styles (Play green accent)
   Play accent = primary brand green (--brand)
   ============================================================ */

/* ---------- Play hero ---------- */
.play-hero { background:
   radial-gradient(120% 130% at 88% -10%, var(--brand-50), transparent 55%), #fff; padding-top:2.4rem; }
.play-search {
  display:flex; align-items:center; gap:.6rem; background:#fff; border:1px solid var(--line-2);
  border-radius:999px; padding:.55rem .55rem .55rem 1.2rem; box-shadow:var(--shadow-sm); max-width:560px;
}
.play-search input { border:0; outline:0; flex:1; font-size:1rem; font-family:var(--font); color:var(--ink); background:transparent; }
.play-search input::placeholder { color:#9aa8a1; }

/* sport pills (reuse cat-scroll look) */
.sport-scroll { display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.4rem; scrollbar-width:none; }
.sport-scroll::-webkit-scrollbar { display:none; }
.sport-pill {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:.55rem 1.05rem; font-weight:600; font-size:.92rem; color:var(--ink-2);
  cursor:pointer; transition:all .2s var(--ease); white-space:nowrap;
}
.sport-pill i { color:var(--brand); }
.sport-pill:hover { border-color:var(--brand); }
.sport-pill.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.sport-pill.active i { color:#7fd6a0; }

/* ---------- Filter sidebar (shared look) ---------- */
.filter-panel { position:sticky; top:90px; }
.filter-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; }
.filter-group + .filter-group { margin-top:1.3rem; padding-top:1.3rem; border-top:1px solid var(--line); }
.filter-group h6 { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; margin-bottom:.8rem; }
.form-check-input:checked { background-color:var(--brand); border-color:var(--brand); }
.form-check-input:focus { box-shadow:0 0 0 .2rem rgba(26,107,60,.22); border-color:var(--brand); }
.form-check-label { font-size:.95rem; color:var(--ink-2); cursor:pointer; }
.form-range::-webkit-slider-thumb { background:var(--brand); }
.form-range::-moz-range-thumb { background:var(--brand); }
.sort-select { border:1px solid var(--line-2); border-radius:999px; padding:.5rem 1rem; font-family:var(--font); font-weight:600; color:var(--ink); background:#fff; }

/* ---------- Facility cards ---------- */
.fac-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
@media (max-width: 767px){ .fac-grid { grid-template-columns:1fr; } }

.fac-card {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.fac-card:hover { transform: translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.fac-media { position:relative; aspect-ratio:16/10; background:var(--bg-soft); overflow:hidden; }
.fac-media img { width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.fac-card:hover .fac-media img { transform: scale(1.05); }
.fac-fallback { background: linear-gradient(135deg,#d7e6dd,#eef4f0); }
.fac-tag { position:absolute; top:.7rem; left:.7rem; background:rgba(255,255,255,.94); color:var(--brand); font-size:.74rem; font-weight:800; padding:.3rem .65rem; border-radius:8px; backdrop-filter:blur(6px); }
.fac-open { position:absolute; bottom:.7rem; left:.7rem; background:var(--brand); color:#fff; font-size:.74rem; font-weight:700; padding:.28rem .6rem; border-radius:999px; display:inline-flex; align-items:center; gap:.35rem; }
.fac-rating-pill { position:absolute; top:.7rem; right:.7rem; background:rgba(19,33,26,.85); color:#fff; font-size:.8rem; font-weight:700; padding:.28rem .55rem; border-radius:8px; display:inline-flex; align-items:center; gap:.3rem; backdrop-filter:blur(6px); }
.fac-rating-pill i { color:var(--c-market); }

.fac-body { padding:1.1rem 1.2rem 1.25rem; display:flex; flex-direction:column; flex:1; }
.fac-name { font-weight:800; font-size:1.18rem; letter-spacing:-.018em; margin:0 0 .25rem; }
.fac-loc { color:var(--muted); font-size:.9rem; display:flex; align-items:center; gap:.4rem; }
.fac-amen { display:flex; flex-wrap:wrap; gap:.4rem; margin:.85rem 0; }
.fac-amen span { font-size:.78rem; color:var(--ink-2); background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:.25rem .6rem; }
.fac-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:.6rem; }
.fac-price b { font-size:1.25rem; font-weight:800; letter-spacing:-.02em; }
.fac-price small { color:var(--muted); }

/* ---------- Facility detail ---------- */
.fd-hero { aspect-ratio:21/9; border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-soft); border:1px solid var(--line); }
.fd-hero img { width:100%; height:100%; object-fit:cover; }
.fd-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-top:.8rem; }
.fd-thumb { aspect-ratio:16/10; border-radius:12px; overflow:hidden; border:2px solid transparent; cursor:pointer; background:var(--bg-soft); padding:0; }
.fd-thumb img { width:100%;height:100%;object-fit:cover; }
.fd-thumb.active { border-color:var(--brand); }

.amen-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; }
.amen-item { display:flex; align-items:center; gap:.7rem; font-weight:600; color:var(--ink-2); }
.amen-item i { width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--brand-100);color:var(--brand);flex:0 0 auto; }

/* ---------- Booking widget ---------- */
.booking-card { position:sticky; top:90px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm); }
.date-row { display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.4rem; scrollbar-width:none; }
.date-row::-webkit-scrollbar { display:none; }
.date-chip { flex:0 0 auto; width:60px; border:1px solid var(--line-2); border-radius:12px; padding:.55rem 0; text-align:center; cursor:pointer; background:#fff; transition:all .18s var(--ease); }
.date-chip:hover { border-color:var(--brand); }
.date-chip.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.date-chip .dc-dow { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; opacity:.7; }
.date-chip .dc-day { font-size:1.25rem; font-weight:800; line-height:1.1; }
.date-chip .dc-mon { font-size:.68rem; opacity:.7; }

.slot-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.slot { border:1px solid var(--line-2); border-radius:10px; padding:.55rem 0; text-align:center; font-weight:700; font-size:.9rem; cursor:pointer; background:#fff; color:var(--ink); transition:all .15s var(--ease); font-family:var(--font); }
.slot:hover:not(:disabled) { border-color:var(--brand); }
.slot.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.slot:disabled { background:var(--bg-soft); color:#bcc6c0; cursor:not-allowed; text-decoration:line-through; }

.book-summary-row { display:flex; justify-content:space-between; font-size:.95rem; color:var(--ink-2); margin-top:.5rem; }
.book-total { display:flex; justify-content:space-between; font-weight:800; font-size:1.25rem; margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--line); }

/* duration toggle */
.dur-row { display:flex; gap:.5rem; }
.dur-chip { flex:1; border:1px solid var(--line-2); border-radius:10px; padding:.5rem 0; text-align:center; font-weight:700; cursor:pointer; background:#fff; transition:all .15s var(--ease); font-family:var(--font); color:var(--ink); }
.dur-chip.active { background:var(--ink); color:#fff; border-color:var(--ink); }

/* confirmation */
.confirm-check { width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:var(--brand-100);color:var(--brand);font-size:2.4rem;margin:0 auto 1.4rem; }
.qr-box { width:200px;height:200px;border-radius:18px;border:1px solid var(--line);padding:14px;background:#fff;margin:0 auto;box-shadow:var(--shadow-sm); }
.qr-box svg { width:100%;height:100%; }

.empty-state { text-align:center; padding:4rem 1rem; color:var(--muted); }
.empty-state i { font-size:2.4rem; color:var(--line-2); margin-bottom:1rem; }
.info-ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--brand-100); color:var(--brand); font-size:1.2rem; flex:0 0 auto; }