/* ============================================================
   DB Search — estilo MONOIC (panel superior)
   ============================================================ */

#db-search-panel{
  position:fixed;
  inset:0;
  z-index:999999;

  /* overlay oscuro */
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .18s ease, visibility .18s ease;
}

#db-search-panel.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* el “sheet” de arriba */
#db-search-panel .db-search-inner{
  width:100%;
  background: rgba(0,0,0,.72);
  border-bottom: 1px solid rgba(255,255,255,.10);

  padding: 26px 40px 34px;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);

  transform: translateY(-18px);
  transition: transform .18s ease;
}

#db-search-panel.open .db-search-inner{
  transform: translateY(0);
}

/* top row: buscador izquierda, cerrar derecha */
#db-search-panel .db-search-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

/* área del input */
#db-search-panel .db-search-field{
  flex: 1;
  min-width: 0;
  max-width: 560px;          /* similar a monoic */
}

/* botón cerrar */
#db-search-panel .db-search-close{
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  border-radius:16px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
}

/* ============================================================
   FiboSearch: input elegante tipo “línea” (no caja blanca)
   ============================================================ */

/* wrapper */
#db-search-panel .dgwt-wcas-search-wrapp{
  max-width: 560px;
}

/* input: transparente + underline */
#db-search-panel .dgwt-wcas-search-wrapp input[type="search"],
#db-search-panel .dgwt-wcas-search-wrapp input[type="text"],
#db-search-panel input[type="search"],
#db-search-panel input[type="text"]{
  width:100% !important;
  font-size:12px !important;
  padding: 10px 2px 12px !important;

  background:transparent !important;
  color:#fff !important;
  caret-color:#fff !important;

  border:0 !important;
  border-bottom: 1px solid rgba(255,255,255,.30) !important;
  border-radius:0 !important;

  box-shadow:none !important;
  outline:none !important;
}

/* placeholder */
#db-search-panel input::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* quitar lupas/botones internos del plugin (la “lupa extra”) */
#db-search-panel .dgwt-wcas-ico-magnifier,
#db-search-panel .dgwt-wcas-ico-magnifier-handler,
#db-search-panel .dgwt-wcas-ico-loupe,
#db-search-panel .dgwt-wcas-search-submit,
#db-search-panel .dgwt-wcas-search-submit-wrapper,
#db-search-panel .dgwt-wcas-preloader{
  display:none !important;
}

/* ============================================================
   “Búsquedas populares” estilo monoic (texto + chips)
   ============================================================ */

#db-search-panel .db-search-pop{
  margin-top: 18px;
  max-width: 720px;
}

#db-search-panel .db-search-pop-title{
  margin:0 0 10px 0;
  color: rgba(255,255,255,.70);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#db-search-panel .db-search-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

#db-search-panel .db-search-tag{
  color:#fff;
  padding:10px 14px;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;

  border:none !important;
  outline:none !important;
  background:transparent !important;
  box-shadow:none !important;
  appearance:none;
  -webkit-appearance:none;
}

#db-search-panel .db-search-tag:hover{
  background: rgba(255,255,255,.10);
}

/* ============================================================
   Cerrar al hacer click fuera del sheet
   (esto es solo visual; el JS ya lo hace)
   ============================================================ */
#db-search-panel::before{
  content:"";
  position:absolute;
  inset:0;
}

/* Responsive */
@media (max-width: 768px){
  #db-search-panel .db-search-inner{
    padding: 20px 16px 26px;
  }
  #db-search-panel .db-search-field{
    max-width: none;
  }
}

#db-search-panel .db-search-ico{ display:none !important; }
#db-search-panel .dgwt-wcas-ico-magnifier,
#db-search-panel .dgwt-wcas-search-submit{ display:none !important; }


/* =========================================
   FIX: quitar caja blanca de FiboSearch
   y dejar SOLO línea estilo Monoic
   ========================================= */

#db-search-panel .dgwt-wcas-search-wrapp,
#db-search-panel .dgwt-wcas-search-wrapp *{
  background: transparent !important;
  box-shadow: none !important;
}

#db-search-panel .dgwt-wcas-search-wrapp{
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* este suele ser el que pinta la “caja” */
#db-search-panel .dgwt-wcas-search-form,
#db-search-panel form.dgwt-wcas-search-form{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* a veces el input viene dentro de un contenedor con fondo */
#db-search-panel .dgwt-wcas-search-input-wrapper,
#db-search-panel .dgwt-wcas-input-wrapper,
#db-search-panel .dgwt-wcas-search-inner{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* INPUT: línea visible + texto visible */
#db-search-panel .dgwt-wcas-search-input,
#db-search-panel input.dgwt-wcas-search-input{
  background: transparent !important;
  color: #fff !important;
  caret-color: #fff !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 0 !important;

  padding: 10px 2px 12px !important;
  height: auto !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Placeholder blanco suave */
#db-search-panel .dgwt-wcas-search-input::placeholder,
#db-search-panel input.dgwt-wcas-search-input::placeholder{
  color: rgba(255,255,255,.55) !important;
  opacity: 1 !important;
}

/* Quitar iconos/botones internos del plugin (lupas extra) */
#db-search-panel .dgwt-wcas-search-submit,
#db-search-panel .dgwt-wcas-search-submit-wrapper,
#db-search-panel .dgwt-wcas-ico-magnifier,
#db-search-panel .dgwt-wcas-ico-magnifier-handler,
#db-search-panel .dgwt-wcas-preloader{
  display:none !important;
}
/* si el plugin mete un fondo blanco por resultados/overlay */
#db-search-panel .dgwt-wcas-search-wrapp,
#db-search-panel .dgwt-wcas-search-wrapp .dgwt-wcas-search-form,
#db-search-panel .dgwt-wcas-search-wrapp .dgwt-wcas-search-input-wrapper{
  background-color: transparent !important;
}

@media (max-width:1024px){

  body.dgwt-wcas-open,
  body.dgwt-wcas-overlay-mobile-open,
  body.dgwt-wcas-mobile-open{
    overflow:auto !important;
    position:static !important;
  }

  .dgwt-wcas-overlay-mobile,
  .dgwt-wcas-overlay,
  .dgwt-wcas-detached-overlay,
  .dgwt-wcas-detached,
  .dgwt-wcas-detached-form,
  .dgwt-wcas-mobile,
  .dgwt-wcas-mobile-form,
  .dgwt-wcas-full-screen,
  .dgwt-wcas-fullscreen,
  .dgwt-wcas-close,
  .dgwt-wcas-preloader{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    width:0 !important;
    height:0 !important;
    max-width:0 !important;
    max-height:0 !important;
    overflow:hidden !important;
  }
}