/* =================================================
   EMAV AGE VERIFY – CSS FINAL RESPONSIVE (GREEN CARD)
   (Compatible con Elementor / Hello Theme)
   ================================================= */

/* =========================
   CARGAR RUBIK (BOLD)
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap');

/* =========================
   OVERLAY
   ========================= */
#emav-overlay-wrap{
  padding: 80px;
  background-color: #25201d !important;
}

/* =========================
   CONTENEDOR PRINCIPAL (CARD)
   ========================= */
#emav-overlay{
  padding: 40px;
  
  text-align: center !important;

  max-width: 980px;
  width: 100%;
  margin: 0 auto;

  border-radius: 18px;
  
}

/* =========================
   TÍTULO
   ========================= */
#emav-overlay h3{
  font-family: "Rubik" !important;
  font-weight: 700 !important;
  font-size: 64px !important;
  line-height: 1.05 !important;
  color: #ffffff !important;
  margin: 0 0 22px 0 !important;

  position: relative;
  padding-top: 0 !important; /* ya no necesitamos padding-top fijo */

  --e-global-typography-primary-font-family: "Rubik";
  --e-global-typography-primary-font-weight: 700;
}

/* =========================
   ÍCONO encima del título
   ========================= */
#emav-overlay h3::before{
  content: "";
  display: block;

  width: 140px;
  height: 140px;

  margin: 0 auto 16px auto;

  background-image: url("https://animocaribe.com/wp-content/uploads/2025/12/Group.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* =========================
   TEXTO DEBAJO DEL TÍTULO
   ========================= */
#emav-overlay h3::after{
  content: "THIS SITE REQUIRES A MINIMUM AGE OF 21 TO ENTER.";
  display: block;

  margin-top: 18px;

  font-family: "Rubik" !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  color: rgba(255,255,255,0.9) !important;
}

/* =========================
   CONTENEDOR DE BOTONES
   ========================= */
#emav-overlay #emav_verify_form .emav_buttons{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important; /* clave: si no entra, baja */
}

/* =========================
   ELIMINAR SEPARADOR DEL PLUGIN
   ========================= */
#emav-overlay .emav_buttons_sep,
#emav-overlay .emav_buttons_sep *,
#emav-overlay .emav_buttons_sep::before,
#emav-overlay .emav_buttons_sep::after{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  content: none !important;
  visibility: hidden !important;
}

/* =========================
   BOTONES (INPUTS REALES)
   ========================= */
#emav-overlay #emav_verify_form .emav_buttons input{
  font-family: "Rubik" !important;
  font-weight: 700 !important;
  font-size: 20px !important;

  --e-global-typography-primary-font-family: "Rubik";
  --e-global-typography-primary-font-weight: 700;

  padding: 14px 28px !important;
  min-width: 220px !important;

  border: none !important;
  border-radius: 200px !important;
  margin: 0 !important;

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

  cursor: pointer !important;
  box-shadow: none !important;

  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/* =========================
   BOTÓN PRINCIPAL – I am 21 or older
   ========================= */
#emav-overlay #emav_verify_form input#emav_confirm_age{
  background-color: #FF414E !important;
  color: #ffffff !important;
}

/* =========================
   BOTÓN SECUNDARIO – I am under 21
   ========================= */
#emav-overlay #emav_verify_form input#emav_not_confirm_age{
  background-color: transparent !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

/* =========================
   HOVER
   ========================= */
#emav-overlay #emav_verify_form .emav_buttons input:hover{
  filter: brightness(0.95) !important;
  transform: translateY(-1px);
}

/* =========================
   DISCLAIMER
   ========================= */
#emav-overlay .disclaimer{
  margin-top: 10px !important;
  font-size: 12px !important;
  color: #ffffff !important;
  opacity: 0.75 !important;
  text-align: center !important;
}

/* =================================================
   RESPONSIVE: TABLET
   ================================================= */
@media (max-width: 1024px){
  #emav-overlay-wrap{
    padding: 48px;
  }

  #emav-overlay{
    padding: 32px;
    max-width: 900px;
  }

  #emav-overlay h3{
    font-size: 52px !important;
  }

  #emav-overlay h3::before{
    width: 120px;
    height: 120px;
    margin-bottom: 14px;
  }

  #emav-overlay h3::after{
    font-size: 16px !important;
  }

  #emav-overlay #emav_verify_form .emav_buttons input{
    font-size: 18px !important;
    min-width: 200px !important;
    padding: 13px 24px !important;
  }
}

/* =================================================
   RESPONSIVE: MOBILE
   ================================================= */
@media (max-width: 767px){
  #emav-overlay-wrap{
    padding: 18px;
  }

  #emav-overlay{
    padding: 22px;
    border-radius: 16px;
  }

  #emav-overlay h3{
    font-size: 38px !important;
    line-height: 1.08 !important;
    margin-bottom: 16px !important;
  }

  #emav-overlay h3::before{
    width: 96px;
    height: 96px;
    margin: 0 auto 12px auto;
  }

  #emav-overlay h3::after{
    font-size: 14px !important;
    margin-top: 12px;
  }

  /* Botones: uno debajo del otro y full width */
  #emav-overlay #emav_verify_form .emav_buttons{
    flex-direction: column !important;
    gap: 10px !important;
  }

  #emav-overlay #emav_verify_form .emav_buttons input{
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
    padding: 14px 18px !important;
  }

  #emav-overlay .disclaimer{
    font-size: 11px !important;
    margin-top: 12px !important;
  }
}

/* =================================================
   RESPONSIVE: SMALL MOBILE (muy chicos)
   ================================================= */
@media (max-width: 380px){
  #emav-overlay h3{
    font-size: 32px !important;
  }

  #emav-overlay h3::before{
    width: 84px;
    height: 84px;
  }

  #emav-overlay #emav_verify_form .emav_buttons input{
    font-size: 15px !important;
  }
}