/* ================================================================
   mobile-fix.css v3 — DY88.hk Mobile Header + Layout Fix
   Load AFTER: style.css, black.css, index.css, swiper-bundle.min.css
   ================================================================

   ARCHITECTURE CHANGE (v3): position: sticky replaces position: fixed
   ─────────────────────────────────────────────────────────────────
   Before (v1/v2): .sidebar = position:fixed → needs padding-top hack
                    on .header to push search bar below the fixed bar.
   Now (v3):       .sidebar = position:sticky → flows in document,
                    sticks on scroll. NO padding hack needed.

   HTML DOM ORDER (same in all pages):
   ┌─ <div class="homepage|page">
   │   ├─ .header        ← search bar (above sidebar in DOM!)
   │   ├─ .sidebar       ← logo + nav + icons
   │   ├─ .hero-mobile   ← hero (homepage only)
   │   ├─ <main .main>   ← content
   │   └─ footer + .mxprofoot (bottom nav)

   VISUAL RESULT ON MOBILE:
   Initial load:
   ┌──────────────────────────────┐
   │ [🔍 搜索电影、电视剧... 全网搜]│ .header (search, scrollable)
   ├──────────────────────────────┤
   │ ☰  Logo           🔍 👤     │ .sidebar (sticky, sticks on scroll)
   ├┄┄┄┄┄┄┄╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌─┤
   │     ▶ HERO CAROUSEL          │
   │     Play Now  |  Details     │
   │  [thumb] [thumb] [thumb]     │
   ├──────────────────────────────┤
   │  Content modules...          │
   └──────────────────────────────┘

   After scrolling past search:
   ┌──────────────────────────────┐
   │ ☰  Logo           🔍 👤     │ .sidebar STUCK at top
   ├┄┄┄┄┄┄┄╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌─┤
   │  Content continues...        │
   └──────────────────────────────┘

   ROOT CAUSES FIXED:
   1. .header padding:100px → 8px (sticky sidebar = no clearance needed)
   2. .homepage:after light gradient on dark theme → killed
   3. .search-box absolute positioning → relative flow
   4. .navbar redundant with .mxprofoot bottom tabs → hidden
   5. .side-op position:absolute; right:-40px → static, always visible
   6. z-index conflicts (both 10) → sidebar:100, header:auto
   7. No bottom-nav clearance → padding-bottom on footer/main
   8. Hero over-cropped → reduced pan scale, taller aspect ratio
   ================================================================ */


/* ==============================================================
   TABLET: <= 768px
   ============================================================== */
@media (max-width: 768px) {
  .hero-desktop-wrapper {
    display: none !important;
  }
  .hero-mobile-wrapper {
    display: block !important;
  }
}


/* ==============================================================
   MOBILE PRIMARY: <= 559px (mxpro's main mobile breakpoint)
   ============================================================== */
@media (max-width: 559px) {

  /* ──────────────────────────────────────────────────────────────
     FIX 1: Kill .homepage:after light-theme gradient
     style.css:4726 creates 175px #f1f3f5→#e3e6ea gradient.
     black.css never overrides it → grey block on dark theme.
     ────────────────────────────────────────────────────────────── */
  .homepage:after {
    display: none !important;
    height: 0 !important;
    background: none !important;
    content: none !important;
  }


  /* ──────────────────────────────────────────────────────────────
     FIX 2: HEADER = Top row (search bar, scrolls away)
     Was: position:relative; padding:100px 15px 20px; height:220px
     100px top-padding was to clear fixed sidebar. With sticky
     sidebar, header flows naturally at top — no hack needed.
     ────────────────────────────────────────────────────────────── */
  .header {
    position: relative !important;
    padding: 10px 12px !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    background: #111319 !important;
    z-index: auto !important;
    box-sizing: border-box !important;
  }

  .homepage .header {
    padding: 10px 12px !important;
    height: auto !important;
    background: #111319 !important;
  }

  /* Override navtheme=0 custom CSS injection (line 289 in head.html) */
  .homepage .header,
  .homepage .header[style] {
    padding: 10px 12px !important;
    height: auto !important;
  }

  .header-box {
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  /* Desktop header actions — hidden on mobile, keep hidden */
  .header-op {
    display: none !important;
  }

  /* Non-homepage: header already hidden by existing CSS, keep it */
  .page .header {
    display: none !important;
  }

  .page.open .header {
    display: block !important;
    padding: 10px 12px !important;
    height: auto !important;
  }

  /* ── Mobile search overlay: fixed at top when activated ── */
  .header.mobile-search-open {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    background: #111319 !important;
    padding: 10px 12px !important;
    height: auto !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    animation: searchSlideDown 0.2s ease-out !important;
  }

  /* Also works on .page where header is normally hidden */
  .page .header.mobile-search-open {
    display: block !important;
  }

  @keyframes searchSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
  }

  /* Dim overlay behind the search */
  .mobile-search-backdrop {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 998;
  }
  .mobile-search-backdrop.active {
    display: block;
  }


  /* ──────────────────────────────────────────────────────────────
     FIX 3: SEARCH BAR — Full-width, natural flow
     Was: position:absolute; top:50px (wrong offset in oversized header)
     Fix: Relative positioning, flex row, full width
     ────────────────────────────────────────────────────────────── */
  .search-box {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* When navtheme=1, search-box has .nonenav → hidden by default.
     That's fine — user clicks search icon in side-op to show it.
     No override needed; the existing toggle JS handles it. */

  .searchbar {
    height: 44px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 5px 0 14px !important;
    overflow: hidden !important;
  }

  .search-input {
    font-size: 14px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .searchbar a {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  .search-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 34px !important;
    border-radius: 17px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  .cancel-btn {
    display: none !important;
  }

  /* ──────────────────────────────────────────────────────────────
     FIX 12: SEARCH DROPDOWN (no fullscreen overlay)
     When user focuses the search input OR taps the 🔍 icon,
     .searchbar-main gets .open class → shows recommendations
     as a dropdown below the search bar, inline in the header.
     ────────────────────────────────────────────────────────────── */

  /* Prevent style.css from making .searchbar-main.open fullscreen */
  .searchbar-main.open {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    max-width: 100% !important;
    background: #111319 !important;
    z-index: 200 !important;
  }

  /* Kill the ::after decorative bg image */
  .searchbar-main.open::after {
    display: none !important;
    content: none !important;
  }

  /* Searchbar stays the same (already styled above in FIX 3) */
  .searchbar-main.open .searchbar {
    margin: 0 !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  /* Cancel button: show as inline flex item in searchbar */
  .searchbar-main.open .cancel-btn {
    display: inline-flex !important;
    position: static !important;
    right: auto !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    padding: 0 12px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
  }

  /* Hot keywords dropdown below the search bar */
  .searchbar-main.open .search-recommend-box {
    display: block !important;
    padding: 12px 0 !important;
    width: 100% !important;
    position: relative !important;
  }

  .searchbar-main.open .search-recommend {
    background: #1a1c24 !important;
    border-radius: 0 0 12px 12px !important;
    padding: 12px 14px !important;
    position: relative !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  }

  .searchbar-main.open .search-recommend-title {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 13px !important;
    margin-bottom: 10px !important;
  }

  .searchbar-main.open .search-input {
    caret-color: #00c853 !important;
  }


  /* ──────────────────────────────────────────────────────────────
     FIX 13: DETAIL PAGE BUTTONS — Frosted glass style
     Replaces green gradient (.main-btn, .btn-collect) with
     translucent glass matching the hero button aesthetic.
     ────────────────────────────────────────────────────────────── */
  .module-mobile-play {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 24px 16px 12px !important;
  }

  .module-mobile-play .main-btn {
    background: rgba(255, 255, 255, 0.10) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    padding: 0 28px !important;
    line-height: 44px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    min-width: 130px !important;
    text-align: center !important;
  }

  .module-mobile-play .main-btn::after {
    display: none !important;
  }

  .module-mobile-play .main-btn i {
    color: rgba(255, 255, 255, 0.92) !important;
  }

  .module-mobile-play .main-btn:active {
    background: rgba(255, 255, 255, 0.20) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
  }

  .module-mobile-play .btn-collect,
  .module-mobile-play .mac_ulog {
    background: rgba(255, 255, 255, 0.10) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    padding: 0 28px !important;
    line-height: 44px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    min-width: 130px !important;
    text-align: center !important;
    margin-left: 0 !important;
  }

  .module-mobile-play .btn-collect:active,
  .module-mobile-play .mac_ulog:active {
    background: rgba(255, 255, 255, 0.20) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
  }

  .module-mobile-play .noplaylist {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }


  /* ──────────────────────────────────────────────────────────────
     FIX 4: SIDEBAR = Sticky nav bar (the KEY architectural change)
     Was: position:fixed; top:0 — required padding-top hack on .header
     Now: position:sticky — flows in document, sticks on scroll.
     Eliminates the entire padding-top hack problem.
     Added: backdrop-filter for frosted glass, rounded bottom edge.
     ────────────────────────────────────────────────────────────── */
  .sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    width: 100% !important;
    z-index: 100 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 0 !important;
    height: auto !important;
    max-height: none !important;
    background: rgba(17, 19, 25, 0.88) !important;
    -webkit-backdrop-filter: saturate(180%) blur(12px) !important;
    backdrop-filter: saturate(180%) blur(12px) !important;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  }

  /* Scrolled state (sidebar-bg class added by JS on scroll > 20px) */
  .sidebar-bg {
    background: rgba(17, 19, 25, 0.95) !important;
    z-index: 100 !important;
  }

  /* Dark theme overrides from other pages */
  .list .sidebar,
  .app .sidebar {
    background: rgba(17, 19, 25, 0.88) !important;
  }

  /* Sidebar header: logo + hamburger */
  .sidebar-header {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    height: auto !important;
  }

  .hamburger-btn {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }

  .logo {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 55% !important;
    padding: 0 !important;
  }

  .logo a {
    height: 28px !important;
  }

  .logo img {
    max-height: 28px !important;
  }


  /* ──────────────────────────────────────────────────────────────
     FIX 5: HIDE horizontal category nav
     WHY: Categories already exist in .mxprofoot bottom tab bar.
     Removing saves ~44px and eliminates the complex width calcs
     (calc(100vw - 45px/85px)) and the absolute-positioned side-op hack.
     ────────────────────────────────────────────────────────────── */
  .navbar,
  .homepage .navbar,
  .navbar.open,
  .page .navbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }


  /* ──────────────────────────────────────────────────────────────
     FIX 6: SIDE-OP — Always visible, static positioning
     Was: position:absolute; right:-40px; width:85px
     (hidden off-screen, slid in by JS adding .open class)
     Fix: Static in flex row, always visible. User/search icons
     are always accessible without scroll-triggered animation.
     ────────────────────────────────────────────────────────────── */
  .side-op,
  .side-op.open,
  .homepage .side-op,
  .homepage .side-op.open,
  .page .side-op {
    position: static !important;
    right: auto !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    padding: 0 10px 0 4px !important;
    gap: 2px !important;
    box-shadow: none !important;
    font-size: 0 !important;
    transition: none !important;
  }

  /* Tap targets ≥ 36px for side-op icons */
  .side-op .header-op-list-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    cursor: pointer !important;
    border-radius: 50% !important;
  }

  .side-op .header-op-search {
    display: inline-flex !important;
  }

  /* User avatar */
  .side-op .member_group,
  .side-op .mac_user {
    display: inline-flex !important;
    align-items: center !important;
  }

  .side-op .useimg {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
  }

  /* Drop-down menus from side-op (history, user menu) */
  .side-op .drop-content {
    position: fixed !important;
    top: 50px !important;
    right: 0 !important;
    left: auto !important;
    width: 280px !important;
    max-width: 90vw !important;
    z-index: 200 !important;
    border-radius: 0 0 14px 14px !important;
  }

  .shortcuts-mobile-overlay {
    z-index: 99 !important;
  }


  /* ──────────────────────────────────────────────────────────────
     FIX 7: HERO MOBILE — Better framing, proper buttons
     ────────────────────────────────────────────────────────────── */
  .hero-mobile {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .hero-mobile-wrapper {
    margin-top: 0 !important;
  }

  .hero-mobile-slides {
    padding-top: 58% !important;
    min-height: 200px !important;
  }

  /* Reduce pan scale: 130% → 116% = less cropping */
  .hero-mobile-bg {
    top: -8% !important;
    left: -8% !important;
    width: 116% !important;
    height: 116% !important;
  }

  .hero-mobile-bg-img {
    width: 116% !important;
    height: 116% !important;
  }

  .hero-mobile-content {
    padding: 12px 14px 16px !important;
  }

  .hero-mobile-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }

  .hero-mobile-meta {
    gap: 4px 8px !important;
    margin-bottom: 10px !important;
    font-size: 12px !important;
  }

  /* Buttons: row layout, equal flex, tap targets ≥ 44px */
  .hero-mobile-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Frosted glass buttons — matches desktop hero style */
  .hero-mobile-btn {
    padding: 11px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    min-height: 44px !important;
    border-radius: 8px !important;
    flex: 1 1 0% !important;
    text-align: center !important;
    justify-content: center !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
  }

  .hero-mobile-btn-play {
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
  }

  .hero-mobile-btn-play i {
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .hero-mobile-btn-detail {
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  .hero-mobile-btn:active {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
  }

  .hero-mobile-thumbs-wrapper {
    padding: 10px 12px !important;
  }

  .hero-mobile-thumb {
    width: 92px !important;
    height: 52px !important;
    border-radius: 6px !important;
  }

  .hero-mobile-counter {
    top: 10px !important;
    right: 10px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    z-index: 5 !important;
  }


  /* ──────────────────────────────────────────────────────────────
     FIX 8: MAIN CONTENT SPACING
     With sticky sidebar (in-flow), no padding-top hack needed.
     Add padding-bottom for .mxprofoot fixed bottom nav.
     ────────────────────────────────────────────────────────────── */
  body {
    padding-top: 0 !important;
  }

  .homepage .main {
    padding: 14px 12px 0 !important;
    min-height: calc(100vh - 200px) !important;
  }

  /* Page-type views: sidebar is sticky so content flows below it.
     Remove the old 54px padding that compensated for fixed sidebar. */
  .page .main {
    padding-top: 12px !important;
    padding-bottom: 60px !important;
  }


  /* ──────────────────────────────────────────────────────────────
     FIX 9: FOOTER + BOTTOM NAV clearance & icon visibility
     .mxprofoot: position:fixed; bottom:0; z-index:999
     Icons + text are dark (light theme) on dark bg — override.
     ────────────────────────────────────────────────────────────── */
  .mxprofoot {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .mxprofoot .item {
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: none !important;
  }

  .mxprofoot .item i,
  .mxprofoot .item .size20 {
    color: rgba(255, 255, 255, 0.5) !important;
  }

  .mxprofoot .grid-item-name {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 11px !important;
  }

  .footer {
    padding-bottom: 60px !important;
  }

  .fixedGroup {
    bottom: 65px !important;
  }


  /* ──────────────────────────────────────────────────────────────
     FIX 10: SEO TEXT BLOCKS — Readable on mobile
     ────────────────────────────────────────────────────────────── */
  .seo-intro {
    padding: 14px 0 !important;
  }

  .seo-intro h1 {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }

  .seo-intro p {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  .seo-cats {
    gap: 6px !important;
    margin: 10px 0 6px !important;
  }

  .seo-cats a {
    padding: 5px 10px !important;
    font-size: 12px !important;
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .seo-bottom {
    padding: 12px 0 8px !important;
  }

  .seo-bottom h2 {
    font-size: 15px !important;
  }

  .seo-bottom p {
    font-size: 12px !important;
    line-height: 1.7 !important;
  }


  /* ──────────────────────────────────────────────────────────────
     FIX 11: MODULE + CONTENT
     ────────────────────────────────────────────────────────────── */
  .module {
    margin-bottom: 14px !important;
  }

  .module-heading {
    margin-bottom: 12px !important;
  }

  .content {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}


/* ==============================================================
   SMALL PHONES: <= 480px
   ============================================================== */
@media (max-width: 480px) {
  .header {
    padding: 8px 10px !important;
  }

  .searchbar {
    height: 40px !important;
    border-radius: 20px !important;
    padding: 0 4px 0 12px !important;
  }

  .search-btn {
    padding: 0 10px !important;
    font-size: 12px !important;
    min-height: 32px !important;
    border-radius: 16px !important;
  }

  .hero-mobile-slides {
    padding-top: 62% !important;
  }

  .hero-mobile-title {
    font-size: 16px !important;
  }

  .hero-mobile-meta {
    font-size: 11px !important;
    gap: 3px 6px !important;
    margin-bottom: 8px !important;
  }

  .hero-mobile-btn {
    padding: 9px 10px !important;
    font-size: 13px !important;
    min-height: 42px !important;
  }

  .hero-mobile-thumb {
    width: 84px !important;
    height: 48px !important;
  }

  .side-op .header-op-list-btn {
    width: 34px !important;
    height: 34px !important;
  }

  .seo-intro h1 {
    font-size: 16px !important;
  }

  .seo-cats a {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
}


/* ==============================================================
   VERY NARROW: <= 360px (iPhone SE 2/3, Galaxy S)
   ============================================================== */
@media (max-width: 360px) {
  .searchbar {
    height: 38px !important;
    border-radius: 19px !important;
  }

  /* Stack hero buttons vertically */
  .hero-mobile-buttons {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .hero-mobile-btn {
    width: 100% !important;
    flex: none !important;
  }

  .hero-mobile-slides {
    padding-top: 68% !important;
  }

  .hero-mobile-content {
    padding: 10px 12px 14px !important;
  }

  .hero-mobile-title {
    font-size: 15px !important;
  }

  .hero-mobile-meta {
    font-size: 10px !important;
  }

  .hero-mobile-thumb {
    width: 76px !important;
    height: 42px !important;
  }

  .seo-intro h1 {
    font-size: 15px !important;
  }

  .seo-intro p {
    font-size: 12px !important;
  }

  .seo-cats a {
    padding: 3px 7px !important;
    font-size: 11px !important;
  }
}


/* ==============================================================
   MINIMUM WIDTH: <= 320px (iPhone 5/SE 1st gen)
   ============================================================== */
@media (max-width: 320px) {
  .header {
    padding: 6px 6px !important;
  }

  .hero-mobile-slides {
    padding-top: 72% !important;
    min-height: 180px !important;
  }

  .hero-mobile-title {
    font-size: 14px !important;
  }

  .hero-mobile-btn {
    font-size: 12px !important;
    padding: 8px 8px !important;
    min-height: 40px !important;
  }

  .sidebar-header {
    padding: 6px 6px !important;
    gap: 6px !important;
  }

  .hamburger-btn {
    width: 28px !important;
    height: 28px !important;
  }
}


/* ==============================================================
   iOS SAFE AREAS: notch (top) + home indicator (bottom)
   ============================================================== */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 559px) {
    /* Top safe area: push header content below notch */
    .header {
      padding-top: calc(10px + env(safe-area-inset-top)) !important;
    }

    /* Sticky sidebar: when stuck at top, respect notch */
    .sidebar {
      top: 0 !important;
      padding-top: env(safe-area-inset-top) !important;
    }

    /* Search dropdown: no notch adjustment needed (in-flow) */
  }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mxprofoot {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  .footer {
    padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  }

  .fixedGroup {
    bottom: calc(65px + env(safe-area-inset-bottom)) !important;
  }
}


/* ==============================================================
   GLOBAL: Bottom nav icon + text visibility (dark theme)
   Outside all media queries — applies at every viewport width.
   .mxprofoot only renders below 559px (hidden by style.css above).
   ============================================================== */
.mxprofoot,
.mxprofoot a,
.mxprofoot a.item,
.mxprofoot .item,
.mxprofoot .item i,
.mxprofoot .item .size20,
.mxprofoot .grid-item-name {
  color: rgba(255, 255, 255, 0.6) !important;
}

.mxprofoot {
  background: #181a22 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.mxprofoot .grid-item-name {
  font-size: 11px !important;
  margin-top: 2px !important;
}