/* Calendar nav styling - aligned with site theme */
.calendar-nav-row { margin-top: 4px; justify-content: flex-start; }
.calendar-nav-btn { border-radius: 8px; padding: 8px 14px; background: transparent; color: var(--text, #111); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 1px 2px rgba(16,24,40,0.04); font-weight:600; cursor:pointer; }
.calendar-nav-btn:hover { background: rgba(255,255,255,0.03); transform: translateY(-1px); }
.calendar-nav-primary { background: linear-gradient(120deg, var(--accent-strong, #f0725b), var(--accent, #f4b9a5)); color: var(--ink, #fff); border-color: transparent; box-shadow: 0 14px 40px rgba(240,114,91,0.38); }
.calendar-nav-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 48px rgba(240,114,91,0.44); }
@media (max-width:600px){ .calendar-nav-row { gap:6px; flex-wrap:wrap; } }
/* Minimal overrides: only adjust the CLOSED select box appearance and option readability.
   Keep the site's theme intact; avoid changing layout, font weights, or shadows. */

#booking-modal-overlay .time-select-group select,
#booking-modal-overlay select[class^="phase-"],
#booking-modal-overlay #modal-service,
#booking-modal-overlay #modal-resource,
#booking-modal-overlay .modal-form select {
  /* subtle translucent dark background so selected value is readable */
  background: rgba(16,16,18,0.85) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  padding: 8px 32px 8px 10px !important;
  border-radius: 8px !important;
}

/* best-effort: make option list readable where browser allows it */
#booking-modal-overlay .time-select-group select option,
#booking-modal-overlay select[class^="phase-"] option {
  background: #0f0f12 !important;
  color: #f2f2f2 !important;
}

#booking-modal-overlay .time-select-group .range-time { color: var(--muted); margin-left:6px; }