:root{--bdr:rgba(10,10,10,.10)}

/* New month calendar */
.bookingWrap{display:block}
.calMonthHeader{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.calMonthTitle{font-weight:900; text-transform:capitalize; letter-spacing:-.01em}

.calWeekdays{display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; margin-bottom:8px; color:rgba(10,10,10,.70); font-size:12px}
.calWeekdays > div{padding:0 4px}

.calGrid{display:grid; grid-template-columns: repeat(7, 1fr); gap:8px}
.calCell{border:1px solid var(--bdr); border-radius:14px; background:rgba(226,224,218,.55)}
.calCell.blank{opacity:.25}

.calCell.day{appearance:none; -webkit-appearance:none; cursor:pointer; padding:10px 10px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; min-height:72px}
.calCell.day .n{font-weight:900; font-size:14px}
.calCell.day .dot{width:10px; height:10px; border-radius:999px; background:transparent}

.calCell.day.free .dot{background: rgba(46, 125, 50, .85)}
.calCell.day.full .dot{background: rgba(100,80,68,.95)}
.calCell.day.closed .dot{background: rgba(10,10,10,.25)}
.calCell.day.disabled{opacity:.45; cursor:not-allowed}

.calCell.day.selected{outline:2px solid rgba(171,137,108,.65)}
.calCell.day.today{box-shadow: 0 0 0 2px rgba(10,10,10,.06) inset}

.calPanel{margin-top:12px; border:1px solid var(--bdr); background:rgba(226,224,218,.55); border-radius:18px; padding:14px}
.panelTop{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.panelMeta{font-size:12px; color:rgba(10,10,10,.70)}
.calInfo{padding:12px; border-radius:14px; background:rgba(188,175,162,.22); border:1px dashed rgba(10,10,10,.20)}

.slotGrid{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:8px}
.slot{border:1px solid rgba(10,10,10,.12); border-radius:12px; padding:10px 10px; background:rgba(226,224,218,.60); cursor:pointer; font-weight:900}
.slot.busy{opacity:.45; cursor:not-allowed}
.slot.selected{outline:2px solid rgba(171,137,108,.60)}

.calAction{margin-top:12px; display:flex; flex-direction:column; gap:10px}
.calHint{font-size:13px; color:rgba(10,10,10,.78)}

.adminForm input{width:100%; padding:12px 12px; border-radius:12px; border:1px solid rgba(10,10,10,.12); background:rgba(226,224,218,.70)}
.adminRow{display:grid; grid-template-columns: 1fr 1fr; gap:8px}
.adminRow:last-child{grid-template-columns: 1fr auto}
.adminSmall{font-size:12px; color:rgba(10,10,10,.65)}

@media (max-width: 980px){
  .slotGrid{grid-template-columns: repeat(3, minmax(0,1fr))}
  .adminRow{grid-template-columns: 1fr}
  .adminRow:last-child{grid-template-columns: 1fr}
  .calCell.day{min-height:62px}
}
@media (max-width: 420px){
  .calGrid{gap:6px}
  .calWeekdays{gap:6px}
  .calCell.day{border-radius:12px; padding:8px; min-height:58px}
}