/**
* Mundo Steam — Header search & categories
* ------------------------------------------
* Desktop : inline search pill that expands over the categories row
* Mobile : slide-down full-width search overlay triggered from the header icon
*
* Depends on header.php adding `.ms-host` to `.main-nav` and `.ms-mobile-search`
* to the document body.
*/
/* =====================================================
HOST PILL — categories container (DESKTOP ONLY)
Below 992px the offcanvas shows the same .main-nav.ms-host in a column
drawer — the pill styling would look wrong there. Scope to desktop.
===================================================== */
@media (min-width: 992px) {
.offcanvas-body .main-nav.ms-host {
padding: 6px 6px 6px 16px !important;
background: rgba(22, 31, 46, 0.9) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
border: 1px solid rgba(148, 184, 255, 0.12) !important;
border-radius: 9999px !important;
overflow: hidden !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
.offcanvas-body .ms-host #bootscore-navbar {
margin: 0 !important;
padding-right: 58px !important; /* reserve space for the circular end-cap */
transition: opacity 0.3s ease !important;
}
.offcanvas-body .ms-host.is-searching #bootscore-navbar {
opacity: 0 !important;
pointer-events: none !important;
}
/* Keep the pill vertically centered when the sticky header shrinks on scroll */
.site-header.to-fixed .main-nav.ms-host {
top: 50% !important;
transform: translateY(-50%) !important;
}
}
/* =====================================================
SEARCH OVERLAY (desktop pill)
Anchored to the right, grows leftward by animating width only
===================================================== */
.ms-search-pill {
--ms-accent: #22d3ee;
--ms-accent-2: #0284c7;
/* Collapsed: circular cyan end-cap flush inside the bar's right edge —
reads as part of the bar, the "last cell" before the close. */
position: absolute;
top: 6px;
right: 6px;
bottom: 6px;
width: 46px;
margin: 0;
overflow: hidden;
background: linear-gradient(135deg, var(--ms-accent) 0%, var(--ms-accent-2) 100%);
border: 0;
border-radius: 9999px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
transition:
width 0.55s cubic-bezier(0.22, 0.8, 0.3, 1),
background 0.35s ease,
box-shadow 0.35s ease;
z-index: 3;
cursor: pointer;
}
.ms-search-pill:hover {
background: linear-gradient(135deg, #67e8f9 0%, #0ea5e9 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 14px rgba(34, 211, 238, 0.35);
}
.ms-host.is-searching .ms-search-pill {
/* Expanded: rectangle pill filling the bar.
Using a solid color (instead of a 135° gradient between two very close
dark-blue tones) avoids Firefox's gradient banding, which made the right
half of the bar look like a slightly different color than the left. */
width: calc(100% - 12px);
background: rgba(10, 16, 28, 0.98);
background-image: none;
border: 1px solid rgba(34, 211, 238, 0.5);
box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12), 0 8px 30px rgba(0, 0, 0, 0.5);
cursor: default;
}
/* Trigger (magnifying glass shown when collapsed). White icon on the cyan
gradient for maximum contrast — reads immediately as a search button. */
.ms-search-trigger {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
border: 0;
background: transparent;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
opacity: 1;
transition: opacity 0.25s ease, color 0.25s ease;
z-index: 2;
}
.ms-search-trigger i {
font-size: 20px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.ms-host.is-searching .ms-search-trigger {
opacity: 0;
pointer-events: none;
}
/* Expanded fields (input + link + close) */
/* 25/09/2026: top/right/bottom/left antes de inset. inset solo existe desde Safari 14.1 (iOS 14.5) y
Chrome 87; sin el respaldo, en esos navegadores el buscador de la compu se abria chico y desalineado
(el campo media 195x19 en vez de 417x48). En los de hoy manda el inset de abajo: mismo resultado. */
.ms-search-fields {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
display: flex;
align-items: center;
gap: 4px;
padding: 0 6px 0 18px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease 0.15s;
}
.ms-host.is-searching .ms-search-fields {
opacity: 1;
pointer-events: auto;
}
.ms-field-icon {
flex: 0 0 auto;
color: var(--ms-accent);
font-size: 15px;
margin-right: 6px;
}
/* FiboSearch host (replaces the plain ) — flex-grow to fill the pill */
.ms-search-fields .ms-search-fibo {
flex: 1 1 auto !important;
min-width: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
.ms-search-fields .ms-search-fibo .dgwt-wcas-search-wrapp {
display: flex !important;
align-items: center !important;
flex: 1 1 auto !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Hide FiboSearch's own icon trigger and submit button inside the pill —
the ms-search-trigger / ms-search-close buttons handle the UI instead. */
.ms-search-fields .ms-search-fibo .dgwt-wcas-search-icon,
.ms-search-fields .ms-search-fibo .dgwt-wcas-search-submit,
.ms-search-fields .ms-search-fibo .dgwt-wcas-voice-search,
.ms-search-fields .ms-search-fibo .dgwt-wcas-preloader {
display: none !important;
}
/* FiboSearch is configured in "icon flyout" mode — its