/* Volley+ Court Bookings
   Simple, logo-inspired: deep navy + sand + ocean accent
*/
:root{
  /* Palette inspired by the Volley+ logo */
  --bg:#011679;          /* official volleyplus navy */
  --card:#06236e;
  --card2:#051f64;
  --text:#eaf0ff;
  --muted:#a9b6d6;
  --accent:#2bb6ff;      /* logo cyan */
  --sand:#f6a41a;        /* logo orange accent */
  --danger:#ff5a6a;
  --ok:#31d0a5;
  --border:rgba(255,255,255,.08);
  --shadow: 0 14px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color:var(--text);
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px; margin:0 auto; padding:18px}

.topbar{
  position:sticky; top:0;
  background: var(--bg);
  border-bottom:1px solid var(--border);
  z-index:10;
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:12px}

.brand{display:flex; align-items:center; gap:10px}
.brand-logo{height:42px; width:auto; display:block}
.brand-mark{
  width:38px; height:38px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(51,180,255,.25), rgba(246,211,138,.18));
  border:1px solid var(--border);
  font-weight:800;
  color:var(--sand);
}
.brand-text{
  font-weight:700;
  letter-spacing:.3px;
  background: #30b6f5;
  color: #011679;
  padding: 6px 12px;
  border-radius: 8px;
  border: 2px solid #f2ab3b;
  font-size: 14px;
}
@media (max-width: 520px){
  .brand-text{display:none}
  .brand-logo{height:36px}
}

.nav{display:flex; align-items:center; gap:10px}
.nav-user{color:var(--muted); font-size:14px}

.hero{padding:10px 0 4px}
.hero h1{margin:6px 0 6px; font-size:32px}
.muted{color:var(--muted)}
.small{font-size:13px}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow: var(--shadow);
}
.card-narrow{max-width:520px; margin:30px auto}
.card h2{margin:0 0 10px; font-size:18px}
.card h1{margin:0 0 10px; font-size:26px}

.grid-2{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  margin-bottom:14px;
}
@media (max-width: 900px){
  .grid-2{grid-template-columns:1fr}
}

.form label{display:block; margin:10px 0; font-size:14px}
.form input,.form select{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}
.form input:focus,.form select:focus{border-color: rgba(51,180,255,.65)}
.form-inline{display:flex; gap:12px}
.form-inline label{flex:1; margin:0}
@media (max-width:700px){
  .form-inline{flex-direction:column}
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
}
.btn:disabled,.btn[disabled]{
  opacity:.35;
  cursor:not-allowed;
  pointer-events:none;
}
.btn:hover{filter:brightness(1.08); text-decoration:none}
.btn-primary{
  background: linear-gradient(135deg, rgba(51,180,255,.28), rgba(51,180,255,.12));
  border-color: rgba(51,180,255,.55);
}
.btn-ghost{background: transparent}
.btn-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}

.menu-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
@media (max-width:900px){
  .menu-grid{grid-template-columns: 1fr}
}
.menu-tile{
  display:flex;
  width:100%;
  padding:18px 16px;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  align-items:flex-start;
  justify-content:flex-start;
  flex-direction:column;
  text-align:left;
  text-decoration:none;
}
.menu-tile:hover{filter:brightness(1.08); text-decoration:none}
.menu-tile.disabled{opacity:.45; cursor:not-allowed; pointer-events:none}
.menu-title{font-size:18px; font-weight:800}

.alert{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  margin:12px 0;
}
.alert-error{border-color: rgba(255,90,106,.55); background: rgba(255,90,106,.08)}
.alert-info{border-color: rgba(51,180,255,.55); background: rgba(51,180,255,.08)}
.alert-warning{border-color: rgba(246,211,138,.75); background: rgba(246,211,138,.18)}

.divider{height:1px; background:var(--border); margin:14px 0}
.note{
  padding:12px 14px;
  border-radius:14px;
  border:1px dashed rgba(246,211,138,.35);
  background: rgba(246,211,138,.06);
  color: rgba(246,211,138,.95);
  margin-top:10px;
}

.price{display:flex; align-items:flex-end; justify-content:space-between; gap:10px}
.price-big{font-size:34px; font-weight:800; color:var(--sand)}

.avail-wrap{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 900px){
  .avail-wrap{grid-template-columns:1fr}
}
.court-card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  background: rgba(0,0,0,.12);
}
.court-title{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.court-title strong{font-size:15px}
.badge{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
}
.badge-success{border-color: rgba(46, 204, 113, .35); color: rgba(46, 204, 113, .95); background: rgba(46, 204, 113, .10)}
.badge-warning{border-color: rgba(246, 164, 26, .35); color: rgba(246, 164, 26, .95); background: rgba(246, 164, 26, .10)}
.badge-muted{border-color: rgba(255,255,255,.08); color: rgba(255,255,255,.35); background: rgba(255,255,255,.04)}

/* Generic data tables (e.g. My bookings) */
.table-wrap{overflow:auto; border-radius:16px; border:1px solid var(--border)}
.table{width:100%; border-collapse:separate; border-spacing:0; min-width:740px}
.table thead th{background: rgba(0,0,0,.12); border-bottom:1px solid var(--border); padding:10px; color:var(--muted); font-size:12px; font-weight:900}
.table td{padding:10px; border-bottom:1px solid rgba(255,255,255,.06)}
.table tbody tr:nth-child(2n){background: rgba(255,255,255,.02)}
.table tbody tr:hover{background: rgba(43,182,255,.05)}

/* My bookings table polish */
.my-bookings-table{min-width:0}
.my-bookings-table thead th{
  background: rgba(4,28,93,.35);
  border-bottom:1px solid var(--border);
}
.my-bookings-table td{padding:12px}
.my-bookings-table th+th,
.my-bookings-table td+td{border-left:1px solid rgba(255,255,255,.04)}
.my-bookings-table .badge{text-transform:uppercase; letter-spacing:.6px; font-size:11px}
.my-bookings-table .date-col,
.my-bookings-table .time-col,
.my-bookings-table .status-col,
.my-bookings-table .court-col{white-space:nowrap; font-variant-numeric: tabular-nums}
.my-bookings-table .amount-col{white-space:nowrap; text-align:right; font-weight:900; font-variant-numeric: tabular-nums}
.my-bookings-table th:last-child,
.my-bookings-table td:last-child{white-space:nowrap}

.table-actions{display:flex; align-items:center; justify-content:flex-start; gap:8px; flex-wrap:wrap}
.btn-sm{padding:8px 10px; border-radius:11px; font-size:13px}

@media (max-width: 760px){
  /* Turn the bookings table into tidy stacked cards on mobile */
  .my-bookings-table{min-width:0}
  .my-bookings-table thead{display:none}
  .my-bookings-table,
  .my-bookings-table tbody,
  .my-bookings-table tr,
  .my-bookings-table td{display:block; width:100%}

  .my-bookings-table tr{
    margin:12px;
    border:1px solid var(--border);
    border-radius:16px;
    background: rgba(0,0,0,.12);
    overflow:hidden;
  }
  .table-wrap{overflow:visible}
  .my-bookings-table td{
    padding:10px 12px;
    border-bottom:1px solid rgba(255,255,255,.06);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .my-bookings-table td:before{
    content: attr(data-label);
    color:var(--muted);
    font-size:12px;
    font-weight:900;
  }
  .my-bookings-table td.actions-col{border-bottom:0}
  .my-bookings-table td.actions-col .table-actions{justify-content:flex-end}
  .my-bookings-table .amount-col{text-align:left}
}
.times{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.time-btn{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  cursor:pointer;
  font-weight:700;
  font-size:13px;
}
.time-btn:hover{filter:brightness(1.12)}
.time-btn[disabled]{opacity:.35; cursor:not-allowed}
.time-btn.selected{
  border-color: rgba(246,211,138,.65);
  background: rgba(246,211,138,.10);
  color: var(--sand);
}

.summary{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin:12px 0 0;
}
.summary .k{color:var(--muted); font-size:12px; display:block}
.summary .v{font-weight:800}
@media (max-width: 700px){
  .summary{grid-template-columns:1fr}
}

.multi-list{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.multi-row{display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:14px; background: rgba(255,255,255,.03)}
.multi-row .left{font-weight:800}
.multi-row .right{color:var(--muted); font-size:12px}

.code{
  white-space:pre-wrap;
  background: rgba(0,0,0,.25);
  border:1px solid var(--border);
  padding:12px;
  border-radius:14px;
  overflow:auto;
  font-size:12px;
}

.footer{
  border-top:1px solid var(--border);
  margin-top:30px;
  padding:14px 0 24px;
  color:var(--muted);
  font-size:13px;
}
.footer-inner{display:flex; justify-content:space-between; gap:12px}
@media (max-width: 700px){
  .footer-inner{flex-direction:column}
}

/* --------- New timetable UI --------- */
.hidden-date{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

.week-nav{display:flex; align-items:center; gap:10px}
.week-strip{display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; flex:1}
.day-btn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  color:var(--text);
  border-radius:14px;
  padding:10px 8px;
  text-align:center;
  cursor:pointer;
}
.day-btn:hover{filter:brightness(1.10)}
.day-btn:disabled{opacity:.35; cursor:not-allowed; filter:none}
.day-btn .dow{display:block; font-size:12px; color:var(--muted); font-weight:700}
.day-btn .dnum, .day-btn .dom{display:block; font-size:14px; font-weight:900}
.day-btn.selected{border-color: rgba(51,180,255,.75); background: rgba(51,180,255,.10)}
.day-btn.today{outline:2px solid rgba(246,164,26,.35)}

.duration-buttons{display:flex; flex-wrap:wrap; gap:8px}
.dur-btn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:800;
}
.dur-btn:hover{filter:brightness(1.10)}
.dur-btn:disabled{opacity:.35; cursor:not-allowed; filter:none}
.dur-btn.selected{border-color: rgba(246,211,138,.65); background: rgba(246,211,138,.10); color: var(--sand)}

/* Booking type segmented control */
.segmented{display:flex; flex-direction:column; gap:10px}
.seg-btn{
  text-align:left;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  color:var(--text);
  border-radius:16px;
  padding:12px 12px;
  cursor:pointer;
  font-weight:900;
  line-height:1.2;
}
.seg-btn .seg-sub{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}
.seg-btn:hover{filter:brightness(1.08)}
.seg-btn.selected{border-color: rgba(51,180,255,.75); background: rgba(51,180,255,.10)}


/* Timetable header + scroll container */
.table-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px}
.schedule-wrap{overflow:auto; border-radius:16px; border:1px solid var(--border)}

/* NOTE: JS renders .schedule-table + .slot-btn. The rules below style that output.
   (We keep the older .schedule/.cell-btn rules as well for backwards-compat.) */

.schedule-table,
.schedule{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:680px;
}

.schedule-table thead th,
.schedule thead th{
  position:sticky; top:0;
  background: rgba(4,28,93,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
  z-index:2;
}

.schedule-table th,
.schedule-table td,
.schedule th,
.schedule td{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* First column (time) */
.schedule-table thead th:first-child,
.schedule th.time-col{
  width:110px;
  text-align:left;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.schedule-table td.time-col{width:110px; color:var(--muted); font-weight:800}

.schedule-table td,
.schedule td{vertical-align:middle}

/* Zebra rows + row hover */
.schedule-table tbody tr:nth-child(2n),
.schedule tbody tr:nth-child(2n){
  background: rgba(255,255,255,.02);
}
.schedule-table tbody tr:hover,
.schedule tbody tr:hover{
  background: rgba(43,182,255,.05);
}

.cell-btn{
  width:100%;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  color:var(--text);
  padding:10px 8px;
  cursor:pointer;
  font-weight:900;
}
.cell-btn:hover{filter:brightness(1.12)}
.cell-btn[disabled]{opacity:.30; cursor:not-allowed}
.cell-btn.selected{border-color: rgba(246,211,138,.65); background: rgba(246,211,138,.10); color: var(--sand)}

.cell-unavail{
  width:100%;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  color: rgba(255,255,255,.25);
  padding:10px 8px;
  text-align:center;
  font-weight:800;
}

/* New JS timetable buttons */
.slot-btn{
  width:100%;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color:var(--text);
  padding:10px 8px;
  cursor:pointer;
  font-weight:900;
  letter-spacing:.2px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.slot-btn:hover{filter:brightness(1.12)}
.slot-btn.selected{
  border-color: rgba(246,211,138,.65);
  background: rgba(246,211,138,.10);
  color: var(--sand);
}

.slot-na{
  width:100%;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  color: rgba(255,255,255,.35);
  padding:10px 8px;
  text-align:center;
  font-weight:800;
}

/* Court hire checkbox slots */
.slot-check-wrap{display:flex; align-items:center; justify-content:center; width:100%}
.slot-check{
  width:18px;
  height:18px;
  cursor:pointer;
}
td.slot-col.selected{
  outline:2px solid rgba(246,211,138,.55);
  outline-offset:-4px;
  border-radius:12px;
}

/* Small polish: week strip DOM class name matches JS (.dom) */
.day-btn .dom{display:block; font-size:14px; font-weight:900}
.day-btn:disabled{opacity:.35; cursor:not-allowed}

@media (max-width: 700px){
  .week-strip{grid-template-columns: repeat(4, 1fr)}
  .week-nav{flex-wrap:wrap}
  .schedule,
  .schedule-table{min-width:560px}
}

/* Day strip pills (court/event flow) */
.day-pill{
  position:relative;
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(255,255,255,.02);
  color: var(--text);
  padding:10px 8px;
  cursor:pointer;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  transition: filter .12s ease, transform .12s ease;
}
.day-pill:hover{filter:brightness(1.12)}
.day-pill.selected{
  border-color: rgba(246,211,138,.65);
  background: rgba(246,211,138,.10);
  color: var(--sand);
}
.day-pill .dow{
  font-size:11px;
  letter-spacing:.4px;
  text-transform:uppercase;
  color: var(--muted);
  line-height:1.1;
}
.day-pill.selected .dow{color: rgba(246,211,138,.85)}
.day-pill .dom{
  font-size:14px;
  font-weight:900;
  line-height:1.1;
}

/* TODAY indicator on day pill */
.day-pill.is-today{
  outline:2px solid var(--sand);
  outline-offset:-2px;
}
.day-pill.is-today::after{
  content:'TODAY';
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%);
  background:var(--sand);
  color:#041c5d;
  font-size:9px;
  font-weight:900;
  padding:2px 6px;
  border-radius:6px;
  letter-spacing:.5px;
}
.day-pill.is-today.selected{
  outline-color: var(--sand);
}

/* Court timetable (checkbox slots) */
.courts-columns{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
  align-items:start;
}
@media (max-width: 860px){
  .courts-columns{grid-template-columns: 1fr;}
}

.court-group h3{
  font-size:16px;
  font-weight:900;
}
.slots-grid{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.slot-cell{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  cursor:pointer;
  font-weight:800;
  font-size:13px;
  user-select:none;
  width:100%;
  min-width:0;
  min-height:44px; /* Better touch target */
}
.slot-cell:hover{filter:brightness(1.12)}
.slot-cell input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.slot-cell .slot-time{pointer-events:none}
.slot-cell input:checked + .slot-time,
.slot-cell.checked{
  color: var(--sand);
}
.slot-cell:has(input:checked){
  border-color: rgba(246,211,138,.65);
  background: rgba(246,211,138,.10);
}
.slot-cell:has(input:disabled){
  opacity:1;
  cursor:not-allowed;
  filter:none;
}
.slot-cell:has(input:disabled) input{cursor:not-allowed}

/* Fallback for older browsers without :has() */
.slot-cell input:checked{
  opacity:0;
}
@supports not(selector(:has(*))){
  .slot-cell input:checked{
    opacity:0;
  }
  .slot-cell input:checked ~ .slot-time{color: var(--sand)}
  .slot-cell input:checked ~ .slot-time{ }
  .slot-cell input:disabled ~ .slot-time{ }
  .slot-cell.checked{
    border-color: rgba(246,211,138,.65);
    background: rgba(246,211,138,.10);
  }
}

/* ========== SLOT STATUS VISUALS ========== */

/* Available slot (default) */
.slot-cell.available{
  background: rgba(49, 208, 165, .08);
  border-color: rgba(49, 208, 165, .25);
}
.slot-cell.available:hover{
  background: rgba(49, 208, 165, .15);
  border-color: rgba(49, 208, 165, .4);
}

/* Past slot - greyed out with strikethrough */
.slot-cell.past{
  opacity:.4;
  cursor:not-allowed;
  background: rgba(0,0,0,.15);
  border-color: rgba(255,255,255,.05);
  text-decoration: line-through;
  color: var(--muted);
}
.slot-cell.past:hover{
  filter:none;
}
.slot-cell.past .slot-time{
  text-decoration: line-through;
  color: rgba(169, 182, 214, .5);
}

/* Booked/busy slot - red tint */
.slot-cell.busy{
  cursor:not-allowed;
  background: rgba(255, 90, 106, .12);
  border-color: rgba(255, 90, 106, .25);
  color: rgba(255, 90, 106, .8);
}
.slot-cell.busy:hover{
  filter:none;
}
.slot-cell.busy .slot-time{
  color: rgba(255, 90, 106, .7);
}
.slot-cell.busy .slot-status{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.3px;
  display:block;
  margin-top:2px;
  color: rgba(255, 90, 106, .6);
}

/* Disabled state (generic) */
.slot-cell.disabled{
  opacity:.35;
  cursor:not-allowed;
}
.slot-cell.disabled:hover{
  filter:none;
}

/* Invalid selection highlight */
.slot-cell.invalid-selection{
  border-color: rgba(255, 90, 106, .7) !important;
  background: rgba(255, 90, 106, .15) !important;
  animation: pulse-invalid .8s ease-in-out infinite;
}
@keyframes pulse-invalid{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(255, 90, 106, .4); }
  50%{ box-shadow: 0 0 0 4px rgba(255, 90, 106, .2); }
}

/* Event time buttons - similar treatment */
.time-btn.past{
  opacity:.4;
  text-decoration: line-through;
}
.time-btn.busy{
  background: rgba(255, 90, 106, .12);
  border-color: rgba(255, 90, 106, .25);
  color: rgba(255, 90, 106, .7);
}

/* ========== LOADING SPINNER ========== */
.loading-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  gap:14px;
}
.loading-spinner{
  width:40px;
  height:40px;
  border:3px solid var(--border);
  border-top-color: var(--accent);
  border-radius:50%;
  animation: spin .8s linear infinite;
}
@keyframes spin{
  to{ transform: rotate(360deg); }
}
.loading-text{
  color:var(--muted);
  font-size:14px;
}

/* ========== BOOKING RULES INFO CARD ========== */
.rules-card{
  background: linear-gradient(135deg, rgba(43, 182, 255, .08), rgba(246, 164, 26, .06));
  border:1px solid rgba(43, 182, 255, .2);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:16px;
}
.rules-card-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:14px;
  color:var(--accent);
  margin-bottom:10px;
}
.rules-card-title svg{
  width:18px;
  height:18px;
  flex-shrink:0;
}
.rules-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
}
.rules-list-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:var(--text);
}
.rules-list-item::before{
  content:'•';
  color:var(--sand);
  font-weight:900;
  flex-shrink:0;
}
.rules-list-item strong{
  color:var(--sand);
}

/* ========== MULTI-ROW INVALID STATE ========== */
.multi-row.invalid{
  border-color: rgba(255, 90, 106, .5);
  background: rgba(255, 90, 106, .08);
}
.multi-row.invalid .right{
  color: var(--danger);
}

/* Make week strip scrollable on small screens */
@media (max-width: 520px){
  .week-strip{
    grid-template-columns: repeat(7, minmax(52px, 1fr));
    gap:6px;
  }
  .day-pill{padding:8px 6px; border-radius:12px}
  .day-pill .dom{font-size:13px}
  .day-pill.is-today::after{
    font-size:8px;
    padding:1px 4px;
    top:-6px;
  }
  .slot-cell{padding:9px 10px; border-radius:11px; min-height:48px}
  .rules-card{padding:12px 14px}
  .rules-list{font-size:12px}
}


/* ========== EVENT BOOKING CONTROLS ========== */
.event-booking-controls{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.control-group{
  flex:1;
  min-width:160px;
}
.control-label{
  display:block;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.event-select{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
  color:var(--text);
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a9b6d6' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
.event-select:focus{
  outline:none;
  border-color: rgba(51,180,255,.65);
}
.event-select:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.event-select option{
  background:var(--card);
  color:var(--text);
}

/* ========== DURATION STEPPER (Event Hire) ========== */
.duration-stepper{
  display:inline-flex;
  align-items:center;
  gap:0;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(0,0,0,.12);
  overflow:hidden;
}
.stepper-btn{
  width:48px;
  height:48px;
  border:none;
  background: rgba(255,255,255,.03);
  color:var(--text);
  font-size:22px;
  font-weight:700;
  cursor:pointer;
  transition: background .15s ease;
}
.stepper-btn:hover:not(:disabled){
  background: rgba(255,255,255,.08);
}
.stepper-btn:active:not(:disabled){
  background: rgba(255,255,255,.12);
}
.stepper-btn:disabled{
  opacity:.3;
  cursor:not-allowed;
}
.stepper-btn:first-child{
  border-right:1px solid var(--border);
}
.stepper-btn:last-child{
  border-left:1px solid var(--border);
}
.stepper-value{
  min-width:80px;
  padding:0 16px;
  text-align:center;
  font-size:20px;
  font-weight:900;
  color:var(--sand);
}

/* ========== CANCELLATION POLICY NOTE ========== */
.policy-note{
  padding:12px 14px;
  border-radius:12px;
  background: rgba(255, 90, 106, .08);
  border:1px solid rgba(255, 90, 106, .2);
  color: rgba(255, 255, 255, .85);
  font-size:13px;
  line-height:1.5;
  margin-bottom:16px;
}
.policy-note strong{
  color: rgba(255, 90, 106, .9);
}

/* ========== BOOKING FLOW LAYOUT ========== */
/* Desktop: 2-column grid with timetable spanning full width below */
.booking-flow-wrapper{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.booking-flow-wrapper .booking-details-card{
  grid-column:1;
  grid-row:1;
}
.booking-flow-wrapper .selection-panel-card{
  grid-column:2;
  grid-row:1 / span 2;
}
.booking-flow-wrapper .timetable-card{
  grid-column:1;
  grid-row:2;
}

/* Mobile: Single column with specific order */
@media (max-width: 900px){
  .booking-flow-wrapper{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .booking-flow-wrapper .booking-details-card{
    order:1;
  }
  .booking-flow-wrapper .timetable-card{
    order:2;
  }
  .booking-flow-wrapper .selection-panel-card{
    order:3;
  }
}

/* ========== MOBILE STICKY BOOKING BANNER ========== */
.mobile-booking-banner{
  display:none;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background: rgba(4, 28, 93, .97);
  backdrop-filter: blur(12px);
  border-top:1px solid var(--border);
  padding:12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  z-index:100;
  box-shadow: 0 -4px 20px rgba(0,0,0,.3);
}
.mobile-banner-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  max-width:600px;
  margin:0 auto;
}
.mobile-banner-info{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1;
}
.mobile-banner-price{
  font-size:22px;
  font-weight:900;
  color:var(--sand);
}
.mobile-banner-summary{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mobile-banner-btn{
  flex-shrink:0;
  padding:12px 20px;
  font-size:15px;
}

/* Show banner only on mobile */
@media (max-width: 900px){
  .mobile-booking-banner{
    display:block;
  }
  /* Add padding to body so content isn't hidden behind banner */
  body{
    padding-bottom:90px;
  }
}

/* Hide the regular selection panel payment section on mobile when banner is active */
/* BUT only for court booking (book-flow), not coaching pages */
@media (max-width: 900px){
  .booking-flow-wrapper:not(.coaching-flow) .selection-panel-card .btn-row{
    display:none;
  }
}

/* ========== COACHING PAGES ========== */

/* Booking type cards on coaching landing */
.booking-type-header{
  display:flex;
  align-items:center;
  gap:14px;
}
.booking-type-icon{
  width:56px;
  height:56px;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(51,180,255,.15) 0%, rgba(51,180,255,.05) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
}
.booking-type-details{
  margin:12px 0;
}
.detail-row{
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px solid var(--border);
}
.detail-row:last-child{
  border-bottom:none;
}
.detail-label{
  color:var(--muted);
  font-size:14px;
}
.detail-value{
  font-weight:700;
  color:var(--text);
}
.booking-type-schedule{
  background: rgba(0,0,0,.15);
  border-radius:12px;
  padding:12px 14px;
  margin-top:12px;
}
.schedule-title{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:8px;
}
.schedule-list{
  font-size:14px;
  line-height:1.6;
}

/* Clinics list */
.clinics-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.clinic-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px;
  background: rgba(0,0,0,.12);
  border-radius:12px;
  border:1px solid var(--border);
}
.clinic-item.clinic-full{
  opacity:.6;
}
.clinic-date{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:50px;
  padding:8px;
  background: rgba(51,180,255,.12);
  border-radius:10px;
}
.clinic-day{
  font-size:11px;
  font-weight:700;
  color:var(--accent);
  text-transform:uppercase;
}
.clinic-dom{
  font-size:22px;
  font-weight:900;
  color:var(--text);
  line-height:1;
}
.clinic-month{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
}
.clinic-info{
  flex:1;
  min-width:0;
}
.clinic-title{
  font-weight:700;
  color:var(--text);
  margin-bottom:2px;
}
.clinic-time{
  font-size:13px;
  color:var(--muted);
}
.clinic-meta{
  display:flex;
  gap:12px;
  margin-top:4px;
  font-size:13px;
}
.clinic-price{
  font-weight:700;
  color:var(--sand);
}
.clinic-spots{
  color:var(--muted);
}
.clinic-spots.spots-low{
  color:#f39c12;
  font-weight:700;
}

/* Clinics grid (full page) */
.clinics-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
  gap:20px;
}
.clinic-card{
  display:flex;
  flex-direction:column;
}
.clinic-card.clinic-full{
  opacity:.7;
}
.clinic-card-header{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.clinic-card-date{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:60px;
  padding:10px;
  background: rgba(51,180,255,.12);
  border-radius:12px;
}
.clinic-card-day{
  font-size:12px;
  font-weight:700;
  color:var(--accent);
  text-transform:uppercase;
}
.clinic-card-dom{
  font-size:28px;
  font-weight:900;
  color:var(--text);
  line-height:1;
}
.clinic-card-month{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
}
.clinic-card-title-wrap{
  flex:1;
}
.clinic-card-title{
  margin:0 0 4px 0;
  font-size:18px;
}
.clinic-card-time{
  font-size:14px;
  color:var(--muted);
}
.clinic-card-desc{
  margin:12px 0;
  font-size:14px;
  color:var(--muted);
  line-height:1.5;
}
.clinic-card-focus{
  padding:8px 12px;
  background: rgba(232, 189, 109, .1);
  border-radius:8px;
  font-size:13px;
  margin-bottom:12px;
}
.focus-label{
  color:var(--sand);
  font-weight:700;
}
.clinic-card-footer{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.clinic-card-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.clinic-card-price{
  font-size:18px;
  font-weight:900;
  color:var(--sand);
}
.clinic-card-spots{
  font-size:13px;
  color:var(--muted);
}
.spots-full{
  color:#ff5a6a;
  font-weight:700;
}

/* Info note (blue/neutral) */
.info-note{
  padding:12px 14px;
  border-radius:12px;
  background: rgba(51, 180, 255, .08);
  border:1px solid rgba(51, 180, 255, .2);
  color: rgba(255, 255, 255, .85);
  font-size:13px;
  line-height:1.5;
  margin-bottom:16px;
}
.info-note strong{
  color: var(--accent);
}

/* Time slots */
.time-slots-wrap{
  min-height:60px;
}
.time-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.time-btn{
  padding:12px 18px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.15);
  color:var(--text);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition: all .15s ease;
}
.time-btn:hover:not(:disabled){
  border-color: rgba(51,180,255,.5);
  background: rgba(51,180,255,.08);
}
.time-btn.selected{
  border-color: var(--sand);
  background: rgba(232, 189, 109, .15);
  color: var(--sand);
}
.time-btn.booked{
  background: rgba(255, 90, 106, .12);
  border-color: rgba(255, 90, 106, .3);
  color: var(--muted);
  cursor:not-allowed;
}
.time-btn.unavailable{
  opacity:.5;
  cursor:not-allowed;
}

/* Player stepper */
.player-stepper{
  display:inline-flex;
  align-items:center;
  gap:0;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(0,0,0,.12);
  overflow:hidden;
}

/* Form elements */
.form-group{
  margin-bottom:16px;
}
.form-label{
  display:block;
  font-size:14px;
  font-weight:700;
  color:var(--text);
  margin-bottom:8px;
}
.form-textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
  color:var(--text);
  font-size:14px;
  font-family:inherit;
  resize:vertical;
  min-height:60px;
}
.form-textarea:focus{
  outline:none;
  border-color: rgba(51,180,255,.65);
}
.form-textarea::placeholder{
  color:var(--muted);
  opacity:.7;
}

/* Coaching flow layout */
.coaching-flow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media (max-width: 900px){
  .coaching-flow{
    display:flex;
    flex-direction:column;
  }
}

/* Success icon */
.success-icon{
  width:80px;
  height:80px;
  border-radius:50%;
  background: rgba(49, 208, 165, .15);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
  color:#31d0a5;
}

/* Status badges */
.status-pending{
  color:#f39c12;
  font-weight:700;
}
.status-confirmed{
  color:#31d0a5;
  font-weight:700;
}
.status-cancelled{
  color:#ff5a6a;
  font-weight:700;
}

/* ========== COACHES PORTAL ========== */

/* Coach portal button in nav */
.btn-coach{
  background: linear-gradient(135deg, #e8bd6d 0%, #d4a84b 100%);
  color: #1a1a2e !important;
  font-weight:700;
  border:none;
  padding:8px 16px;
  border-radius:10px;
}
.btn-coach:hover{
  background: linear-gradient(135deg, #f0c878 0%, #e8bd6d 100%);
}

/* Urgent card for pending approvals */
.urgent-card{
  border:2px solid rgba(255, 90, 106, .4);
  background: rgba(255, 90, 106, .05);
}
.urgent-header{
  display:flex;
  align-items:center;
  gap:12px;
}
.urgent-badge{
  background:#ff5a6a;
  color:#fff;
  font-weight:900;
  font-size:14px;
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Pending sessions list */
.pending-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.pending-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  background: rgba(0,0,0,.15);
  border-radius:12px;
  border:1px solid var(--border);
}
.pending-date{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:50px;
  padding:8px;
  background: rgba(255, 90, 106, .12);
  border-radius:10px;
}
.pending-dow{
  font-size:11px;
  font-weight:700;
  color:#ff5a6a;
  text-transform:uppercase;
}
.pending-dom{
  font-size:22px;
  font-weight:900;
  color:var(--text);
  line-height:1;
}
.pending-month{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
}
.pending-info{
  flex:1;
  min-width:0;
}
.pending-time{
  font-weight:700;
  color:var(--text);
}
.pending-customer{
  font-size:14px;
  color:var(--muted);
  margin-top:2px;
}
.pending-focus{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}
.pending-urgent{
  font-size:12px;
  font-weight:700;
  color:#ff5a6a;
  margin-top:4px;
}
.pending-actions{
  flex-shrink:0;
}

/* Pay card */
.pay-card{
  background: linear-gradient(135deg, rgba(232, 189, 109, .08) 0%, rgba(232, 189, 109, .02) 100%);
  border:1px solid rgba(232, 189, 109, .2);
}
.pay-breakdown{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pay-row{
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px solid var(--border);
}
.pay-row:last-child{
  border-bottom:none;
}
.pay-total{
  font-weight:900;
  font-size:18px;
  color:var(--sand);
  padding-top:12px;
  margin-top:4px;
  border-top:2px solid var(--border);
}
.pay-amount{
  font-size:24px;
  font-weight:900;
  color:var(--sand);
}

/* Sessions list compact */
.sessions-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.session-item{
  display:grid;
  grid-template-columns: 80px 60px 1fr 30px;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  background: rgba(0,0,0,.12);
  border-radius:10px;
  font-size:14px;
}
.session-date{
  font-weight:600;
}
.session-time{
  color:var(--muted);
}
.session-customer{
  color:var(--text);
}
.session-players{
  color:var(--muted);
  text-align:right;
}

/* Clinics list compact */
.clinics-list-compact{
  display:flex;
  flex-direction:column;
  gap:8px;
}
a.clinic-item-compact{
  text-decoration:none;
  color:inherit;
}
a.clinic-item-compact:hover{
  background: rgba(51,180,255,.08);
  border-color: rgba(51,180,255,.3);
}
.clinic-item-compact{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  background: rgba(0,0,0,.12);
  border-radius:10px;
  border:1px solid transparent;
  transition: all .15s ease;
}
.clinic-item-compact.is-draft{
  opacity:.7;
  border:1px dashed var(--border);
}
.clinic-date-compact{
  font-size:13px;
  font-weight:600;
  min-width:70px;
}
.clinic-info-compact{
  flex:1;
  min-width:0;
}
.clinic-title-compact{
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.clinic-time-compact{
  font-size:12px;
  color:var(--muted);
}
.clinic-count-compact{
  font-size:13px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
}
.draft-badge{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  background: rgba(255, 255, 255, .1);
  padding:2px 6px;
  border-radius:4px;
}

/* Quick actions */
.quick-actions{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:12px;
}
.action-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:20px 16px;
  background: rgba(0,0,0,.12);
  border-radius:14px;
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text);
  transition: all .15s ease;
}
.action-tile:hover{
  background: rgba(51,180,255,.08);
  border-color: rgba(51,180,255,.3);
}
.action-icon{
  font-size:28px;
}
.action-label{
  font-size:13px;
  font-weight:600;
}

/* Form inputs for coach portal */
.form-input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
  color:var(--text);
  font-size:14px;
  font-family:inherit;
}
.form-input:focus{
  outline:none;
  border-color: rgba(51,180,255,.65);
}

/* Select dropdowns - dark theme */
select.form-input{
  appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}
select.form-input option{
  background: #1a1a2e;
  color: var(--text);
  padding: 10px;
}

/* Date input styling */
input[type="date"].form-input{
  color-scheme: dark;
}

/* Action buttons */
.action-buttons{
  display:flex;
  gap:12px;
}
.btn-success{
  background: linear-gradient(135deg, #31d0a5 0%, #28b092 100%);
  color:#fff;
  border:none;
}
.btn-success:hover{
  background: linear-gradient(135deg, #3de0b5 0%, #31d0a5 100%);
}
.btn-danger{
  background: rgba(255, 90, 106, .15);
  color:#ff5a6a;
  border:1px solid rgba(255, 90, 106, .3);
}
.btn-danger:hover{
  background: rgba(255, 90, 106, .25);
}

/* Blockouts list */
.blockouts-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.blockout-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background: rgba(0,0,0,.12);
  border-radius:10px;
  border:1px solid var(--border);
}
.blockout-info{
  flex:1;
}
.blockout-date{
  font-weight:600;
}
.blockout-time{
  font-size:13px;
  color:var(--muted);
}
.blockout-reason{
  font-size:12px;
  color:var(--muted);
  font-style:italic;
  margin-top:2px;
}

/* Participants list */
.participants-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.participant-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  background: rgba(0,0,0,.12);
  border-radius:10px;
}
.participant-info{
  flex:1;
  min-width:0;
}
.participant-name{
  font-weight:600;
  font-size:14px;
}
.participant-email{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.participant-phone{
  font-size:12px;
  color:var(--muted);
}
.participant-ref{
  font-size:11px;
  color:var(--muted);
  font-family:monospace;
}

/* Status colors in coach portal */
.status-pending_confirmation{
  color:#f39c12;
  font-weight:700;
}
.status-confirmed{
  color:#31d0a5;
  font-weight:700;
}
.status-cancelled{
  color:#ff5a6a;
  font-weight:700;
}
.status-published{
  color:#31d0a5;
  font-weight:700;
}
.status-draft{
  color:#f39c12;
  font-weight:700;
}

/* ========== SQUARE CARD FORM ========== */
.square-card{
  background:#fff;
  border-radius:12px;
  padding:12px;
  border:1px solid rgba(0,0,0,.08);
}
.square-card iframe{
  width:100% !important;
}

/* ========== LEGEND FOR SLOT STATUSES ========== */
.slot-legend{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
  padding:10px 12px;
  background: rgba(0,0,0,.12);
  border-radius:12px;
  font-size:12px;
}
.slot-legend-item{
  display:flex;
  align-items:center;
  gap:6px;
}
.slot-legend-swatch{
  width:16px;
  height:16px;
  border-radius:4px;
  border:1px solid transparent;
}
.slot-legend-swatch.available{
  background: rgba(49, 208, 165, .25);
  border-color: rgba(49, 208, 165, .5);
}
.slot-legend-swatch.booked{
  background: rgba(255, 90, 106, .25);
  border-color: rgba(255, 90, 106, .5);
}
.slot-legend-swatch.past{
  background: rgba(100,100,100,.3);
  border-color: rgba(100,100,100,.5);
  position:relative;
}
.slot-legend-swatch.past::after{
  content:'';
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:1px;
  background:rgba(255,255,255,.5);
}
.slot-legend-swatch.selected{
  background: rgba(246, 211, 138, .25);
  border-color: rgba(246, 211, 138, .65);
}

/* ========== COACH BIO ========== */
.coach-bio{
  display:flex;
  gap:24px;
  align-items:flex-start;
}
.coach-bio-photo{
  flex-shrink:0;
}
.coach-bio-photo img{
  width:180px;
  height:auto;
  border-radius:12px;
  object-fit:cover;
  border:3px solid var(--sand);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.coach-bio-content{
  flex:1;
  min-width:0;
}
.coach-bio-content p{
  margin:0 0 12px 0;
  line-height:1.6;
  color:var(--muted);
}
.coach-bio-content h2{
  color:var(--sand);
}
@media (max-width: 700px){
  .coach-bio{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .coach-bio-photo img{
    width:160px;
  }
}