/*==================================================
NEWSLETTER FORM
==================================================*/

.cricma-newsletter-form {

  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  position: relative;

}

.newsletter-input {

  flex: 1;
  min-width: 280px;

  height: 58px;

  padding: 0 20px;

  border: 2px solid transparent;

  border-radius: 12px;

  background: #fff;

  color: var(--heading);

  font-size: 16px;

  outline: none;

  transition: .35s ease;

  box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

}

.newsletter-input::placeholder {

  color: #8b8b8b;

}

.newsletter-input:focus {

  border-color: var(--secondary);

  box-shadow: 0 0 0 4px rgba(255, 122, 0, .15);

}

.newsletter-submit {

  position: relative;

  height: 58px;

  padding: 0 34px;

  border: none;

  border-radius: 12px;

  background: var(--secondary);

  color: #fff;

  font-size: 16px;

  font-weight: 600;

  cursor: pointer;

  transition: .3s ease;

  overflow: hidden;

}

.newsletter-submit:hover {

  background: var(--secondary-dark);

  transform: translateY(-2px);

  box-shadow: 0 10px 25px rgba(255, 122, 0, .35);

}

.newsletter-submit:active {

  transform: translateY(0);

}

.newsletter-submit:disabled {

  cursor: not-allowed;

  opacity: .8;

}

/*==================================================
LOADING
==================================================*/

.newsletter-submit.loading {

  pointer-events: none;

}

.newsletter-submit.loading::after {

  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 18px;
  height: 18px;

  margin-left: -9px;
  margin-top: -9px;

  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;

  border-radius: 50%;

  animation: newsletterSpin .8s linear infinite;

}

.newsletter-submit.loading span {

  visibility: hidden;

}

@keyframes newsletterSpin {

  to {

    transform: rotate(360deg);

  }

}

/*==================================================
MESSAGES
==================================================*/

.newsletter-message {

  width: 100%;

  margin-bottom: 15px;

  border-radius: 10px;

  padding: 14px 18px;

  display: none;

  font-size: 15px;

  transition: .3s;

}

.newsletter-message.success {

  display: block;

  background: #e9f9ef;

  color: #17863c;

  border-left: 4px solid #1eb955;

}

.newsletter-message.error {

  display: block;

  background: #fff1f1;

  color: #d62f2f;

  border-left: 4px solid #e63946;

}

/*==================================================
HONEYPOT
==================================================*/

.newsletter-honeypot {

  display: none !important;

}

/*==================================================
MOBILE
==================================================*/

@media(max-width:768px) {

  .cricma-newsletter-form {

    flex-direction: column;

    align-items: stretch;

  }

  .newsletter-input {

    width: 100%;
    min-width: 100%;
	padding: 20px;
  }

  .newsletter-submit {

    width: 100%;

  }

}