.vts-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.vts-trigger {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #d8dde5;
  border-radius: 10px;
  background: #fff;
  padding: 0 13px;
  color: #171b24;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.vts-trigger:hover:not(:disabled) { border-color: #86a8fb; }
.vts-trigger:focus-visible { outline: 3px solid rgba(37, 99, 235, .24); outline-offset: 2px; }
.vts-trigger:disabled { background: #f4f6f8; color: #8a93a2; cursor: not-allowed; }
.vts-trigger.has-value { border-color: #6e98f5; color: #172554; font-weight: 800; }
.vts-trigger-icon { color: #64748b; font-size: 18px; line-height: 1; }

.vts-dialog {
  width: min(620px, calc(100% - 28px));
  max-height: min(86dvh, 720px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #fff;
  color: #141821;
  box-shadow: 0 28px 80px rgba(8, 20, 40, .32);
}

.vts-dialog:not([open]) { display: none; }
.vts-dialog::backdrop { background: rgba(13, 24, 42, .64); backdrop-filter: blur(2px); }
.vts-sheet { max-height: min(86dvh, 720px); overflow-y: auto; padding: 0 22px 24px; }
.vts-head { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-inline: -22px; padding: 18px 22px 15px; border-bottom: 1px solid #e5e9ef; background: rgba(255,255,255,.98); }
.vts-head h2 { margin: 2px 0 0; font-size: clamp(19px, 4vw, 24px); line-height: 1.3; }
.vts-eyebrow { color: #2563eb; font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.vts-close { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid #dfe4eb; border-radius: 50%; background: #fff; color: #1f2937; font-size: 25px; line-height: 1; cursor: pointer; }
.vts-close:hover { background: #f5f7fa; }
.vts-close:focus-visible { outline: 3px solid rgba(37, 99, 235, .24); outline-offset: 2px; }
.vts-hint { margin: 17px 0 0; color: #5f6979; font-size: 12px; line-height: 1.55; }
.vts-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; color: #5f6979; font-size: 10.5px; }
.vts-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.vts-legend-item i { width: 9px; height: 9px; border: 1px solid #cbd5e1; border-radius: 50%; background: #fff; }
.vts-legend-item--available i { border-color: #2563eb; background: #2563eb; }
.vts-legend-item--taken i { border-color: #d97706; background: #fff4dc; }
.vts-legend-item--closed i, .vts-legend-item--past i { background: #e9edf2; }
.vts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.vts-slot-wrap { min-width: 0; }
.vts-slot { display: grid; width: 100%; min-height: 64px; place-content: center; gap: 3px; border: 1px solid #cfd8e4; border-radius: 11px; background: #fff; color: #1e293b; cursor: pointer; }
.vts-slot strong { font-size: 14px; line-height: 1.2; }
.vts-slot span { color: #64748b; font-size: 9.5px; line-height: 1.2; }
.vts-slot.is-available:hover { border-color: #2563eb; background: #eff5ff; }
.vts-slot.is-available[aria-pressed="true"] { border-color: #2563eb; background: #2563eb; color: #fff; box-shadow: 0 5px 14px rgba(37, 99, 235, .22); }
.vts-slot.is-available[aria-pressed="true"] span { color: #dbeafe; }
.vts-slot:focus-visible { outline: 3px solid rgba(37, 99, 235, .24); outline-offset: 2px; }
.vts-slot:disabled { cursor: not-allowed; opacity: 1; }
.vts-slot.is-taken { border-color: #f3d18d; background: #fff8e9; color: #7c4a03; }
.vts-slot.is-closed, .vts-slot.is-past, .vts-slot.is-unavailable { border-color: #e2e7ed; background: #f3f5f7; color: #8a94a3; }
.vts-slot.is-taken span { color: #a16207; }
.vts-slot.is-closed span, .vts-slot.is-past span, .vts-slot.is-unavailable span { color: #929baa; }

.cc-menu-card[data-select-menu] { cursor: pointer; }
.cc-menu-card[data-select-menu]:focus-visible { outline: 3px solid rgba(37, 99, 235, .24); outline-offset: 3px; }
.cc-staff-card[data-staff-id] {
  width: 100%;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  appearance: none;
}
.cc-staff-card[data-staff-id]:hover:not(:disabled) { border-color: #9bb6f8; transform: translateY(-1px); }
.cc-staff-card[data-staff-id]:focus-visible { outline: 3px solid rgba(37, 99, 235, .24); outline-offset: 3px; }
.cc-staff-card[data-staff-id].is-selected { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .12), 0 9px 22px rgba(37, 99, 235, .09); }
.cc-staff-card[data-staff-id]:disabled { cursor: not-allowed; filter: grayscale(.25); opacity: .56; }
.cc-staff-card--any .cc-staff-photo { display: grid; place-items: center; background: linear-gradient(135deg, #edf4ff, #dfe9fb); }
.cc-staff-card[data-staff-id] .cc-staff-body,
.cc-staff-card[data-staff-id] .cc-staff-name,
.cc-staff-card[data-staff-id] .cc-staff-position,
.cc-staff-card[data-staff-id] .cc-staff-specialty { display: block; }
.cc-staff-initial { display: grid; width: 72px; height: 72px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.88); color: #31538e; font-size: 18px; font-weight: 900; box-shadow: 0 5px 18px rgba(40, 71, 126, .12); }
.cc-staff-select-state { display: inline-flex; margin-top: 11px; border-radius: 999px; background: #edf2f7; padding: 5px 9px; color: #596579; font-size: 10px; font-weight: 850; }
.cc-staff-card.is-selected .cc-staff-select-state { background: #2563eb; color: #fff; }
.cc-prebook-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 14px; margin-bottom: 9px; }
.cc-prebook-title-row h3 { margin-bottom: 0 !important; }
.cc-prebook-title-row .cc-prebook-policy-link { flex: 0 0 auto; margin: 0 !important; }

@media (max-width: 560px) {
  .vts-dialog { width: calc(100% - 16px); max-height: 92dvh; border-radius: 18px; }
  .vts-sheet { max-height: 92dvh; padding-inline: 15px; }
  .vts-head { margin-inline: -15px; padding-inline: 15px; }
  .vts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .vts-slot { min-height: 60px; }
  .cc-prebook-title-row { align-items: flex-start; flex-direction: column; }
}
