/* ============================================================
   MOBILE COMPACT — Shrink & smoothen for phones (< 768px)
   Loaded LAST so it wins the cascade on mobile only.
   Desktop/tablet views are untouched.
   ============================================================ */

@media (max-width: 767px) {

  /* ── HEADER ── */
  #main-header {
    padding: 0.5rem 0.75rem !important;
    min-height: 52px !important;
  }
  .logo { font-size: 0.9rem !important; gap: 0.35rem !important; }
  .logo-icon { font-size: 1.02rem !important; }

  .header-search { max-width: 100% !important; }
  .header-search input {
    height: 32px !important;
    font-size: 0.75rem !important;
    padding: 0 0.9rem 0 2rem !important;
  }
  .header-search i { font-size: 0.74rem !important; left: 0.7rem !important; }

  .header-right { gap: 0.4rem !important; }
  .btn-hd-access {
    height: 28px !important;
    padding: 0 0.75rem !important;
    font-size: 0.72rem !important;
    gap: 0.28rem !important;
  }
  .btn-user-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.78rem !important;
  }

  /* ── CATEGORY TABS ── */
  .cat-tabs-wrap {
    top: 52px !important;
    padding: 0.4rem 0.5rem !important;
  }
  .cat-tabs { gap: 0.35rem !important; }
  .cat-tab {
    height: 30px !important;
    padding: 0 0.75rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.02em !important;
    border-radius: 999px !important;
  }
  .cat-tab i { font-size: 0.72rem !important; margin-right: 0.28rem !important; }

  /* ── PAGE LAYOUT: eliminate the big gap between category tabs and hero ── */
  /* IMPORTANT: only set on main (index.css puts 95px here), do NOT add body padding-top
     because they stack. Compact header=52, cat-tabs=42 → total ~94, use 94. */
  body { padding-top: 0 !important; }
  main { padding-top: 94px !important; }

  /* ── HERO BANNER ── shrink significantly, no top gap */
  .hero-banner {
    height: 52vw !important;
    min-height: 240px !important;
    max-height: 380px !important;
    margin-top: 0 !important;
    margin-bottom: 1.2rem !important;
  }
  .hero-content {
    padding: 1rem 0.9rem 1.2rem !important;
    max-width: 100% !important;
  }
  .hero-chips { gap: 0.3rem !important; margin-bottom: 0.5rem !important; }
  .chip {
    padding: 2px 7px !important;
    font-size: 0.58rem !important;
    gap: 0.2rem !important;
  }
  .hero-title {
    font-size: 1.25rem !important;
    line-height: 1.12 !important;
    margin-bottom: 0.4rem !important;
    letter-spacing: -0.01em !important;
  }
  .hero-meta {
    font-size: 0.68rem !important;
    gap: 0.35rem !important;
    margin-bottom: 0.45rem !important;
  }
  .hero-meta .dot { font-size: 0.35rem !important; }
  .hero-desc {
    font-size: 0.72rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0.75rem !important;
    -webkit-line-clamp: 2 !important;
  }
  .hero-btns { gap: 0.5rem !important; }

  .btn-play {
    height: 34px !important;
    padding: 0 1rem !important;
    font-size: 0.75rem !important;
    gap: 0.4rem !important;
  }
  .btn-info-sm {
    height: 34px !important;
    padding: 0 0.85rem !important;
    font-size: 0.72rem !important;
    gap: 0.35rem !important;
  }

  /* Hero counter badge (top right of hero) */
  .hero-counter {
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
    top: 12px !important;
    right: 12px !important;
  }

  /* Hero navigation arrows */
  .hero-nav {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.85rem !important;
  }

  /* Hero indicator dots — small circles, no wide bars */
  .hero-indicators { gap: 6px !important; bottom: 6px !important; padding: 0 !important; }
  .hero-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    background: rgba(255,255,255,0.35) !important;
    border: none !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
  }
  .hero-dot.active {
    width: 6px !important;      /* SAME width — no bar */
    background: #fff !important;
    transform: scale(1.4) !important;
    box-shadow: 0 0 6px rgba(255,255,255,0.6) !important;
  }

  /* ── SECTION HEADERS ── */
  .section-title, .sec-title,
  h2, .filamu-mpya-title {
    font-size: 0.92rem !important;
  }

  /* ── POSTER CARDS (movie thumbnails) ── */
  .poster-card { width: 116px !important; border-radius: 10px !important; }
  .p-info { padding: 0.5rem 0.55rem 0.6rem !important; }
  .p-title {
    font-size: 0.7rem !important;
    line-height: 1.28 !important;
    margin-bottom: 0.16rem !important;
  }
  .p-sub { font-size: 0.6rem !important; }
  .p-rating {
    top: 5px !important; left: 5px !important;
    font-size: 0.58rem !important;
    padding: 1px 6px !important;
  }
  .p-dl {
    top: 5px !important; right: 5px !important;
    width: 22px !important; height: 22px !important;
    font-size: 0.6rem !important;
  }
  .p-play-circle {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.8rem !important;
  }

  /* ── LIST CARDS (Trending / horizontal) ── */
  .lc-poster { width: 62px !important; height: 88px !important; }
  .lc-title { font-size: 0.78rem !important; }
  .lc-desc { font-size: 0.68rem !important; }
  .lc-tag  { font-size: 0.56rem !important; padding: 2px 6px !important; }
  .lc-btn  { height: 30px !important; font-size: 0.68rem !important; padding: 0 0.7rem !important; }

  /* ── CONTINUE WATCHING cards ── */
  .cw-card { max-width: 220px !important; }
  .cw-thumb { height: 118px !important; }
  .cw-title { font-size: 0.75rem !important; }
  .cw-meta  { font-size: 0.62rem !important; }
  .cw-pct   { font-size: 0.6rem !important; }

  /* ── BOTTOM NAV — compact & sleek ── */
  .bottom-nav { height: 58px !important; }
  .bn-item { font-size: 0.56rem !important; gap: 0.14rem !important; }
  .bn-item i { font-size: 1.05rem !important; }
  .bn-item.active::after {
    width: 16px !important;
    height: 2.5px !important;
    bottom: 5px !important;
  }
  .bn-center-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.05rem !important;
    margin: 0 0.1rem !important;
    border-width: 2px !important;
  }

  /* ── LIVE ACTIVITY toast (David T. buys a ticket) ── */
  .rt-notification, .live-activity,
  .toast, .toast-msg {
    font-size: 0.72rem !important;
    padding: 0.55rem 0.75rem !important;
  }

  /* ── GENERAL ── remove excessive top margins */
  .list-section, .horizontal-scroll, .cw-wrap {
    padding: 0 0.75rem !important;
    margin-bottom: 1.1rem !important;
  }

  /* Tighter buttons everywhere */
  .btn-primary, .btn-danger, .btn-ghost {
    height: 38px !important;
    padding: 0 1rem !important;
    font-size: 0.78rem !important;
  }
}

/* ── EXTRA-SMALL PHONES (< 380px) ── */
@media (max-width: 379px) {
  .hero-title  { font-size: 1.1rem !important; }
  .hero-desc   { font-size: 0.68rem !important; }
  .poster-card { width: 108px !important; }
  .cat-tab     { padding: 0 0.6rem !important; font-size: 0.68rem !important; }
  .btn-hd-access { padding: 0 0.6rem !important; font-size: 0.68rem !important; }
  .logo        { font-size: 0.82rem !important; }
}

/* ── SMOOTH GLOBAL TRANSITIONS on mobile ── */
@media (max-width: 767px) {
  * {
    -webkit-tap-highlight-color: transparent;
  }
  .poster-card, .cat-tab, .bn-item, .btn-play, .btn-info-sm, .chip {
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.18s ease,
                color 0.18s ease !important;
  }
  .poster-card:active { transform: scale(0.97) !important; }
  .cat-tab:active     { transform: scale(0.95) !important; }
  .btn-play:active,
  .btn-info-sm:active { transform: scale(0.96) !important; }
}