@import url(https://cdn.shopify.com/shopifycloud/privacy_portal/assets/base-611f7d9a026aba9aa02a7463d91a95b39498d2a21387f687f9ccf90e1f856106.css);

@tailwind base;
@tailwind components;

@layer base {
  body {
    @apply text-body-base;
  }
}

@layer components {
  .form-input-phone:has(.field_with_errors) {
    @apply !mb-12;
    @apply border-red-600;
  }

  .form-input-phone .field_with_errors {
    @apply flex-grow;
  }

  .form-input-phone .field_with_errors input {
    @apply text-red-600 bg-red-100;
    @apply rounded-l-md;
  }

  .form-input-phone .field_with_errors label {
    @apply text-red-600 font-semibold;
  }

  .form-input-phone .field_with_errors .error {
    @apply text-sm text-red-600 flex gap-2 mt-1;    
    @apply top-full;
    @apply absolute;
  }

  .form-input-phone .field_with_errors ~ div {
    @apply bg-red-100;
    @apply border-red-600;
  }

  .field_with_errors {
    @apply flex;
    @apply flex-col;
  }

  .field_with_errors input[type=text],
  .field_with_errors input[type=email],
  .field_with_errors select,
  .field_with_errors textarea {
    @apply border-red-600 text-red-600 bg-red-100;
  }

  .field_with_errors label {
    @apply text-red-600 font-semibold;
  }

  .field_with_errors .error {
    @apply text-sm text-red-600 flex gap-2 mt-1;
  }

  .radio-toggle-container {
    @apply py-3;
    @apply sm:py-5;
    @apply pl-4;
    @apply sm:pl-6;
    @apply pr-4;
    @apply sm:pr-6;
    @apply rounded-xl;
    @apply border;
    @apply border-grey-light;
    @apply flex;
    @apply space-x-4;
    @apply items-center;
  }

  /* Fix 1px shift because the "selected" box has a 2px border but the unselected box border is only 1px */
  .radio-toggle-container:not(.selected) > * {
    @apply m-[1px];
  }

  .radio-toggle-container.selected {
    @apply bg-blue-light;
    @apply border-indigo-medium;
    @apply border-2;
    @apply border-solid
  }

  .form-input-phone {
    @apply flex;
    @apply flex-row;
    @apply relative;
  }

  .form-input-phone label {
    @apply absolute;
    @apply cursor-text;
    @apply h-full;
    @apply hidden;
    @apply items-center;
    @apply select-none;
    @apply text-shades-50;
  }

  .form-input-phone input {
    @apply rounded-l-md;
    @apply border-shades-40;
  }

  .form-input-phone label, .form-input-phone input {
    @apply text-t8;
    @apply !font-medium;
    @apply p-5;
  }

  .form-input-text {
    @apply flex;
    @apply flex-col;
    @apply relative;
  }

  .form-input-text label {
    @apply absolute;
    @apply cursor-text;
    @apply h-full;
    @apply hidden;
    @apply items-center;
    @apply select-none;
    @apply text-shades-50;
  }

  .form-input-text input {
    @apply rounded-md;
    @apply border-shades-40;
  }

  .form-input-text label, .form-input-text input {
    @apply text-t8;
    @apply !font-medium;
    @apply p-5;
  }

  .form-input-text input:placeholder-shown + label {
    @apply flex;
  }

  .form-input-text input:focus {
    @apply border-indigo-medium;
    @apply ring-indigo-medium;
  }

  .form-input-select {
    @apply flex;
    @apply flex-col;
    @apply relative;
  }

  .form-input-select select {
    @apply bg-transparent;
    @apply rounded-md;
    @apply border-shades-40;
    @apply pb-3;
    @apply pt-7;
    @apply px-5;
    @apply z-20;
  }

  .form-input-select label {
    @apply absolute;
    @apply pl-5;
    @apply select-none;
    @apply text-shades-60;
    @apply text-t8;
    @apply !font-medium;
    @apply top-2;
    @apply text-[0.6875rem];
    @apply z-10;
  }

  .form-input-select :focus {
    @apply border-indigo-medium;
    @apply ring-indigo-medium;
  }

  .form-input-textarea {
    @apply flex;
    @apply flex-col;
    @apply relative;
  }

  .form-input-textarea label {
    @apply absolute;
    @apply cursor-text;
    @apply h-full;
    @apply hidden;
    @apply left-5;
    @apply select-none;
    @apply text-shades-50;
    @apply top-6;
  }

  .form-input-textarea textarea {
    @apply rounded-md;
    @apply border-shades-40;
    @apply p-5;
    @apply pt-6;
  }

  .form-input-textarea label, .form-input-textarea textarea {
    @apply text-t8;
    @apply !font-medium;
  }

  .form-input-textarea textarea:placeholder-shown + label {
    @apply flex;
  }

  .form-input-textarea textarea:focus {
    @apply border-indigo-medium;
    @apply ring-indigo-medium;
  }
}

@tailwind utilities;

@font-face {
  font-family: ShopifySans;
  src: url('https://cdn.shopify.com/static/fonts/ShopifySans--light.woff2')
    format('woff2');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: ShopifySans;
  src: url('https://cdn.shopify.com/static/fonts/ShopifySans--regular.woff2')
    format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: ShopifySans;
  src: url('https://cdn.shopify.com/static/fonts/ShopifySans--medium.woff2')
    format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: ShopifySans;
  src: url('https://cdn.shopify.com/static/fonts/ShopifySans--bold.woff2')
    format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: ShopifySans;
  src: url('https://cdn.shopify.com/static/fonts/ShopifySans--extrabold.woff2')
    format('woff2');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: ShopifySans;
  src: url('https://cdn.shopify.com/static/fonts/ShopifySans--black.woff2')
    format('woff2');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
@layer base {
  :root {
    --gutter: 1rem;
    --margin: 1rem;

    /* Typography */

    /* sm */
    --font-size-body-sm: 0.875rem; /* 14px */
    --line-height-body-sm: 1.25rem; /* 20px */
    --letter-spacing-body-sm: 0.02em; /* 2%   */

    /* md */
    --font-size-body-base: 1rem; /* 16px */
    --line-height-body-base: 1.5rem; /* 24px */
    --letter-spacing-body-base: 0; /* 0%   */

    /* lg */
    --font-size-body-lg: 1.125rem; /* 18px */
    --line-height-body-lg: 1.625rem; /* 26px */
    --letter-spacing-body-lg: -0.02em; /* -2%  */

    /* t8 */
    --font-size-t8: 0.875rem; /* 14px */
    --font-weight-t8: 700; /* bold */
    --line-height-t8: 1rem; /* 16px */
    --letter-spacing-t8: -0.02em; /* -2%  */

    /* t7 */
    --font-size-t7: 1.125rem; /* 18px */
    --font-weight-t7: 700; /* bold */
    --line-height-t7: 1.25rem; /* 20px */
    --letter-spacing-t7: -0.02em; /* -2%  */

    /* t6 */
    --font-size-t6: 1.25rem; /* 20px */
    --font-weight-t6: 700; /* bold */
    --line-height-t6: 1.375rem; /* 22px */
    --letter-spacing-t6: -0.02em; /* -2%  */

    /* t5 */
    --font-size-t5: 1.5rem; /* 24px */
    --font-weight-t5: 700; /* bold */
    --line-height-t5: 1.625rem; /* 26px */
    --letter-spacing-t5: -0.02em; /* -2%  */

    /* t4 */
    --font-size-t4: 1.75rem; /* 28px */
    --font-weight-t4: 700; /* bold */
    --line-height-t4: 1.875rem; /* 30px */
    --letter-spacing-t4: -0.02em; /* -2%  */

    /* t3 */
    --font-size-t3: 2.125rem; /* 34px */
    --font-weight-t3: 700;
    --line-height-t3: 2.375rem; /* 38px */
    --letter-spacing-t3: -0.02em; /* -2%  */

    /* t2 */
    --font-size-t2: 2.5rem; /* 40px */
    --font-weight-t2: 700; /* bold */
    --line-height-t2: 2.75rem; /* 44px */
    --letter-spacing-t2: -0.02em; /* -2%  */

    /* t1 */
    --font-size-t1: 2.875rem; /* 46px */
    --font-weight-t1: 700; /* bold */
    --line-height-t1: 3.125rem; /* 50px */
    --letter-spacing-t1: -0.02em; /* -2%  */

    /* dsp */
    --font-size-dsp: 4.125rem; /* 66px */
    --font-weight-dsp: 700; /* bold */
    --line-height-dsp: 4.5rem; /* 72px */
    --letter-spacing-dsp: -0.02em; /* -2%  */

    /* Space sizes */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 2.5rem;
    --space-3xl: 4rem;
    --space-4xl: 5rem;
    --space-5xl: 8rem;
    --header-height: 4.5rem;
    --hero-top: var(--header-height);
  }
  @screen sm {
    :root {
      --margin: 1.875rem;
    }
  }

  @screen md {
    :root {
      --margin: 3.125rem;

      /* Typography sizes */

      /* lg */
      --font-size-body-lg: 1.25rem; /* 20 px */
      --line-height-body-lg: 1.75rem; /* 28px */
      --letter-spacing-body-lg: -0.02em; /* -2%  */

      /* t8 */
      --font-size-t8: 1rem; /* 16px */
      --font-weight-t8: 700; /* bold */
      --line-height-t8: 1.125rem; /* 18px */
      --letter-spacing-t8: -0.02em; /* -2%  */

      /* t7 */
      --font-size-t7: 1.25rem; /* 20px */
      --font-weight-t7: 700; /* bold */
      --line-height-t7: 1.375rem; /* 22px */
      --letter-spacing-t7: -0.02em; /* -2%  */

      /* t6 */
      --font-size-t6: 1.5rem; /* 24px */
      --font-weight-t6: 700; /* bold */
      --line-height-t6: 1.625rem; /* 26px */
      --letter-spacing-t6: -0.02em; /* -2%  */

      /* t5 */
      --font-size-t5: 1.75rem; /* 28px */
      --font-weight-t5: 700; /* bold */
      --line-height-t5: 2rem; /* 32px */
      --letter-spacing-t5: -0.02em; /* -2%  */

      /* t4 */
      --font-size-t4: 2.125rem; /* 34px */
      --font-weight-t4: 700; /* bold */
      --line-height-t4: 2.375rem; /* 38px */
      --letter-spacing-t4: -0.02em; /* -2%  */

      /* t3 */
      --font-size-t3: 2.625rem; /* 42px */
      --font-weight-t3: 700;
      --line-height-t3: 2.875rem; /* 46px */
      --letter-spacing-t3: -0.02em; /* -2%  */

      /* t2 */
      --font-size-t2: 3.125rem; /* 50px */
      --font-weight-t2: 700; /* bold */
      --line-height-t2: 3.5rem; /* 56px */
      --letter-spacing-t2: -0.02em; /* -2%  */

      /* t1 */
      --font-size-t1: 3.625rem; /* 58px */
      --font-weight-t1: 700; /* bold */
      --line-height-t1: 4.125rem; /* 66px */
      --letter-spacing-t1: -0.02em; /* -2%  */

      /* dsp */
      --font-size-dsp: 5.5rem; /* 88px */
      --font-weight-dsp: 700; /* bold */
      --line-height-dsp: 6rem; /* 96px */
      --letter-spacing-dsp: -0.02em; /* -2%  */

      /* Space sizes */
      --space-xs: 0.5rem;
      --space-sm: 1rem;
      --space-md: 1.5rem;
      --space-lg: 2rem;
      --space-xl: 2.5rem;
      --space-2xl: 4rem;
      --space-3xl: 5rem;
      --space-4xl: 8rem;
      --space-5xl: 10rem;
      --hero-top: calc(var(--header-height));
    }
  }

  @screen lg {
    :root {
      --margin: 5.625rem;
      --gutter: 1.5rem;

      /* Typography sizes */

      /* md */
      --font-size-body-base: 1.125rem; /* 18px */
      --line-height-body-base: 1.625rem; /* 26px */
      --letter-spacing-body-base: 0; /* 0%   */

      /* lg */
      --font-size-body-lg: 1.375rem; /* 22px */
      --line-height-body-lg: 2rem; /* 32px */
      --letter-spacing-body-lg: -0.02em; /* -2%  */

      /* t8 */
      --font-size-t8: 1rem; /* 16px */
      --font-weight-t8: 700; /* bold */
      --line-height-t8: 1.125rem; /* 18px */
      --letter-spacing-t8: -0.02em; /* -2%  */

      /* t7 */
      --font-size-t7: 1.25rem; /* 20px */
      --font-weight-t7: 700; /* bold */
      --line-height-t7: 1.375rem; /* 22px */
      --letter-spacing-t7: -0.02em; /* -2%  */

      /* t6 */
      --font-size-t6: 1.625rem; /* 26px */
      --font-weight-t6: 700; /* bold */
      --line-height-t6: 1.75rem; /* 28px */
      --letter-spacing-t6: -0.02em; /* -2%  */

      /* t5 */
      --font-size-t5: 2rem; /* 32px */
      --font-weight-t5: 700; /* bold */
      --line-height-t5: 2.25rem; /* 36px */
      --letter-spacing-t5: -0.02em; /* -2%  */

      /* t4 */
      --font-size-t4: 2.5rem; /* 40px */
      --font-weight-t4: 700; /* bold */
      --line-height-t4: 2.75rem; /* 44px */
      --letter-spacing-t4: -0.02em; /* -2%  */

      /* t3 */
      --font-size-t3: 3rem; /* 48px */
      --font-weight-t3: 700;
      --line-height-t3: 3.25rem; /* 52px */
      --letter-spacing-t3: -0.02em; /* -2%  */

      /* t2 */
      --font-size-t2: 3.75rem; /* 60px */
      --font-weight-t2: 700; /* bold */
      --line-height-t2: 4.125rem; /* 66px */
      --letter-spacing-t2: -0.02em; /* -2%  */

      /* t1 */
      --font-size-t1: 4.5rem; /* 72px */
      --font-weight-t1: 700; /* bold */
      --line-height-t1: 5rem; /* 80px */
      --letter-spacing-t1: -0.02em; /* -2%  */

      /* dsp */
      --font-size-dsp: 6.875rem; /* 110px */
      --font-weight-dsp: 700; /* bold */
      --line-height-dsp: 7.5rem; /* 120px */
      --letter-spacing-dsp: -0.02em; /* -2%  */
    }
  }
}

@layer utilities {
  .container {
    @apply mx-margin w-auto max-w-none;
  }

  @screen xl {
    .container {
      @apply w-full mx-auto;
      max-width: calc(theme('screens.xl') - (var(--margin) * 2));
    }
  }
}
.global-logo {
  max-width: 121px;
  min-width: 121px;
}

.footer-logo {
  max-width: 2rem;
  min-width: 2rem;
  width: 100%
}

.footer-icon {
  max-width: 2rem;
}

.action-icon {
  max-width: 4rem;
  min-width: 4rem;
}

.back-arrow {
  max-width: 1rem;
  min-width: 1rem;
}
.mobile-session-menu-display:checked ~ .mobile-session-menu-content {
  display: block;
}

select {
  background-image: url('https://cdn.shopify.com/shopifycloud/privacy_portal/assets/select_input_arrow-aa5b3eb5cbd28a20423c38af4c627b92a752fb563333efb24605dcc846988419.svg');
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.gradient-background {
  background: radial-gradient(47.74% 41.25% at 81.94% -21.87%, #C5D1FF 0%, rgba(199, 237, 236, 0) 100%),
    radial-gradient(83.54% 67.24% at 92.81% -17.19%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%)
}

.form-gradient-background {
  background:
    radial-gradient(88.11% 69.88% at 89.1% -10.65%, #ADCEFF 0%, rgba(205, 234, 243, 0) 100%),
    radial-gradient(35.73% 50.82% at 88.74% 15.24%, rgba(255, 255, 255, 0.5) 0%, rgba(245, 253, 255, 0) 100%),
    linear-gradient(0deg, #F5FCFF, #F5FCFF);
}

.error-gradient-background {
  background:
    radial-gradient(88.11% 69.88% at 89.1% -10.65%, #ffadad 0%, rgba(205, 234, 243, 0) 100%),
    radial-gradient(35.73% 50.82% at 88.74% 15.24%, rgba(255, 255, 255, 0.5) 0%, rgba(245, 253, 255, 0) 100%),
    linear-gradient(0deg, #fff5f5, #fff5f5);
}

.form-notice p {
  display: none;
}

.form-notice p:first-child {
  display: block;
  font-weight: 500;
}

.form-notice.expanded-notice p {
  display: block;
}

.form-notice.expanded-notice p ~ p {
  margin-top: 0.5rem;
}

.form-notice.expanded-notice .alert-icon {
  align-self: flex-start;
  margin-top: 0.75rem;
}

.form-notice.expanded-notice .toggle-container {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.language-list {
  display: none;
}

.language-list.expanded {
  display: block;
}

.language-selector {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.language-selector.emphasized > .emphasis-regular {
  display: none;
}

.language-selector.emphasized > .emphasis-heavy {
  display: block;
}