/* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

/* Variables */
:root {
  /* Colors */
  --colour-bg-hsl: 228, 45%, 98%;
  --colour-bg: hsl(var(--colour-bg-hsl));
  --colour-bg-50: hsl(var(--colour-bg-hsl), 0.5);

  --colour-text: var(--colour-black);
  --colour-text-secondary: var(--colour-brand-grey-500);
  --colour-primary: var(--colour-brand-pink-700);
  --colour-accent: var(--colour-brand-purple-700);

  --colour-bg-main: var(--colour-white);

  --colour-white: white;
  --colour-black: black;

  --colour-brand-pink-100: hsl(347, 85%, 90%);
  --colour-brand-pink-700: hsl(339, 80%, 48%);
  --colour-brand-pink-800: hsl(331, 95%, 30%);
  --colour-brand-pink-900: hsl(339, 54%, 18%);
  --colour-brand-purple-500: hsl(320, 48%, 46%);
  --colour-brand-purple-600: hsl(319, 54%, 42%);
  --colour-brand-purple-700: hsl(318, 63%, 37%);
  --colour-brand-teal-100: hsl(178, 37%, 87%);
  --colour-brand-teal-700: hsl(178, 100%, 35%);
  --colour-brand-teal-800: hsl(181, 80%, 26%);
  --colour-brand-teal-900: hsl(178, 48%, 15%);
  --colour-brand-blue-50: hsla(195, 59%, 88%, 0.5);
  --colour-brand-blue-100: hsl(195, 59%, 88%);
  --colour-brand-blue-900: hsl(194, 54%, 18%);
  --colour-brand-orange-100: hsl(17, 85%, 89%);
  --colour-brand-orange-700: hsl(19, 90%, 56%);
  --colour-brand-orange-900: hsl(18, 63%, 18%);
  --colour-brand-grey-100: hsl(219, 37%, 93%);
  --colour-brand-grey-400: hsl(120, 1%, 77%);
  --colour-brand-grey-400-t: rgba(0, 4, 0, 0.231);
  --colour-brand-grey-500: hsl(120, 1%, 56%);

  --colour-brand-blue-700: hsl(207, 100%, 14%);
  --colour-brand-blue-800: hsl(224, 68%, 15%);

  --colour-success: var(--colour-brand-teal-700);
  --colour-warning: var(--colour-brand-orange-700);
  --colour-danger: var(--colour-brand-pink-700);

  /* Additional Colours */
  --colour-menu-background: #f9dae1;
  --colour-more-help-background: #dce5f7;

  /* Typography */
  --font-base: var(--font-sans);
  --font-sans: "Helvetica Neue", "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  --font-size: clamp(0.8rem, 0.9rem + 0.5vw, 1rem);

  /* Type scale — relative to --font-size */
  --font-size-xs: calc(var(--font-size) * 0.75);
  --font-size-sm: calc(var(--font-size) * 0.85);
  --font-size-md: var(--font-size);
  --font-size-lg: calc(var(--font-size) * 1.15);

  /* Mobile Up */
  --font-size-xl: calc(var(--font-size) * 1.2);
  --font-size-xlp: calc(var(--font-size) * 1.5);
  --font-size-2xl: calc(var(--font-size) * 1.7);
  --font-size-3xl: calc(var(--font-size) * 1.8);
  --font-size-4xl: calc(var(--font-size) * 2.0);

  /* Tablet Up */
  @media (min-width: 768px) {
    --font-size-xl: calc(var(--font-size) * 1.35);
    --font-size-xlp: calc(var(--font-size) * 1.7);
    --font-size-2xl: calc(var(--font-size) * 2.1);
    --font-size-3xl: calc(var(--font-size) * 2.5);
    --font-size-4xl: calc(var(--font-size) * 3.75);
  }

  /* Spacing scale */
  --space-2xs: clamp(0.125rem, 0.1rem + 0.1vw, 0.25rem);
  --space-xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem);
  --space-sm: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --space-md: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --space-lg: clamp(2rem, 1.5rem + 1vw, 3rem);

  /* Radius */
  --radius: 0.5rem;

  /* Container */
  --min-width: var(--bp-xs);
  --max-width: var(--bp-xxl);
  --container-padding: var(--space-md);

  /* Transition */
  --default-transition-duration: 200ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);

  /* Buttons */
  --button-primary-text-color: var(--colour-white);
  --button-primary-background: linear-gradient(95deg, var(--colour-brand-pink-700) -1.82%, var(--colour-brand-purple-700) 102.47%);
  --button-primary-font: normal 300 var(--font-size-md) var(--font-sans);
  --button-primary-letter-spacing: -0.18px;
  --button-primary-padding: var(--space-sm) var(--space-md);
  --button-primary-text-decoration: none;
  --button-primary-text-align: center;
  --button-primary-line-height: 100%; /* 18px */
  --button-primary-text-color-hover: var(--colour-white);
  --button-primary-background-hover: var(--colour-brand-pink-700);


  --button-secondary-text-color: var(--colour-white);
  --button-secondary-background: linear-gradient(95deg, var(--colour-brand-blue-700) -1.82%, var(--colour-brand-teal-800) 102.47%);
  --button-secondary-font: var(--button-primary-font);
  --button-secondary-letter-spacing: var(--button-primary-letter-spacing);
  --button-secondary-padding: var(--button-primary-padding);
  --button-secondary-text-decoration: var(--button-primary-text-decoration);
  --button-secondary-text-align: var(--button-primary-text-align);
  --button-secondary-line-height: var(--button-primary-line-height);
  --button-secondary-text-color-hover: var(--colour-white);
  --button-secondary-background-hover: var(--colour-brand-teal-800);

  --button-background-color-disabled: #b8b9b8;
  --button-background-disabled: linear-gradient(95deg, #b8b9b8 -1.82%, #5a5e5a 102.47%);

  /* Fields */
  --field-background-color: #f7f8fc;
  --field-border-color: #cad0dc;
  --field-background-color-focus: var(--colour-bg-main);
  --field-border-color-focus: var(--colour-brand-teal-700);
  --field-highlight-background-color: var(--colour-brand-teal-100);
  --field-highlight-color: var(--colour-brand-teal-900);

  --field-radio-checkbox-background-color: var(--colour-bg-main);
  --field-radio-checkbox-border-color: var(--field-border-color);
  --field-radio-checkbox-border-color-checked: var(--colour-brand-teal-700);
  --field-radio-checkbox-color: var(--colour-brand-teal-700);

  --field-radio-border-color-disabled: rgba(0, 4, 0, 0.15);
  --field-radio-background-color-disabled: rgba(0, 4, 0, 0.05);
  --field-radio-mark-color-disabled: rgba(0, 0, 4, 0.15);
  --field-radio-mark-color-checked-disabled: rgba(0, 4, 0, 0.2);

  /* Breakpoints */
  --bp-xs: 0;
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1500px;
}

/* Dark mode automatically */
@media (prefers-color-scheme: dark) {
  :root {

  }
}


/* Base styles */

body {
  font-family: var(--font-base), sans-serif;
  font-size: var(--font-size);
  color: var(--colour-text);
  /*padding: var(--space-md);*/
  margin: 0;
  padding: 0;
  background-color: var(--colour-bg-main);
}

body:not(.minimal) {
  background: url('/images/ecom-assets/bg-tc-wvb-cropped.svg') top right / 43% no-repeat var(--colour-bg);
}

#container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.text-xs {
  font-size: var(--font-size-xs);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.text-md {
  font-size: var(--font-size-md);
}

.text-lg {
  font-size: var(--font-size-lg);
}

.text-xl {
  font-size: var(--font-size-xl);
}

.text-2xl {
  font-size: var(--font-size-2xl);
}

.text-3xl {
  font-size: var(--font-size-3xl);
}

.text-4xl {
  font-size: var(--font-size-4xl);
}

/* Text */

h1 {
  font-weight: 500;
  font-size: var(--font-size-4xl);
  line-height: 100%;
  letter-spacing: -1%;
  color: var(--colour-brand-pink-900);
}

h2 {
  font-weight: 500;
  font-size: var(--font-size-2xl);
  line-height: 100%;
  letter-spacing: -1%;
  color: var(--colour-brand-pink-900);
}

h3 {
  color: var(--colour-brand-teal-900);
  font-size: var(--font-size-2xl);
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.36px;
}

h4 {
  font-size: var(--font-size-xlp);
  font-weight: 500;
  line-height: 100%;
}

.gradient-pink-text {
  color: var(--colour-brand-pink-800);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .gradient-pink-text {
    background: linear-gradient(to right, var(--colour-brand-pink-800), var(--colour-brand-pink-700));
    -webkit-background-clip: text;
    background-clip: text;

    /* Only applied in supporting browsers */
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* Links */
a {
  color: var(--colour-brand-purple-500);
  text-decoration: underline;
}


/****************************/
/* Buttons                  */
/****************************/

.btn,
.btn:first-child,
.btn-primary,
.button-primary,
.buyButton {
  border: none;
  border-radius: 0;
  display: inline-block;
  color: var(--button-primary-text-color);
  background-color: var(--button-primary-background-hover);
  background-image: var(--button-primary-background);
  background-size: 100%;
  font: var(--button-primary-font);
  letter-spacing: var(--button-primary-letter-spacing);
  padding: var(--button-primary-padding);
  text-decoration: var(--button-primary-text-decoration);
  text-align: var(--button-primary-text-align);
  line-height: var(--button-primary-line-height);
  transition: all var(--default-transition-duration) var(--default-transition-timing-function);

  &:hover,
  &:focus,
  &:focus-visible,
  &:active {
    background-color: var(--button-primary-background-hover);
    background-size: 1000%;
    color: var(--button-primary-text-color-hover);
  }

  &.disabled,
  &[disabled] {
    background-color: var(--button-background-color-disabled);
    background-image: var(--button-background-disabled);

    &:hover,
    &:focus,
    &:active {
      background-size: 100%;
    }
  }
}

.button-secondary,
.btn-secondary,
.btn.btn-secondary,
input[type=button],
input[type=reset],
input[type=submit] {
  border: none;
  border-radius: 0;
  display: inline-block;
  color: var(--button-secondary-text-color);
  background-color: var(--button-secondary-background-hover);
  background-image: var(--button-secondary-background);
  background-size: 100%;
  background-position-x: right;
  font: var(--button-secondary-font);
  letter-spacing: var(--button-secondary-letter-spacing);
  padding: var(--button-secondary-padding);
  text-decoration: var(--button-secondary-text-decoration);
  text-align: var(--button-secondary-text-align);
  line-height: var(--button-secondary-line-height);
  transition: all var(--default-transition-duration) var(--default-transition-timing-function);

  &:hover,
  &:focus,
  &:focus-visible,
  &:active {
    background-color: var(--button-secondary-background-hover);
    background-size: 1500%;
    color: var(--button-secondary-text-color-hover);
    outline: 0;
  }

  &.disabled,
  &[disabled] {
    background-color: var(--button-background-color-disabled);
    background-image: var(--button-background-disabled);

    &:hover,
    &:focus,
    &:active {
      background-size: 100%;
    }
  }
}

.btn-sm {
  font-size: var(--font-size-lg);
  padding: var(--button-primary-padding);
}

.btn-md {
  font-size: var(--font-size-lg);
  padding: var(--button-primary-padding);
}

.btn-lg {
  font-size: var(--font-size-3xl);
  padding: var(--button-primary-padding);
}

.btn-continue {
  padding: var(--button-primary-padding);
}

.btn-start {
  padding: var(--button-primary-padding);
}

.btn-activate {
}


.money {
  font-family: var(--font-mono);
  line-height: 100%;
}

hr {
  border-color: var(--colour-brand-grey-500);
}

/* Overflowing table hack */
#main div:has(table) {
    overflow-x: auto;
}