.sbs-booking {
  --sbs-color-primary: #2271b1;
  --sbs-color-text: inherit;
  --sbs-color-border: color-mix(in srgb, currentColor 25%, transparent);
  --sbs-radius: .5rem;
  --sbs-spacing: 1rem;
  color: var(--sbs-color-text);
  font: inherit;
  max-width: 60rem;
}
.sbs-form fieldset { border: 0; margin: 0; padding: 0; }
.sbs-form legend { font-size: 1.35em; font-weight: 600; margin-bottom: var(--sbs-spacing); }
.sbs-form label:not(.sbs-check, .sbs-slot) { display: block; font-weight: 600; margin-top: var(--sbs-spacing); }
.sbs-form input:not([type="checkbox"], [type="radio"]), .sbs-form select, .sbs-form textarea { box-sizing: border-box; font: inherit; margin-top: .35rem; max-width: 100%; padding: .7rem; width: 100%; }
.sbs-form .sbs-address { margin-top: calc(var(--sbs-spacing) * 1.25); }
.sbs-form .sbs-address > legend { font-size: 1em; margin: 0; }
.sbs-phone { align-items: stretch; display: grid; gap: .6rem; grid-template-columns: minmax(10rem, .8fr) minmax(12rem, 1.2fr); }
.sbs-address__grid { display: grid; gap: 0 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbs-address__wide { grid-column: 1 / -1; }
.sbs-progress { display: flex; gap: .5rem; list-style: none; margin: 0 0 calc(var(--sbs-spacing) * 1.5); padding: 0; }
.sbs-progress li { border: 2px solid var(--sbs-color-border); border-radius: 50%; display: grid; height: 1.8rem; opacity: .5; place-items: center; width: 1.8rem; }
.sbs-progress li.is-active { border-color: var(--sbs-color-primary); opacity: 1; }
.sbs-nav { display: flex; gap: .75rem; justify-content: space-between; margin-top: calc(var(--sbs-spacing) * 1.5); }
.sbs-button { background: var(--sbs-color-primary); border: 2px solid var(--sbs-color-primary); border-radius: var(--sbs-radius); color: #fff; cursor: pointer; font: inherit; margin-top: var(--sbs-spacing); padding: .7rem 1.1rem; }
.sbs-button--secondary { background: transparent; color: inherit; }
.sbs-button--danger { background: #b32d2e; border-color: #b32d2e; }
.sbs-button:focus-visible, .sbs-form :is(input, select, textarea, button):focus-visible, .sbs-slot:focus-within { outline: 3px solid Highlight; outline-offset: 2px; }
.sbs-check { align-items: flex-start; display: flex; gap: .6rem; margin-top: var(--sbs-spacing); }
.sbs-schedule { align-items: stretch; display: grid; gap: 1.25rem; grid-template-columns: minmax(18rem, 1.1fr) minmax(16rem, .9fr); margin-top: 1.25rem; }
.sbs-calendar, .sbs-times { background: #fff; border: 1px solid var(--sbs-color-border); border-radius: calc(var(--sbs-radius) * 1.5); box-sizing: border-box; color: #292929; overflow: hidden; }
.sbs-calendar__header { align-items: center; background: var(--sbs-color-primary); color: #fff; display: grid; grid-template-columns: 3rem 1fr 3rem; min-height: 4.5rem; padding: 0 .4rem; }
.sbs-calendar__header strong { font-size: 1.25rem; font-weight: 500; text-align: center; text-transform: capitalize; }
.sbs-calendar__header button { background: transparent; border: 0; border-radius: 50%; color: inherit; cursor: pointer; font: inherit; font-size: 2rem; height: 2.5rem; line-height: 1; padding: 0; width: 2.5rem; }
.sbs-calendar__header button:disabled { cursor: default; opacity: .35; }
.sbs-calendar__weekdays, .sbs-calendar__days { display: grid; grid-template-columns: repeat(7, 1fr); }
.sbs-calendar__weekdays { background: var(--sbs-color-primary); color: #fff; font-size: .82rem; font-weight: 600; padding: 0 .75rem .8rem; text-align: center; }
.sbs-calendar__days { gap: .2rem 0; padding: .85rem .75rem 1rem; }
.sbs-calendar__days button { aspect-ratio: 1; background: transparent; border: 0; border-radius: 50%; color: inherit; cursor: pointer; font: inherit; margin: auto; max-width: 2.65rem; padding: 0; position: relative; width: 100%; }
.sbs-calendar__days button:not(:disabled):hover { background: color-mix(in srgb, var(--sbs-color-primary) 12%, transparent); }
.sbs-calendar__days button:disabled { cursor: default; opacity: .22; }
.sbs-calendar__days button.is-today { box-shadow: inset 0 0 0 1px var(--sbs-color-primary); }
.sbs-calendar__days button.is-selected { background: var(--sbs-color-primary); box-shadow: none; color: #fff; }
.sbs-calendar__days button.has-availability::after { background: var(--sbs-color-primary); border-radius: 50%; bottom: .2rem; content: ""; height: .3rem; left: 50%; position: absolute; transform: translateX(-50%); width: .3rem; }
.sbs-calendar__days button.has-availability.is-selected::after { background: #fff; }
.sbs-calendar__legend { align-items: center; color: #646970; display: flex; font-size: .8rem; gap: .4rem; margin: 0; padding: 0 .9rem .8rem; }
.sbs-calendar__legend span { background: var(--sbs-color-primary); border-radius: 50%; height: .4rem; width: .4rem; }
.sbs-times { min-height: 25rem; padding: 1.25rem; }
.sbs-times h3 { font-size: 1.15rem; margin: 0; }
.sbs-times__date { font-weight: 600; margin: .4rem 0 0; min-height: 1.5em; text-transform: capitalize; }
.sbs-times__timezone { color: #646970; font-size: .875rem; margin: .2rem 0 1rem; }
.sbs-slots { display: grid; gap: .65rem; max-height: 20rem; overflow-y: auto; padding: .15rem .3rem .15rem 0; }
.sbs-slot { align-items: center; border: 1px solid var(--sbs-color-border); border-radius: var(--sbs-radius); cursor: pointer; display: flex; justify-content: center; min-height: 3.25rem; padding: 0 .8rem; position: relative; }
.sbs-slot:hover { border-color: var(--sbs-color-primary); }
.sbs-slot.is-selected { background: var(--sbs-color-primary); border-color: var(--sbs-color-primary); color: #fff; }
.sbs-slot input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.sbs-message:not(:empty) { border: 1px solid var(--sbs-color-border); border-radius: var(--sbs-radius); margin-bottom: var(--sbs-spacing); padding: .75rem; }
.sbs-management { border: 1px solid var(--sbs-color-border); border-radius: calc(var(--sbs-radius) * 1.5); overflow: hidden; }
.sbs-management__header { align-items: center; background: color-mix(in srgb, var(--sbs-color-primary) 8%, transparent); display: flex; gap: 1rem; justify-content: space-between; padding: 1.25rem; }
.sbs-management__header h2 { margin: 0; }
.sbs-management__header p { margin: .2rem 0 0; }
.sbs-management__status { border: 1px solid var(--sbs-color-border); border-radius: 999px; padding: .35rem .75rem; }
.sbs-management__details { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 1.25rem; }
.sbs-management__details div { min-width: 0; }
.sbs-management__details dt { font-size: .85rem; font-weight: 600; opacity: .7; }
.sbs-management__details dd { margin: .2rem 0 0; overflow-wrap: anywhere; }
.sbs-management__details-wide { grid-column: 1 / -1; }
.sbs-management__reschedule { border-top: 1px solid var(--sbs-color-border); }
.sbs-management__reschedule > summary { display: inline-block; list-style: none; margin: 1.25rem; }
.sbs-management__reschedule > summary::-webkit-details-marker { display: none; }
.sbs-management__action { border-top: 1px solid var(--sbs-color-border); padding: 1.25rem; }
.sbs-management__action h3, .sbs-management__action p { margin: 0 0 .75rem; }
.sbs-management__form { max-width: none; }
.sbs-management__feedback:not(:empty) { margin: .75rem 0 0; }
.sbs-management__action--danger { background: color-mix(in srgb, #b32d2e 5%, transparent); }
.sbs-management__action--danger .sbs-cancel-form { margin: 0; }
.sbs-management__action--danger .sbs-button { margin-top: 0; }
.sbs-management__closed { border-top: 1px solid var(--sbs-color-border); margin: 0; padding: 1.25rem; }
.sbs-js-only { display: none; }
.sbs-has-js .sbs-js-only { display: revert; }
.sbs-has-js .sbs-nav { display: flex; }
.sbs-has-js .sbs-schedule, .sbs-has-js .sbs-slots { display: grid; }
.sbs-has-js .sbs-no-js { display: none; }
@media (max-width: 42rem) {
  .sbs-phone,
  .sbs-address__grid { grid-template-columns: 1fr; }
  .sbs-address__wide { grid-column: auto; }
  .sbs-schedule { grid-template-columns: 1fr; }
  .sbs-times { min-height: 0; }
  .sbs-management__header { align-items: flex-start; flex-direction: column; }
  .sbs-management__details { grid-template-columns: 1fr; }
  .sbs-management__details-wide { grid-column: auto; }
}
