/* ============================================================
   FIBOSEARCH — Seguridad Profesional (beta)
   Look CLARO + AZUL del prototipo. Base estructural de dhd/merca
   (resets de los wrappers del plugin), recoloreada a la paleta SP.
   Paleta:
     --sp-blue      #2ea3f2   (primario / borde campo)
     --sp-navy      #0f5f9e   (headlines, focus)
     --sp-price     #1b7fd0   (precio)
     --sp-hover     #E7F4FE   (hover suave de resultado)
   Sin amarillo, sin navy oscuro de merca.
   ============================================================ */
:root{
  --sp-blue:#2ea3f2; --sp-navy:#0f5f9e; --sp-price:#1b7fd0;
  --sp-hover:#E7F4FE; --sp-line:#d6e9fb; --sp-text:#1b2a3a; --sp-mute:#4d5f75;
}

/* ---- anular el triple wrapper/borde del plugin ---- */
html body .dgwt-wcas-search-wrapp,
html body div.dgwt-wcas-search-wrapp,
html body .dgwt-wcas-search-wrapp.dgwt-wcas-style-pirx,
html body .dgwt-wcas-search-wrapp.dgwt-wcas-style-solaris,
html body .dgwt-wcas-search-wrapp.dgwt-wcas-no-submit,
html body .dgwt-wcas-search-wrapp.dgwt-wcas-has-submit,
html body .dgwt-wcas-search-form,
html body form.dgwt-wcas-search-form,
html body .dgwt-wcas-sf-wrapp,
html body div.dgwt-wcas-sf-wrapp{
  border:none!important; outline:none!important; background:transparent!important;
  box-shadow:none!important; border-radius:0!important; padding:0!important; margin:0!important;
  /* El ancho lo decide el CONTENEDOR padre (.sp-hero-search 860 / .sp-hsearch 720),
     no el plugin: así el input llena y se centra de verdad. Antes: max-width:560px
     capaba el sf-wrapp interno y dejaba el campo estrecho y descuadrado a la izquierda. */
  max-width:100%; width:100%; position:relative!important;
}

/* ---- CAMPO: blanco, borde azul 2px, radio 12px (valores del prototipo) ----
   Especificidad reforzada: incluye el scope pirx y el wrapper, para ganar a
   cualquier skin del plugin sin depender solo del orden de carga. */
html body .dgwt-wcas-search-input,
html body input.dgwt-wcas-search-input[type="search"],
html body .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input,
html body .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input{
  height:62px!important; line-height:62px!important;
  background:#fff!important; background-color:#fff!important; color:#0f5f9e!important;
  border:2px solid #2ea3f2!important; border-radius:12px!important;
  padding:0 20px!important; font-size:18px!important; font-weight:500!important;
  box-shadow:none!important; width:100%!important; box-sizing:border-box!important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
/* quitar la lupa de DENTRO del campo (pisaba el texto) + no dejar submit */
html body .dgwt-wcas-search-icon,
html body .dgwt-wcas-ico-magnifier,
html body .dgwt-wcas-sf-wrapp .dgwt-wcas-search-icon,
html body .dgwt-wcas-search-submit{ display:none!important; }
html body .dgwt-wcas-search-input:hover,
html body input.dgwt-wcas-search-input[type="search"]:hover,
html body .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:hover{
  background:#fff!important; background-color:#fff!important;
}
html body .dgwt-wcas-search-input:focus,
html body input.dgwt-wcas-search-input[type="search"]:focus{
  background:#fff!important; background-color:#fff!important; color:#0f5f9e!important;
  border-color:var(--sp-navy)!important;
  box-shadow:0 0 0 3px rgba(46,163,242,.20)!important; outline:none!important;
}
html body .dgwt-wcas-search-input::placeholder,
html body input.dgwt-wcas-search-input[type="search"]::placeholder{ color:#9aa4b0!important; opacity:1!important; font-style:normal!important; }

/* ---- LUPA NATIVA DEL NAVEGADOR ----
   input[type=search] pinta decoración PROPIA del user-agent (lupa en Safari, botón de cancelar,
   results-button…) que NO está en el DOM ni en nuestro CSS y que Chromium headless no siempre
   renderiza igual que el navegador de escritorio. Se anula aquí; y a prueba de balas el input
   pasa a type="text" vía el filtro dgwt/wcas/form/html (functions.php), con lo que ningún
   navegador puede pintarle decoración nativa. NO reintroducir background-image aquí. */
html body .dgwt-wcas-search-input,
html body input.dgwt-wcas-search-input[type="search"],
html body input.dgwt-wcas-search-input[type="text"]{
  -webkit-appearance:none!important; appearance:none!important; background-image:none!important;
}
html body .dgwt-wcas-search-input::-webkit-search-decoration,
html body .dgwt-wcas-search-input::-webkit-search-results-button,
html body .dgwt-wcas-search-input::-webkit-search-results-decoration,
html body .dgwt-wcas-search-input::-webkit-search-cancel-button{
  -webkit-appearance:none!important; appearance:none!important; display:none!important;
}

/* ---- neutralizar el overlay oscuro del plugin (darkoverl-on) sobre el form ---- */
html body .dgwt-wcas-search-wrapp.dgwt-wcas-search-darkoverl-on .dgwt-wcas-search-form,
html body .dgwt-wcas-search-form,
html body .dgwt-wcas-sf-wrapp{ background:transparent!important; background-color:transparent!important; }

/* ---- LUPA: NO existe en SP. La superficie visual va SIN icono de lupa (decisión Oscar).
   El magnifier del plugin se elimina del DOM (filtro dgwt/wcas/form/html en functions.php)
   Y se oculta arriba con display:none. NO reintroducir aquí ninguna regla que lo pinte
   (fill/color/background-image/content). Guardián en CLAUDE.md §diseño + verify-diseno.js. ---- */
html body .dgwt-wcas-preloader{ background:var(--sp-blue)!important; }
/* sin botón submit (show_submit_button=off) */
html body .dgwt-wcas-search-submit{ display:none!important; }

/* ---- DESPLEGABLE: claro ---- */
html body .dgwt-wcas-suggestions-wrapp,
html body div.dgwt-wcas-suggestions-wrapp{
  background:#fff!important; color:var(--sp-text)!important;
  border:1px solid var(--sp-line)!important; border-radius:12px!important;
  box-shadow:0 12px 32px rgba(15,95,158,.14)!important; margin-top:8px!important;
  padding:6px 0!important; overflow:hidden;
}

/* ---- headlines de sección: PRODUCTOS / CATEGORÍAS ---- */
html body .dgwt-wcas-suggestion-headline,
html body .dgwt-wcas-st-headline,
html body .dgwt-wcas-st--direct-headline{
  color:var(--sp-navy)!important; background:#f4faff!important;
  font-size:11px!important; font-weight:700!important; letter-spacing:.06em!important;
  text-transform:uppercase!important; padding:8px 16px!important;
  border:none!important; border-top:1px solid var(--sp-line)!important;
}
html body .dgwt-wcas-suggestion-headline:first-child,
html body .dgwt-wcas-suggestions-wrapp > *:first-child .dgwt-wcas-st-headline{ border-top:none!important; }

/* ---- cada resultado ---- */
html body .dgwt-wcas-suggestion{
  background:#fff!important; color:var(--sp-text)!important;
  padding:9px 16px!important; border:none!important; cursor:pointer;
  display:flex; align-items:center; gap:12px;
}
html body .dgwt-wcas-suggestion:hover,
html body .dgwt-wcas-suggestion-focused{ background:var(--sp-hover)!important; }

/* miniatura */
html body .dgwt-wcas-suggestion .dgwt-wcas-pi,
html body .dgwt-wcas-si-thumb,
html body .dgwt-wcas-suggestion img{
  width:44px!important; height:44px!important; object-fit:contain!important;
  background:#fff!important; border:1px solid var(--sp-line)!important;
  border-radius:8px!important; flex:0 0 44px!important; padding:2px;
}
/* nombre */
html body .dgwt-wcas-st-title{ color:var(--sp-text)!important; font-weight:600!important; font-size:14px!important; }
html body .dgwt-wcas-highlight{ color:var(--sp-navy)!important; background:transparent!important; font-weight:700!important; }
/* SKU */
html body .dgwt-wcas-st-sku,
html body .dgwt-wcas-sku{ color:var(--sp-mute)!important; font-size:12px!important; }
/* precio */
html body .dgwt-wcas-st-price,
html body .dgwt-wcas-st--price,
html body .dgwt-wcas-price,
html body .dgwt-wcas-price ins{ color:var(--sp-price)!important; font-weight:700!important; background:transparent!important; text-decoration:none!important; }
html body .dgwt-wcas-price del{ color:var(--sp-mute)!important; opacity:.75; }

/* "ver todos los resultados" */
html body .dgwt-wcas-suggestion-more{ color:var(--sp-navy)!important; background:#f4faff!important; font-weight:600!important; }
html body .dgwt-wcas-suggestion-more:hover{ background:var(--sp-hover)!important; }

/* ---- caja de detalle (show_details_box=on) ---- */
html body .dgwt-wcas-details-wrapp{ background:#fff!important; color:var(--sp-text)!important; border-left:1px solid var(--sp-line)!important; }
html body .dgwt-wcas-details-product-title,
html body .dgwt-wcas-details-title,
html body .dgwt-wcas-pd-title{ color:var(--sp-text)!important; }
html body .dgwt-wcas-pd-price,
html body .dgwt-wcas-details-product-price{ color:var(--sp-price)!important; font-weight:700!important; }
html body .dgwt-wcas-pd-sku,
html body .dgwt-wcas-details-product-sku{ color:var(--sp-mute)!important; }
html body .dgwt-wcas-pd-addtc-btn{ background:var(--sp-blue)!important; border-color:var(--sp-blue)!important; color:#fff!important; border-radius:8px!important; }
html body .dgwt-wcas-pd-addtc-btn:hover{ background:var(--sp-navy)!important; border-color:var(--sp-navy)!important; }

/* móvil */
@media (max-width:768px){
  html body .dgwt-wcas-search-input{ font-size:16px!important; }
}