/* =========================================================================
   ClickNovaSMM — Premium Menu Re-skin  (cnmenu.css)  v4
   VISUAL ONLY, scoped under `.sidebar.cnmenu`. No routes/JS/backend touched.
   Adapts to all 3 themes + light/dark by tinting from the text colour.
   ========================================================================= */

.sidebar.cnmenu{ box-shadow:4px 0 18px rgba(0,0,0,.06); }
.sidebar.cnmenu .sidebar_bottom{ padding:2px 0 14px; }
.sidebar.cnmenu .sidebar_menu{
  padding:4px 6px 18px;
  scrollbar-width:thin; scrollbar-color:rgba(128,128,128,.35) transparent;
}
.sidebar.cnmenu .sidebar_menu::-webkit-scrollbar{ width:6px; }
.sidebar.cnmenu .sidebar_menu::-webkit-scrollbar-thumb{ background:rgba(128,128,128,.3); border-radius:6px; }

/* ---- Category labels: readable in every theme (muted currentColor) ---- */
.sidebar.cnmenu .cnmenu-sect{
  margin:12px 16px 4px; font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; font-weight:700;
  color:rgba(140,140,160,.9);
  color:color-mix(in srgb, currentColor 72%, transparent);
  user-select:none; -webkit-user-select:none; pointer-events:none;
}

/* ---- Common look for EVERY clickable row (standard + APK/Community) ---- */
.sidebar.cnmenu .menu_item,
.sidebar.cnmenu .smm-navlink{
  position:relative; display:flex !important; align-items:center; gap:11px !important;
  margin:2px 10px !important; padding:9px 11px !important; border-radius:13px !important; text-decoration:none;
  transition:background .18s ease, transform .16s ease;
}
/* Same rounded icon tile for .menu_icon, bare <i> (Child panel) AND .nav-icon (APK/Community) */
.sidebar.cnmenu .menu_item .menu_icon,
.sidebar.cnmenu .menu_item > i.fas,
.sidebar.cnmenu .smm-navlink .nav-icon{
  width:36px !important; height:36px !important; flex:0 0 auto !important; border-radius:10px !important;
  display:grid !important; place-items:center !important; font-size:15px; margin:0 !important;
  background:rgba(128,128,128,.16);
  background:color-mix(in srgb, currentColor 15%, transparent) !important;
  transition:background .18s ease, transform .18s ease;
}
.sidebar.cnmenu .smm-navlink .nav-icon svg{ width:20px !important; height:20px !important; display:block; }
.sidebar.cnmenu .menu_item .menu_name,
.sidebar.cnmenu .smm-navlink .nav-text{ flex:1 1 auto; font-size:14.5px; line-height:1.2; }

/* Hover — identical subtle highlight for ALL rows (overrides the dark smm hover) */
.sidebar.cnmenu .menu_item:hover,
.sidebar.cnmenu .smm-navlink:hover{
  background:rgba(128,128,128,.1) !important;
  background:color-mix(in srgb, currentColor 9%, transparent) !important;
  transform:translateX(2px);
}
.sidebar.cnmenu .menu_item:hover .menu_icon,
.sidebar.cnmenu .menu_item:hover > i.fas,
.sidebar.cnmenu .smm-navlink:hover .nav-icon{ transform:translateY(-1px); }
.sidebar.cnmenu .menu_item:active,
.sidebar.cnmenu .smm-navlink:active{ transform:scale(.985); }

/* Active — keep the site's theme-gradient active bg; make the icon read on it */
.sidebar.cnmenu .menu_item.active .menu_icon,
.sidebar.cnmenu .menu_item.active > i.fas{ background:rgba(255,255,255,.28) !important; }

/* Ticket count badge + APK NEW tag -> aligned to the right */
.sidebar.cnmenu .menu_item .badge{
  margin-left:auto; font-size:11px; font-weight:700; padding:3px 8px; border-radius:20px; line-height:1;
  animation:cnmenuPulse 2.4s infinite;
}
@keyframes cnmenuPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,181,0,.45);} 70%{ box-shadow:0 0 0 6px rgba(255,181,0,0);} 100%{ box-shadow:0 0 0 0 rgba(255,181,0,0);} }
.sidebar.cnmenu .smm-navlink .smm-new-tag{ margin-left:auto !important; }
.sidebar.cnmenu .smm-custom-menu-item{ list-style:none; }

/* ---- Profile: balance + premium, high-contrast Add funds ---- */
.sidebar.cnmenu .user_data{ padding-bottom:12px; }
.sidebar.cnmenu .user_balance{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:9px 14px; border-radius:12px; cursor:pointer;
}
.sidebar.cnmenu .cnmenu-bal-label{
  font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; opacity:.78; line-height:1;
}
.sidebar.cnmenu .user_balance .balance{
  font-size:19px; font-weight:800; line-height:1.1; letter-spacing:.3px; text-shadow:0 1px 2px rgba(0,0,0,.2);
}
.sidebar.cnmenu .cnmenu-addfunds{
  margin:10px 14px 2px; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px; border-radius:12px; text-decoration:none;
  font-weight:800; font-size:14px; color:#fff !important;
  /* dark veil over the theme gradient guarantees white text pops in EVERY theme + light/dark */
  background:
    linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)),
    var(--primary-gradient,linear-gradient(135deg,#fc194a,#bd2445));
  border:1px solid rgba(255,255,255,.3);
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  box-shadow:0 8px 20px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.3);
  animation:cnmenuAddGlow 3.2s ease-in-out infinite;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.sidebar.cnmenu .cnmenu-addfunds i{ color:#fff !important; }
.sidebar.cnmenu .cnmenu-addfunds:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.sidebar.cnmenu .cnmenu-addfunds:active{ transform:scale(.97); }
/* soft breathing glow so the eye is drawn to it */
@keyframes cnmenuAddGlow{
  0%,100%{ box-shadow:0 8px 20px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.3); }
  50%{ box-shadow:0 10px 26px rgba(0,0,0,.28), 0 0 0 3px rgba(255,255,255,.13), inset 0 1px 0 rgba(255,255,255,.36); }
}

/* NEW ribbon shimmer */
.sidebar.cnmenu .user_badges h4{ position:relative; overflow:hidden; }
.sidebar.cnmenu .user_badges h4::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:translateX(-120%); animation:cnmenuShine 3s infinite;
}
@keyframes cnmenuShine{ 0%{transform:translateX(-120%);} 55%,100%{transform:translateX(220%);} }

/* ---- Mobile open: short item stagger + a one-time nudge on the Add funds btn ---- */
@media (max-width:991px){
  #main_container.toogle_sidebar .sidebar.cnmenu .sidebar_menu > *{ animation:cnmenuIn .3s ease backwards; }
  .sidebar.cnmenu .sidebar_menu > *:nth-child(1){ animation-delay:.02s; }
  .sidebar.cnmenu .sidebar_menu > *:nth-child(2){ animation-delay:.05s; }
  .sidebar.cnmenu .sidebar_menu > *:nth-child(3){ animation-delay:.07s; }
  .sidebar.cnmenu .sidebar_menu > *:nth-child(4){ animation-delay:.09s; }
  .sidebar.cnmenu .sidebar_menu > *:nth-child(5){ animation-delay:.11s; }
  .sidebar.cnmenu .sidebar_menu > *:nth-child(n+6){ animation-delay:.13s; }
  #main_container.toogle_sidebar .sidebar.cnmenu .cnmenu-addfunds{
    animation:cnmenuAddAttn 1.1s ease .35s 2, cnmenuAddGlow 3.2s ease-in-out infinite;
  }
}
@keyframes cnmenuIn{ from{ opacity:0; transform:translateX(-12px);} to{ opacity:1; transform:translateX(0);} }
@keyframes cnmenuAddAttn{ 0%,100%{transform:none} 35%{transform:translateY(-3px) scale(1.03)} 70%{transform:translateY(0) scale(1)} }

/* =========================================================================
   MOBILE — make the drawer the top layer, scrollable, and add a NON-BLOCKING
   subtle dim (pointer-events:none, so it can never block taps). Outside-click
   close is handled by a tiny script in header.twig (no blocking overlay).
   ========================================================================= */
@media (max-width:991px){
  /* ROOT-CAUSE FIX: the theme sets the sidebar position:fixed but with no
     explicit top, so its vertical position followed document flow — and the
     body scroll-lock (position:fixed) then shifted it by the scroll amount,
     pushing it off-screen the further you'd scrolled. Anchor it to the viewport
     with an explicit top/left. Also use the SAME ID specificity as the theme
     (#main_container .sidebar) so the dynamic-viewport height actually wins. */
  #main_container .sidebar.cnmenu{
    position:fixed !important; top:0 !important; left:0 !important;
    z-index:100000 !important;
    height:100vh; height:100svh; height:100dvh;
    max-height:100vh; max-height:100svh; max-height:100dvh;
    overflow-y:auto !important; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain; box-sizing:border-box;
  }
  /* only the real safe-area inset (gesture bar) + normal list spacing */
  .sidebar.cnmenu .sidebar_menu{ padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
  #main_container.toogle_sidebar::after{
    content:""; position:fixed; inset:0; z-index:99990;
    background:rgba(0,0,0,.32); pointer-events:none;   /* never blocks taps */
    animation:cnmenuDimIn .28s ease both;
  }
}
/* Background scroll-lock while the mobile menu is open (class toggled by the
   script in header.twig). Uses overflow:hidden only — it does NOT move the page,
   so there is zero scroll jump/flicker on open or close and the exact position is
   preserved. The drawer is position:fixed with its own scroll, so this never
   blocks scrolling inside the menu. */
html.cnmenu-lock, body.cnmenu-lock{ overflow:hidden !important; overscroll-behavior:none; }
@keyframes cnmenuDimIn{ from{opacity:0} to{opacity:1} }

@media (prefers-reduced-motion: reduce){ .sidebar.cnmenu *, .sidebar.cnmenu{ animation:none !important; transition:none !important; } }