/* UI v4 P3 — /games and /gift-cards (ui-contract-v4 §4): compact header, sticky search +
   segmented filter (z20, no counts), tile grid from catalog-tiles.css. Markup: games.php. */
.nxc-shell{width:100%;max-width:var(--nx-container);margin-inline:auto;padding-inline:var(--nx-gutter-v4)}
.nxc-head{padding-block:var(--nx-sp-6) var(--nx-sp-3)}
.nxc-head h1{margin:0;font-size:var(--nx-fs-24);line-height:var(--nx-lh-24);font-weight:700;color:var(--nx-text);letter-spacing:-.01em}
[lang="ar"] .nxc-head h1{letter-spacing:0;line-height:1.35}
@media (min-width:1024px){.nxc-head{padding-block:var(--nx-sp-10) var(--nx-sp-4)}.nxc-head h1{font-size:var(--nx-fs-36);line-height:var(--nx-lh-36)}}
.nxc-bar{position:sticky;top:var(--nx-header-h);z-index:var(--nx-z-filter,20);background:var(--nx-bg);border-block-end:1px solid var(--nx-line);padding-block:var(--nx-sp-2);transition:transform var(--nx-t-menu,220ms) var(--nx-ease-out,ease)}
/* The sticky v4 header slides away on scroll-down (mobile); the bar follows it up. */
body:has(.nx4-header.is-hidden) .nxc-bar{transform:translateY(calc(-1 * var(--nx-header-h)))}
@media (prefers-reduced-motion:reduce){.nxc-bar{transition:none}}
.nxc-bar-row{display:flex;flex-wrap:wrap;gap:var(--nx-sp-2);align-items:center}
.nxc-search{position:relative;flex:1 1 260px;min-width:0;display:flex;align-items:center}
.nxc-search>.nx-i{position:absolute;inset-inline-start:14px;width:18px;height:18px;color:var(--nx-text-3);pointer-events:none}
.nxc-search input{width:100%;height:var(--nx-input-h);padding-inline:42px 44px;border:1px solid var(--nx-line-strong);border-radius:var(--nx-r-control);background:var(--nx-s2);color:var(--nx-text);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
.nxc-search input::placeholder{color:var(--nx-text-3)}
.nxc-search input:focus{outline:0;box-shadow:var(--nx-ring)}
.nxc-search input::-webkit-search-cancel-button{display:none}
.nxc-search-clear{position:absolute;inset-inline-end:2px;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--nx-text-2);cursor:pointer;border-radius:var(--nx-r-control)}
.nxc-search-clear .nx-i{width:18px;height:18px}
.nxc-search-clear:focus-visible{outline:0;box-shadow:var(--nx-ring)}
.nxc-seg{display:inline-flex;flex:0 0 auto;max-width:100%;padding:3px;gap:2px;border:1px solid var(--nx-line);border-radius:var(--nx-r-pill);background:var(--nx-s1);overflow-x:auto;scrollbar-width:none}
.nxc-seg::-webkit-scrollbar{display:none}
.nxc-seg .nxg-filter-btn{min-height:38px;padding-inline:var(--nx-sp-4);border:0;border-radius:var(--nx-r-pill);background:none;color:var(--nx-text-2);font:inherit;font-size:var(--nx-fs-14);font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color var(--nx-t-state,150ms),color var(--nx-t-state,150ms)}
.nxc-seg .nxg-filter-btn:hover{color:var(--nx-text)}
.nxc-seg .nxg-filter-btn[aria-pressed="true"]{background:var(--nx-s3);color:var(--nx-text);box-shadow:inset 0 0 0 1px var(--nx-signal)}
.nxc-seg .nxg-filter-btn:focus-visible{outline:0;box-shadow:var(--nx-ring)}
@media (max-width:767px){.nxc-seg{flex:1 1 100%}.nxc-seg .nxg-filter-btn{flex:1 1 0;padding-inline:var(--nx-sp-2)}}
.nxc-grid-section{padding-block:var(--nx-sp-4) var(--nx-section)}
.nxc-empty{margin:var(--nx-sp-8) 0;text-align:center;color:var(--nx-text-2);font-size:var(--nx-fs-14)}
.nxc-empty button{margin-block-start:var(--nx-sp-3);min-height:var(--nx-touch);padding-inline:var(--nx-sp-5);border:1px solid var(--nx-line-strong);border-radius:var(--nx-r-control);background:var(--nx-s1);color:var(--nx-text);font:inherit;cursor:pointer}
/* Cancel the legacy global 70px !important <section> padding (under 992px); v4 spacing above. */
section.nxc-head{padding-block:var(--nx-sp-6) var(--nx-sp-3) !important}
section.nxc-grid-section{padding-block:var(--nx-sp-4) var(--nx-section) !important}
@media (min-width:1024px){section.nxc-head{padding-block:var(--nx-sp-10) var(--nx-sp-4) !important}}
@media (pointer:coarse){.nxc-seg .nxg-filter-btn{min-height:44px}}