/* ------------------------------------------------------------ *\
    Klaviyo Form Subscribe
\* ------------------------------------------------------------ */

.klaviyo-form-subscribe {
  & [data-testid="form-row"] {
    gap: 8px !important;

    @media screen and (max-width: 749px) {
      flex-wrap: wrap;
    }

    @media screen and (min-width: 1200px) {
      gap: 12px !important;
    }
  }

  & [data-testid="form-component"] {
    @media screen and (max-width: 749px) {
      flex: 0 0 100% !important;
      width: 100%;
    }
  }

  & [data-testid="form-component"] input {
    font-family: var(--text-font-family) !important;
    padding: 10px 16px !important;
    border-color: #505050;

    @media screen and (max-width: 1199px) {
      font-size: 14px !important;
      height: 50px !important;
    }

    &::placeholder {
      color: #8C8C8C !important;
      font-family: inherit !important;
    }
  }

  & [data-testid="form-component"]:has(.klaviyo-form-button) {
    padding: 0;
  }

  & [data-testid="form-component"]:has(.klaviyo-form-button) .klaviyo-form-button {
    letter-spacing: 0.5px;
    background-color: var(--color-bf-accent, var(--color-black));
    color: var(--color-bf-text, var(--color-white));
    border: 1px solid var(--color-bf-accent, var(--color-black));
    outline: none;
    filter: none;
    width: 100%;
    font-family: var(--text-font-family) !important;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
    padding-top: 0.2rem!important;
    padding-bottom: 0.2rem!important;
    box-sizing: border-box;

    @media screen and (max-width: 1199px) {
      height: 50px;
    }

    @media screen and (min-width: 1200px) {
      height: 54px;
      padding: 0px 32px;
      font-size: 15px;
      letter-spacing: 0 !important
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background-color: var(--color-white)!important;
        border-color: var(--color-bf-accent, var(--color-black));
        color: var(--color-bf-accent, var(--color-black))!important;
      }
    }
  }
}

.klaviyo-form-subscribe--big-desktop {
  & [data-testid="form-component"]:has(.klaviyo-form-button) {
    @media screen and (min-width: 1200px) {
      flex-basis: 41.9%;
    }
  }

  & [data-testid="form-component"]:has(.klaviyo-form-button) .klaviyo-form-button {
    @media screen and (min-width: 1200px) {
      font-size: 20px;
      letter-spacing: 0.5px !important;
    }
  }
}