/* ZUPIX MOBILE-022 — second screenshot-driven hardening pass.
   Goals: reliable bottom navigation, no duplicate footer reserve, correct mobile
   search/icon rendering, readable horizontal rails and stable quick-topup icons. */

@media (max-width:760px){
  :root{--z22-mobile-nav-h:74px;--z20-mobile-nav-h:74px}

  /* Search submit icon: without explicit stroke the inline SVG path is rendered
     as a black filled triangle by some Chromium builds. */
  html body .z18-search button{
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    color:#6640e8!important;
  }
  html body .z18-search button svg{
    width:18px!important;
    height:18px!important;
    display:block!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.9!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }

  /* Horizontal home rail: reserve two real text lines so PUBG Mobile / Games &
     keys do not get cropped by the strip's bottom edge. */
  html body .premium-home .market-icon-strip{
    min-height:116px!important;
    padding-top:9px!important;
    padding-bottom:9px!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
  }
  html body .premium-home .market-icon-rail{
    min-height:98px!important;
    align-items:flex-start!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    padding-bottom:2px!important;
  }
  html body .premium-home .market-icon-strip .market-icon-rail .market-rail-item{
    height:98px!important;
    min-height:98px!important;
    overflow:visible!important;
  }
  html body .premium-home .market-icon-strip .market-icon-rail .market-rail-label{
    min-height:30px!important;
    max-height:30px!important;
    line-height:14px!important;
    padding:0 1px!important;
    overflow:hidden!important;
  }

  /* Quick topup: brand SVGs with white glyphs must stay transparent. The base
     stylesheet used a white background on IMG itself, which erased Steam and
     Telegram on phones. */
  html body .zquick-service-icon img{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  html body .zquick-service--steam .zquick-service-icon img,
  html body .zquick-service--telegram .zquick-service-icon img{
    width:27px!important;
    height:27px!important;
    object-fit:contain!important;
  }
  html body .zquick-service--roblox .zquick-service-icon img,
  html body .zquick-service--playstation .zquick-service-icon img,
  html body .zquick-service--apple .zquick-service-icon img,
  html body .zquick-service--pubg .zquick-service-icon img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }

  /* Product card rhythm: keep chips above the title without touching it. */
  html body .premium-home .market-products-showcase .market-card-meta-chips{
    min-height:0!important;
    margin-bottom:7px!important;
    align-content:flex-start!important;
  }
  html body .premium-home .market-products-showcase .market-card-body h3{
    margin:0 0 8px!important;
  }
  html body .premium-home .market-products-showcase .market-card-footer{
    align-items:center!important;
  }

  /* Bottom navigation. The older layer worked visually but delegated the
     catalogue through another hidden control. This pass makes the whole bar a
     stable touch surface and keeps it above every ordinary page overlay. */
  html body .z20-mobile-nav{
    z-index:5000!important;
    height:calc(var(--z22-mobile-nav-h) + var(--z20-safe-bottom))!important;
    min-height:calc(var(--z22-mobile-nav-h) + var(--z20-safe-bottom))!important;
    padding:6px 6px calc(6px + var(--z20-safe-bottom))!important;
    align-items:stretch!important;
    box-sizing:border-box!important;
    pointer-events:auto!important;
    isolation:isolate!important;
    transform:translateZ(0)!important;
    -webkit-transform:translateZ(0)!important;
    overscroll-behavior:none!important;
  }
  html body .z20-mobile-nav-item{
    -webkit-appearance:none!important;
    appearance:none!important;
    width:100%!important;
    min-width:0!important;
    height:62px!important;
    min-height:62px!important;
    padding:3px 2px 4px!important;
    margin:0!important;
    touch-action:manipulation!important;
    user-select:none!important;
    -webkit-user-select:none!important;
    pointer-events:auto!important;
    outline:none!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  html body .z20-mobile-nav-item>span{
    width:30px!important;
    height:30px!important;
    flex:0 0 30px!important;
  }
  html body .z20-mobile-nav-item small{
    display:block!important;
    width:100%!important;
    min-height:11px!important;
    font-size:9.5px!important;
    line-height:11px!important;
    text-align:center!important;
  }
  html body .z20-mobile-nav-item.is-pressed{
    transform:scale(.965)!important;
    background:#f4f1ff!important;
  }
  html body .z20-mobile-catalog.is-open,
  html body .z20-mobile-catalog[data-popup-open="1"]{
    color:#6542e8!important;
    background:#f7f5ff!important;
  }
  html body .z20-mobile-catalog.is-open>span,
  html body .z20-mobile-catalog[data-popup-open="1"]>span{
    color:#633ee7!important;
    background:#eee9ff!important;
  }
  html body .z20-mobile-sell{transform:translateY(-6px)!important}
  html body .z20-mobile-profile-mark{
    width:30px!important;
    height:30px!important;
    display:grid!important;
    place-items:center!important;
    line-height:1!important;
  }

  /* The catalogue sheet must stay below the navigation so Catalog can always
     be tapped again to close it. */
  html body .z18-catalog-mega{z-index:4800!important}

  /* Footer spacing was reserved three times (body + footer + fixed nav), leaving
     a large blank area below the legal text. Pages with a footer reserve the
     fixed-nav space inside the footer shell exactly once. */
  html body:has(.zupix-site-footer):has(.z20-mobile-nav){
    padding-bottom:0!important;
  }
  html body .zupix-site-footer{
    width:100%!important;
    margin:22px 0 0!important;
    padding:0!important;
    background:linear-gradient(180deg,rgba(252,251,255,.98),rgba(247,249,255,.98))!important;
    overflow:visible!important;
  }
  html body .zupix-footer-shell{
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:25px 18px calc(var(--z22-mobile-nav-h) + var(--z20-safe-bottom) + 24px)!important;
    border-radius:0!important;
    overflow:hidden!important;
  }
  html body .zupix-footer-shell::after{
    bottom:calc(var(--z22-mobile-nav-h) + var(--z20-safe-bottom) + 54px)!important;
  }
  html body .zupix-footer-bottom{
    padding-bottom:0!important;
  }

  /* When there is no footer, keep one clean navigation reserve on the body. */
  html body:not(:has(.zupix-site-footer)):has(.z20-mobile-nav){
    padding-bottom:calc(var(--z22-mobile-nav-h) + var(--z20-safe-bottom) + 14px)!important;
  }

  /* Floating UI follows the corrected nav height. */
  html body .zid-launcher,
  html body .z20-mobile-buybar{
    bottom:calc(var(--z22-mobile-nav-h) + var(--z20-safe-bottom) + 10px)!important;
  }
}

@media (max-width:390px){
  :root{--z22-mobile-nav-h:72px;--z20-mobile-nav-h:72px}
  html body .z20-mobile-nav-item{height:60px!important;min-height:60px!important}
  html body .z20-mobile-nav-item small{font-size:8.9px!important}
  html body .premium-home .market-icon-strip .market-icon-rail .market-rail-item{height:96px!important;min-height:96px!important}
}