.wp-block-tos-calendar-maker-booking-calendar.toscm-booking {
  --toscm-ink: var(--toscm-text-color, currentColor);
  --toscm-muted: color-mix(in srgb, var(--toscm-ink) 68%, var(--toscm-surface));
  --toscm-surface: var(--toscm-background-color, #fff);
  --toscm-surface-muted: color-mix(in srgb, var(--toscm-surface) 96%, var(--toscm-ink));
  /* Three editor colours: Primary (accent), Secondary and Text (ink). Unset, Primary follows the text colour and Secondary follows Primary. */
  --toscm-accent: var(--toscm-primary-color, currentColor);
  --toscm-secondary: var(--toscm-secondary-color, var(--toscm-accent));
  --toscm-hover: color-mix(in srgb, var(--toscm-accent) 80%, var(--toscm-surface));
  --toscm-booked: #b32d2e;
  --toscm-available: var(--toscm-accent);
  --toscm-line: color-mix(in srgb, var(--toscm-ink) 18%, var(--toscm-surface));
  --toscm-line-primary: color-mix(in srgb, var(--toscm-accent) 18%, var(--toscm-surface));
  --toscm-on-accent: var(--toscm-surface);
  --toscm-on-secondary: var(--toscm-on-accent);
  --toscm-on-hover: var(--toscm-on-accent);
  --toscm-on-available: var(--toscm-on-accent);
  --toscm-font-family: inherit;
  --toscm-control-font: inherit;
  --toscm-font-size-sm: 10px;
  --toscm-font-size-meta: 11px;
  --toscm-font-size-label: 12px;
  --toscm-font-size-ui: 13px;
  --toscm-font-size-date: 14px;
  --toscm-font-size-success-mark: 21px;
  --toscm-font-size-success-title: 22px;
  --toscm-font-style-normal: normal;
  --toscm-font-weight-strong: 600;
  --toscm-line-height-tight: 1.3;
  --toscm-line-height-body: 1.45;
  --toscm-link-decoration: underline;
  --toscm-calendar-label-transform: uppercase;
  --toscm-space-2: 2px;
  --toscm-space-4: 4px;
  --toscm-space-5: 5px;
  --toscm-space-6: 6px;
  --toscm-space-8: 8px;
  --toscm-space-9: 9px;
  --toscm-space-10: 10px;
  --toscm-space-12: 12px;
  --toscm-space-14: 14px;
  --toscm-space-16: 16px;
  --toscm-space-18: 18px;
  --toscm-space-20: 20px;
  --toscm-space-28: 28px;
  --toscm-space-32: 32px;
  --toscm-border-width: 1px;
  --toscm-focus-width: 2px;
  --toscm-radius-control: 2px;
  --toscm-radius-round: 50%;
  --toscm-form-columns: repeat(2, minmax(0, 1fr));
  --toscm-panel-padding: clamp(18px, 3vw, 32px);
  --toscm-option-min-height: 46px;
  --toscm-control-min-height: 42px;
  --toscm-success-mark-size: 42px;
  --toscm-spinner-size: 16px;
  --toscm-hidden-control-size: 1px;
  --toscm-hidden-control-offset: -10000px;
  --toscm-disabled-opacity: 0.65;
  --toscm-spinner-duration: 700ms;
  --toscm-dialog-width: 26rem;
  --toscm-tab-underline: 4px;
  --toscm-dot-size: 5px;
  --toscm-dot-radius: 1.5px;
  --toscm-dot-gap: 3px;
  --toscm-calendar-gap: 3px;
  --toscm-calendar-day-padding: var(--toscm-space-6);
  --toscm-calendar-day-min-height: 68px;
  --toscm-tab-number-size: 24px;
  --toscm-tab-faded-opacity: 0.5;
  --toscm-tab-hover-opacity: 0.8;
  --toscm-tab-disabled-opacity: 0.25;
  --toscm-fade-duration: 200ms;
  --toscm-slide-duration: 350ms;
  --toscm-slide-easing: cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-block: 0;
  padding: 0;
  color: var(--toscm-ink);
  font-family: var(--toscm-font-family);

  @media (max-width: 720px) {
    --toscm-form-columns: 1fr;
    --toscm-dot-gap: 2px;
    --toscm-calendar-day-min-height: 54px;
  }

  @media (min-width: 600px) {
    --toscm-calendar-gap: 3px;
  }
  @media (min-width: 768px) {
    --toscm-calendar-gap: 6px;
    --toscm-dot-gap: 4px;
    --toscm-calendar-day-padding: 0.5125rem;
  }
}

.toscm-booking {
  &,
  & *,
  & *::before,
  & *::after {
    box-sizing: border-box;
  }

  & .toscm-booking__step-title {
    margin: 0;
    font-size: clamp(1.5rem, 2.75vw, 1.9875rem);
    letter-spacing: -0.015em;
    text-align: center;
  }

  & .toscm-booking__instruction {
    opacity: 1;
    transition: opacity var(--toscm-fade-duration) ease;

    &.is-fading {
      opacity: 0;
    }
  }

  & .toscm-booking__panel:focus {
    outline: none;
  }

  &.is-editor-preview {
    & .toscm-booking__preview-input {
      display: block;
      min-height: var(--toscm-control-min-height);
      padding: var(--toscm-space-8) var(--toscm-space-10);
      border: var(--toscm-border-width) solid var(--toscm-line-primary);
      background: var(--toscm-surface);
      font-weight: 400;
    }
  }

  &.has-background {
    & .toscm-booking__panel {
      background: var(--toscm-panel-color, transparent);
    }

    & .toscm-booking__form {
      background: transparent;
    }
  }

  &.has-border-color {
    & .toscm-booking__panel,
    & .toscm-booking__form,
    & .toscm-booking__time,
    & .toscm-booking__preview-input {
      border-color: inherit;
    }
  }

  & .toscm-booking__time-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: var(--toscm-space-8);
  }

  @media (max-width: 767px) {
    & .toscm-booking__time-list {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  & .toscm-booking__shell {
    width: 100%;
  }

  & .toscm-booking__main {
    min-width: 0;
  }

  & .toscm-booking__tabs {
    --toscm-tab-direction: 1;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: var(--toscm-space-14);
    border-bottom: var(--toscm-border-width) solid var(--toscm-line-primary);
  }

  & .toscm-booking__shell[data-dir='rtl'] .toscm-booking__tabs {
    --toscm-tab-direction: -1;
  }

  & .toscm-booking__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--toscm-space-8);
    min-height: var(--toscm-option-min-height);
    padding: var(--toscm-space-10) var(--toscm-space-8);
    border: 0;
    background: transparent;
    color: var(--toscm-accent);
    cursor: pointer;
    font: var(--toscm-control-font);
    font-weight: var(--toscm-font-weight-strong);
    opacity: var(--toscm-tab-faded-opacity);
    transition: opacity var(--toscm-slide-duration) var(--toscm-slide-easing);

    &:hover:not(:disabled, .is-current) {
      opacity: var(--toscm-tab-hover-opacity);
    }

    &:disabled {
      cursor: default;
      opacity: var(--toscm-tab-disabled-opacity);
    }

    &.is-current {
      opacity: 1;
    }

    &:focus-visible {
      outline-offset: calc(var(--toscm-focus-width) * -1);
    }
  }

  & .toscm-booking__tab-number {
    display: inline-grid;
    width: var(--toscm-tab-number-size);
    height: var(--toscm-tab-number-size);
    place-items: center;
    border: var(--toscm-border-width) solid currentColor;
    border-radius: var(--toscm-radius-round);
    font-size: var(--toscm-font-size-meta);
    line-height: 1;
  }

  & .toscm-booking__tab-number svg {
    display: block;
    width: 66%;
    height: 66%;
  }

  & .toscm-booking__tab.is-current .toscm-booking__tab-number {
    border-color: var(--toscm-secondary);
    background: var(--toscm-secondary);
    color: var(--toscm-on-secondary);
  }

  & .toscm-booking__tab.is-current .toscm-booking__tab-label {
    color: var(--toscm-secondary);
  }

  & .toscm-booking__tab-indicator {
    position: absolute;
    inset-block-end: calc(var(--toscm-border-width) * -1);
    inset-inline-start: 0;
    width: calc(100% / 3);
    height: var(--toscm-tab-underline);
    background: var(--toscm-secondary);
    transform: translateX(calc(var(--toscm-step, 0) * var(--toscm-tab-direction) * 100%));
    transition: transform var(--toscm-slide-duration) var(--toscm-slide-easing);
  }

  & .toscm-booking__notices:not(:empty) {
    margin-bottom: var(--toscm-space-12);
  }

  & .toscm-booking__viewport {
    box-sizing: content-box;
    width: 100%;
    margin: calc(var(--toscm-space-4) * -1);
    padding: var(--toscm-space-4);
    overflow: hidden;
  }

  & .toscm-booking__track {
    --toscm-panel-gap: var(--toscm-space-10);
    --toscm-step-direction: -1;
    display: flex;
    align-items: stretch; /* every panel takes the height of the tallest, so nothing resizes between steps */
    gap: var(--toscm-panel-gap);
    width: 100%;
    transform: translateX(calc(var(--toscm-step) * var(--toscm-step-direction) * (100% + var(--toscm-panel-gap))));
    transition: transform var(--toscm-slide-duration) var(--toscm-slide-easing);
  }

  & .toscm-booking__shell[data-dir='rtl'] .toscm-booking__track {
    --toscm-step-direction: 1;
  }

  & .toscm-booking__panel {
    flex: 0 0 100%;
    min-width: 0;
    padding: var(--toscm-panel-padding);
    border: var(--toscm-border-width) solid var(--toscm-secondary-color, var(--toscm-line));
    background: var(--toscm-panel-color, var(--toscm-surface));

    & .toscm-booking__form {
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
    }
  }

  & .toscm-booking__calendar {
    width: 100%;
  }

  & .toscm-booking__mini-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    margin-bottom: var(--toscm-space-8);
    /* One size and line height for the title and both neighbouring month names, so their baselines match. */
    font-size: var(--toscm-font-size-date);
    line-height: var(--toscm-line-height-tight);
  }

  & .toscm-booking__mini-title {
    margin: 0;
    color: var(--toscm-accent);
    font-size: inherit;
    line-height: inherit;
    font-weight: var(--toscm-font-weight-strong);
    text-align: center;
  }

  & .toscm-booking__mini-step {
    display: inline-flex;
    align-items: center;
    gap: var(--toscm-space-6);
    min-height: var(--toscm-space-28);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--toscm-accent);
    cursor: pointer;
    font: var(--toscm-control-font);
    font-size: inherit;
    font-weight: normal;
    line-height: inherit;

    &:first-child {
      justify-self: start;
    }

    &:last-child {
      justify-self: end;
    }

    & .toscm-booking__arrow {
      font-size: 1.4em;
    }

    & .toscm-booking__mini-month {
      opacity: var(--toscm-tab-faded-opacity);
      transition: opacity var(--toscm-slide-duration) var(--toscm-slide-easing);
    }

    &:is(:hover, :focus-visible) .toscm-booking__mini-month {
      opacity: 1;
    }

    &:disabled {
      visibility: hidden;
    }
  }

  & .toscm-booking__mini-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--toscm-calendar-gap);
    font-size: var(--toscm-font-size-meta);
    text-align: center;
  }

  & .toscm-booking__mini-weekday {
    margin: auto;
    line-height: 1;
    padding-inline-start: var(--toscm-space-6);
    text-align: start;
    color: var(--toscm-muted);
    font-size: var(--toscm-font-size-sm);
    text-transform: var(--toscm-calendar-label-transform);
  }

  & .toscm-booking__mini-day {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--toscm-space-4);
    min-width: 0;
    min-height: var(--toscm-calendar-day-min-height);
    padding: var(--toscm-calendar-day-padding);
    border: 0;
    border-radius: var(--toscm-radius-control);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--toscm-font-size-date);
    text-align: start;
    transition: background-color 0.2s ease;

    &:is(button) {
      cursor: pointer;

      &:hover {
        background: color-mix(in srgb, var(--toscm-accent) 35%, var(--toscm-surface));
      }
    }

    &.is-open {
      background: color-mix(in srgb, var(--toscm-accent) 18%, var(--toscm-surface));
      color: var(--toscm-accent);
      font-weight: var(--toscm-font-weight-strong);
    }

    &:not(.is-open, .is-blank) {
      position: relative;

      &::after {
        position: absolute;
        inset: 0;
        border: var(--toscm-border-width) solid var(--toscm-ink);
        content: '';
        opacity: 0.15;
      }

      & .toscm-booking__mini-number {
        opacity: 0.5;
      }

      /* The X: the holder fills the area left after a 1.5em margin (clear of the date numeral); the SVG inside is centred and
         forced 1:1 at the largest square that fits, with pixel-sized round-capped strokes. */
      & .toscm-booking__mini-x {
        position: absolute;
        inset: 1.5em;
        display: grid;
        place-items: center;
        container-type: size;
        color: var(--toscm-ink);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;

        & svg {
          width: min(100cqw, 100cqh);
          height: min(100cqw, 100cqh);
          aspect-ratio: 1 / 1;
          overflow: visible;
        }

        & line {
          stroke: currentColor;
          stroke-width: 2px;
          stroke-linecap: round;
        }
      }

      &:hover .toscm-booking__mini-x {
        opacity: 0.2;
      }
    }

    & .toscm-booking__mini-number {
      line-height: 1;
      transform: translate(-1px, -1px);
      margin-bottom: -1em !important;
    }

    & .toscm-booking__mini-dots {
      display: grid;
      grid-template-columns: repeat(auto-fill, var(--toscm-dot-size));
      gap: var(--toscm-dot-gap);
      justify-content: start;
      width: 100%;
      margin-block-start: auto;
      & i {
        width: var(--toscm-dot-size);
        height: var(--toscm-dot-size);
        border-radius: var(--toscm-dot-radius);
        background: var(--toscm-accent);

        &.is-chosen {
          background: var(--toscm-surface, #fff);
          /* An outline sits outside the dot, so it stands out without changing the dot size or the even spacing. */
          outline: var(--toscm-border-width) solid var(--toscm-accent);
          outline-offset: 0;
        }
      }
    }

    &.is-today {
      box-shadow: inset 0 0 0 var(--toscm-border-width) var(--toscm-line);
    }

    &.is-selected {
      outline: var(--toscm-focus-width) solid var(--toscm-accent);
      outline-offset: calc(var(--toscm-focus-width) * -1);
      font-weight: var(--toscm-font-weight-strong);

      @media (min-width: 768px) {
        outline-offset: 2px;
      }
    }
  }

  & .toscm-booking__text-button.toscm-booking__back {
    display: flex;
    align-items: center;
    gap: var(--toscm-space-6);
    margin: -0.5em 0 var(--toscm-space-12);
    grid-column: 1 / -1;
    justify-self: start;
    font-size: 12px;
    text-decoration: none;
    text-box: trim-both cap alphabetic;

    &:hover:not(:disabled) {
      text-decoration: underline;
    }
  }

  & .toscm-booking__arrow {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;

    & svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    &.is-forward {
      transform: scaleX(-1);
    }
  }

  & .toscm-booking__shell[data-dir='rtl'] .toscm-booking__arrow {
    transform: scaleX(-1);

    &.is-forward {
      transform: none;
    }
  }

  & .toscm-booking__notice .toscm-booking__arrow {
    margin-inline-end: var(--toscm-space-6);
  }

  & .toscm-booking__notice-link {
    display: block;
    width: 100%;
    min-height: 5rem;
    cursor: pointer;
    font: var(--toscm-control-font);
    text-align: center;
    transition: background-color 0.2s ease;

    &:hover {
      border-color: var(--toscm-accent);
      background: color-mix(in srgb, var(--toscm-accent) 12%, var(--toscm-surface));
      color: var(--toscm-ink);
    }
  }

  & .toscm-booking__time {
    min-height: var(--toscm-option-min-height);
    padding: var(--toscm-space-9) var(--toscm-space-12);
    border: var(--toscm-border-width) solid var(--toscm-line-primary);
    border-radius: var(--toscm-radius-control);
    background: var(--toscm-surface);
    color: var(--toscm-accent);
    cursor: pointer;
    font: var(--toscm-control-font);
    text-align: left;
    transition: background-color 0.2s ease;

    &:hover {
      border-color: var(--toscm-hover);
      background: var(--toscm-hover);
      color: var(--toscm-on-hover);
    }

    &.is-selected {
      border-color: var(--toscm-accent);
      background: var(--toscm-accent);
      color: var(--toscm-on-accent);
    }
  }

  & .toscm-booking__time {
    font-weight: var(--toscm-font-weight-strong);
    line-height: 1;
    text-align: center;
  }

  & .toscm-booking__form {
    display: grid;
    grid-template-columns: var(--toscm-form-columns);
    gap: var(--toscm-space-14);
    width: 100%;
    margin-top: var(--toscm-space-18);
    padding: var(--toscm-panel-padding);
    border: var(--toscm-border-width) solid var(--toscm-line);
    background: var(--toscm-surface);

    & .toscm-booking__step-title {
      grid-column: 1 / -1;
    }
  }

  & .toscm-booking__selection,
  & .toscm-booking__notice,
  & .toscm-booking__submit {
    grid-column: 1 / -1;
  }

  & .toscm-booking__selection {
    margin: calc(var(--toscm-space-5) * -1) 0 0.625em;
    color: var(--toscm-muted);
    font-size: 1.12rem;
    font-weight: var(--toscm-font-weight-strong);
    text-align: center;

    & .toscm-booking__selection-label {
      display: block;
      font-weight: normal;
    }

    & .toscm-booking__selection-when {
      display: block;
      margin-top: var(--toscm-space-4);
      color: var(--toscm-ink);
      font-size: 1.5rem;
      font-weight: normal;
      line-height: var(--toscm-line-height-tight);
    }

    & .toscm-booking__selection-when strong {
      font-weight: var(--toscm-font-weight-strong);
    }
  }

  & .toscm-booking__location {
    display: flex;
    grid-column: 1 / -1;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--toscm-space-16);
    margin-bottom: var(--toscm-space-2);
    padding: var(--toscm-space-12);
    border: var(--toscm-border-width) solid var(--toscm-line);
    background: var(--toscm-surface-muted);

    & address {
      margin: 0;
      font-style: var(--toscm-font-style-normal);
      line-height: var(--toscm-line-height-body);
      white-space: pre-line;
    }
  }

  & .toscm-booking__maps-link {
    flex: 0 0 auto;
    color: var(--toscm-accent);
    font-size: var(--toscm-font-size-ui);
    font-weight: var(--toscm-font-weight-strong);

    &:hover {
      color: var(--toscm-hover);
    }
  }

  & .toscm-booking__field {
    display: flex;
    gap: var(--toscm-space-6);
    flex-direction: column;
    color: var(--toscm-ink);
    font-size: var(--toscm-font-size-label);
    font-weight: var(--toscm-font-weight-strong);

    & input {
      width: 100%;
      min-height: var(--toscm-control-min-height);
      padding: var(--toscm-space-8) var(--toscm-space-10);
      border: var(--toscm-border-width) solid var(--toscm-line-primary);
      border-radius: var(--toscm-radius-control);
      background: var(--toscm-surface);
      color: var(--toscm-secondary);
      font: var(--toscm-control-font);

      &::placeholder {
        color: var(--toscm-secondary);
        opacity: 0.5;
      }

      &:focus {
        border-color: var(--toscm-accent);
        box-shadow: 0 0 0 var(--toscm-border-width) var(--toscm-accent);
        outline: none;
      }
    }
  }

  & .toscm-booking__submit {
    min-height: var(--toscm-control-min-height);
    padding: var(--toscm-space-9) var(--toscm-space-16);
    border: var(--toscm-border-width) solid var(--toscm-accent);
    border-radius: var(--toscm-radius-control);
    background: var(--toscm-accent);
    color: var(--toscm-on-accent);
    cursor: pointer;
    font: var(--toscm-control-font);
    font-weight: var(--toscm-font-weight-strong);

    &:hover:not(:disabled) {
      border-color: var(--toscm-hover);
      background: var(--toscm-hover);
      color: var(--toscm-on-hover);
    }

    &:disabled {
      cursor: wait;
      opacity: var(--toscm-disabled-opacity);
    }
  }

  & .toscm-booking__footer {
    display: grid;
    justify-items: center;
    gap: var(--toscm-space-4);
    margin-top: var(--toscm-space-16);

    & .toscm-booking__submit {
      width: 100%;
    }

    & .toscm-booking__submit {
      transition: filter 0.2s ease;
    }

    & .toscm-booking__submit:disabled {
      cursor: not-allowed;
      filter: grayscale(1);
    }

    & .toscm-booking__reset {
      margin-top: var(--toscm-space-4);
      font-size: var(--toscm-font-size-label);

      &:disabled {
        cursor: default;
        opacity: var(--toscm-disabled-opacity);
        text-decoration: none;
      }
    }
  }

  & .toscm-booking__stage {
    position: relative;
    margin-bottom: var(--toscm-space-20);
  }

  & .toscm-booking__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    padding: var(--toscm-space-14);
    overflow: auto;
    background: color-mix(in srgb, var(--toscm-ink) 45%, transparent);

    &[hidden] {
      display: none;
    }
  }

  & .toscm-booking__dialog {
    width: min(100%, var(--toscm-dialog-width));
    padding: var(--toscm-panel-padding);
    border: var(--toscm-border-width) solid var(--toscm-line);
    border-radius: var(--toscm-radius-control);
    background: var(--toscm-surface);
    color: var(--toscm-ink);
    font-family: var(--toscm-font-family);

    & .toscm-booking__dialog-title {
      margin: 0 0 var(--toscm-space-8);
    }

    & .toscm-booking__dialog-text {
      margin: 0 0 var(--toscm-space-20);
    }

    & .toscm-booking__dialog-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: var(--toscm-space-10);
    }

    & .toscm-booking__dialog-cancel {
      min-height: var(--toscm-control-min-height);
      padding: var(--toscm-space-9) var(--toscm-space-16);
      border: var(--toscm-border-width) solid var(--toscm-line);
      border-radius: var(--toscm-radius-control);
      background: transparent;
      color: var(--toscm-ink);
      cursor: pointer;
      font: var(--toscm-control-font);
      font-weight: var(--toscm-font-weight-strong);

      &:hover {
        border-color: var(--toscm-ink);
      }
    }
  }

  & .toscm-booking__notice,
  & .toscm-booking__loading {
    padding: var(--toscm-space-14) var(--toscm-space-16);
    border: var(--toscm-border-width) solid var(--toscm-line);
    background: var(--toscm-surface);
    color: var(--toscm-muted);
  }

  & .toscm-booking__notice {
    &.is-error {
      border-color: var(--toscm-booked);
      color: var(--toscm-booked);
    }
  }

  & .toscm-booking__alternatives {
    display: flex;
    flex-wrap: wrap;
    gap: var(--toscm-space-8);
    margin-top: var(--toscm-space-10);
  }

  & .toscm-booking__text-button {
    margin-top: var(--toscm-space-14);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--toscm-accent);
    cursor: pointer;
    font: var(--toscm-control-font);
    text-decoration: var(--toscm-link-decoration);

    &:hover:not(:disabled) {
      color: var(--toscm-hover);
    }
  }

  & .toscm-booking__loading {
    display: flex;
    align-items: center;
    gap: var(--toscm-space-10);
  }

  & .toscm-booking__spinner {
    width: var(--toscm-spinner-size);
    height: var(--toscm-spinner-size);
    border: var(--toscm-focus-width) solid var(--toscm-line);
    border-top-color: var(--toscm-accent);
    border-radius: var(--toscm-radius-round);
    animation: toscm-spin var(--toscm-spinner-duration) linear infinite;
  }

  & .toscm-booking__success {
    width: 100%;
    padding: var(--toscm-space-32);
    border: var(--toscm-border-width) solid var(--toscm-available);
    background: var(--toscm-surface);
    text-align: center;

    & .toscm-booking__success-mark {
      display: inline-grid;
      width: var(--toscm-success-mark-size);
      height: var(--toscm-success-mark-size);
      place-items: center;
      border-radius: var(--toscm-radius-round);
      background: var(--toscm-available);
      color: var(--toscm-on-available);
      font-size: var(--toscm-font-size-success-mark);

      & svg {
        display: block;
        width: 62%;
        height: 62%;
      }
    }

    & h3 {
      margin: var(--toscm-space-14) 0 var(--toscm-space-4);
      font-size: var(--toscm-font-size-success-title);
    }

    & p {
      margin: 0;
    }

    & .toscm-booking__directions {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: var(--toscm-space-16);
      text-decoration: none;
    }

    & .toscm-booking__success-note {
      margin-top: var(--toscm-space-14);
      color: var(--toscm-ink);
      font-size: var(--toscm-font-size-label);
    }
  }

  & .toscm-booking__main.is-resizing {
    overflow: hidden;
    transition: height var(--toscm-slide-duration) var(--toscm-slide-easing);
  }

  & .toscm-booking__main.is-swapping > * {
    opacity: 0;
    transition: opacity var(--toscm-fade-duration) ease;
  }

  & .toscm-booking__success {
    transition: opacity var(--toscm-slide-duration) ease;

    &.is-entering {
      opacity: 0;
    }
  }

  & .toscm-booking__honeypot {
    position: absolute !important;
    left: var(--toscm-hidden-control-offset) !important;
    width: var(--toscm-hidden-control-size) !important;
    height: var(--toscm-hidden-control-size) !important;
    opacity: 0 !important;
  }

  & button:focus-visible {
    outline: var(--toscm-focus-width) solid var(--toscm-accent);
    outline-offset: var(--toscm-focus-width);
  }

  @media (max-width: 720px) {
    & .toscm-booking__tab {
      flex-direction: column;
      gap: var(--toscm-space-4);
      font-size: var(--toscm-font-size-label);
      line-height: var(--toscm-line-height-tight);
      text-align: center;
    }

    & .toscm-booking__location {
      flex-direction: column;
      gap: var(--toscm-space-8);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    --toscm-slide-duration: 0s;
    --toscm-fade-duration: 0s;

    & .toscm-booking__spinner {
      animation: none;
    }

    & .toscm-booking__viewport,
    & .toscm-booking__track,
    & .toscm-booking__tab,
    & .toscm-booking__tab-indicator {
      transition: none;
    }
  }
}

@keyframes toscm-spin {
  to {
    transform: rotate(360deg);
  }
}

.toscm-booking__panel[data-step='1'] {
  .toscm-booking__mini-nav {
    transform: translateY(-0.5em);
  }
}

.toscm-booking .toscm-booking__notice.is-empty {
  text-align: center;
}

.toscm-booking .toscm-booking__settings-link {
  display: block;
  margin-top: var(--toscm-space-12);
  text-align: center;
  font-size: var(--toscm-font-size-label);
}