/* Estilos para el formulario de evento-2 extraídos de home-registro.php */
.evento-wrapper {
  max-width: 880px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

.evento-hero-title {
  font-size: 3.2rem;
  font-weight: 700;
  color: #0d4f8b;
  text-align: center;
  letter-spacing: .5px;
}

.evento-hero-sub {
  font-size: 2.4rem;
  font-weight: 500;
  text-align: center;
  color: #222;
  margin-top: .3rem;
}

.evento-hero-desc {
  font-size: 2rem;
  max-width: 760px;
  margin: .8rem auto 2rem;
  text-align: center;
  line-height: 1.4;
  font-weight: 500;
  color: #000000;
}

#evento-registro {
  scroll-margin-top: 160px;
}

.evento-card {
  background: #fff;
  border: 2px solid #e8c874;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
  border-radius: 8px;
  padding: 2.2rem 2.4rem;
  max-width: 410px;
  margin: 0 auto;
}

.evento-card h3 {
  font-size: 2.0rem;
  text-align: center;
  font-weight: 700;
  margin: 0 0 1.2rem;
}

.evento-form-group {
  margin-bottom: 1rem;
}

.evento-form-group input {
  width: 100%;
  display: block;
  border: 1px solid #000;
  border-radius: 5px;
  /* No establecer padding-left aquí para no pisar el de intl-tel-input */
  padding: .65rem .9rem;
  font-size: 1.7rem;
  font-weight: 300;
}

/* Compatibilidad con intl-tel-input: asegurar espacio para la bandera y código */
.evento-form-group .iti { width: 100%; }
.evento-form-group input.iti__tel-input { padding-left: 52px !important; }
.evento-form-group .iti__flag-container { height: 100%; }

.evento-btn-wrapper {
  text-align: center;
  margin-top: 1.5rem;
}

.evento-btn {
  background: #f8b318;
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  display: inline-block;
  width: auto;
  padding: .9rem 2.5rem;
  font-size: 2rem;
  letter-spacing: .5px;
  border-radius: 5px;
  transition: all .15s;
}

.evento-btn:hover {
  background: #ffc135;
}

.evento-msg {
  margin-top: 1rem;
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
  opacity: 1;
  transition: opacity .4s ease;
}

.evento-msg.ok {
  color: #0d7c2b;
}

.evento-msg.err {
  color: #b10000;
}

.evento-form-group input::placeholder {
  color: #222 !important;
  opacity: 1;
}

/* =============================================================== */
/* Input Search - Selector de Pais       */
/* =============================================================== */

/* Contenedor principal */
.phone-input-container {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid #000;
    border-radius: 5px;
    overflow: hidden;
}

/* Contenedor del selector de país de Select2 */
.phone-input-container .select2-container {
    width: auto !important;
    flex-shrink: 0;
}

/* Estilo del campo seleccionado (el que se ve antes de hacer clic) */
.phone-input-container .select2-selection--single {
    height: 100% !important;
    border: none !important;
    border-right: 1px solid #ccc !important;
    background-color: #f7f7f7;
    border-radius: 0;
    display: flex;
    align-items: center;
}

/* Ocultar la flecha del desplegable */
.phone-input-container .select2-selection__arrow {
    display: none !important;
}

/* Ajustar el padding del contenido seleccionado */
.phone-input-container .select2-selection__rendered {
    padding: 0 10px !important;
}

/* Input para el número de teléfono */
.phone-input-container #whatsapp_number {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: .65rem .9rem;
    font-size: 1.7rem;
    font-weight: 300;
}

/* Estilos para las banderas dentro de Select2 */
.select2-flag {
    margin-right: 8px;
    height: 15px;
    vertical-align: middle;
    border: 1px solid #eee;
    font-size: 1.4rem;
}

/* Estilo del desplegable ancho (sin cambios) */
.select2-dropdown {
    border: 1px solid #aaa;
    border-radius: 4px;
}

.iti__selected-flag{
  font-size: 1.4rem;
}
.iti-mobile .iti__country{
    font-size: 1.8rem;
}

.iti__country{
    font-size: 1.7rem;
}
.select2-search--dropdown .select2-search__field {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
}

.iti .iti__search-input:hover,
.iti .iti__search-input:focus {
  background: #fff !important;
  border: 2px solid #0d4f8b !important;
  outline: none !important;
}

/* PARA MÓVIL */
@media (max-width:600px) {
  .evento-hero-title {
    font-size: 3.0rem;
  }
  /* Sin overrides de posicionamiento del dropdown: se comporta como en desktop */

  .evento-hero-sub {
    font-size: 2.2rem;
  }

  .evento-hero-desc {
  font-size: 1.6rem;

  }

  .evento-form-group input {
      font-size: 1.8rem;
    }
  .phone-row .iti { width: 44vw; max-width: 180px; }
  .phone-row { grid-template-columns: minmax(120px, 180px) 1fr; }
  /* Ancho del contenedor del formulario ajustado al 90% */
  .evento-card {
    padding: 1.8rem 1.4rem;
    max-width: 90%;
  }
  

  .evento-card h3 {
  font-size: 2.4rem;
  text-align: center;
  font-weight: 700;
  margin: 0 0 1.2rem;
}

  .iti__selected-flag{
  font-size: 1.6rem;
}

 /* Aumentar tamaño de texto del dropdown de países en móvil */
 .iti .iti__country-list { font-size: 1.7rem; }
 .iti .iti__country-name { font-size: 1.7rem; }
 .iti .iti__dial-code { font-size: 1.7rem; }
   /* no forzar max-height/position en móvil; lo maneja el plugin */
 .iti .iti__country { padding: 10px 12px; }
 .iti .iti__search-input { font-size: 1.6rem; }
.iti .iti__search-input {
  color: #111 !important;
  background: #fff !important;
  border: 1px solid #ccc !important;
  box-shadow: none !important;
  outline: none !important;
  transition: none !important;
  font-size: 1.7rem !important;
}
.iti .iti__search-input::placeholder {
  color: #111 !important;
  opacity: 1;
}
 .iti .iti__selected-flag { padding-left: 8px; }

/* Aumentar tamaño de texto del dropdown en desktop también */
.iti .iti__country-list { font-size: 1.7rem; }
.iti .iti__country-name { font-size: 1.7rem; }
.iti .iti__dial-code { font-size: 1.7rem; }



/* Respetar estado oculto del plugin en todas las vistas */
ul.iti__country-list.iti__hide { display: none !important; }

/* Cuando el dropdown se adjunta al <body>, aseguramos visibilidad y ancho */
.iti--container {
  position: absolute;
  z-index: 100000; /* sobre modales/headers */
  width: auto; /* lo fijamos por JS, pero evitar restricciones */
}

/* Hover y selección en la lista de países: gris para todos los dispositivos */
.iti .iti__country:hover,
.iti .iti__country.iti__highlight {
  background: #f2f2f2 !important; /* gris claro */
  box-shadow: none !important;
}
.iti .iti__country[aria-selected="true"] {
  background: #e0e0e0 !important; /* gris medio */
  font-weight: 600;
  box-shadow: none !important;
}

/* Input de búsqueda: azul en hover/focus para PC y móvil */
.iti .iti__search-input:hover,
.iti .iti__search-input:focus {
  background: #fff !important;
  border: 2px solid #0d4f8b !important;
  outline: none !important;
}

}