/* Buscador con el aspecto de la cabecera.
   El panel venia con z-index 997 y la cabecera tiene 998: quedaba por debajo y
   tapaba el campo. Y el desplegable salia con los colores por defecto del
   plugin, que no pegan con el skin monocromo. */

/* --- panel desplegable de la cabecera --- */
.icf-v2 .v2hs{
	z-index:1001 !important;
	background:rgba(20,20,20,.94) !important;
	-webkit-backdrop-filter:blur(14px);
	backdrop-filter:blur(14px);
	border:1px solid rgba(255,255,255,.10);
	border-radius:26px !important;
	padding:10px !important;
	box-shadow:0 22px 60px rgba(0,0,0,.45) !important;
}

/* --- campo de texto: misma pildora que la cabecera --- */
.icf-v2 .v2hs .dgwt-wcas-search-input,
.icf-v2 .v2m__search .dgwt-wcas-search-input{
	background:rgba(255,255,255,.08) !important;
	border:1px solid rgba(255,255,255,.16) !important;
	color:#fff !important;
	border-radius:999px !important;
	height:46px !important;
	padding-left:18px !important;
	font:600 14px/1 'Bricolage Grotesque',sans-serif !important;
	box-shadow:none !important;
}
.icf-v2 .v2hs .dgwt-wcas-search-input::placeholder,
.icf-v2 .v2m__search .dgwt-wcas-search-input::placeholder{color:rgba(255,255,255,.55) !important}
.icf-v2 .v2hs .dgwt-wcas-search-input:focus,
.icf-v2 .v2m__search .dgwt-wcas-search-input:focus{border-color:rgba(255,255,255,.4) !important;outline:none !important}
.icf-v2 .v2hs .dgwt-wcas-search-icon,
.icf-v2 .v2hs .dgwt-wcas-search-icon svg,
.icf-v2 .v2m__search .dgwt-wcas-search-icon svg{fill:rgba(255,255,255,.75) !important;color:rgba(255,255,255,.75) !important}
.icf-v2 .dgwt-wcas-close{color:rgba(255,255,255,.7) !important;border:0 !important;background:transparent !important}
.icf-v2 .dgwt-wcas-close svg{fill:rgba(255,255,255,.7) !important}

/* --- lista de resultados --- */
.icf-v2 .dgwt-wcas-suggestions-wrapp,
.icf-v2 .dgwt-wcas-details-wrapp{
	background:rgba(18,18,19,.98) !important;
	-webkit-backdrop-filter:blur(14px);
	backdrop-filter:blur(14px);
	border:1px solid rgba(255,255,255,.10) !important;
	border-radius:20px !important;
	box-shadow:0 22px 60px rgba(0,0,0,.5) !important;
	padding:6px !important;
	scrollbar-width:thin;
	scrollbar-color:rgba(255,255,255,.25) transparent;
}
.icf-v2 .dgwt-wcas-suggestions-wrapp::-webkit-scrollbar{width:8px}
.icf-v2 .dgwt-wcas-suggestions-wrapp::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:8px}

/* cada resultado */
.icf-v2 .dgwt-wcas-suggestion{
	border:0 !important;
	border-radius:12px !important;
	padding:9px 10px !important;
	color:#fff !important;
	transition:background .15s ease;
}
.icf-v2 .dgwt-wcas-suggestion *{font-family:'Bricolage Grotesque',sans-serif !important}
.icf-v2 .dgwt-wcas-suggestion:hover,
.icf-v2 .dgwt-wcas-suggestion-selected,
.icf-v2 .dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected{background:rgba(255,255,255,.10) !important}
.icf-v2 .dgwt-wcas-st__title,
.icf-v2 .dgwt-wcas-st--title,
.icf-v2 .dgwt-wcas-suggestion .dgwt-wcas-st{color:#fff !important;font-weight:600 !important;font-size:13.5px !important}
.icf-v2 .dgwt-wcas-suggestion strong,
.icf-v2 .dgwt-wcas-suggestion b{color:#fff !important;font-weight:800 !important}

/* migas y textos secundarios */
.icf-v2 .dgwt-wcas-st-breadcrumbs,
.icf-v2 .dgwt-wcas-st-breadcrumbs *,
.icf-v2 .dgwt-wcas-sd{color:rgba(255,255,255,.5) !important;font-size:11.5px !important}

/* precios */
.icf-v2 .dgwt-wcas-sp,
.icf-v2 .dgwt-wcas-sp *{color:#fff !important;font-weight:700 !important;font-size:13px !important}
.icf-v2 .dgwt-wcas-sp del,
.icf-v2 .dgwt-wcas-sp del *{color:rgba(255,255,255,.42) !important;font-weight:400 !important}
.icf-v2 .dgwt-wcas-sp ins{text-decoration:none !important}

/* cabeceras CATEGORIAS / PRODUCTOS */
.icf-v2 .dgwt-wcas-suggestion-headline,
.icf-v2 .dgwt-wcas-suggestion-headline *{
	color:rgba(255,255,255,.45) !important;
	background:transparent !important;
	border-bottom:1px solid rgba(255,255,255,.10) !important;
	font:700 10px/1 'Bricolage Grotesque',sans-serif !important;
	letter-spacing:.18em !important;
	text-transform:uppercase !important;
	padding:12px 10px 8px !important;
}

/* miniatura del producto */
.icf-v2 .dgwt-wcas-si img{border-radius:8px !important;background:#fff}

/* pie: ver todos los resultados */
.icf-v2 .dgwt-wcas-st-more-products,
.icf-v2 .dgwt-wcas-suggestion-more,
.icf-v2 .dgwt-wcas-suggestion-more *{color:#fff !important;font-weight:700 !important}
.icf-v2 .dgwt-wcas-suggestion-more{border-top:1px solid rgba(255,255,255,.10) !important;justify-content:center !important}

/* sin resultados */
.icf-v2 .dgwt-wcas-suggestion-nores,
.icf-v2 .dgwt-wcas-suggestion-nores *{color:rgba(255,255,255,.65) !important}

/* en el menu deslizante el fondo ya es negro: quitamos el doble marco */
.icf-v2 .v2m__search .dgwt-wcas-search-wrapp{background:transparent !important}

/* La barra de administracion de WordPress empuja la cabecera hacia abajo, pero
   el panel de busqueda esta en position:fixed con un top fijo, asi que se le
   montaba encima. Se le suma la altura real de esa barra. */
.icf-v2 .v2hs{top:calc(108px + var(--wp-admin--admin-bar--height, 0px)) !important}
@media (min-width:922px){
	.icf-v2 .v2hs{top:calc(108px + var(--wp-admin--admin-bar--height, 0px)) !important}
}

/* El boton de lupa del plugin se coloca al principio del campo y se montaba
   encima del texto del placeholder. Se lleva a la derecha, en absoluto, y se
   le reserva sitio con el padding del campo. */
.icf-v2 .v2hs .dgwt-wcas-search-form,
.icf-v2 .v2m__search .dgwt-wcas-search-form{position:relative !important}

.icf-v2 .v2hs .dgwt-wcas-search-submit,
.icf-v2 .v2m__search .dgwt-wcas-search-submit{
	position:absolute !important;
	right:6px !important;
	left:auto !important;
	top:50% !important;
	transform:translateY(-50%) !important;
	width:38px !important;
	height:38px !important;
	min-width:0 !important;
	padding:0 !important;
	margin:0 !important;
	background:transparent !important;
	border:0 !important;
	box-shadow:none !important;
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	z-index:2 !important;
}
.icf-v2 .v2hs .dgwt-wcas-search-submit svg,
.icf-v2 .v2m__search .dgwt-wcas-search-submit svg{
	width:17px !important;height:17px !important;
	fill:rgba(255,255,255,.75) !important;
}

/* el campo deja libre la esquina derecha para la lupa y la X */
.icf-v2 .v2hs .dgwt-wcas-search-input,
.icf-v2 .v2m__search .dgwt-wcas-search-input{
	padding-left:18px !important;
	padding-right:82px !important;
	text-overflow:ellipsis;
}

/* la X de limpiar, justo a la izquierda de la lupa */
.icf-v2 .v2hs .dgwt-wcas-close,
.icf-v2 .v2m__search .dgwt-wcas-close{
	position:absolute !important;
	right:46px !important;
	left:auto !important;
	top:50% !important;
	transform:translateY(-50%) !important;
	margin:0 !important;
	z-index:2 !important;
}

/* sin la ventana grande de movil, el panel debe verse solido */
.icf-v2 .v2hs{background:rgba(16,16,17,.97) !important}

/* El plugin envuelve el campo en .dgwt-wcas-sf-wrapp con fondo BLANCO solido:
   era la caja blanca que se veia sobre el panel oscuro. */
.icf-v2 .v2hs .dgwt-wcas-sf-wrapp,
.icf-v2 .v2m__search .dgwt-wcas-sf-wrapp{background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:999px !important}
