/* booking.css — Custom calendar bottom-sheet + date bar (rota-style)
   Loads AFTER styles.css so it can override safely.
*/

:root{
  --bkRadius: 22px;
}

.page{
  padding-top: calc(var(--topbarH) + 10px) !important;
  padding-bottom: calc(var(--footbarH) + 10px) !important;
}

/* App shell like rota: one main card (scroll inside) */
.bkShell{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height: calc(100vh - var(--topbarH) - var(--footbarH) - 100px);
}

/* Date swipe bar */
.bkDateBar{
  border:1px solid var(--line);
  border-radius: var(--bkRadius);
  background: var(--card);
  box-shadow: var(--shadow);
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  user-select:none;
  touch-action: pan-y;
}
.bkDateMid{flex:1 1 auto;text-align:center;cursor:pointer}
.bkDateMid .big{font-weight:950;font-size:15px;letter-spacing:.2px}
.bkDateMid .small{margin-top:2px;font-size:12px;color: var(--muted)}
.bkNavBtn{
  width:46px;height:46px;border-radius:18px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.65);
  display:grid;place-items:center;
  cursor:pointer;
}
html[data-theme="dark"] .bkNavBtn{background: rgba(255,255,255,.08)}
.bkNavBtn:active{transform:scale(.98)}

/* Main booking card list = scroll area */
.bkListCard{flex:1 1 auto;min-height:0;overflow:hidden;padding:0}
.bkListHead{padding:14px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.bkListHead h2{margin:0;font-size:16px;font-weight:950}
.bkListBody{padding:12px 14px 14px;overflow:auto;min-height:0;-webkit-overflow-scrolling: touch;height:100%}

/* Slots grid (uses your existing .slot ok/bad from styles.css if present) */
.bkSlotsTitle{font-weight:900}
.bkSlotsGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}
@media (min-width: 560px){
  .bkSlotsGrid{grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (min-width: 860px){
  .bkSlotsGrid{grid-template-columns: repeat(4, minmax(0, 1fr));}
}

/* Popup calendar modal (bottom sheet like rota) */
.bkModalBack{
  position:fixed;inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  display:none;
  align-items:flex-end;
  justify-content:center;
  z-index:120;
}
.bkModalBack.show{display:flex}

.bkModalSheet{
  width:min(760px,100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px 22px 0 0;
  box-shadow: var(--shadow);
  padding:14px;
  max-height: 82vh;
  overflow:hidden;
  animation: bkPopUp .16s ease;
}
@keyframes bkPopUp{from{transform:translateY(12px);opacity:.5}to{transform:translateY(0);opacity:1}}

.bkMHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bkMHead b{font-weight:950}
.bkMBody{margin-top:10px;overflow:auto;max-height: calc(82vh - 70px);-webkit-overflow-scrolling: touch}

.bkCalNav{display:flex;gap:8px;align-items:center}
.bkCalBtn{
  width:42px;height:42px;border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.65);
  cursor:pointer;
  display:grid;place-items:center;
}
html[data-theme="dark"] .bkCalBtn{background: rgba(255,255,255,.08)}
.bkCalBtn:disabled{opacity:.45;cursor:not-allowed}

.bkCalGrid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
  margin-top:10px;
}
.bkDow{
  font-size:12px;color:var(--muted);
  text-align:center;padding:6px 0;
}

/* DAY CELL (taller so big date fits nicely) */
.bkDayCell{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  min-height:74px; /* taller */
  background: rgba(255,255,255,.55);
  cursor:pointer;
  position:relative;
  transition: transform .12s ease, background .12s ease;
}
html[data-theme="dark"] .bkDayCell{background: rgba(255,255,255,.07)}
.bkDayCell:hover{transform: translateY(-1px)}
.bkDayCell.active{border-color: rgba(14,165,233,.45); background: rgba(14,165,233,.07)}
.bkDayCell.dim{opacity:.40;cursor:default}

/* ✅ BIG date number (bottom-left) */
.bkDayNum{
  position:absolute;
  left:12px;
  bottom:10px;
  font-weight:950;
  font-size:22px;
  letter-spacing:.2px;
  color: var(--text);
  line-height:1;
}

/* ✅ SMALL remaining slots badge (top-right) */
.bkBadgeRemain{
  position:absolute;
  right:8px;
  top:8px;
  min-width:22px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:950;
  color:#fff;
  background: linear-gradient(135deg,var(--blue),var(--green));
}
.bkBadgeZero{
  background: rgba(239,68,68,.85);
}

/* Today dot (keep bottom-left but slightly above date number area) */
.bkTodayDot{
  position:absolute;
  left:12px;
  top:12px;
  width:9px;height:9px;border-radius:999px;
  background: rgba(34,197,94,.9);
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}

/* Small note in calendar */
.bkRangeNote{
  margin-top:10px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}

/* Make your existing modal (booking details) behave better on mobile */
#formModal .modalCard,
#okModal .modalCard{
  max-height: calc(100vh - 120px);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
/* Prevent lag when switching theme */
html.themeSwitching *,
html.themeSwitching{
  transition: none !important;
  animation: none !important;
}