/* ==========================================================
   CATEGORIES MENU
   ========================================================== */

.catbar-wrap{
  width:100%;
  max-width:1760px;
  margin:10px auto 8px;
  padding:0 12px;
  box-sizing:border-box;
  position:relative;
  z-index:20;
}

.catbar{
  position:relative;
  display:grid;
  grid-template-columns:32px 1fr 32px;
  align-items:center;
  gap:8px;
  padding:8px;
  border-radius:18px;
  border:1px solid rgba(255,120,70,.16);
  background:
    radial-gradient(circle at 82% 12%, rgba(255,60,80,.06), transparent 24%),
    linear-gradient(180deg, rgba(11,14,22,.98), rgba(6,8,12,.99));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 14px 34px rgba(0,0,0,.32);
  overflow:hidden;
}

.catbar::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#ff3b2f,#ff8a3d,transparent);
  box-shadow:0 0 12px rgba(255,80,50,.32);
}

.catlist{
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.catlist::-webkit-scrollbar{
  display:none;
}

/* MOBILE mantém scroll */
.catlist-inner{
  display:flex;
  gap:10px;
  min-width:max-content;
}

/* DESKTOP centraliza */
@media (min-width:769px){
  .catlist-inner{
    min-width:0;
    width:100%;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
  }
}

/* TELAS GRANDES mantém centralizado (CORRIGIDO) */
@media (min-width:1200px){
  .catlist-inner{
    min-width:0;
    width:100%;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
  }
}

.cchip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  text-decoration:none;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  color:#e8edf6;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,#1a1f2b,#111620);
  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
}

.cchip:hover{
  transform:translateY(-1px);
  border-color:rgba(255,120,70,.30);
  color:#fff;
}

.cchip.active{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(90deg,#ff3b2f,#ff8a3d);
  box-shadow:0 0 12px rgba(255,80,50,.30);
}

.catbtn{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  width:32px;
  height:32px;
  border-radius:9px;
  background:linear-gradient(180deg,#1a1f2b,#111620);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .18s ease,border-color .18s ease,opacity .18s ease;
}

.catbtn:hover{
  transform:scale(1.06);
  border-color:rgba(255,120,70,.30);
}

.catbtn[disabled]{
  opacity:.4;
  cursor:default;
  transform:none;
}

@media (min-width:769px){
  .catbar-wrap{
    width:calc(100vw - 24px);
    max-width:1760px;
    padding:0 12px;
    margin:10px auto 10px;
  }

  .catbar{
    grid-template-columns:36px 1fr 36px;
    gap:10px;
    padding:10px;
    border-radius:22px;
  }

  .catbtn{
    width:36px;
    height:36px;
    border-radius:10px;
  }

  .cchip{
    min-height:36px;
    padding:0 14px;
    font-size:12px;
  }
}

@media (min-width:1200px){
  .catbar-wrap{
    width:calc(100vw - 24px);
    max-width:1760px;
    padding:0 12px;
  }

  .catbar{
    width:100%;
  }

  .catlist{
    width:100%;
  }
}
/* ==========================================================
   PADRÃO PREMIUM UNIFICADO - CATEGORIAS + STREAMINGS
   ========================================================== */
.catbar-wrap{max-width:1420px!important;margin:12px auto 10px!important;padding:0 14px!important;}
.catbar{display:grid!important;grid-template-columns:42px minmax(0,1fr) 42px!important;gap:10px!important;align-items:center!important;min-height:64px!important;padding:10px!important;border-radius:22px!important;border:1px solid rgba(255,110,60,.18)!important;background:radial-gradient(circle at 10% 0%,rgba(255,72,48,.12),transparent 28%),radial-gradient(circle at 90% 0%,rgba(255,145,65,.08),transparent 28%),linear-gradient(180deg,rgba(13,16,24,.98),rgba(5,7,12,.99))!important;box-shadow:0 18px 44px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04)!important;overflow:hidden!important;}
.catbar::after{left:58px!important;right:58px!important;height:2px!important;opacity:.95!important;}
.catlist{width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-behavior:smooth!important;scroll-snap-type:x proximity!important;scrollbar-width:none!important;}
.catlist-inner{width:max-content!important;min-width:max-content!important;display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:center!important;gap:10px!important;padding:2px 0!important;}
.cchip{scroll-snap-align:start!important;min-height:38px!important;padding:0 16px!important;border-radius:14px!important;font-size:12px!important;font-weight:900!important;color:#f2f5fb!important;background:linear-gradient(180deg,rgba(28,34,47,.98),rgba(12,16,25,.98))!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05)!important;}
.cchip:hover{transform:translateY(-1px)!important;border-color:rgba(255,122,60,.38)!important;box-shadow:0 14px 28px rgba(0,0,0,.32),0 0 0 1px rgba(255,120,60,.08) inset!important;}
.cchip.active{background:linear-gradient(90deg,#ff3b2f,#ff8a3d)!important;box-shadow:0 10px 26px rgba(255,70,35,.24),0 0 18px rgba(255,90,45,.22)!important;}
.catbtn{width:42px!important;height:42px!important;min-width:42px!important;border-radius:14px!important;font-size:20px!important;line-height:1!important;color:#fff!important;background:linear-gradient(180deg,rgba(31,37,51,.98),rgba(10,13,20,.98))!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 12px 26px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05)!important;}
.catbtn:hover{transform:translateY(-1px) scale(1.03)!important;border-color:rgba(255,120,70,.40)!important;box-shadow:0 14px 30px rgba(0,0,0,.38),0 0 16px rgba(255,80,40,.12)!important;}
.catbtn[disabled]{opacity:.36!important;cursor:default!important;transform:none!important;}
@media (max-width:768px){.catbar-wrap{padding:0 10px!important;margin:10px auto 8px!important}.catbar{grid-template-columns:36px minmax(0,1fr) 36px!important;gap:7px!important;min-height:54px!important;padding:7px!important;border-radius:17px!important}.catbar::after{left:47px!important;right:47px!important}.catbtn{width:36px!important;height:36px!important;min-width:36px!important;border-radius:12px!important;font-size:18px!important}.catlist-inner{gap:8px!important}.cchip{min-height:34px!important;padding:0 13px!important;border-radius:12px!important;font-size:11px!important}}
@media (max-width:420px){.catbar{grid-template-columns:32px minmax(0,1fr) 32px!important;gap:6px!important;padding:6px!important}.catbar::after{left:42px!important;right:42px!important}.catbtn{width:32px!important;height:32px!important;min-width:32px!important;border-radius:10px!important}.cchip{min-height:32px!important;padding:0 11px!important;font-size:10.5px!important}}