@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_qkww0_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_qkww0_23 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}

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

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

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

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

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

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

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

._balanceLabelMobile_qkww0_117 {
  display: none;
}

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

@media (max-width: 600px) {
  ._headerWrapper_qkww0_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_qkww0_23 {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    height: auto;
  }

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

  ._headerRight_qkww0_71 {
    display: contents;
  }
  ._headerRight_qkww0_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_qkww0_83 {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-self: end;
    gap: 0;
  }

  ._balanceLabelDesktop_qkww0_233 {
    display: none;
  }

  ._balanceLabelMobile_qkww0_117 {
    display: inline;
  }

  ._headerMiddle_qkww0_47 {
    display: none;
  }
}
._stepperWrapper_ji91h_1 {
  position: relative;
  padding: 0.75rem 0;

  width: 100%;
}

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

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

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

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

/* Connector between circles */
._step_ji91h_1:not(:last-child) ._markerRow_ji91h_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_ji91h_111:not(:last-child) ._markerRow_ji91h_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_ji91h_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_ji91h_155 {
  margin-top: 0.75rem;
  text-align: center;
}

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

._active_ji91h_175 ._marker_ji91h_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_ji91h_175 ._label_ji91h_155 {
  color: var(--active-label-color-current);
}

._complete_ji91h_111 ._marker_ji91h_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_ji91h_111 ._label_ji91h_155 {
  color: var(--active-label-color-complete);
}

@media (max-width: 600px) {
  ._label_ji91h_155 {
    font-size: 0.875rem;
  }
  ._active_ji91h_175 ._label_ji91h_155 {
    font-size: 1rem;
  }
}
._large_1u3t9_1 {
  width: 5rem;
  height: 6rem;
}

._large_1u3t9_1 ._bouncingContainer_1u3t9_11,
._large_1u3t9_1 ._spinningBall_1u3t9_13 {
  width: 5rem;
  height: 5rem;
}

._large_1u3t9_1._ballWrapper_1u3t9_23::after {
  width: 3.25rem; /* scale the ground shadow with the ball */
}

._large_1u3t9_1 ._bouncingBall_1u3t9_31 {
  width: 5rem;
  height: 5rem;
}

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

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

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

._ballWrapper_1u3t9_23::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_1u3t9_1 1.2s infinite linear;
}

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

  animation: _bounce_1u3t9_1 1.2s infinite linear;
}

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

._ballLightMask_1u3t9_147 {
  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_1u3t9_13 {
  from {
    transform: rotate(0deg);
  }

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

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

  30% {
    transform: translateY(0);
  }

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

  85% {
    transform: translateY(0);
  }

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

@keyframes _shadowBounce_1u3t9_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_pe0gw_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_pe0gw_1 h3 {
  margin: 0;
  color: var(--text-main);
  font-size: 1.1rem;
  font-weight: 600;
}

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

._input_pe0gw_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_pe0gw_49::placeholder {
  color: var(--text-on-form-secondary);
}

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

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

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

._primaryButton_pe0gw_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_pe0gw_119:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover);
  color: var(--text-btn-primary-hover);
  border-color: var(--btn-primary-border-hover);
}

._primaryButton_pe0gw_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_pe0gw_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_pe0gw_173:hover {
  background: var(--btn-secondary-bg-hover);
  color: var(--text-btn-secondary-hover);
  border-color: var(--btn-secondary-border-hover);
}

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

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

._editContactButton_pe0gw_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_pe0gw_245:hover {
  text-decoration: underline;
}

/* Used when the form sits inside the login card. */
._embedded_pe0gw_277 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._embedded_pe0gw_277 h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
}

._embedded_pe0gw_277 ._editContactButton_pe0gw_245 {
  color: inherit;
}

._embedded_pe0gw_277 ._buttonGroup_pe0gw_109 {
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

._embedded_pe0gw_277 ._buttonGroup_pe0gw_109 button {
  width: 100%;
  padding: 0.75rem;
  border-width: 2px;
  border-radius: 4px;
  font-size: 1rem;
}

@media (max-width: 600px) {
  ._buttonGroup_pe0gw_109 {
    flex-direction: column;
    gap: 0.5rem;
  }

  ._buttonGroup_pe0gw_109 button {
    width: 100%;
  }
}
._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_60zh8_1 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

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

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

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

._loginContainer_60zh8_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_60zh8_57 h1 {
  font-size: 1.5rem;
  font-weight: 500;
}

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

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

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

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

._formGroup_60zh8_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_60zh8_137 input::placeholder {
  color: var(--text-on-form-secondary);
}

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

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

._formGroup_60zh8_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_60zh8_235 {
  color: var(--color-error);
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

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

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

._loginButton_60zh8_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_60zh8_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_60zh8_265:disabled {
  background-color: var(--input-disabled-bg-color);
  cursor: not-allowed;
}

._textButton_60zh8_323 {
  width: fit-content;

  background: none;
  border: none;

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

  cursor: pointer;

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

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

._orSeparator_60zh8_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_60zh8_359::before,
._orSeparator_60zh8_359::after {
  content: "";

  width: 100%;
  height: 1px;

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

._guestButton_60zh8_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_60zh8_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_60zh8_29 {
    font-size: 1.6rem;
  }

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

  ._pageWrapper_60zh8_1 {
    gap: 0.25rem;
  }

  ._loginContainer_60zh8_57 {
    margin: 0 1rem;
    gap: 0.75rem;
    padding: 1.25rem;
  }

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

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

  ._form_60zh8_125 {
    gap: 0.6rem;
  }

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

  ._loginButton_60zh8_265,
  ._guestButton_60zh8_413 {
    padding: 0.6rem;
    margin-top: 0.4rem;
  }

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

  ._orSeparator_60zh8_359 {
    margin: 0;
  }
}

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

  ._pageTitle_60zh8_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_8zjpn_1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

._bayConfigurationTitle_8zjpn_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_8zjpn_37 {
  color: var(--text-main);
  font-size: 1.25rem;
}

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

._groupSwitcher_8zjpn_61 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

._groupSwitcherLabel_8zjpn_75 {
  min-width: 8rem;
  text-align: center;

  color: var(--text-main);
  font-size: 1.1rem;
  font-weight: 600;
}

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

  width: 2.25rem;
  height: 2.25rem;

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

  border: none;
  border-radius: 0.5rem;

  background: transparent;
  cursor: pointer;

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

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

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

  padding-bottom: 1rem;
}

._stackedFloorItem_8zjpn_159 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  border-radius: 0.5rem;
  cursor: pointer;

  opacity: 0.6;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

._stackedFloorItem_8zjpn_159:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--primary-btn-color) 8%, transparent);
}

._stackedFloorLabel_8zjpn_193 {
  text-align: center;

  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 500;
}

._buttonContainer_8zjpn_209 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

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

._floorAccordionItem_8zjpn_237 {
  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;
  overflow: hidden;
}

._floorAccordionToggle_8zjpn_255 {
  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;
  background: none;
  border: none;
  cursor: pointer;
}

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

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

._floorAccordionContent_8zjpn_305 {
  padding: 0.5rem 0.75rem 0.75rem;
}

@media (max-width: 600px) {
  ._bayConfigurationTitle_8zjpn_15 {
    flex-direction: column;
    padding: 0.5rem 0;
  }
  ._selectedDateAndTime_8zjpn_37 {
    display: flex;
    flex-direction: column;
    text-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
  }

  ._mobileLegend_8zjpn_339 {
    padding-bottom: 0.75rem;
  }

  ._floorAccordion_8zjpn_225 {
    width: calc(100% + 2rem);
    margin: 0 -1rem;
  }
}
._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_ednfu_1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

._filterButton_ednfu_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_ednfu_55 {
  background: var(--active-selected-background);
  color: var(--text-btn-primary);
  border-color: var(--active-selected-border);
}

._active_ednfu_55:hover {
  background: var(--active-selected-bg-hover);
  color: var(--text-secondary);
}

@media (max-width: 600px) {
  ._filters_ednfu_1 {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0.5rem 1rem;

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* old Edge */
  }

  ._filters_ednfu_1::-webkit-scrollbar {
    display: none; /* Chrome, Safari, most mobile browsers */
  }

  ._filterButton_ednfu_17 {
    flex-shrink: 0;
  }
}
._rangeBayMapWrapper_fiqpf_1 {
  width: 100%;
}

._scrollContainer_fiqpf_9 {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0;
}

._scrollContainer_fiqpf_9 svg {
  max-width: none;
}

@media (max-width: 600px) {
  ._scrollContainer_fiqpf_9 {
    width: calc(100% + 2rem);
    margin: 0 -1rem;
    padding: 0.25rem -1rem;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* old Edge */
  }

  ._scrollContainer_fiqpf_9::-webkit-scrollbar {
    display: none; /* Chrome, Safari, most mobile browsers */
  }

  ._noBleed_fiqpf_57 {
    margin: 0;
    padding: 0.25rem 0;
    width: 100%;
  }
}
._rangeMap_1hhdz_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
}

._rangeMap_1hhdz_1 svg {
  flex-shrink: 0;
}

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

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

._label_1hhdz_39 {
  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:hover {
  fill: var(--active-range-bay-hover);
} */

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

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

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

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

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

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

._filteredLabel_1hhdz_127 {
  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_1hhdz_145 {
  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_1hhdz_163 {
  stroke: var(--active-range-divider-color);
  stroke-width: 1.5;
  stroke-linecap: round;
  pointer-events: none;
}

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

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

._gradientBottom_1hhdz_201 {
  stop-color: var(--active-range-bay-gradient-bottom);
}

@media (max-width: 600px) {
  ._rangeMap_1hhdz_1 {
    justify-content: flex-start;
  }
}

@media (hover: hover) {
  ._bay_1hhdz_25:hover {
    fill: var(--active-range-bay-hover);
  }

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

  ._booked_1hhdz_99:hover {
    fill: var(--active-range-bay-booked);
  }
}
._selectedBaysSummary_z41pj_1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
}
._selectedBaysSummary_d1sxq_1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

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

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

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

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

._baySummaryCard_d1sxq_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_d1sxq_65:hover {
  background: var(--active-selected-bg-hover);
}

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

._baySummaryPrice_d1sxq_109 {
  font-weight: 600;
}

._baySummaryDetails_d1sxq_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_d1sxq_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_d1sxq_137:hover {
  background: var(--btn-remove-bg-hover);
}

._baySummaryTotal_d1sxq_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);
}

@media (max-width: 600px) {
  ._selectedBaysSummary_d1sxq_1 {
    padding-bottom: 0.75rem;
  }
  ._baySummaryList_d1sxq_49 {
    flex-wrap: nowrap;
    max-height: none;
    overflow-y: visible;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  ._baySummaryList_d1sxq_49::-webkit-scrollbar {
    display: none;
  }

  ._baySummaryCard_d1sxq_65 {
    flex-shrink: 0;
  }
}
._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_liyo7_1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 13rem;
  gap: 0.5rem;
  padding-bottom: 2rem;
}

._titleWrapper_liyo7_19 {
  text-align: start;
}

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

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

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

._productButton_liyo7_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_liyo7_59:hover {
  color: var(--btn-secondary-text-hover);
  background: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-border-hover);
}

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

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

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

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

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

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

._productButton_liyo7_59:disabled:hover {
  cursor: not-allowed;
}

@media (max-width: 600px) {
  ._productsContainer_liyo7_47 {
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  ._productsContainer_liyo7_47::-webkit-scrollbar {
    display: none;
  }

  ._productButton_liyo7_59 {
    flex-shrink: 0;
  }
}
._overlay_amxjz_1 {
  position: fixed;
  inset: 0;
  overflow-x: hidden;

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

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

  z-index: 1000;
}
._modal_amxjz_29 {
  display: flex;
  flex-direction: column;
  width: min(90vw, 500px);
  min-height: 602px;
  max-height: 90vh;
  overflow-y: auto;
  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_amxjz_69 {
  text-align: center;

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

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

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

._cancelButton_amxjz_107 {
  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_amxjz_107: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_amxjz_143 {
  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_amxjz_143: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_amxjz_143: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_amxjz_193 {
  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_amxjz_193:hover {
  background-color: var(--btn-remove-bg-hover);
  color: var(--btn-remove-text-hover);
  transition: opacity 0.2s ease-in-out;
}

@media (max-width: 600px) {
  ._modal_amxjz_29 {
    width: min(95vw, 500px);
    min-height: auto; /* removes the conflict entirely on short viewports */
  }
  ._playersContainer_amxjz_237 {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  ._playersContainer_amxjz_237::-webkit-scrollbar {
    display: none;
  }

  ._option_amxjz_261 {
    flex-shrink: 0;
  }

  ._durationsContainer_amxjz_269 {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  ._durationsContainer_amxjz_269::-webkit-scrollbar {
    display: none;
  }

  ._option_amxjz_261 {
    flex-shrink: 0;
  }

  ._productsContainer_amxjz_301 {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  ._productsContainer_amxjz_301::-webkit-scrollbar {
    display: none;
  }

  ._productButton_amxjz_325 {
    flex-shrink: 0;
  }
}
._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_i4kne_1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

._buttonContainer_i4kne_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_i4kne_47 {
  grid-column: 1 / -1;

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

._buttons_i4kne_47 button {
  flex: 1;
}

._buttons_i4kne_47 span {
  flex-shrink: 0;
}

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

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

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

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

  width: 100%;
  min-height: 80px;
}

@media (max-width: 600px) {
  ._buttonContainer_i4kne_15 {
    grid-template-columns: 1fr;
  }

  ._buttons_i4kne_47 {
    flex-direction: column;
  }

  ._buttons_i4kne_47 button {
    width: 100%;
  }

  ._balanceMessage_i4kne_83 {
    grid-column: 1;
  }
}
._reviewBookingWrapper_1cwjh_1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  justify-content: space-between;
}

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

._reviewSection_1cwjh_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_1cwjh_55 {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

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

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

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

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

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

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

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

._labelTotal_1cwjh_153 {
  font-weight: 500;
}

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

._noWrap_1cwjh_173 {
  white-space: nowrap;
}

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

/* Right Section */

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

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

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

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

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

._breakdownTotal_1cwjh_267 {
  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_1cwjh_291 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 600px) {
  ._reviewSection_1cwjh_29 {
    flex-direction: column;
  }

  ._value_1cwjh_161 {
    white-space: normal;
    min-width: 0;
  }

  ._breakdownScroll_1cwjh_323 {
    display: grid;
    grid-template-columns: repeat(5, max-content);
    column-gap: 1rem;
    row-gap: 0.125rem;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  ._breakdownScroll_1cwjh_323::-webkit-scrollbar {
    display: none;
  }

  ._breakdownRow_1cwjh_211 {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;

    padding-bottom: 0.125rem;
    border-bottom: 1px solid var(--input-border-color);
  }

  ._breakdownRow_1cwjh_211 > * {
    white-space: nowrap;
  }

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

  ._product_1cwjh_231,
  ._amount_1cwjh_239 {
    justify-self: end;
    margin-left: 0;
    min-width: auto;
  }

  ._buttonContainer_1cwjh_291 {
    padding-top: 1rem;
  }

  ._bayList_1cwjh_411 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
  }
}
._pageWrapper_1ecu5_1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
}

._contentWrapper_1ecu5_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_1ecu5_43 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

._title_1ecu5_59 {
  display: flex;
}

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

._subtitle_1ecu5_77 {
  display: flex;
}

._referenceNumbersWrapper_1ecu5_85 {
  display: flex;

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

._referenceContainer_1ecu5_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_1ecu5_85 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: 1.5rem;
}

._copyButton_1ecu5_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_1ecu5_139:hover {
  cursor: pointer;
  border-color: var(--active-card-surface-border-hover);
}

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

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

._icon_1ecu5_193 {
  display: flex;
}

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

._date_1ecu5_211 {
  display: flex;
}

._time_1ecu5_219 {
  display: flex;
}

._players_1ecu5_227 {
  display: flex;
}

._bays_1ecu5_235 {
  display: flex;
}

._totalPaid_1ecu5_243 {
  display: flex;
}

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

._addToCalendar_1ecu5_271 {
  display: flex;
}

._makeAnotherBooking_1ecu5_279 {
  display: flex;
}

@media (max-width: 600px) {
  ._contentWrapper_1ecu5_17 {
    padding: 1rem;
    gap: 1rem;
  }

  ._referenceNumbersWrapper_1ecu5_85 {
    flex-direction: column;
  }

  ._bookingSummary_1ecu5_169 {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  ._buttonContainer_1ecu5_251 {
    flex-direction: column;
    gap: 1rem;
    padding-top: 0rem;
  }
}


[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;
}