/* Cart conversion follow-up: subscription input and primary checkout CTA. */

html#etc-ds#etc-ds .subscription-form-vamshop .input-group > input.form-control[type="email"] {
  min-width: 0;
  padding-left: 44px !important;
}

html#etc-ds#etc-ds .subscription-form-vamshop .input-group > .fa-envelope {
  pointer-events: none;
}

html#etc-ds#etc-ds #ajax_cart .etc-cart-checkout-cta {
  position: relative !important;
  isolation: isolate;
  min-height: 54px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  color: #fff !important;
}

html#etc-ds#etc-ds #ajax_cart .etc-cart-checkout-cta::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid rgba(14, 122, 84, 0.46);
  border-color: rgb(var(--brand, 14 122 84) / 0.46);
  border-radius: calc(var(--ds-r, 10px) + 3px);
  box-shadow: 0 0 0 0 rgba(14, 122, 84, 0.2);
  pointer-events: none;
  opacity: 0;
  animation: etc-cart-checkout-pulse 4.8s cubic-bezier(0.2, 0.65, 0.3, 1) 1s infinite;
}

html#etc-ds#etc-ds #ajax_cart .etc-cart-checkout-cta:is(:hover, :focus-visible)::after {
  animation-play-state: paused;
  opacity: 0;
}

html#etc-ds#etc-ds #ajax_cart .etc-cart-checkout-cta:focus-visible {
  outline: 3px solid rgba(14, 122, 84, 0.28) !important;
  outline-offset: 4px;
}

@keyframes etc-cart-checkout-pulse {
  0% {
    opacity: 0.56;
    transform: scale(0.985);
    box-shadow: 0 0 0 0 rgba(14, 122, 84, 0.2);
  }
  14% {
    opacity: 0;
    transform: scale(1.045);
    box-shadow: 0 0 0 9px rgba(14, 122, 84, 0);
  }
  15%,
  100% {
    opacity: 0;
    transform: scale(1.045);
    box-shadow: 0 0 0 9px rgba(14, 122, 84, 0);
  }
}

@media (max-width: 575.98px) {
  html#etc-ds#etc-ds #ajax_cart .etc-cart-checkout-cta {
    min-height: 52px;
    font-size: 16px;
  }
}

@media (max-width: 339.98px) {
  html#etc-ds#etc-ds .subscription-form-vamshop .input-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  html#etc-ds#etc-ds .subscription-form-vamshop .input-group > input.form-control[type="email"] {
    grid-column: 1;
    width: 100% !important;
  }

  html#etc-ds#etc-ds .subscription-form-vamshop .input-group > .input-group-append,
  html#etc-ds#etc-ds .subscription-form-vamshop .input-group > button {
    grid-column: 1;
    width: 100%;
    margin: 0 !important;
  }

  html#etc-ds#etc-ds .subscription-form-vamshop .input-group > .input-group-append .btn {
    width: 100%;
  }

  html#etc-ds#etc-ds .subscription-form-vamshop .input-group > .fa-envelope {
    top: 26px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html#etc-ds#etc-ds #ajax_cart .etc-cart-checkout-cta::after {
    display: none;
    animation: none !important;
  }
}
