@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap");._layout_1ncgp_1 {
  min-height: 100vh;
  isolation: isolate;
}
._iframeContainer_9vg44_1 {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  min-height: 100vh;

  isolation: isolate;
}

._iframeContainer_9vg44_1::before {
  content: "";
  position: fixed;
  inset: 0;

  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  filter: blur(var(--bg-image-blur));
  transform: scale(1.05);

  pointer-events: none;
  z-index: -2;
}

._iframeContainer_9vg44_1::after {
  content: "";
  position: fixed;
  inset: 0;

  background: var(--bg-image-overlay);

  pointer-events: none;
  z-index: -1;
}

/* Hide backgrounds when disabled */
._iframeContainer_9vg44_1[data-show-background="false"]::before,
._iframeContainer_9vg44_1[data-show-background="false"]::after {
  display: none;
}

._scrollArea_9vg44_93 {
  flex: 1;

  width: 100%;
  height: 100%;

  overflow-y: auto;

  display: flex;
  flex-direction: column;

  -webkit-overflow-scrolling: touch;
  padding: 1rem 2rem;
}

._iframeContainer_9vg44_1[data-show-background="true"] {
  --text-on-page-primary: var(--brand-white);
  --text-on-page-secondary: color-mix(
    in srgb,
    var(--brand-white) 75%,
    transparent
  );
}

@media (max-width: 600px) {
  ._scrollArea_9vg44_93 {
    padding: 1rem 1rem;
  }
}
._logoButton_79e19_1 {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

._logo_79e19_1,
._logoGeneric_79e19_23 {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

._logo_79e19_1 {
  background-image: var(--header-logo);
}

._logoGeneric_79e19_23 {
  background-image: var(--header-logoGeneric);
}
._overlay_4riuh_1 {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 60%);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

._modal_4riuh_23 {
  width: min(90vw, 450px);
  background: var(--modal-bg);
  border-radius: var(--border-radius);
  padding: 2rem;
  text-align: center;
  box-shadow: 0 20px 60px rgb(0 0 0 / 30%);
}

._title_4riuh_41 {
  margin: 0 0 1rem;
  color: var(--text-btn-secondary-main);
  font-size: 1.75rem;
  font-weight: 700;
}

._message_4riuh_55 {
  margin: 0 0 2rem;
  color: var(--text-main);
  line-height: 1.6;
}

._actions_4riuh_67 {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
._headerWrapper_ttyt8_1 {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  align-items: center;
  width: 100%;
  height: 70px;
  padding: 0 2rem;
  background-color: var(--background-secondary);
  border-bottom: 2px solid var(--active-divider);
}

._headerLeft_ttyt8_23 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}

._logoContainer_ttyt8_37 {
  height: 60px;
  width: 200px;
}

._headerMiddle_ttyt8_47 {
  display: flex;
  align-items: center;
  justify-content: center;
}

._title_ttyt8_59 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-main);
}

._headerRight_ttyt8_71 {
  display: flex;
  align-items: center;
  gap: 1rem;
}

._userInfo_ttyt8_83 {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: right;
}

._welcomeUser_ttyt8_97 {
  font-weight: 600;
  white-space: nowrap;
}

._accountBalance_ttyt8_107 {
  font-size: 0.9rem;
  white-space: nowrap;
}

._balanceLabelMobile_ttyt8_117 {
  display: none;
}

/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 600px) {
  ._headerWrapper_ttyt8_1 {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 0.75rem;
    align-items: center;
    height: auto;
    min-height: 0;
    padding: 0.5rem 1rem;
  }

  ._headerLeft_ttyt8_23 {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    height: auto;
  }

  ._logoContainer_ttyt8_37 {
    width: 170px;
    height: 100%;
    min-height: 75px;
  }

  ._headerRight_ttyt8_71 {
    display: contents;
  }
  ._headerRight_ttyt8_71 .btnSecondary {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;

    width: 90px;
    height: 36px;
    padding: 0.2rem 0.5rem;
    font-size: 0.9rem;
  }

  ._userInfo_ttyt8_83 {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-self: end;
    gap: 0;
    white-space: nowrap;
  }

  ._balanceLabelDesktop_ttyt8_235 {
    display: none;
  }

  ._balanceLabelMobile_ttyt8_117 {
    display: inline;
  }

  ._headerMiddle_ttyt8_47 {
    display: none;
  }
}
._stepperWrapper_1nqth_1 {
  position: relative;
  padding: 0.75rem 0;

  width: 100%;
}

/* Bottom line */
._stepperWrapper_1nqth_1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--active-divider);
}

._stepper_1nqth_1 {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

._step_1nqth_1 {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

._markerRow_1nqth_65 {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Connector between circles */
._step_1nqth_1:not(:last-child) ._markerRow_1nqth_65::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% + 1rem); /* half marker width */
  width: calc(100% - 2rem);
  height: 2px;
  background: var(--active-marker-background-default);
  backdrop-filter: blur(var(--active-marker-background-blur));
  -webkit-backdrop-filter: blur(var(--active-marker-background-blur));
  border: 1px solid var(--active-marker-border-default);
  z-index: 1;
  transform: translateY(-50%);
}

._complete_1nqth_111:not(:last-child) ._markerRow_1nqth_65::after {
  background: var(--active-marker-background-current);
  backdrop-filter: blur(var(--active-marker-background-blur));
  -webkit-backdrop-filter: blur(var(--active-marker-background-blur));
  border-color: var(--active-marker-border-current);
}

._marker_1nqth_65 {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--active-marker-color-default);
  background: var(--active-marker-background-default);
  backdrop-filter: blur(var(--active-marker-background-blur));
  -webkit-backdrop-filter: blur(var(--active-marker-background-blur));
  border: 1px solid var(--active-marker-border-default);
  z-index: 1;
}

._labelWrapper_1nqth_155 {
  margin-top: 0.75rem;
  text-align: center;
}

._label_1nqth_155 {
  font-weight: 600;
  color: var(--active-label-color-default);
}

._active_1nqth_175 ._marker_1nqth_65 {
  color: var(--active-marker-color-current);
  background: var(--active-marker-background-current);
  backdrop-filter: blur(var(--active-marker-background-blur));
  -webkit-backdrop-filter: blur(var(--active-marker-background-blur));
  border-color: var(--active-marker-border-current);
}

._active_1nqth_175 ._label_1nqth_155 {
  color: var(--active-label-color-current);
}

._complete_1nqth_111 ._marker_1nqth_65 {
  color: var(--active-marker-color-complete);
  background: var(--active-marker-background-complete);
  backdrop-filter: blur(var(--active-marker-background-blur));
  -webkit-backdrop-filter: blur(var(--active-marker-background-blur));
  border-color: var(--active-marker-border-complete);
}

._complete_1nqth_111 ._label_1nqth_155 {
  color: var(--active-label-color-complete);
}
._contentWrapper_zc0o0_1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

._footerText_zc0o0_13 {
  font-size: 0.875rem;
  color: var(--text-title);
  text-align: center;
  padding: 1rem 0;
}

._footerLink_zc0o0_27 {
  color: var(--text-title);
  text-decoration: none;
  transition: color 0.2s ease;
}

@media (max-width: 600px) {
  ._footerText_zc0o0_13 {
    padding: 0.5rem 0;
  }
}
._pageWrapper_1atah_1 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

._pageWrapper_1atah_1 > * {
  position: relative;
  z-index: 2;
}

._pageTitle_1atah_29 {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--text-on-page-primary);
  text-align: center;
}

._pageSubtitle_1atah_43 {
  font-size: 1.25rem;
  color: var(--text-on-page-secondary);
  text-align: center;
  padding-bottom: 1rem;
}

._loginContainer_1atah_57 {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  width: 100%;
  max-width: 600px;

  padding: 2rem;

  color: var(--active-text-on-card-primary);

  background: var(--active-card-surface);

  backdrop-filter: blur(var(--active-card-surface-blur));
  -webkit-backdrop-filter: blur(var(--active-card-surface-blur));

  border: 1px solid var(--active-card-surface-border);

  border-radius: 0.5rem;

  box-shadow: 0 4px 12px var(--box-shadow-color);
}

._loginContainer_1atah_57 h1 {
  font-size: 1.5rem;
  font-weight: 500;
}

._loginContainer_1atah_57 p {
  font-size: 1rem;
  color: var(--active-text-on-card-secondary);
}

._form_1atah_125 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._formGroup_1atah_137 {
  display: flex;
  flex-direction: column;
}

._formGroup_1atah_137 label {
  font-weight: 500;
  color: var(--text-on-form-primary);
}

._formGroup_1atah_137 input {
  padding: 0.5rem;

  background: var(--form-background);

  color: var(--text-on-form-primary);

  border: 1px solid var(--input-border-color);
  border-radius: 4px;

  font-size: 1rem;
}

._formGroup_1atah_137 input::placeholder {
  color: var(--text-on-form-secondary);
}

._formGroup_1atah_137 input:focus {
  border-color: var(--input-focus-border-color);
  outline: none;
  box-shadow: 0 0 0 2px var(--input-focus-shadow-color);
}

._formGroup_1atah_137 input:invalid {
  background: var(--surface-input-invalid);
}

._formGroup_1atah_137 input:disabled {
  background: var(--input-disabled-bg-color);
  cursor: not-allowed;
}

input:autofill,
textarea:autofill,
select:autofill {
  box-shadow: 0 0 0 1000px var(--brand-lightest) inset !important;
  color: var(--text-on-card-primary) !important;
}

._error_1atah_235 {
  color: var(--color-error);
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

._buttonGroup_1atah_247 {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 0.5rem;
  margin-top: 1rem;
}

._loginButton_1atah_265 {
  width: 100%;

  padding: 0.75rem;
  margin-top: 1rem;

  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);

  border: 2px solid var(--btn-primary-border);
  border-radius: 4px;

  font-size: 1rem;
  cursor: pointer;

  box-shadow: 0 2px 8px var(--box-shadow-color);
}

._loginButton_1atah_265:hover:not(:disabled) {
  background-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text-hover);
  border-color: var(--btn-primary-border-hover);
}

._loginButton_1atah_265:disabled {
  background-color: var(--input-disabled-bg-color);
  cursor: not-allowed;
}

._textButton_1atah_323 {
  width: fit-content;

  background: none;
  border: none;

  color: var(--active-text-on-card-tertiary);

  cursor: pointer;

  padding: 0;
  margin-top: 0.5rem;
}

._textButton_1atah_323:hover {
  color: var(--brand-primary);
}

._orSeparator_1atah_359 {
  width: 100%;

  display: grid;
  grid-template-columns: 1fr auto 1fr;

  align-items: center;
  column-gap: 0.75rem;

  margin: 1rem 0;

  font-weight: 500;
  text-align: center;

  color: var(--active-text-on-card-tertiary);
}

._orSeparator_1atah_359::before,
._orSeparator_1atah_359::after {
  content: "";

  width: 100%;
  height: 1px;

  background-color: var(--active-text-on-card-tertiary);
}

._guestButton_1atah_413 {
  width: 100%;

  padding: 0.75rem;
  margin-top: 0.5rem;

  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);

  border: 2px solid var(--btn-secondary-border);
  border-radius: 4px;

  font-size: 1rem;
  cursor: pointer;

  box-shadow: 0 1px 4px var(--box-shadow-color);
}

._guestButton_1atah_413:hover {
  background-color: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-text-hover);
  border-color: var(--btn-secondary-border-hover);
}

/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 600px) {
  ._pageTitle_1atah_29 {
    font-size: 1.6rem;
  }

  ._pageSubtitle_1atah_43 {
    font-size: 1rem;
    padding-bottom: 0.35rem;
  }

  ._pageWrapper_1atah_1 {
    gap: 0.25rem;
  }

  ._loginContainer_1atah_57 {
    gap: 0.75rem;
    padding: 1.25rem;
  }

  ._loginContainer_1atah_57 h1 {
    font-size: 1.25rem;
  }

  ._loginContainer_1atah_57 p {
    font-size: 0.9rem;
  }

  ._form_1atah_125 {
    gap: 0.6rem;
  }

  ._buttonGroup_1atah_247 {
    gap: 0.4rem;
    margin-top: 0.5rem;
  }

  ._loginButton_1atah_265,
  ._guestButton_1atah_413 {
    padding: 0.6rem;
    margin-top: 0.4rem;
  }

  ._textButton_1atah_323 {
    margin-top: 0;
    min-height: 2.75rem;
  }

  ._orSeparator_1atah_359 {
    margin: 0;
  }
}

@media (max-width: 340px) {
  ._pageWrapper_1atah_1 {
    padding: 0 0.75rem;
  }

  ._pageTitle_1atah_29 {
    font-size: 1.3rem;
  }
}
._dayPickerWrapper_183x3_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

._calendarWrapper_183x3_17 {
  display: flex;
  min-width: 0;
  min-height: 0;
}

._calendarShell_183x3_29 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: var(--active-card-surface);
  border: 1px solid var(--active-card-surface-border);
  backdrop-filter: blur(var(--active-card-surface-blur));
  -webkit-backdrop-filter: blur(var(--active-card-surface-blur));
  border-radius: 0.5rem;
  padding: 0.75rem;
  width: fit-content;
  min-height: 26.125rem;
  font-family: var(--font-family);
}

/* ==================================================
   React Day Picker Overrides
   ================================================== */

._calendar_183x3_17 {
  width: 100%;
}

._calendar_183x3_17 .rdp-root {
  width: 100%;
}

._calendar_183x3_17 .rdp-months {
  justify-content: center;
}

._calendar_183x3_17 .rdp-month {
  position: relative;
}

/* ==================================================
   Hide Header / Navigation
   ================================================== */

._calendar_183x3_17 .rdp-month_caption {
  display: none;
}

/* ==================================================
   Custom Header / Navigation
   ================================================== */

._calendarHeader_183x3_125 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 95%;
  margin-bottom: 1.5rem;
}

._calendarHeader_183x3_125 span {
  font-size: 1rem;
  font-weight: 600;
}

._calendarHeader_183x3_125 button {
  width: 1rem;
  height: 1rem;

  color: var(--active-text-on-card-secondary);

  border: none;
  border-radius: 0.5rem;

  background: transparent;
  cursor: pointer;

  font-size: 1rem;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

._calendarHeader_183x3_125 button:hover {
  color: var(--active-text-on-card-primary);
  background: color-mix(in srgb, var(--primary-btn-color) 12%, transparent);
}

/* ==================================================
   Weekday Headings
   ================================================== */

._calendar_183x3_17 .rdp-weekdays {
  margin-bottom: 0.75rem;
}

._calendar_183x3_17 .rdp-weekday {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==================================================
   Calendar Days
   ================================================== */

._calendar_183x3_17 .rdp-day {
  width: 3rem;
  height: 3rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  border: 1px solid var(--active-calendar-hover-border);
  transition: transform 0.15s ease, background-color 0.15s ease,
    color 0.15s ease;
}

._calendar_183x3_17 .rdp-day_button {
  width: 3.2rem;
  height: 3.2rem;

  color: var(--active-text-on-card-primary);

  border: none;
  border-radius: 0.5rem;

  background: transparent;
  cursor: pointer;

  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover */

._calendar_183x3_17 .rdp-day:hover:not(.rdp-disabled):not(.rdp-selected) {
  background: var(--active-calendar-hover);
}

._calendar_183x3_17 .rdp-day_button:hover {
  color: var(--active-calendar-hover-text);
}

/* Today */

._calendar_183x3_17 .rdp-today .rdp-day_button {
  background: var(--active-calendar-today-background);
  backdrop-filter: blur(var(--active-calendar-background-blur));
  -webkit-backdrop-filter: blur(var(--active-calendar-background-blur));
  border: 1px solid var(--active-calendar-today-border);
}

._calendar_183x3_17 .rdp-today:hover .rdp-day_button {
  background: var(--active-calendar-today-bg-hover);
  border: 1px solid var(--active-calendar-border);
}

/* Selected Day */

._calendar_183x3_17 .rdp-selected .rdp-day_button {
  color: var(--active-text-on-card-primary);
  background: var(--active-selected-background);
  border: 1px solid var(--active-selected-border);
}

._calendar_183x3_17 .rdp-selected:hover .rdp-day_button {
  border: 1px solid var(--active-selected-border);
  background: var(--active-selected-bg-hover);
}

/* Outside Month */

._calendar_183x3_17 .rdp-outside .rdp-day_button {
  color: var(--text-muted);
}

/* ==================================================
   Disabled Days
   ================================================== */

._calendar_183x3_17 .rdp-disabled {
  opacity: 0.35;
}

._calendar_183x3_17 .rdp-disabled .rdp-day_button {
  color: var(--text-muted);
  cursor: not-allowed;
}

._calendar_183x3_17 .rdp-disabled:hover {
  background: transparent;
  transform: none;
}

._calendar_183x3_17 .rdp-disabled:hover .rdp-day_button {
  background: transparent;
  cursor: not-allowed;
}

/* Optional visual cue */

._calendar_183x3_17 .rdp-disabled .rdp-day_button:hover {
  outline: 1px solid
    color-mix(in srgb, var(--error-color, #d32f2f) 25%, transparent);
}

/* ==================================================
   Focus State
   ================================================== */

._calendar_183x3_17 .rdp-day_button:focus-visible {
  outline: 2px solid var(--primary-btn-color);
  outline-offset: 2px;
}

._hint_183x3_447 {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  padding: 0.5rem;
}

/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 600px) {
  ._calendarWrapper_183x3_17 {
    width: 100%;
  }

  ._calendarShell_183x3_29 {
    width: 100%;
    min-width: 0;
    padding: 0.5rem;
    min-height: auto;
  }

  ._calendarHeader_183x3_125 {
    margin-bottom: 1rem;
  }

  ._calendarHeader_183x3_125 button {
    width: 2rem;
    height: 2rem;
    font-size: 1.2rem;
  }

  ._calendar_183x3_17 .rdp-month {
    width: 100%;
  }

  ._calendar_183x3_17 .rdp-weeks {
    width: 100%;
  }

  ._calendar_183x3_17 table {
    width: 100%;
    table-layout: fixed;
  }

  ._calendar_183x3_17 .rdp-day {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
  }

  ._calendar_183x3_17 .rdp-day_button {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
  }
}
._accordionWrapper_q7txh_1 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

/* ==================================================
   Section card (Date / Time) — button + its expanded
   content render as one continuous card
   ================================================== */

._sectionCard_q7txh_25 {
  background: var(--active-card-surface);
  border: 1px solid var(--active-card-surface-border);
  border-radius: 0.5rem;

  backdrop-filter: blur(var(--active-card-surface-blur));
  -webkit-backdrop-filter: blur(var(--active-card-surface-blur));

  overflow: hidden;
}

._sectionToggle_q7txh_47 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;

  padding: 0.875rem 1rem;

  color: var(--active-text-on-card-primary);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;

  background: none;
  border: none;

  cursor: pointer;
}

._sectionToggle_q7txh_47[aria-expanded="true"] {
  display: none;
}

._toggleLabel_q7txh_95 {
  flex: 1;
}

._sectionToggle_q7txh_47::after {
  content: "▾";
  margin-left: 0.75rem;
  transition: transform 0.2s ease;
}

._sectionToggle_q7txh_47[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

._sectionContent_q7txh_123 {
  padding: 0.75rem;
}

/* ==================================================
   Smooth expand/collapse
   Animates a grid row between 0fr and 1fr, which
   CSS can transition smoothly (unlike height: auto).
   overflow: hidden on the inner wrapper clips content
   while collapsed.
   ================================================== */

._collapse_q7txh_147 {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

._collapseOpen_q7txh_159 {
  grid-template-rows: 1fr;
}

._collapseInner_q7txh_167 {
  overflow: hidden;
  min-height: 0;
}

/* ==================================================
   Time groups (nested within the Time panel)
   ================================================== */

._groupBlock_q7txh_185 {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--active-card-surface-border);
}

._groupBlock_q7txh_185:last-child {
  border-bottom: none;
}

._groupToggle_q7txh_203 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;

  padding: 0.75rem;

  color: var(--active-text-on-card-primary);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;

  background: color-mix(in srgb, var(--primary-btn-color) 12%, transparent);
  border: 1px solid var(--active-calendar-selected-border);
  border-radius: 0.5rem;

  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

._groupToggle_q7txh_203[aria-expanded="true"] {
  background: var(--active-selected-background);
  border-color: var(--active-selected-border);
}

._groupToggle_q7txh_203::after {
  content: "▾";
  margin-left: 0.75rem;
  transition: transform 0.2s ease;
}

._groupToggle_q7txh_203[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

._slotGrid_q7txh_277 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.5rem;

  margin-top: 0.5rem;
  padding: 0 0.25rem;
}

._timeSlotButton_q7txh_295 {
  min-height: 44px;
  padding: 0.6rem;

  color: var(--active-text-on-card-primary);
  font-size: 0.9rem;

  background: color-mix(in srgb, var(--primary-btn-color) 12%, transparent);
  border: 1px solid var(--active-calendar-selected-border);
  border-radius: 0.5rem;

  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

._timeSlotButton_q7txh_295[aria-pressed="true"] {
  background: var(--active-selected-background);
  border-color: var(--active-selected-border);
}

._loadingText_q7txh_335 {
  padding: 1rem;
  color: var(--active-text-on-card-secondary);
  text-align: center;
}
._timeGroupSelectorWrapper_nkna3_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: clamp(14rem, 20vw, 18rem);
  background: var(--active-card-surface);
  border: 1px solid var(--active-card-surface-border);
  backdrop-filter: blur(var(--active-card-surface-blur));
  -webkit-backdrop-filter: blur(var(--active-card-surface-blur));
  border-radius: 0.5rem;
  padding: 0.75rem;
}

._timeGroupSelectorLabel_nkna3_27 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
}

._timeGroupSelectorGrid_nkna3_39 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0 0.5rem;
}

._timeGroupSelectorButton_nkna3_55 {
  padding: 12px;
  color: var(--active-text-on-card-primary);
  background: color-mix(in srgb, var(--primary-btn-color) 12%, transparent);
  border: 1px solid var(--active-calendar-selected-border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

._timeGroupSelectorButton_nkna3_55:hover {
  color: var(--active-calendar-hover-text);
  background: var(--active-calendar-hover);
  border: 1px solid var(--active-calendar-hover-border);
}

._timeGroupSelectorButton_nkna3_55[aria-pressed="true"] {
  background: var(--active-selected-background);
  border: 1px solid var(--active-selected-border);
}

._timeGroupSelectorButton_nkna3_55[aria-pressed="true"]:hover {
  background: var(--active-selected-bg-hover);
  color: var(--text-secondary);
}

._timeGroupSelectorButton_nkna3_55:focus-visible {
  outline: 2px solid var(--primary-btn-color);
  outline-offset: 2px;
}

._active_nkna3_117,
._inactive_nkna3_119 {
  transition: opacity 250ms ease, transform 250ms ease;
}

._active_nkna3_117 {
  opacity: 1;
  transform: translateY(0);
}

._inactive_nkna3_119 {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
._timeWrapper_1nnim_1 {
  display: flex;
  flex-direction: column;
  background: var(--active-card-surface);
  border: 1px solid var(--active-card-surface-border);
  backdrop-filter: blur(var(--active-card-surface-blur));
  -webkit-backdrop-filter: blur(var(--active-card-surface-blur));
  border-radius: 0.5rem;
  padding: 0.75rem;
  min-height: 0;
  min-width: clamp(15rem, 20vw, 18rem);
  height: 100%;
}

._timeShell_1nnim_29 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

._label_1nnim_43 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
}

._timeGrid_1nnim_55 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  flex: 1;
  min-height: 0;
  overflow-y: auto;

  padding: 0 0.5rem;
}

._timeGrid_1nnim_55::-webkit-scrollbar-thumb {
  background: transparent;
}

._timeGrid_1nnim_55:hover::-webkit-scrollbar-thumb {
  background: var(--primary-btn-color);
}

._timeButton_1nnim_95 {
  padding: 12px;
  color: var(--active-text-on-card-primary);
  background: color-mix(in srgb, var(--primary-btn-color) 12%, transparent);
  border: 1px solid var(--active-calendar-selected-border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

._timeButton_1nnim_95:hover {
  background: var(--active-calendar-hover);
  color: var(--text-secondary);
}

._timeButton_1nnim_95[aria-pressed="true"] {
  background: var(--active-selected-background);
  border: 1px solid var(--active-selected-border);
}

._timeButton_1nnim_95[aria-pressed="true"]:hover {
  background: var(--active-selected-bg-hover);
  color: var(--text-secondary);
}

._active_1nnim_145,
._inactive_1nnim_147 {
  transition: opacity 250ms ease, transform 250ms ease;
}

._active_1nnim_145 {
  opacity: 1;
  transform: translateY(0);
}

._inactive_1nnim_147 {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
/* Main page layout wrapper */
._pageWrapper_wkwgm_3 {
  display: flex;
  flex-direction: column;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

._dateAndTimeSelectWrapper_wkwgm_19 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Container holding the date and time selection components */
._dateAndTimeSelectorContainer_wkwgm_33 {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

._column_wkwgm_45 {
  display: flex;
  align-items: flex-start;
}

._timeGroupHeightWrapper_wkwgm_55,
._timeSelectorHeightWrapper_wkwgm_57 {
  width: 100%;
}

._timeGroupSelectorWrapper_wkwgm_65,
._timeWrapper_wkwgm_67 {
  height: 100%;
}

/* Primary page heading */
._title_wkwgm_77 {
  color: var(--text-main);
  font-size: 1rem;
  padding: 0.5rem 0;
}

/* Container for action buttons such as navigation or form actions */
._buttonContainer_wkwgm_91 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

@media (max-width: 600px) {
  ._pageWrapper_wkwgm_3 {
    gap: 1rem;
  }
}
._bayConfigurationWrapper_15cnf_1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

._bayConfigurationTitle_15cnf_15 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: var(--text-main);
  font-size: 2rem;
  font-weight: 550;
  padding-bottom: 2rem;
}

._selectedDateAndTime_15cnf_37 {
  color: var(--text-main);
  font-size: 1.25rem;
}

._countdownTimerWrapper_15cnf_47 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 1rem;
}

._buttonContainer_15cnf_61 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}
._legend_12m9x_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

._legendItem_12m9x_15 {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  color: var(--text-main);
  font-size: 0.9rem;
}

._swatch_12m9x_33 {
  width: 1rem;
  height: 1rem;

  border-radius: 0.25rem;
  flex-shrink: 0;
}

._available_12m9x_49 {
  background: var(--active-range-bay-available);

  border: 1px solid var(--active-range-border-color);
}

._selected_12m9x_61 {
  background: var(--active-range-bay-selected);
}

._booked_12m9x_69 {
  background: var(--active-range-bay-booked);
  border: 1px solid var(--active-range-border-color);
}
._filters_112vy_1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

._filterButton_112vy_17 {
  padding: 0.35rem 0.75rem;

  border: 1px solid var(--active-selected-border);
  border-radius: 1rem;

  background: var(--active-card-surface);
  backdrop-filter: blur(var(--active-card-surface-blur));
  -webkit-backdrop-filter: blur(var(--active-card-surface-blur));

  color: var(--text-main);

  font-size: 0.875rem;
  font-weight: 500;

  cursor: pointer;
  transition: all 0.2s ease;
}

._active_112vy_55 {
  background: var(--active-selected-background);
  color: var(--text-btn-primary);
  border-color: var(--active-selected-border);
}

._active_112vy_55:hover {
  background: var(--active-selected-bg-hover);
  color: var(--text-secondary);
}
._rangeMap_elxzh_1 {
  width: 100%;
  height: auto;
}

._bay_elxzh_11 {
  fill: var(--active-range-bay-available);

  cursor: pointer;
  transition: fill 0.2s ease;
}

._label_elxzh_25 {
  fill: var(--active-text-on-card-primary);
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 700;
  user-select: none;
  pointer-events: none;
}

._bay_elxzh_11:hover {
  fill: var(--active-range-bay-hover);
}

._selected_elxzh_51 {
  fill: var(--active-range-bay-selected);
  stroke-width: 3;
  stroke: var(--active-range-border-color);
}

._selected_elxzh_51:hover {
  fill: var(--active-selected-bg-hover);
}

._selectedLabel_elxzh_71 {
  fill: var(--active-text-on-card-primary);
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 700;
}

._booked_elxzh_85 {
  fill: var(--active-range-bay-booked);
  cursor: not-allowed;
}

._booked_elxzh_85:hover {
  fill: var(--active-range-bay-booked);
}

._filteredOut_elxzh_103 {
  cursor: not-allowed;
  fill: var(--active-range-bay-booked);
}

._filteredLabel_elxzh_113 {
  fill: var(--active-text-on-card-primary);
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 700;
  user-select: none;
  pointer-events: none;
}

._bookedLabel_elxzh_131 {
  fill: var(--active-text-on-card-primary);
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 700;
  user-select: none;
  pointer-events: none;
}

._divider_elxzh_149 {
  stroke: var(--active-range-divider-color);
  stroke-width: 1.5;
  stroke-linecap: round;
  pointer-events: none;
}

._border_elxzh_163 {
  fill: none;
  stroke: var(--active-range-border-color);
  stroke-width: 2.5;
  stroke-linecap: round;
  pointer-events: none;
}

._gradientTop_elxzh_179 {
  stop-color: var(--active-range-bay-gradient-top);
}

._gradientBottom_elxzh_187 {
  stop-color: var(--active-range-bay-gradient-bottom);
}
._selectedBaysSummary_z41pj_1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
}
._selectedBaysSummary_vz4s2_1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

._countdownTimer_vz4s2_17 {
  font-size: 1rem;
  font-weight: 400;
}

._selectedBaysTitle_vz4s2_27 {
  font-size: 1rem;
  color: var(--text-main);
}

._editIcon_vz4s2_37 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

._baySummaryList_vz4s2_49 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-height: 300px;
  overflow-y: auto;
}

._baySummaryCard_vz4s2_65 {
  padding: 1rem;
  color: var(--text-main);
  background: var(--active-range-bay-selected);
  backdrop-filter: blur(var(--active-card-surface-blur));
  -webkit-backdrop-filter: blur(var(--active-card-surface-blur));
  border: 1px solid var(--active-card-surface-border);
  border-radius: 8px;
  cursor: pointer;
}

._baySummaryCard_vz4s2_65:hover {
  background: var(--active-selected-bg-hover);
}

._baySummaryHeader_vz4s2_95 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-btn-selected);
}

._baySummaryPrice_vz4s2_109 {
  font-weight: 600;
}

._baySummaryDetails_vz4s2_117 {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: var(--text-btn-selected);
  font-size: 0.9rem;
}

._removeBayButton_vz4s2_137 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--btn-remove-bg-color);
  color: var(--btn-remove-text-color);
  border: 1px solid var(--btn-remove-border-color);
  font-weight: 500;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
  margin-top: 1rem;
  padding: 0.2rem 0.4rem;
  gap: 0.5rem;
}

._removeBayButton_vz4s2_137:hover {
  background: var(--btn-remove-bg-hover);
}

._baySummaryTotal_vz4s2_177 {
  display: flex;
  justify-content: center;
  width: 100%;

  font-weight: 500;
  font-size: 1.25rem;
  border-top: 1px solid var(--input-border-color);
  border-bottom: 1px solid var(--input-border-color);
}
._componentWrapper_hqsff_1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.5rem;
  padding-bottom: 2rem;
}

._titleWrapper_hqsff_17 {
  text-align: start;
}

._title_hqsff_17 {
  color: var(--text-main);
  font-size: 1.25rem;
  font-weight: 500;
}

._playersContainer_hqsff_37 {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

._option_hqsff_49 {
  padding: 0.5rem 1rem;
  border: 1px solid var(--btn-secondary-border);
  border-radius: 0.5rem;
  background: var(--btn-secondary-bg);
  cursor: pointer;
  font-size: 1rem;
}

._option_hqsff_49:hover {
  color: var(--btn-secondary-text-hover);
  background: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-border-hover);
}

._selected_hqsff_79 {
  border-color: var(--btn-selected-border);
  background-color: var(--btn-selected-bg);
  color: var(--btn-selected-text);
}

._selected_hqsff_79:hover {
  background-color: var(--btn-selected-bg-hover);
}
._componentWrapper_v7byc_1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 8.5rem;
  gap: 0.5rem;
  padding-bottom: 1rem;
}

._titleWrapper_v7byc_19 {
  text-align: start;
}

._title_v7byc_19 {
  color: var(--text-main);
  font-size: 1.25rem;
  font-weight: 500;
}

._description_v7byc_39 {
  color: var(--text-subtitle-secondary);
}

._durationsContainer_v7byc_47 {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

._option_v7byc_59 {
  padding: 0.5rem 1rem;
  border: 1px solid var(--btn-secondary-border);
  border-radius: 0.5rem;
  background: var(--btn-secondary-bg);
  cursor: pointer;
  font-size: 1rem;
}

._option_v7byc_59:hover {
  color: var(--btn-secondary-text-hover);
  background: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-border-hover);
}

._selected_v7byc_89 {
  border-color: var(--btn-selected-border);
  background-color: var(--btn-selected-bg);
  color: var(--btn-selected-text);
}

._selected_v7byc_89:hover {
  background-color: var(--btn-selected-bg-hover);
}
._productSelectorWrapper_s881d_1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 13rem;
  gap: 0.5rem;
  padding-bottom: 2rem;
}

._titleWrapper_s881d_19 {
  text-align: start;
}

._title_s881d_19 {
  color: var(--text-main);
  font-size: 1.25rem;
  font-weight: 500;
}

._description_s881d_39 {
  color: var(--text-subtitle-secondary);
}

._productsContainer_s881d_47 {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

._productButton_s881d_59 {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 120px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--btn-secondary-border);
  border-radius: 0.5rem;
  background: var(--btn-secondary-bg);
  cursor: pointer;
  font-size: 1rem;
}

._productButton_s881d_59:hover {
  color: var(--btn-secondary-text-hover);
  background: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-border-hover);
}

._selected_s881d_97 {
  border-color: var(--btn-selected-border);
  background-color: var(--btn-selected-bg);
  color: var(--btn-selected-text);
}

._selected_s881d_97:hover {
  background-color: var(--btn-selected-bg-hover);
}

._productIcon_s881d_117 {
  width: 48px;
  height: 48px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

._productPrice_s881d_135 {
  margin-top: 8px;
  font-weight: 600;
}

._productButton_s881d_59:disabled {
  cursor: not-allowed;
  background-color: var(--btn-disabled-bg-color);
  color: var(--btn-disabled-text-color);
}

._productButton_s881d_59:disabled:hover {
  cursor: not-allowed;
}
._overlay_mgin2_1 {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--modal-overlay);
  backdrop-filter: blur(1px);

  z-index: 1000;
}
._modal_mgin2_27 {
  display: flex;
  flex-direction: column;
  width: min(90vw, 500px);
  min-height: 602px;
  max-height: 90vh;
  padding: 1rem;

  color: var(--text-on-frosted-card-primary);
  background: var(--active-modal-surface);

  backdrop-filter: blur(var(--active-modal-surface-blur));
  -webkit-backdrop-filter: blur(var(--active-modal-surface-blur));

  border: 1px solid var(--active-modal-surface-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px var(--box-shadow-color), 0 2px 8px rgb(0 0 0 / 10%);
}

._modalTitle_mgin2_65 {
  text-align: center;

  font-size: 1.25rem;
  font-weight: 500;
}

._selectedDateAndTime_mgin2_79 {
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 1rem;
}

._buttonContainer_mgin2_93 {
  display: flex;
  justify-content: space-between;
}

._cancelButton_mgin2_103 {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
  padding: 0.3rem 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

._cancelButton_mgin2_103:hover {
  background-color: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-text-hover);
  border-color: var(--btn-secondary-border-hover);
  transition: opacity 0.2s ease-in-out;
}

._confirmButton_mgin2_139 {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 1px solid var(--btn-primary-border);
  padding: 0.3rem 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

._confirmButton_mgin2_139:hover:not(:disabled) {
  background-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text-hover);
  border-color: var(--btn-primary-border-hover);
  transition: opacity 0.2s ease-in-out;
}

._confirmButton_mgin2_139:disabled {
  background-color: var(--btn-disabled-bg-color);
  color: var(--btn-disabled-text-color);
  border-color: var(--btn-disabled-border-color);
  cursor: not-allowed;
}

._removeButton_mgin2_189 {
  background-color: var(--btn-remove-bg-color);
  color: var(--btn-remove-text-color);
  border: 1px solid var(--btn-remove-border-color);
  padding: 0.3rem 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

._removeButton_mgin2_189:hover {
  background-color: var(--btn-remove-bg-hover);
  color: var(--btn-remove-text-hover);
  transition: opacity 0.2s ease-in-out;
}
._large_1uu2q_1 {
  width: 5rem;
  height: 6rem;
}

._large_1uu2q_1 ._bouncingBall_1uu2q_11 {
  width: 5rem;
  height: 5rem;
}

._preloadImage_1uu2q_21 {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

._loadingContainer_1uu2q_37 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

._ballWrapper_1uu2q_51 {
  position: relative;
  width: 3rem;
  height: 4rem;
}

._ballWrapper_1uu2q_51::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 2rem;
  height: 0.5rem;
  transform: translateX(-50%);

  background: rgba(0, 0, 0, 0.75);
  border-radius: 50%;
  filter: blur(4px);

  animation: _shadowBounce_1uu2q_1 1.2s infinite linear;
}

._bouncingContainer_1uu2q_95 {
  position: relative;
  width: 3rem;
  height: 3rem;

  animation: _bounce_1uu2q_1 1.2s infinite linear;
}

._spinningBall_1uu2q_111 {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  animation: _spin_1uu2q_111 1.2s infinite linear;
  will-change: transform;
}

/* .ballLightMask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;

  box-shadow: inset 4px 4px 8px rgb(0 0 0 / 35%);

  background: radial-gradient(
    circle at 30% 30%,
    rgb(255 255 255 / 90%) 0%,
    transparent 20%
  );
} */

@keyframes _spin_1uu2q_111 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes _bounce_1uu2q_1 {
  0% {
    transform: translateY(-24px);
  }

  30% {
    transform: translateY(0);
  }

  60% {
    transform: translateY(-10px);
  }

  85% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-24px);
  }
}

@keyframes _shadowBounce_1uu2q_1 {
  0% {
    opacity: 0.3;
    transform: translateX(-50%) scale(0.7);
  }

  30% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  60% {
    opacity: 0.5;
    transform: translateX(-50%) scale(0.8);
  }

  85% {
    opacity: 0.9;
    transform: translateX(-50%) scale(0.95);
  }

  100% {
    opacity: 0.3;
    transform: translateX(-50%) scale(0.7);
  }
}
._verificationSection_1258x_1 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  margin-top: 1rem;
  background-color: var(--active-card-surface);
  backdrop-filter: blur(var(--active-card-surface-blur));
  -webkit-backdrop-filter: blur(var(--active-card-surface-blur));
  border: 1px solid var(--active-card-surface-border);
  border-radius: 0.5rem;
}

._verificationSection_1258x_1 h3 {
  margin: 0;
  color: var(--text-main);
  font-size: 1.1rem;
  font-weight: 600;
}

._verificationSection_1258x_1 p {
  color: var(--text-on-page-secondary);
}

._input_1258x_49 {
  width: 100%;

  padding: 0.5rem;

  background: var(--form-background);

  color: var(--text-on-form-primary);

  border: 1px solid var(--input-border-color);
  border-radius: 4px;

  font-size: 1rem;
}

._input_1258x_49::placeholder {
  color: var(--text-on-form-secondary);
}

._input_1258x_49:focus {
  border-color: var(--input-focus-border-color);
  outline: none;
  box-shadow: 0 0 0 2px var(--input-focus-shadow-color);
}

._input_1258x_49:disabled {
  background: var(--input-disabled-bg-color);
  cursor: not-allowed;
}

._buttonGroup_1258x_109 {
  display: flex;
  justify-content: space-between;
}

._primaryButton_1258x_119 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-border-radius);
  background: var(--btn-primary-bg);
  color: var(--text-btn-primary);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

._primaryButton_1258x_119:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover);
  color: var(--text-btn-primary-hover);
  border-color: var(--btn-primary-border-hover);
}

._primaryButton_1258x_119:disabled {
  background: var(--btn-disabled-bg-color);
  border-color: var(--btn-disabled-border-color);
  color: var(--text-btn-disabled-color);
  cursor: not-allowed;
}

._secondaryButton_1258x_173 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--btn-border-radius);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

._secondaryButton_1258x_173:hover {
  background: var(--btn-secondary-bg-hover);
  color: var(--text-btn-secondary-hover);
  border-color: var(--btn-secondary-border-hover);
}

._successMessage_1258x_213 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--selected-btn-color);
  font-weight: 600;
}

._preloadImage_1258x_229 {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

._editContactButton_1258x_245 {
  background: none;
  border: none;
  color: var(--text-on-page-secondary);
  cursor: pointer;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

._editContactButton_1258x_245:hover {
  text-decoration: underline;
}
._overlay_3knwp_1 {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 60%);
  backdrop-filter: blur(4px);

  display: flex;

  z-index: 9999;
}

._modal_3knwp_23 {
  width: 100vw;
  height: 100vh;

  display: flex;
  flex-direction: column;
}

._content_3knwp_39 {
  flex: 1;
}

._loaderOverlay_3knwp_47 {
  position: absolute;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background: var(--modal-bg);
  z-index: 1;
}

._iframe_3knwp_71 {
  width: 100%;
  height: 100%;
  border: none;
}

._actions_3knwp_83 {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem;
}
._paymentSection_3v18e_1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

._buttonContainer_3v18e_15 {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;

  padding: 1rem;
  margin-top: 1rem;
  background-color: var(--active-card-surface);
  backdrop-filter: blur(var(--active-card-surface-blur));
  -webkit-backdrop-filter: blur(var(--active-card-surface-blur));
  border: 1px solid var(--active-card-surface-border);
  border-radius: 0.5rem;
}

/* Button row spans all columns */
._buttons_3v18e_47 {
  grid-column: 1 / -1;

  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
}

._buttons_3v18e_47 button {
  flex: 1;
}

._buttons_3v18e_47 span {
  flex-shrink: 0;
}

/* Helper text sits in the left grid column only */
._balanceMessage_3v18e_83 {
  grid-column: 1;
  justify-self: center;

  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  padding-top: 0.25rem;
}

._loaderContainer_3v18e_103 {
  grid-column: 1 / -1;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  min-height: 80px;
}
._reviewBookingWrapper_15olo_1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  justify-content: space-between;
}

._contentContainer_15olo_17 {
  display: flex;
  flex-direction: column;
  flex: 1;
}

._reviewSection_15olo_29 {
  display: flex;
  flex-direction: row;
  background-color: var(--active-card-surface);
  backdrop-filter: blur(var(--active-card-surface-blur));
  -webkit-backdrop-filter: blur(var(--active-card-surface-blur));
  border: 1px solid var(--active-card-surface-border);
  border-radius: 0.5rem;
  gap: 1rem;
}

/* Left Section */

._reviewBookingContainer_15olo_55 {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

._reviewTitleContainer_15olo_67 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

._title_15olo_83 {
  color: var(--text-main);
  font-size: 1.25rem;
  font-weight: 550;
}

._subtitle_15olo_95 {
  font-size: 0.95rem;
  color: var(--text-on-page-secondary);
}

._bookingDetails_15olo_105 {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}

._lineItemsWrapper_15olo_117 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

._lineItem_15olo_117 {
  display: grid;
  grid-template-columns: 1.25rem 7rem 1fr;
  column-gap: 0.5rem;
}

._label_15olo_143 {
  flex-shrink: 0;
  color: var(--text-muted);
}

._labelTotal_15olo_153 {
  font-weight: 500;
}

._value_15olo_161 {
  font-weight: 500;
  padding-left: 1rem;
  white-space: nowrap;
}

._basketSummary_15olo_173 {
  display: flex;
  flex-direction: column;
  padding-left: 1rem;
}

/* Right Section */

._multipleBaySummary_15olo_189 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
}

._breakdownRow_15olo_203 {
  display: grid;
  grid-template-columns:
    minmax(3rem, 4rem)
    minmax(4rem, 5rem)
    minmax(3.5rem, 4.5rem)
    1fr
    4.5rem;
  gap: 0.5rem;
}
._product_15olo_223 {
  margin-left: auto;
}

._amount_15olo_231 {
  min-width: 70px;
  text-align: right;
}

._breakdownRow_15olo_203 > * {
  white-space: nowrap;
  flex-shrink: 0;
}

._breakdownRow_15olo_203:not(:last-of-type) {
  border-bottom: 1px solid var(--input-border-color);
}

._breakdownTotal_15olo_259 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 2px solid var(--input-border-color);
  font-size: 1.125rem;
  font-weight: 600;
}

/* Footer */

._buttonContainer_15olo_283 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._pageWrapper_1f2af_1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
}

._contentWrapper_1f2af_17 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--active-card-surface);
  backdrop-filter: blur(var(--active-card-surface-blur));
  -webkit-backdrop-filter: blur(var(--active-card-surface-blur));
  border: 1px solid var(--active-card-surface-border);
  border-radius: 1rem;
  padding: 2rem;
  gap: 2rem;
}

._confirmationMessage_1f2af_43 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

._title_1f2af_59 {
  display: flex;
}

._inrangeTitle_1f2af_67 {
  display: flex;
  gap: 0.5rem;
}

._subtitle_1f2af_77 {
  display: flex;
}

._referenceNumbersWrapper_1f2af_85 {
  display: flex;

  align-items: stretch;
  justify-content: center;
  gap: 1rem;
}

._referenceContainer_1f2af_101 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--active-card-surface-border);
  border-radius: 1rem;
  padding: 1rem;
  gap: 1rem;
}

._referenceNumber_1f2af_85 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: 1.5rem;
}

._copyButton_1f2af_139 {
  color: var(--active-text-on-card-secondary);
  background-color: var(--active-card-surface);
  backdrop-filter: blur(var(--active-card-surface-blur));
  -webkit-backdrop-filter: blur(var(--active-card-surface-blur));
  border: 1px solid var(--active-card-surface-border);
  border-radius: 0.5rem;
  padding: 0.5rem;
}

._copyButton_1f2af_139:hover {
  cursor: pointer;
  border-color: var(--active-card-surface-border-hover);
}

._bookingSummary_1f2af_169 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

._bookingDetails_1f2af_181 {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

._icon_1f2af_193 {
  display: flex;
}

._groupedDetails_1f2af_201 {
  display: flex;
  flex-direction: column;
}

._date_1f2af_211 {
  display: flex;
}

._time_1f2af_219 {
  display: flex;
}

._players_1f2af_227 {
  display: flex;
}

._bays_1f2af_235 {
  display: flex;
}

._totalPaid_1f2af_243 {
  display: flex;
}

._buttonContainer_1f2af_251 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 2rem;
  gap: 2rem;
}

._addToCalendar_1f2af_271 {
  display: flex;
}

._makeAnotherBooking_1f2af_279 {
  display: flex;
}


[data-skin="default"] {
  --font-family: "Montserrat", sans-serif;

  /* ==========================================
     BRAND PALETTE
     ========================================== */

  --brand-darkest: #0b2512;
  --brand-dark: #19451a;
  --brand-base: #368c27;
  --brand-light: #8db84c;
  --brand-lightest: #c1e0b3;
  --brand-ultralight: #edf7e8;
  --brand-white: #ffffff;

  --brand-primary: var(--brand-base);
  --brand-secondary: var(--brand-light);

  --brand-success: var(--brand-base);
  --brand-selected: #37667d;
  --brand-unavailable: #727070;
  --brand-color-warning: #f59e0b;
  --brand-color-danger: #5a151a;
  --brand-color-danger-hover: #721c24;
  --brand-color-error: #d32f2f;

  /* ==========================================
     SURFACES
     ========================================== */

  --surface-page: var(--brand-white);
  --surface-card: var(--brand-white);
  --surface-modal: var(--brand-white);
  --surface-input: var(--brand-white);
  --surface-input-focus: var(--brand-white);
  --surface-input-valid: var(--brand-lightest);
  --surface-input-invalid: var(--brand-white);
  --surface-input-disabled: #f5f5f5;

  --surface-card-frosted: color-mix(
    in srgb,
    var(--brand-darkest) 30%,
    transparent
  );

  --surface-card-frosted-blur: 20px;

  --surface-card-frosted-border: color-mix(
    in srgb,
    var(--surface-card) 30%,
    transparent
  );

  /* ==========================================
   ACTIVE CARD TOKENS
   ========================================== */

  --active-card-surface: var(--surface-card-frosted);
  --active-card-surface-border: var(--surface-card-frosted-border);
  --active-card-surface-blur: var(--surface-card-frosted-blur);

  --active-modal-surface: var(--surface-modal-frosted);
  --active-modal-surface-blur: var(--surface-modal-frosted-blur);
  --active-modal-surface-border: var(--surface-modal-frosted-border);

  --active-text-on-card-primary: var(--text-on-frosted-card-primary);
  --active-text-on-card-secondary: var(--text-on-frosted-card-secondary);
  --active-text-on-card-tertiary: color-mix(
    in srgb,
    var(--text-on-frosted-card-primary) 60%,
    transparent
  );

  --active-connector-background: var(--connector-background);

  --active-marker-background-default: var(--marker-background-default);
  --active-marker-border-default: var(--marker-border-default);
  --active-marker-color-default: var(--marker-color-default);

  --active-marker-background-current: var(--marker-background-current);
  --active-marker-border-current: var(--marker-border-current);
  --active-marker-color-current: var(--marker-color-current);

  --active-marker-background-complete: var(--marker-background-complete);
  --active-marker-border-complete: var(--marker-border-complete);
  --active-marker-color-complete: var(--marker-color-complete);

  --active-marker-background-blur: var(--marker-background-blur);

  --active-marker-row-default: var(--marker-row-default);
  --active-marker-row-complete: var(--marker-row-complete);

  --active-label-color-default: var(--label-color-default);
  --active-label-color-current: var(--label-color-current);
  --active-label-color-complete: var(--label-color-complete);

  --active-divider: var(--devider);

  --active-calendar-today-background: var(--calendar-today-background);
  --active-calendar-today-border: var(--calendar-today-border);
  --active-calendar-today-bg-hover: var(--calendar-today-bg-hover);

  --active-calendar-selected-background: var(--calendar-selected-background);
  --active-calendar-selected-border: var(--calendar-selected-border);

  --active-calendar-hover: var(--calendar-hover);
  --active-calendar-hover-border: var(--calendar-hover-border);
  --active-calendar-selectable-dates: var(--calendar-selectable-dates);
  --active-calendar-hover-text: var(--calendar-hover-text);

  --active-calendar-background-blur: var(--calendar-background-blur);
  --active-calendar-selected-text: var(--calendar-selected-text);

  --active-range-bay-available: var(--range-bay-available);
  --active-range-bay-selected: var(--range-bay-selected);
  --active-range-bay-booked: var(--range-bay-booked);
  --active-range-bay-hover: var(--range-bay-hover);

  --active-range-divider-color: var(--range-divider-color);
  --active-range-border-color: var(--range-border-color);

  --active-range-label-color: var(--range-label-color);

  --active-selected-background: var(--brand-selected);
  --active-selected-text: var(--brand-white);
  --active-selected-border: color-mix(
    in srgb,
    var(--surface-card) 30%,
    transparent
  );
  --active-selected-bg-hover: color-mix(
    in srgb,
    var(--brand-selected) 60%,
    transparent
  );

  /* ==========================================
     TEXT
     ========================================== */

  /* By default ALL primary text uses brand-darkest */

  --text-on-page-primary: var(--brand-darkest);
  --text-on-page-secondary: color-mix(
    in srgb,
    var(--brand-darkest) 75%,
    transparent
  );

  --text-on-card-primary: var(--brand-darkest);
  --text-on-card-secondary: color-mix(
    in srgb,
    var(--text-on-card-primary) 55%,
    transparent
  );

  --text-on-frosted-card-primary: var(--brand-white);
  --text-on-frosted-card-secondary: color-mix(
    in srgb,
    var(--text-on-frosted-card-primary) 75%,
    transparent
  );

  --text-on-form-primary: var(--brand-darkest);
  --text-on-form-secondary: color-mix(
    in srgb,
    var(--brand-darkest) 60%,
    transparent
  );

  --text-on-modal-primary: var(--brand-darkest);
  --text-on-modal-secondary: color-mix(
    in srgb,
    var(--brand-darkest) 75%,
    transparent
  );

  /* ==========================================
     Forms
     ========================================== */

  --form-background: var(--surface-input);
  --form-background-focus: var(--surface-input-focus);
  --form-background-valid: var(--surface-input-valid);
  --form-background-invalid: var(--surface-input-invalid);
  --form-background-disabled: var(--surface-input-disabled);
  --input-border-color: var(--brand-lightest);
  --input-focus-border-color: var(--brand-primary);

  /* ==========================================
     Stepper
     ========================================== */

  --connector-background: var(--brand-lightest);

  --marker-background-default: color-mix(
    in srgb,
    var(--brand-white) 20%,
    transparent
  );
  --marker-background-current: var(--brand-dark);
  --marker-background-complete: var(--brand-dark);

  --marker-border-default: color-mix(
    in srgb,
    var(--surface-card) 20%,
    transparent
  );
  --marker-border-current: var(--brand-dark);
  --marker-border-complete: var(--brand-dark);

  --marker-background-blur: 20px;

  --marker-color-default: var(--brand-darkest);
  --marker-color-current: var(--brand-white);
  --marker-color-complete: var(--brand-white);

  --marker-row-default: var(--brand-white);
  --marker-row-complete: var(--brand-dark);

  --label-color-default: color-mix(
    in srgb,
    var(--brand-white) 70%,
    transparent
  );
  --label-color-current: var(--brand-white);
  --label-color-complete: var(--brand-white);

  --devider: var(--brand-white);

  /* ==========================================
    Calendar
    ========================================== */

  --calendar-today-background: color-mix(
    in srgb,
    var(--brand-lightest) 30%,
    transparent
  );
  --calendar-today-border: color-mix(
    in srgb,
    var(--surface-card) 20%,
    transparent
  );

  --calendar-today-bg-hover: color-mix(
    in srgb,
    var(--brand-light) 30%,
    transparent
  );
  --calendar-selected-border: color-mix(
    in srgb,
    var(--surface-card) 20%,
    transparent
  );

  --calendar-hover: color-mix(in srgb, var(--brand-dark) 80%, transparent);
  --calendar-hover-border: var(--surface-card-frosted-border);

  --calendar-selectable-dates: var(--text-on-card-active-primary);

  --calendar-hover-text: var(--text-on-card-active-primary);

  --calendar-background-blur: 20px;

  /* ==========================================
               RANGE MAP
               ========================================== */

  --range-bay-available: var(--calendar-today-background);
  --range-bay-selected: var(--brand-selected);
  --range-bay-booked: var(--brand-unavailable);
  --range-bay-hover: var(--calendar-hover);

  --range-bay-gradient-top: none;
  --range-bay-gradient-bottom: none;

  --range-divider-color: var(--brand-white);
  --range-border-color: var(--calendar-selected-border);

  --range-label-color: color-mix(
    in srgb,
    var(--text-on-page-primary) 65%,
    transparent
  );

  /* ==========================================
            Modal
            ========================================== */

  --surface-modal-frosted: color-mix(
    in srgb,
    var(--brand-darkest) 50%,
    transparent
  );
  --surface-modal-frosted-blur: 40px;
  --surface-modal-frosted-border: color-mix(
    in srgb,
    var(--brand-white) 20%,
    transparent
  );

  --modal-overlay: color-mix(in srgb, var(--brand-darkest) 45%, transparent);
  --border-radius: 1rem;

  /* ==========================================
            BUTTONS
            ========================================== */

  --btn-primary-bg: var(--brand-dark);
  --btn-primary-text: var(--brand-white);
  --btn-primary-border: var(--active-card-surface-border);

  --btn-primary-bg-hover: var(--brand-white);
  --btn-primary-text-hover: var(--brand-dark);
  --btn-primary-border-hover: var(--active-card-surface-border);

  --btn-secondary-bg: var(--brand-white);
  --btn-secondary-text: var(--brand-dark);
  --btn-secondary-border: var(--active-card-surface-border);

  --btn-secondary-bg-hover: var(--brand-dark);
  --btn-secondary-text-hover: var(--brand-white);
  --btn-secondary-border-hover: var(--active-card-surface-border);

  --btn-selected-bg: var(--active-selected-background);
  --btn-selected-text: var(--active-selected-text);
  --btn-selected-border: var(--active-selected-border);
  --btn-selected-bg-hover: var(--active-selected-bg-hover);

  --btn-disabled-bg-color: var(--brand-unavailable);
  --btn-disabled-text-color: color-mix(
    in srgb,
    var(--text-on-page-primary) 65%,
    transparent
  );
  --btn-disabled-border-color: var(--brand-unavailable);

  --btn-remove-bg-color: var(--brand-color-danger);
  --btn-remove-text-color: var(--brand-white);
  --btn-remove-border-color: var(--brand-color-danger);

  --btn-remove-bg-hover: var(--brand-color-danger-hover);
  --btn-remove-text-hover: var(--brand-white);

  --btn-border-radius: 0.5rem;

  /* ==========================================
     STATUS COLOURS
     ========================================== */

  --color-success: var(--brand-color-success);
  --color-warning: var(--brand-color-warning);
  --color-danger: var(--brand-color-danger);
  --color-danger-hover: var(--brand-color-danger-hover);
  --color-error: var(--brand-color-error);

  /* ==========================================
     FORMS
     ========================================== */

  --input-border-color: var(--brand-lightest);
  --input-focus-border-color: var(--brand-primary);
  --input-focus-shadow-color: color-mix(
    in srgb,
    var(--brand-darkest) 25%,
    transparent
  );

  /* ==========================================
     SHADOWS
     ========================================== */

  --box-shadow-color: color-mix(in srgb, var(--brand-darkest) 25%, transparent);

  /* ==========================================
  BACKGROUND IMAGE
  ========================================== */

  --bg-image: url("/assets/default-bg-Xj4FUNxf.png");
  --bg-image-overlay: color-mix(in srgb, var(--brand-darkest) 35%, transparent);
  --bg-image-blur: 2px;

  /* ==========================================
   Logo
   ========================================== */
  --header-logo: url("/assets/RM_logo_260721-OsVfh5B4.png");
  --header-logoGeneric: url("/assets/YourLogoHereWhiteOutline-Dv-T9-Iy.png");

  /* ==========================================
  PRODUCT ICONS
  ========================================== */

  --icon-default-product: url("/assets/basket_large-BTIZbRVN.svg");

  --icon-basket-small: url("/assets/basket_small-DhC2CVl2.svg");
  --icon-basket-medium: url("/assets/basket_medium-D5gN89BD.svg");
  --icon-basket-large: url("/assets/basket_large-BTIZbRVN.svg");
}

[data-skin="solid"] {
  --font-family: "Montserrat", sans-serif;

  /* ==========================================
     BRAND PALETTE
     ========================================== */

  --brand-darkest: #0b0e25;
  --brand-dark: #19451a;
  --brand-base: #368c27;
  --brand-light: #8db84c;
  --brand-lightest: #c1e0b3;
  --brand-white: #ffffff;

  --brand-primary: var(--brand-base);
  --brand-secondary: var(--brand-light);

  --brand-color-success: var(--brand-base);
  --brand-color-warning: #f59e0b;
  --brand-color-danger: #721c24;
  --brand-color-danger-hover: #5a151a;
  --brand-color-error: #d32f2f;

  /* ==========================================
     SURFACES
     ========================================== */

  --surface-page: var(--brand-white);
  --surface-card: var(--brand-white);
  --surface-modal: var(--brand-white);
  --surface-input: var(--brand-white);
  --surface-input-focus: var(--brand-white);
  --surface-input-valid: var(--brand-lightest);
  --surface-input-invalid: var(--brand-white);
  --surface-input-disabled: #f5f5f5;

  /* ==========================================
   ACTIVE CARD TOKENS
   ========================================== */

  --surface-card-active: var(--surface-card);
  --surface-card-active-border: transparent;
  --surface-card-active-blur: 0px;

  --text-on-card-active-primary: var(--text-on-card-primary);
  --text-on-card-active-secondary: var(--text-on-card-secondary);
  --text-on-card-active-tertiary: color-mix(
    in srgb,
    var(--text-on-card-primary) 60%,
    transparent
  );

  --connector-background-active: var(--connector-background);

  --marker-background-active-default: var(--marker-background-default);
  --marker-border-active-default: var(--marker-border-default);
  --marker-color-active-default: var(--marker-color-default);

  --marker-background-active-current: var(--marker-background-current);
  --marker-border-active-current: var(--marker-border-current);
  --marker-color-active-current: var(--marker-color-current);

  --marker-background-active-complete: var(--marker-background-complete);
  --marker-border-active-complete: var(--marker-border-complete);
  --marker-color-active-complete: var(--marker-color-complete);

  --marker-background-blur-active: var(--marker-background-default-blur);

  --marker-row-active-default: var(--marker-row-default);
  --marker-row-active-complete: var(--marker-row-complete);

  --label-active-color-current: var(--label-color-current);

  --devider-active: var(--devider);

  /* ==========================================
     TEXT
     ========================================== */

  /* By default ALL primary text uses brand-darkest */

  --text-on-page-primary: var(--brand-darkest);
  --text-on-page-secondary: color-mix(
    in srgb,
    var(--text-on-page-primary) 65%,
    transparent
  );

  --text-on-card-primary: var(--brand-darkest);

  --text-on-card-secondary: color-mix(
    in srgb,
    var(--text-on-card-primary) 65%,
    transparent
  );

  --text-on-frosted-card-primary: var(--brand-white);

  --text-on-frosted-card-secondary: color-mix(
    in srgb,
    var(--text-on-frosted-card-primary) 75%,
    transparent
  );

  --text-on-modal-primary: var(--brand-darkest);
  --text-on-modal-secondary: color-mix(
    in srgb,
    var(--text-on-modal-primary) 65%,
    transparent
  );

  /* ==========================================
     BACKGROUND IMAGE
     ========================================== */

  --bg-image: url("/backgrounds/default-bg.png");
  --bg-image-overlay: color-mix(in srgb, var(--brand-darkest) 35%, transparent);
  --bg-image-blur: 2px;

  /* ==========================================
     Stepper
     ========================================== */

  --connector-background: var(--brand-lightest);

  --marker-background-default: color-mix(
    in srgb,
    var(--brand-darkest) 30%,
    transparent
  );

  --marker-background-default-blur: 20px;

  --marker-border-default: color-mix(
    in srgb,
    var(--surface-card) 30%,
    transparent
  );
  --marker-color-default: color-mix(in srgb, var(--text-main) 10%, transparent);
  --marker-background-current: var(--brand-dark);
  --marker-border-current: var(--brand-dark);
  --marker-color-current: var(--brand-white);

  --marker-background-complete: var(--brand-dark);
  --marker-border-complete: var(--brand-dark);
  --marker-color-complete: var(--brand-white);

  --marker-row-default: var(--brand-white);
  --marker-row-complete: var(--brand-dark);

  --label-color-default: var(--brand-dark);
  --label-color-current: var(--brand-dark);
  --label-color-complete: var(--brand-dark);

  --devider: var(--brand-lightest);

  /* ==========================================
     BUTTONS
     ========================================== */

  --btn-primary-bg: var(--brand-dark);
  --btn-primary-text: var(--brand-white);
  --btn-primary-border: var(--brand-dark);

  --btn-primary-bg-hover: var(--brand-white);
  --btn-primary-text-hover: var(--brand-dark);
  --btn-primary-border-hover: var(--brand-dark);

  --btn-secondary-bg: var(--brand-white);
  --btn-secondary-text: var(--brand-dark);
  --btn-secondary-border: var(--brand-base);

  --btn-secondary-bg-hover: var(--brand-dark);
  --btn-secondary-text-hover: var(--brand-white);
  --btn-secondary-border-hover: var(--brand-dark);

  /* ==========================================
     STATUS COLOURS
     ========================================== */

  --color-success: var(--brand-color-success);
  --color-warning: var(--brand-color-warning);
  --color-danger: var(--brand-color-danger);
  --color-danger-hover: var(--brand-color-danger-hover);
  --color-error: var(--brand-color-error);

  /* ==========================================
     FORMS
     ========================================== */

  --input-border-color: var(--brand-light);
  --input-disabled-bg-color: #f5f5f5;

  /* ==========================================
     MODALS
     ========================================== */

  --modal-overlay: color-mix(in srgb, var(--brand-darkest) 45%, transparent);

  /* ==========================================
     SHADOWS
     ========================================== */

  --box-shadow-color: color-mix(in srgb, var(--brand-darkest) 25%, transparent);

  /* ==========================================
     RANGE MAP
     ========================================== */

  --range-bay-hover: var(--brand-light);
  --range-bay-selected: var(--brand-base);
  --range-bay-booked: #888888;

  --range-bay-gradient-top: var(--brand-white);
  --range-bay-gradient-bottom: var(--brand-light);

  --range-divider-color: var(--brand-white);
  --range-border-color: var(--brand-light);

  --range-label-color: color-mix(
    in srgb,
    var(--brand-darkest) 65%,
    transparent
  );

  /* ==========================================
     CALENDAR
     ========================================== */

  --calendar-today-highlight: var(--brand-lightest);

  /* ==========================================
     PRODUCT ICONS
     ========================================== */

  --icon-default-product: url("/icons/default/default-product.svg");

  --icon-basket-small: url("/icons/default/small-basket.svg");
  --icon-basket-medium: url("/icons/default/medium-basket.svg");
  --icon-basket-large: url("/icons/default/large-basket.svg");
}

input:autofill,
textarea:autofill,
select:autofill {
  box-shadow: 0 0 0 1000px var(--brand-ultralight) inset !important;
  color: var(--text-on-card-primary) !important;
}

:root {
  /* ==========================================
     FONTS
     ========================================== */

  --font-family: "Inter", sans-serif;
  --text-main: var(--brand-darkest);
}

/* ==========================================
   GLOBAL RESET
   ========================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
}

/* ==========================================
   MEDIA
   ========================================== */

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* ==========================================
   FORMS
   ========================================== */

input,
button,
textarea,
select {
  font: inherit;
}

input:autofill,
textarea:autofill,
select:autofill,
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill {
  box-shadow: 0 0 0 1000px var(--surface-card) inset !important;
  background-color: var(--surface-card) !important;
  color: var(--text-on-card-primary) !important;
}

/* ==========================================
   BODY
   ========================================== */

body {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.5;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  background: var(--surface-page);
  color: var(--text-on-page-primary);
}

[data-skin] {
  font-family: var(--font-family);
  color: var(--text-on-page-primary);
}

/* ==========================================
   PRIMARY BUTTON
   ========================================== */

.btnPrimary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 1px solid var(--btn-primary-border);

  padding: 0.3rem 1rem;

  font-weight: 500;
  border-radius: 0.5rem;

  cursor: pointer;

  transition: all 0.2s ease;
}

.btnPrimary:hover {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text-hover);
  border-color: var(--btn-primary-border-hover);
}

.btnPrimary:disabled,
.btnPrimary:disabled:hover {
  background: var(--brand-unavailable);
  color: var(--brand-white);
  border-color: var(--brand-unavailable);
  cursor: not-allowed;
}

/* ==========================================
   SECONDARY BUTTON
   ========================================== */

.btnSecondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);

  padding: 0.3rem 1rem;

  font-weight: 500;
  border-radius: 0.5rem;

  cursor: pointer;

  transition: all 0.2s ease;
}

.btnSecondary:hover {
  background: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-text-hover);
  border-color: var(--btn-secondary-border-hover);
}

.btnSecondary:disabled,
.btnSecondary:disabled:hover {
  background: var(--btn-disabled-bg-color);
  color: var(--btn-disabled-text-color);
  border-color: var(--btn-disabled-border-color);
  cursor: not-allowed;
}