/*!
 * Mobile header search -- open/close styling.
 * Owner: rozhika-live-search-ui  (behaviour: the inline `rzls-msearch` module)
 *
 * ---------------------------------------------------------------------------
 * WHY THIS FILE EXISTS
 * ---------------------------------------------------------------------------
 * Until 2026-08-15 the mobile header search was styled by three authorities at
 * once -- Code Snippets snippet #10, rozhika-mega-menu/assets/css/mega-menu-rtl.css,
 * and premium-product-enhancer -- each overriding the others with !important.
 * Besides being unmaintainable, it was the single largest INP cost on the site.
 *
 * The old markup hung state off <body>:
 *
 *     body.search-is-open ... > li:not(.header-search-form) { display: none }
 *     body.search-is-open ... .has-icon *                   { visibility: visible }
 *
 * Chrome keys its style-invalidation set on the RIGHTMOST COMPOUND of a
 * selector. `li:not(...)` keys on the tag `li`, and `*` keys on everything, so
 * toggling one class on <body> forced a style recalculation of every <li> --
 * or every element -- in the document. Measured on live, mobile profile, 4x CPU
 * throttle, median of 15 toggles:
 *
 *     body.search-is-open           56 ms (home) / 74 ms (product) / 94 ms (category)
 *     same class, rules deleted    6.2 ms /  7.9 ms / 16.4 ms
 *     equivalent class on a leaf   0.0 ms
 *
 * First-party RUM over 5,448 real interactions confirmed the impact: this tap
 * was the #1 INP culprit at p75 456 ms, with 80% of taps over 200 ms and
 * presentation delay (i.e. style + layout + paint) the dominant phase.
 *
 * ---------------------------------------------------------------------------
 * THE INVARIANT THIS FILE MAINTAINS
 * ---------------------------------------------------------------------------
 * 1. State classes live on the elements that actually change:
 *       .rzls-msearch-open    on the search <li>
 *       .rzls-msearch-active  on the <ul class="header-bottom-nav">
 *    Never on <body> or <html>.
 * 2. Every selector's rightmost compound is a CLASS -- never a bare tag, never
 *    `*`, never `:not()` without a class. This keeps invalidation proportional
 *    to what changed.
 * 3. Only `display` (plus a compositor-only animation) flips on open/close.
 *    All geometry is static, so opening the search cannot relayout the page.
 * 4. Exactly one animation mechanism. The old code ran a CSS @keyframes
 *    animation AND jQuery .fadeIn()/.fadeOut() on the same element at the same
 *    time, so jQuery wrote inline opacity every frame while the keyframes tried
 *    to own the same property.
 *
 * RUCSS: `.rzls-msearch-*` never appears in server-rendered HTML, so WP Rocket's
 * Remove Unused CSS would tree-shake this file away. rozhika-live-search-ui.php
 * appends it to `rocket_usedcss_content` (the same seam the plugin already uses
 * for its JS-injected dropdown markup), so the rules survive on every page.
 */
 @media screen and (max-width:849px){#wide-nav .header-bottom-nav.mobile-nav>li.header-search-form{display:none;position:relative;z-index:30;width:100%;max-width:100%}#wide-nav li.header-search-form .header-search-form-wrapper,#wide-nav li.header-search-form .searchform-wrapper,#wide-nav li.header-search-form .searchform,#wide-nav li.header-search-form .searchform-wrapper .flex-row{width:100%;max-width:100%}#wide-nav li.header-search-form,#wide-nav li.header-search-form .header-search-form-wrapper,#wide-nav li.header-search-form .searchform-wrapper{overflow:visible}#wide-nav .header-bottom-nav.mobile-nav>li.header-search-form.rzls-msearch-open{display:block}#wide-nav .header-bottom-nav.mobile-nav>li.header-search-form.rzls-msearch-closing{display:block;pointer-events:none}#wide-nav .header-bottom-nav.mobile-nav.rzls-msearch-active>.rzls-nav-item{display:none}#wide-nav li.header-search-form.rzls-msearch-open .searchform-wrapper{display:block}#wide-nav li.header-search-form.rzls-msearch-open .search-field{width:100%;min-height:38px;font-size:15px}@keyframes rzls-msearch-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@keyframes rzls-msearch-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}}@media screen and (max-width:420px){#wide-nav li.header-search-form.rzls-msearch-open .search-field{min-height:36px;font-size:14px}}@media screen and (max-width:849px) and (prefers-reduced-motion:reduce){#wide-nav .header-bottom-nav.mobile-nav>li.header-search-form.rzls-msearch-open,#wide-nav .header-bottom-nav.mobile-nav>li.header-search-form.rzls-msearch-closing{}}