/* =========================================
   INGCO – Modal buscador móvil (aislado)
   v1.5 – ícono garantizado (PNG/SVG), sin duplicados
   ========================================= */

/* ---------- Variables base ---------- */
:root {
  --ingco-yellow: #ffcc00;
  --ingco-black: #111;
  --ingco-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* Reduce motion si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  .ingco-mobile-search-btn,
  .ingco-search-modal,
  .ingco-search-modal .ingco-ls-form input[type="search"] {
    transition: none !important;
    animation: none !important;
  }
}

/* Bloquear scroll al abrir modal */
.ingco-no-scroll { overflow: hidden; }

/* =========================================
   Botón flotante (FAB)
   ========================================= */
.ingco-mobile-search-btn{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--ingco-yellow);
  border: 2px solid #000;
  color: #111; /* para fallback SVG con currentColor */
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
  z-index: 1060;
  -webkit-tap-highlight-color: transparent;
}

.ingco-mobile-search-btn:hover { background:#ffd633; transform:scale(1.06); }
.ingco-mobile-search-btn:active{ transform:scale(0.96); }

/* Ocultar FAB cuando el modal está abierto (evita que se vea detrás) */
html.ingco-no-scroll .ingco-mobile-search-btn{
  opacity:.0; pointer-events:none; transform:scale(.92);
}

/* Ícono PNG dentro del FAB (negro sobre amarillo, sin filtros) */
.ingco-mobile-search-btn .ingco-mobile-search-icon{
  width:24px; height:24px; display:block;
  object-fit:contain;
  filter:none !important;      /* evita invertir/blanquear */
  opacity:1 !important;
  pointer-events:none;
}

/* Fallback SVG (se muestra solo si el PNG falla) */
.ingco-mobile-search-btn .ingco-mobile-search-svg{
  width:24px; height:24px; display:none; color:#111;
  pointer-events:none;
}
.ingco-mobile-search-btn.noimg .ingco-mobile-search-icon{ display:none; }
.ingco-mobile-search-btn.noimg .ingco-mobile-search-svg{ display:block; }

/* Halo animado */
.ingco-mobile-search-btn.halo::after{
  content:""; position:absolute; inset:-8px; border-radius:999px;
  border:2px solid var(--ingco-black); animation:ingco-halo .6s ease-out;
}
@keyframes ingco-halo{ 0%{transform:scale(1);opacity:.8} 100%{transform:scale(1.8);opacity:0} }

/* Globo "BUSCAR PRODUCTO" */
.ingco-mobile-search-btn::before,
.ingco-mobile-search-btn::after{
  position:absolute; pointer-events:none; opacity:0; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;
}
.ingco-mobile-search-btn::before{
  content:"BUSCAR PRODUCTO";
  bottom:65px; left:50%; transform:translate(-50%,6px);
  background:var(--ingco-yellow); color:#111; font-weight:800; font-size:11px;
  padding:8px 10px; border-radius:10px; white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.25), inset 0 0 0 2px #000; z-index:1061;
}
.ingco-mobile-search-btn::after{
  content:""; bottom:53px; left:50%; transform:translate(-50%,6px) rotate(45deg);
  width:10px; height:10px; background:var(--ingco-yellow);
  box-shadow:inset 0 0 0 2px #000; border-radius:2px; z-index:1061;
}
.ingco-mobile-search-btn:hover::before,
.ingco-mobile-search-btn:hover::after,
.ingco-mobile-search-btn.tip-show::before,
.ingco-mobile-search-btn.tip-show::after{
  opacity:1; transform:translate(-50%,0);
}

/* =========================================
   Modal
   ========================================= */
.ingco-search-modal{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.86); backdrop-filter:blur(2px);
  z-index:1050;
}
.ingco-search-modal.active{ display:flex; animation:ingco-fade .22s ease; }
@keyframes ingco-fade{ from{opacity:0} to{opacity:1} }

/* Caja del modal */
.ingco-search-modal .ingco-search-box{
  width:min(680px,92vw);
  background:#111; border:2px solid var(--ingco-yellow);
  border-radius:18px; padding:16px; box-shadow:var(--ingco-shadow);
  position:relative; contain:layout style paint;
}

/* Botón cerrar */
.ingco-search-modal .ingco-search-close{
  position:absolute; top:10px; right:10px; width:36px; height:36px;
  border-radius:999px; border:2px solid var(--ingco-yellow);
  background:#000; color:var(--ingco-yellow);
  display:grid; place-items:center; font-size:18px; font-weight:900; line-height:1;
}
.ingco-search-modal .ingco-search-close:focus-visible{
  outline:2px solid var(--ingco-yellow); outline-offset:2px;
}

/* =========================================
   Formulario (solo dentro del modal)
   ========================================= */
.ingco-search-modal .ingco-ls-form{
  display:grid; grid-template-columns:1fr auto; gap:10px;
}
.ingco-search-modal .ingco-ls-form input[type="search"]{
  width:100%; font-size:16px; color:#111; background:var(--ingco-yellow);
  padding:14px 16px; border-radius:14px; border:none; outline:2px solid transparent;
  transition:transform .20s ease, box-shadow .20s ease, background .2s ease;
  box-shadow:inset 0 0 0 2px #000;
}
.ingco-search-modal .ingco-ls-form input[type="search"]::placeholder{ color:#3a2f00; }
.ingco-search-modal .ingco-ls-form input[type="search"]:focus{
  transform:scale(1.03);
  box-shadow:0 10px 18px rgba(255,204,0,.25), inset 0 0 0 2px #000;
  background:#ffd633;
}
.ingco-search-modal .ingco-ls-form.typing input[type="search"]{ transform:scale(1.06); }

/* Oculta submits residuales si algún plugin los inyecta */
.ingco-search-modal .ingco-ls-form button,
.ingco-search-modal .ingco-ls-form input[type="submit"]{ display:none !important; }

/* =========================================
   Autosuggest dentro del modal
   ========================================= */
.ingco-ls-suggest{
  margin-top:12px; max-height:52vh; overflow:auto;
  background:#0d0d0d; border:1px solid #2a2a2a; border-radius:14px;
  box-shadow:inset 0 0 0 2px #000; scrollbar-width:thin;
  scrollbar-color:var(--ingco-yellow) #000;
}
.ingco-ls-suggest::-webkit-scrollbar{ width:10px; }
.ingco-ls-suggest::-webkit-scrollbar-track{ background:#000; }
.ingco-ls-suggest::-webkit-scrollbar-thumb{ background:var(--ingco-yellow); border-radius:10px; border:2px solid #000; }

.ingco-ls-suggest__empty{ padding:16px; color:#bbb; font-size:14px; }

.ingco-ls-suggest__item{
  display:grid; grid-template-columns:56px 1fr auto;
  align-items:center; gap:12px; padding:10px 12px;
  border-bottom:1px solid #1a1a1a;
}
.ingco-ls-suggest__item:last-child{ border-bottom:0; }

.ingco-ls-suggest__thumb{
  width:56px; height:56px; border-radius:8px; background:#1a1a1a;
  display:grid; place-items:center; overflow:hidden;
}
.ingco-ls-suggest__thumb img{ width:100%; height:100%; object-fit:cover; }

.ingco-ls-suggest__title{
  color:#f1f1f1; font-size:14px; line-height:1.25; word-break:break-word;
}
.ingco-ls-suggest__price{
  color:var(--ingco-yellow); font-weight:800; font-size:13px; margin-left:8px; white-space:nowrap;
}

.ingco-ls-suggest__item.is-active,
.ingco-ls-suggest__item:hover{
  background:#222; box-shadow:inset 0 0 0 2px var(--ingco-yellow);
}

/* Loading */
.ingco-ls-suggest--loading::after{
  content:"Cargando…"; display:block; padding:12px 16px; color:#bbb; font-size:13px;
}

/* =========================================
   Responsive pequeños
   ========================================= */
@media (max-width:380px){
  .ingco-search-modal .ingco-search-box{ padding:12px; border-radius:14px; }
  .ingco-search-modal .ingco-ls-form input[type="search"]{ font-size:15px; padding:12px 14px; }
}