@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

#tbm-modal { 
    display:none; 
    position:fixed; 
    z-index:9999; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%; 
    overflow:auto; 
    background: rgba(0,0,0,0.45); 
}
#tbm-modal .tbm-modal-content { 
    background:#fff; 
    margin:5% auto; 
    border-radius:10px; 
    padding:10px; 
    width:92%; 
    max-width:900px; 
    box-shadow:0 8px 30px rgba(0,0,0,0.15); 
    font-family: 'Roboto', sans-serif; 
}
.tbm-modal-header { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    padding-bottom:5px; 
    border-bottom:1px solid #eee; 
}
.tbm-modal-title { 
    font-size:18px; 
    font-weight:700; 
    color:#111827; 
}
.tbm-modal-body { 
    display:flex; 
    gap:18px; 
    padding-top:14px; 
}
.tbm-calendar-column { 
    flex:1 1 38%; 
    min-width:260px; 
}
.tbm-time-column { 
    flex:1 1 62%; 
    display:flex; 
    flex-direction:column; 
}
.tbm-time-list { 
    display:flex; 
    flex-wrap:wrap; 
    gap:8px; 
    max-height:420px; 
    overflow:auto; 
    padding:8px; 
    border:1px solid #f0f0f0; 
    border-radius:8px; 
    background:#fff; 
}
.tbm-time-slot { 
    padding:8px 10px; 
    border-radius:6px; 
    background:#fff; 
    border:1px solid #e5e7eb; 
    cursor:pointer; 
    min-width:100px; 
    text-align:center; 
    font-weight:600; 
    color:#111827; 
}
.tbm-time-slot:hover { 
    background:rgba(59,130,246,0.06); 
}
.tbm-time-slot.selected { 
    background:#3B82F6; 
    color:#fff; 
    border-color:#3B82F6; 
}

.tbm-modal-footer { 
    display:flex; 
    justify-content:flex-end; 
    gap:10px; 
    padding-top:12px; 
    border-top:1px solid #eee; 
    margin-top:12px; 
}
.tbm-btn { 
    padding:8px 14px; 
    border-radius:8px; 
    border:none; 
    cursor:pointer; 
    font-weight:700; 
}
.tbm-btn-cancel { 
    background:#f3f4f6; 
    color:#111827; 
}
.tbm-btn-save { 
    background:#3B82F6; 
    color:#fff; 
}
.tbm-trigger { 
    display:inline-block; 
    padding:9px 14px; 
    background:#3B82F6; 
    color:#fff; 
    border-radius:8px; 
    cursor:pointer; 
    font-weight:700; 
    border:none; 
}
.tbm-selected-text { 
    margin-left:12px; 
    color:#374151; 
    font-weight:600; 
}

.tbm-legend { 
    margin-top:12px; 
    font-size:14px; 
    color:#374151; 
    display:flex; 
    gap:18px; 
    align-items:center; 
}
.tbm-legend-item { 
    display:flex; 
    gap:8px; 
    align-items:center; 
}
.tbm-swatch { 
    width:14px; 
    height:14px; 
    border-radius:3px; 
    display:inline-block; 
}

/* Removed gray booked indicator */
/* .tbm-swatch-booked { background:#666666; } */

/* Show all as available */
.tbm-swatch-available { 
    background:#ffffff; 
    border:1px solid #D1D5DB; 
}

.tbm-swatch-selected { 
    background:#3B82F6; 
}
.tbm-time-slot.tbm-slot-disabled,
.tbm-time-slot[disabled] {
  pointer-events: none;
  opacity: 0.45;
  background: #f5f5f5;
  color: #666;
}
.tbm-booked-label { margin-left: 6px; color: #c00; font-weight:600; font-size:0.9em; }


/* TBM: remove extra scroll on Select Date & Time popup - constrain scroll only to time list */
#tbm-modal { overflow: hidden !important; }
#tbm-modal .tbm-modal-content { overflow: hidden !important; }
#tbm-modal .tbm-time-list { 
    overflow-y: auto !important; 
    max-height: 60vh !important; 
}

@media (max-width:720px){
  .tbm-modal-body{flex-direction:column;}
  .tbm-time-column{order:2}
  .tbm-calendar-column{order:1}
  .tbm-time-slot{min-width:80px}
}