/* ======================================
   ARAUMA NEWSLETTER SYSTEM
   Consistente con button system
   ====================================== */


/* ======================================
   CONTENEDOR
   ====================================== */

.arauma-newsletter {

  width: 100%;
  max-width: var(--arauma-newsletter-max-width);

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: var(--arauma-newsletter-gap);

}


/* ======================================
   INPUT
   ====================================== */

.arauma-newsletter input[type="email"] {

  flex: 1 1 auto;
  min-width: 0;

  height: var(--arauma-btn-height);

  padding: 0 20px;

  border-radius: var(--arauma-radius-sm);

  border: 1px solid var(--arauma-newsletter-input-border);

  background: var(--arauma-newsletter-input-bg);

  color: var(--arauma-white);

  font-family: var(--arauma-btn-font);
  font-size: var(--arauma-btn-font-size);
  font-weight: 500;

  letter-spacing: 0.015em;

  line-height: 1;

  box-sizing: border-box;

  outline: none;
  box-shadow: none;

  appearance: none;
  -webkit-appearance: none;

  transition:
    background var(--arauma-btn-transition),
    border-color var(--arauma-btn-transition),
    box-shadow var(--arauma-btn-transition);

}


/* ======================================
   PLACEHOLDER
   ====================================== */

.arauma-newsletter input[type="email"]::placeholder {

  color: var(--arauma-newsletter-placeholder);
  opacity: 1;

  font-family: var(--arauma-btn-font);
  font-size: var(--arauma-btn-font-size);
  font-weight: 500;

  letter-spacing: 0.015em;

}


/* ======================================
   INPUT HOVER
   ====================================== */

.arauma-newsletter input[type="email"]:hover {

  border-color: var(--arauma-newsletter-input-border-hover);

}


/* ======================================
   INPUT FOCUS
   ====================================== */

.arauma-newsletter input[type="email"]:focus {

  border-color: var(--arauma-newsletter-input-border-focus);

  background: var(--arauma-newsletter-input-bg-focus);

  box-shadow: 0 0 0 2px rgba(199,161,74,0.15);

}


/* ======================================
   BOTÓN
   ====================================== */

.arauma-newsletter button,
.arauma-newsletter input[type="submit"] {

  min-width: var(--arauma-newsletter-btn-width);
  width: var(--arauma-newsletter-btn-width);

  height: var(--arauma-btn-height);

  padding: 0 20px;

  border-radius: var(--arauma-radius-sm);

  border: 1px solid var(--arauma-btn-gold);

  background: var(--arauma-btn-gold);

  color: var(--arauma-btn-text-light);

  font-family: var(--arauma-btn-font);
  font-size: var(--arauma-btn-font-size);

  font-weight: 500;

  letter-spacing: 0.015em;

  line-height: 1;

  text-decoration: none !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  box-sizing: border-box;

  outline: none !important;
  box-shadow: none !important;
  background-image: none !important;

  appearance: none;
  -webkit-appearance: none;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;

}


/* ======================================
   BOTÓN HOVER
   ====================================== */

.arauma-newsletter button:hover,
.arauma-newsletter button:focus,
.arauma-newsletter input[type="submit"]:hover,
.arauma-newsletter input[type="submit"]:focus {

  background: var(--arauma-gold-hover);
  border-color: var(--arauma-gold-hover);

  color: var(--arauma-btn-text-light);

  outline: none !important;
  box-shadow: none !important;
  background-image: none !important;

}


/* ======================================
   BOTÓN ACTIVE
   ====================================== */

.arauma-newsletter button:active,
.arauma-newsletter input[type="submit"]:active {

  transform: translateY(1px);

}


/* ======================================
   RESET EXTRA
   ====================================== */

.arauma-newsletter input[type="email"],
.arauma-newsletter button,
.arauma-newsletter input[type="submit"] {

  margin: 0 !important;

}

.arauma-newsletter button::-moz-focus-inner {

  border: 0;

}


/* ======================================
   RESPONSIVE
   ====================================== */

@media (max-width: 767px) {

  .arauma-newsletter {

    flex-direction: column;
    align-items: stretch;

    max-width: 100%;

    gap: 12px;

  }

  .arauma-newsletter input[type="email"],
  .arauma-newsletter button,
  .arauma-newsletter input[type="submit"] {

    width: 100%;
    min-width: 100%;

  }

}