@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");._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;
  }
}


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