/* =========================
   Ecotic FAQ
   - Accordion estilo Elementor (details/summary)
   - Buscador AJAX
   ========================= */

/* ---------- Accordion ---------- */
.ecotic-faq-accordion.elementor-widget-n-accordion{ width:100%; }
.ecotic-faq-accordion .e-n-accordion details > summary::-webkit-details-marker{ display:none; }

.ecotic-faq-accordion .e-n-accordion-item{
  display:flex;
  flex-direction:column;
  position:relative;
}

/*
  Los navegadores aplican un style UA que rompe el cierre animado:
  details:not([open]) > *:not(summary) { display:none; }
  Lo anulamos SOLO para nuestro contenido.
*/
.ecotic-faq-accordion details.e-n-accordion-item > .ecotic-faq-accordion__content{
  display:block !important;
  margin-bottom: 25px;
}

/* Título */
.ecotic-faq-accordion .e-n-accordion-item-title{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;

  border:2px solid #002855;
  border-radius:20px;
  background:#f8f9fa;
  color:#002855;
  font-weight:700;
  padding:10px 20px;
  margin-bottom:10px;
  transition:all .3s ease;
}

.ecotic-faq-accordion .e-n-accordion-item-title-header{
  display:flex;
  align-items:center;
  flex:1;
  min-width:0;
}

.ecotic-faq-accordion .e-n-accordion-item-title-text{
  text-align:left;
  width:100%;
  font-size:1rem;
  line-height:1.35;
}

.ecotic-faq-accordion .e-n-accordion-item-title-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:15px;
  flex-shrink:0;
}

.ecotic-faq-accordion .ecotic-faq-icon{
  display:inline-flex;
  width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:18px;
  color:#002855;
}

/* Toggle iconos */
.ecotic-faq-accordion .e-n-accordion-item[open] .e-opened{ display:flex; }
.ecotic-faq-accordion .e-n-accordion-item[open] .e-closed{ display:none; }
.ecotic-faq-accordion .e-n-accordion-item:not([open]) .e-opened{ display:none; }
.ecotic-faq-accordion .e-n-accordion-item:not([open]) .e-closed{ display:flex; }

/* Contenido (transparente + animable) */
.ecotic-faq-accordion .ecotic-faq-accordion__content{
  background:transparent;
  border:none;
  border-radius:0;
  margin-top:5px;
  padding:0 10px 10px 10px;

  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:
    max-height 1.2s cubic-bezier(.4,0,.2,1),
    opacity .6s ease;
}

.ecotic-faq-accordion .e-n-accordion-item[open] .ecotic-faq-accordion__content{ opacity:1; }

.ecotic-faq-accordion .ecotic-faq-accordion__content .elementor-widget-container{
  background:transparent;
  padding-top:10px;
}


/* ---------- Buscador ---------- */
.ecotic-faq-search{
  display:flex;
  gap:12px;
  align-items:center;
  width:100%;
  margin:0 0 12px 0;
}

.ecotic-faq-search__wrap{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:10px;

  /* border:2px solid #002855; */
  border-radius:20px;
  background:#f8f9fa;
  padding:10px 16px;
  min-width:0;
}

.ecotic-faq-search__icon{
  color:#002855;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.ecotic-faq-search__input{
  width:100%;
  min-width:0;
  border:0;
  outline:none;
  background:transparent;
  color:#002855;
  font-weight:700;
  font-size:1rem;
  line-height:1.35;
  padding:0;
}

.ecotic-faq-search__input::placeholder{
  color:rgba(0,40,85,.65);
  font-weight:600;
}

.ecotic-faq-search__btn{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border:2px solid #002855;
  border-radius:20px;
  background:#002855;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:opacity .2s ease;
  padding:0;
}

.ecotic-faq-search__btn:hover{ opacity:.92; }

.ecotic-faq-search__meta{
  margin:0 0 14px 0;
  color:#002855;
  font-weight:700;
}

.ecotic-faq-search-results__empty{
  padding:8px 0 16px 0;
  color:#002855;
}



/* === Ecotic FAQ Search: layout + colores === */
.ecotic-faq-searchbox .ecotic-faq-search{
  display:flex;
  gap:12px;
  align-items:stretch;
  width:100%;
  flex-wrap:nowrap;
}

/* Input (resto del espacio) */
.ecotic-faq-searchbox .ecotic-faq-search__wrap{
  flex:1 1 auto;
  /* border:2px solid #65BC28 !important; */
  background:#fff !important;
}

/* Icono y texto en verde */
.ecotic-faq-searchbox .ecotic-faq-search__icon{
  color:#65BC28 !important;
}
.ecotic-faq-searchbox .ecotic-faq-search__input{
  color:#65BC28 !important;
}
.ecotic-faq-searchbox .ecotic-faq-search__input::placeholder{
  color:rgba(101,188,40,.75) !important;
}

/* Botón (15% con mínimo 150px) */
.ecotic-faq-searchbox .ecotic-faq-search__btn{
  flex:0 0 15% !important;
  min-width:50px !important;
  width:50px !important;
  max-width: 50px !important;

  height:auto !important;
  padding:5px 5px !important;

  border:2px solid #65BC28 !important;
  background:#fff !important;
  color:#65BC28 !important;

  /* display:flex !important; */
  display: none !important; /* Lo ocultamos de momento */
  align-items:center;
  justify-content:center;

  border-radius:50px;
  cursor:pointer;

  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
  box-shadow:none !important;
  outline:0 !important;
}

/* Quita el hover “rojo” del tema (y cualquier opacity rara) */
.ecotic-faq-searchbox .ecotic-faq-search__btn:hover{
  opacity:1 !important;
}

/* Hover / Focus / Active = invertido */
.ecotic-faq-searchbox .ecotic-faq-search__btn:hover,
.ecotic-faq-searchbox .ecotic-faq-search__btn:focus,
.ecotic-faq-searchbox .ecotic-faq-search__btn:focus-visible,
.ecotic-faq-searchbox .ecotic-faq-search__btn:active{
  background:#65BC28 !important;
  color:#fff !important;
  border-color:#65BC28 !important;
}

/* Móvil: si no cabe, que baje el botón debajo (evita montarse) */
@media (max-width: 520px){
  .ecotic-faq-searchbox .ecotic-faq-search{
    flex-wrap:wrap;
  }
  .ecotic-faq-searchbox .ecotic-faq-search__btn{
    flex:1 1 100% !important;
    min-width:0 !important;
  }
}