/* Sora Private Classes: the booking calendar (calendar.js), shared by private and group classes. Tokens only. */
.spc-book { container-type: inline-size; }
.spc-calendar { display: grid; gap: 1rem; min-width: 0; color: var(--fz-ink); text-align: left; }
.spc-calendar *, .spc-calendar *::before, .spc-calendar *::after { box-sizing: border-box; }
.spc-calendar :where(h4, p) { margin: 0; color: inherit; }
.spc [hidden], .spc-calendar [hidden] { display: none !important; }
.spc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spc-muted { color: var(--fz-muted) !important; }
.spc-small { font-size: .85rem; }
.spc-link { background: none; border: 0; padding: 0; font: inherit; font-size: .9rem; font-weight: 600; color: var(--fz-action) !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.spc-calendar button:focus-visible { outline: 3px solid var(--fz-spotlight); outline-offset: 2px; }

/* time zone line and picker */
.spc-tzbar { display: flex; align-items: center; gap: .7rem; background: var(--fz-action-soft); border-radius: var(--fz-radius-md); padding: .6rem .9rem; font-size: .92rem; }
.spc-tzbar__text { flex: 1; min-width: 0; }
.spc-tzbar__globe { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fz-surface); color: var(--fz-action); }
.spc-tzbar__globe svg { width: 16px; height: 16px; }
.spc-tzpick { display: grid; gap: .6rem; border: var(--fz-border) solid var(--fz-line); border-radius: var(--fz-radius-md); padding: .8rem; background: var(--fz-surface); }
.spc-tzpick input { width: 100%; min-height: 44px; border: var(--fz-border) solid var(--fz-line); border-radius: var(--fz-radius-sm); padding: .45rem .8rem; font: inherit; color: var(--fz-ink); background: var(--fz-surface); }
.spc-tzpick input:focus { outline: none; border-color: var(--fz-action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fz-action) 22%, transparent); }
.spc-tzpick > .spc-link { justify-self: start; }
.spc-tzpick__list { display: grid; gap: 2px; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.spc-tzpick__opt { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; text-align: left; font: inherit; font-size: .92rem; color: var(--fz-ink); background: transparent; border: 0; border-radius: var(--fz-radius-sm); padding: .5rem .6rem; cursor: pointer; }
.spc-tzpick__opt:hover, .spc-tzpick__opt:focus-visible { background: var(--fz-surface-soft); outline: none; }
.spc-tzpick__opt.is-on { background: var(--fz-action-soft); font-weight: 700; }
.spc-tzpick__opt small { color: var(--fz-muted); font-weight: 500; }
.spc-tzpick__opt em { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--fz-success); background: var(--fz-success-soft); border-radius: var(--fz-radius-pill); padding: .1rem .45rem; margin-left: .3rem; }
.spc-tzpick__opt b { font-variant-numeric: tabular-nums; color: var(--fz-muted); font-weight: 600; white-space: nowrap; }

/* week arrows */
.spc-weeknav { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.spc-weeknav__range { font-weight: 700; min-width: 15ch; text-align: center; font-variant-numeric: tabular-nums; }
.spc-icon { width: 44px; height: 44px; border-radius: 50%; border: var(--fz-border) solid var(--fz-line); background: var(--fz-surface); color: var(--fz-ink); font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.spc-icon svg { width: 1.25rem; height: 1.25rem; }
.spc-icon:disabled { opacity: .35; cursor: default; }

/* day cards with the number of free times */
.spc-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .45rem; }
.spc-day { font: inherit; display: grid; justify-items: center; gap: 2px; padding: .55rem .2rem; border-radius: var(--fz-radius-md); border: 0; background: var(--fz-surface-soft); color: var(--fz-ink); cursor: pointer; line-height: 1.1; min-width: 0; }
.spc-day small { font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--fz-muted); }
.spc-day strong { font-size: 1.15rem; }
.spc-day i { font-style: normal; font-size: .8125rem; font-weight: 700; color: var(--fz-success); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; min-height: 1em; }
.spc-day.is-off { opacity: .5; }
.spc-day.is-off i { color: var(--fz-muted); }
.spc-day.is-today strong { color: var(--fz-action); }
.spc-day.is-on { background: var(--fz-night); color: var(--fz-on-night); opacity: 1; }
.spc-day.is-on small, .spc-day.is-on i { color: var(--fz-spotlight); }
.spc-day.is-on strong { color: var(--fz-on-night); }

/* the times, grouped by part of the day. Same slot size whatever the number of times: the box keeps a steady height. */
.spc-slotbox { min-height: 12.5rem; }
.spc-parts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.spc-calendar .spc-part h4 { font-family: inherit !important; font-size: .8125rem !important; line-height: 1.3; text-transform: uppercase; letter-spacing: .06em; color: var(--fz-muted) !important; font-weight: 700; margin: 0 0 .5rem; }
.spc-part__slots { display: grid; gap: .45rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spc-slot { font: inherit; font-weight: 700; font-size: .95rem; min-height: 44px; border-radius: var(--fz-radius-sm); border: var(--fz-border) solid color-mix(in srgb, var(--fz-action) 35%, var(--fz-line)); background: var(--fz-surface); color: var(--fz-action); cursor: pointer; padding: .35rem .2rem; font-variant-numeric: tabular-nums; }
.spc-slot:hover { background: var(--fz-action-soft); }
.spc-slot.is-on { background: var(--fz-action); color: var(--fz-on-action); border-color: var(--fz-action); }
.spc-slot.is-off, .spc-slot.is-off:hover { background: var(--fz-surface-soft); color: var(--fz-muted); border-color: var(--fz-line); cursor: not-allowed; font-weight: 600; text-decoration: line-through; opacity: .6; }
.spc-empty { text-align: center; color: var(--fz-muted); background: var(--fz-surface-soft); border-radius: var(--fz-radius-md); padding: .8rem; }
.fz-look-kids .spc-slot:not(.is-off), .fz-look-kids .spc-icon { border-color: var(--fz-ink); }

@container (max-width: 600px) {
	.spc-days { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
	.spc-day { flex: 0 0 66px; scroll-snap-align: start; }
	.spc-part__slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.spc-tzbar { flex-wrap: wrap; }
}