/* Nova sidebar (design Cassino) injetada dentro do container Vue .sidebar-color */

.sidebar-color{
  --sidebar-bg:#0a0a0d;
  --card-bg:#18181B;
  --card-bg-hover:#1f1f23;
  --pill-bg:#27272A;
  --text-muted:#A1A1AA;
  --title:#ffffff;
  --icon:#ffffff;
  --accent:#0485F7;
  --divider: rgba(255,255,255,0.1);
}

/* Esconde o conteúdo original da sidebar Vue (exceto o header mobile com o botão fechar) */
.sidebar-color.apex-ready > *:not(.apex-sidebar):not(.apex-keep){
  display:none !important;
}

.sidebar-color.apex-ready{
  background: var(--sidebar-bg) !important;
  scrollbar-width:none;
}
.sidebar-color.apex-ready::-webkit-scrollbar{ display:none; }

.apex-sidebar{
  width:100%;
  background: var(--sidebar-bg);
  display:flex;
  flex-direction:column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}
.apex-sidebar *{ box-sizing:border-box; }

/* ===== Tabs ===== */
.apex-sidebar .tabs-row{
  display:flex;
  align-items:stretch;
  gap:8px;
  padding: 12px 24px 8px 24px;
}
.apex-sidebar .tabs-border{
  display:flex;
  flex:1;
  align-items:stretch;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.apex-sidebar .tab-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  padding: 4px 0 12px 0;
  margin-bottom:-1px;
  font-size:14px;
  font-weight:600;
  color: rgba(255,255,255,0.45);
  cursor:pointer;
  text-decoration:none;
  transition: color .15s;
}
.apex-sidebar .tab-btn:hover{ color: var(--title); }
.apex-sidebar .tab-btn.active{
  color: var(--title);
  border-bottom-color: var(--accent);
}
.apex-sidebar .tab-btn svg{ flex-shrink:0; width:18px; height:18px; }

/* ===== Promo banner ===== */
.apex-sidebar .promo-wrap{
  padding: 12px 24px 8px 24px;
  overflow: visible;
}
.apex-sidebar .promo-card{
  position:relative;
  display:block;
  width:100%;
  height:107px;
  border-radius:12px 90px 12px 12px;
  background: var(--card-bg);
  padding:16px;
  text-align:left;
  border:none;
  cursor:pointer;
  overflow:visible;
  text-decoration:none;
}
.apex-sidebar .promo-content{
  position:relative;
  z-index:2;
  max-width:58%;
}
.apex-sidebar .promo-content h3{
  margin:0;
  font-size:16px;
  font-weight:700;
  color: var(--title);
}
.apex-sidebar .promo-content p{
  margin:4px 0 0 0;
  font-size:10px;
  line-height:1.4;
  color: rgba(255,255,255,0.6);
}
.apex-sidebar .promo-pill{
  margin-top:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:20px;
  border-radius:9999px;
  background: var(--accent);
  padding:0 16px;
  font-size:10px;
  font-weight:400;
  color:#FCFCFC;
  transition: transform .2s ease-out;
}
.apex-sidebar .promo-card:hover .promo-pill{ transform:scale(1.05); }
.apex-sidebar .promo-icon{
  position:absolute;
  right:-8px;
  bottom:-14px;
  z-index:3;
  height:120px;
  width:120px;
  object-fit:contain;
  pointer-events:none;
  transition: transform .3s ease-out;
}
.apex-sidebar .promo-card:hover .promo-icon{
  transform: scale(1.08);
}

/* ===== Quick actions ===== */
.apex-sidebar .quick-actions{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
  padding: 8px 24px 16px 24px;
}
.apex-sidebar .quick-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:64px;
  border-radius:12px;
  border:1px solid transparent;
  background: var(--card-bg);
  text-decoration:none;
  cursor:pointer;
  transition: background .15s;
}
.apex-sidebar .quick-item:hover{ background: var(--card-bg-hover); }
.apex-sidebar .quick-item svg{ width:24px; height:24px; color: rgba(255,255,255,0.8); }
.apex-sidebar .quick-item span{ font-size:12px; color: var(--text-muted); }
.apex-sidebar .quick-item.disabled{
  pointer-events:none;
  cursor:default;
}
.apex-sidebar .quick-item.disabled .quick-item-inner{ filter: blur(1px); }
.apex-sidebar .quick-item-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.apex-sidebar .lock-badge{
  position:absolute;
  top:-2px;
  right:4px;
  width:14px;
  height:18px;
  color: var(--text-muted);
}

/* ===== Section header ===== */
.apex-sidebar .section-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 16px 24px 12px 24px;
}
.apex-sidebar .section-header .line{ height:1px; flex:1; background: var(--divider); }
.apex-sidebar .section-header span{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.4);
}
/* ===== Category grid (2 cols) ===== */
.apex-sidebar .category-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:8px;
  padding: 0 24px;
}
.apex-sidebar .category-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-radius:12px;
  border:1px solid transparent;
  background: var(--card-bg);
  padding:12px;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition: background .15s;
}
.apex-sidebar .category-item:hover{ background: var(--card-bg-hover); }
.apex-sidebar .category-item svg{ width:20px; height:20px; color: rgba(255,255,255,0.8); }
.apex-sidebar .category-item span{ font-size:12px; color: var(--text-muted); }
.apex-sidebar .category-item.disabled{ pointer-events:none; cursor:default; }
.apex-sidebar .category-item.disabled .category-inner{ filter: blur(1px); }
.apex-sidebar .category-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

/* ===== Other options (2 cols wide cards) ===== */
.apex-sidebar .other-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:8px;
  padding: 0 24px;
}
.apex-sidebar .other-item{
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:12px;
  border:1px solid transparent;
  background: var(--card-bg);
  padding:14px 16px;
  text-decoration:none;
  cursor:pointer;
  transition: background .15s;
}
.apex-sidebar .other-item:hover{ background: var(--card-bg-hover); }
.apex-sidebar .other-item svg{ width:20px; height:20px; flex-shrink:0; color: rgba(255,255,255,0.8); }
.apex-sidebar .other-item span{ font-size:12px; color: var(--text-muted); }

/* ===== Social ===== */
.apex-sidebar .social-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding: 0 24px 16px 24px;
}
.apex-sidebar .social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius:9999px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
  text-decoration:none;
  transition: background .15s, color .15s;
}
.apex-sidebar .social-btn:hover{
  background: rgba(255,255,255,0.1);
  color: var(--title);
}
.apex-sidebar .social-btn svg{ width:18px; height:18px; }

/* ===== Views das abas Cassino / Esportes ===== */
.apex-sidebar .tab-view{ display:none; }
.apex-sidebar .tab-view.active{ display:block; }

/* ===== Modo colapsado (70px) — rail de ícones estilo DonaldBet ===== */
.apex-sidebar .apex-collapsed-rail{
  display:none;
  flex-direction:column;
  align-items:center;
  width:100%;
  padding: 12px 10px 16px;
  gap:8px;
}

.sidebar-color.apex-ready.apex-collapsed .apex-expanded{
  display:none !important;
}
.sidebar-color.apex-ready.apex-collapsed .apex-collapsed-rail{
  display:flex !important;
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}
.sidebar-color.apex-ready.apex-collapsed .apex-sidebar{
  height:100%;
  min-height:0;
}
.sidebar-color.apex-ready.apex-collapsed{
  overflow-x:hidden !important;
}

.apex-sidebar .rail-tab-wrap{
  display:flex;
  justify-content:center;
  width:100%;
  padding-bottom:4px;
}
.apex-sidebar .rail-tab-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  border:none;
  border-radius:8px;
  background: var(--card-bg);
  color: var(--title);
  cursor:pointer;
  transition: background .15s, filter .15s;
}
.apex-sidebar .rail-tab-btn:hover{
  filter: brightness(1.1);
}
.apex-sidebar .rail-tab-btn.active{
  background: var(--accent);
  color:#fff;
}
.apex-sidebar .rail-dots{
  position:absolute;
  bottom:6px;
  left:50%;
  display:flex;
  gap:4px;
  transform:translateX(-50%);
}
.apex-sidebar .rail-dots .dot{
  width:4px;
  height:4px;
  border-radius:9999px;
  background: rgba(255,255,255,0.3);
}
.apex-sidebar .rail-dots .dot.active{
  background:#fff;
}

.apex-sidebar .rail-stack{
  display:none;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
}
.apex-sidebar .rail-stack.active{
  display:flex;
}

.apex-sidebar .rail-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  border-radius:8px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  text-decoration:none;
  transition: color .15s, background .15s;
  flex-shrink:0;
}
.apex-sidebar .rail-icon:hover{
  color: var(--title);
  background: rgba(255,255,255,0.08);
}
.apex-sidebar .rail-icon svg{
  width:20px;
  height:20px;
  flex-shrink:0;
}
.apex-sidebar .rail-icon img{
  width:28px;
  height:28px;
  object-fit:contain;
  border-radius:50%;
}
.apex-sidebar .rail-icon.disabled{
  opacity:0.45;
  pointer-events:none;
}

.apex-sidebar .rail-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
  padding-top:8px;
  margin-top:auto;
  border-top:1px solid rgba(255,255,255,0.06);
}