@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* Body */
  .main {
    @apply flex w-[100%] min-h-[1024px] flex-col items-start gap-[var(--spacing-0,0px)] font-sans;
  }

  /* Navigation Header */
  .nav {
    @apply flex w-[100%] h-20 pt-[var(--spacing-small)] pb-[var(--spacing-small)] justify-center items-center px-[16px];
  }

  .nav-wrapper {
    @apply w-[1064px] h-[var(--dimensions-dimension-large,48px)] justify-between max-w-[var(--container-container-large,1064px)] shrink-0;
  }

  .nav-logo {
    @apply w-[166px] h-8 shrink-0;
  }

  .progress {
    @apply flex w-[400px] items-center gap-[var(--spacing-8)];
  }

  .progress-bar {
    @apply flex h-2 items-start flex-[1_0_0] rounded-[var(--radii-full)] bg-[color:var(--background-bg-canvas,#F9FAFB)];
  }

  .progress-bar-indicator {
    @apply w-[100px] h-2 rounded-[0.375rem]  border-[color:var(--gradient-gradient-aurora,#4ADE80)] bg-[linear-gradient(90deg,rgba(74,222,128,0.50)_0%,rgba(103,232,249,0.50)_100%)] border-solid;
  }

  .btn-grp {
    @apply inline-flex flex-col items-end gap-[var(--spacing-xsmall,8px)];
  }

  .btn-phone {
    @apply flex items-center gap-3;
  }

  .link-small {
    @apply w-[154px] text-[#0D99FF] text-right text-xs not-italic font-semibold leading-[100%] underline;
  }

  .link-phone {
    @apply text-[color:var(--text-text-default,#000)] text-right text-base not-italic font-medium leading-[160%];
  }

  .desktop-logo {
    @apply block;
  }

  .mobile-logo {
    @apply hidden;
  }

  .progress {
    @apply flex;
  }

  .btn-phone img[alt="Flag"], .link-phone {
    @apply block;
  }

  /* Footer */
  .footer {
    @apply flex w-[100%] pt-10 pb-20 px-[188px] flex-col items-center gap-10 bg-[#F3F4F6];
  }

  .footer-copywright {
    @apply text-[color:var(--text-text-secondary,#4D5562)] text-justify text-sm not-italic font-normal leading-[160%] max-w-[var(--container-container-large,1064px)];;
  }

  .footer-wrapper {
    @apply flex items-center gap-[var(--spacing-large,32px)] w-[100%] max-w-[var(--container-container-large,1064px)];
  }

  .footer-column {
    @apply flex flex-col items-start gap-6 flex-[1_0_0];
  }

  .footer-header {
    @apply text-[color:var(--text-text-default,#000)] text-base not-italic font-semibold leading-[160%] self-stretch;
  }

  .footer-text {
    @apply text-[color:var(--text-text-secondary,#4D5562)] text-sm not-italic font-normal leading-[160%];
  }

  .footer-link {
    @apply text-[color:var(--text-text-secondary,#4D5562)] text-sm not-italic font-normal leading-[160%] underline self-stretch;
  }

  .footer-phone {
    @apply flex w-[202px] items-center gap-2;
  }

  /* Form Section */

  .section-wrapper {
    @apply flex justify-center items-start gap-0 self-stretch px-4 py-0 border-t-2 border-solid border-t bg-custom-gradient;
  }

  .section-container {
    @apply flex w-[100%] max-w-[950px] flex-col items-center gap-[29px] px-[120px] py-16;
  }

  .form-wrapper {
    @apply flex flex-col w-[100%] items-start border border-neutral-200 bg-white rounded-lg border-solid;
  }

  .back-grp {
    @apply flex h-14 justify-center items-center gap-2 relative py-0 rounded-full top-[91px];
  }

  .back-button-text {
    @apply text-black text-center text-base not-italic font-semibold leading-[160%];
  }

  .form {
    @apply flex flex-col items-start gap-10 self-stretch p-10;
  }

  .form-header {
    @apply flex items-start gap-4 self-stretch text-2xl not-italic font-medium leading-[125%] font-suisse;
  }

  .form-section {
    @apply flex flex-col gap-6 self-stretch items-start;
  }

  /* Inputs */

  .text-input-wrapper {
    @apply flex flex-col items-start gap-1 self-stretch;
  }

  .text-input-label {
    @apply flex flex-col items-start self-stretch text-sm not-italic font-medium leading-[160%] font-sans;
  }

  .text-input {
    @apply flex h-14 items-center gap-2 self-stretch border bg-white px-4 py-2 rounded-xl border-solid border-[#D2D5DA];
  }

  .button-choice {
    @apply flex h-14 justify-center items-center gap-2 self-stretch px-6 py-0 font-semibold rounded-full bg-button-gradient;
  }

  .select-input {
    @apply border bg-white flex h-14 items-center px-4 py-2 rounded-xl border-solid border-[#D2D5DA] appearance-none self-stretch;

    background-image: url(/assets/select-icon-73b91e82fa85f05ccaf5276272710c46616bf0b291f41d4ae547db0da7bd7b44.svg);
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.8rem;
  }

  .select-input::-ms-expand {
    display: none;
  }

  .error-message {
    @apply text-[#EA3535] text-sm;
  }

  .text-input.error {
    @apply border-[#EA3535] border-2;
  }

  .select-input.error {
    @apply border-[#EA3535] border-2;
  }

  /* Call to Action Button */

  .cta {
    @apply flex justify-end items-center gap-4 self-stretch  bg-white p-10 border-t-neutral-200 border-t border-solid;
  }

  .cta-button {
    @apply flex h-14 justify-center items-center gap-2 font-semibold flex-[1_0_0] px-6 py-0 rounded-full bg-button-gradient;
  }

  /* Responsive Version */

  @media (max-width: 1064px) {

    /* Nav */

    .nav-wrapper {
      @apply justify-between items-center flex-[1_0_0] px-0 py-[7px];
    }

    .desktop-logo {
      @apply hidden;
    }

    .mobile-logo {
      @apply block w-8 h-8;
    }

    .link-small {
      @apply text-[#0D99FF] text-right text-xs not-italic font-semibold leading-[100%] underline w-[100%];
    }

    .btn-grp {
      @apply flex-row justify-end items-center gap-[var(--spacing-xsmall,8px)];
    }

    .progress {
      @apply hidden;
    }

    .btn-phone img[alt="Flag"] {
      @apply hidden;
    }

    .link-small, .btn-phone img[alt="Phone"] {
      @apply block;
    }

    .btn-phone img[alt="Phone"] {
      @apply h-8;
    }

    /* Footer */

    .footer {
      @apply flex w-[100%] flex-col items-start gap-10 pt-10 pb-20 px-8;
    }

    .footer-wrapper {
      @apply flex-col items-start self-stretch;
    }

    /* Form Section */

    .back-grp {
      @apply hidden;
    }

    .section-container {
      @apply gap-0 self-stretch px-4 py-12;
    }
  }
}