/* ===== Theme variables ===== */
:root {
  --cmm-bg: rgba(17, 19, 23, .88);
  --cmm-bg-2: rgba(12, 14, 18, .92);
  --cmm-border: rgba(255, 255, 255, .08);
  --cmm-text: #e6e6e6;
  --cmm-muted: #b9c0cf;
  --cmm-accent: #4f8cff;
  --cmm-accent-2: #6f56ff;
  --cmm-radius-lg: 18px;
  --cmm-radius-md: 14px;
  --cmm-shadow: 0 12px 24px rgba(0,0,0,.35);
  --cmm-transition-fast: .18s ease;
  --cmm-transition-med: .24s cubic-bezier(.22,.61,.36,1);
}

/* ===== Header layout: menu near logo + separator ===== */
.site-header-top .header-container { display:flex; align-items:center; gap:16px; }
.top-header-logo { display:flex; align-items:center; }
/* vertical bar separator between logo and nav */
.top-header-logo::after {
  content: "|";
  color: rgba(255,255,255,.35);
  margin-inline: 12px;
  font-weight: 600;
}
.top-header-navigation { position: relative; }
.top-nav-menu { display:flex; align-items:center; gap:18px; }

/* First item with icon (Categories) */
.top-nav-menu .menu-item-categories > .mega-toggle {
  display:flex; align-items:center; gap:8px;
  font-weight: 700; color: #fff;
}
.top-nav-menu .menu-item-categories > .mega-toggle .cmm-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width: 24px; height: 24px; border-radius:8px;
  background: linear-gradient(135deg, rgba(79,140,255,.25), rgba(111,86,255,.25));
  color:#fff;
}

/* ===== Modern mega menu container ===== */
.cmm-wrap.cmm-modern {
  display: flex;
  background: var(--cmm-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--cmm-border);
  border-radius: var(--cmm-radius-lg);
  padding: 20px;
  gap: 16px;
  color: var(--cmm-text);
  box-shadow: var(--cmm-shadow);
}

/* ===== Tabs (with icons) ===== */
.cmm-tabs {
  width: 24%;
  background: var(--cmm-bg-2);
  border: 1px solid var(--cmm-border);
  border-radius: var(--cmm-radius-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cmm-tab {
  all: unset; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--cmm-text);
  font-weight: 700;
  line-height: 1;
  transition: background var(--cmm-transition-fast), color var(--cmm-transition-fast), transform var(--cmm-transition-med);
  position: relative;
}
.cmm-tab .cmm-icon { color: var(--cmm-muted); transition: color var(--cmm-transition-fast), transform var(--cmm-transition-med); }
.cmm-tab .cmm-label { letter-spacing: .2px; }
.cmm-tab:hover { background: rgba(255,255,255,.06); transform: translateX(-2px); }
.cmm-tab:hover .cmm-icon { color: var(--cmm-text); transform: scale(1.06); }
.cmm-tab.is-active {
  background: linear-gradient(135deg, rgba(79,140,255,.22), rgba(111,86,255,.22));
  color: #fff;
}
.cmm-tab.is-active .cmm-icon { color: #fff; }
.cmm-tab:focus-visible {
  outline: 2px solid var(--cmm-accent);
  outline-offset: 2px;
}

/* ===== Panels ===== */
.cmm-panels { width: 76%; }
.cmm-panel { display: none; }
.cmm-panel.is-active { display: block; }

/* ===== Grid ===== */
.cmm-grid { display: grid; gap: 10px 28px; }
.cmm-grid.cols-4 { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.cmm-grid.cols-5 { grid-template-columns: repeat(5, minmax(150px, 1fr)); }

/* ===== Items (animated underline) ===== */
.cmm-item {
  position: relative;
  color: var(--cmm-text);
  font-weight: 600;
  text-decoration: none;
  padding: 6px 0;
  transition: color var(--cmm-transition-fast), transform var(--cmm-transition-med);
}
.cmm-item::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0%; height: 2px;
  background: linear-gradient(90deg, var(--cmm-accent), var(--cmm-accent-2));
  transition: width var(--cmm-transition-med);
  border-radius: 2px;
}
.cmm-item:hover { color: #fff; transform: translateY(-1px); }
.cmm-item:hover::after { width: 100%; }

.cmm-empty { opacity: .7; }

/* ===== Dropdown integration in header (smooth open/close) ===== */
.top-nav-menu .menu-item-mega { position: static; }
.top-nav-menu .menu-item-mega .cmm-dropdown {
  position: absolute; left: 0; right: 0; top: 100%;
  visibility: hidden; opacity: 0; transform: translateY(10px);
  transition: opacity var(--cmm-transition-fast), transform var(--cmm-transition-med), visibility 0s linear .18s;
  z-index: 9999; padding-top: 12px;
  pointer-events: none;
}
.top-nav-menu .menu-item-mega:hover > .cmm-dropdown,
.top-nav-menu .menu-item-mega.is-open > .cmm-dropdown {
  visibility: visible; opacity: 1; transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .cmm-tabs { width: 100%; flex-direction: row; }
  .cmm-panels { width: 100%; }
}
@media (max-width: 768px) {
  .top-header-logo::after { content: ""; margin: 0; } /* remove separator on mobile */
}
@media (max-width: 640px) {
  .cmm-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .cmm-tab, .cmm-item, .top-nav-menu .menu-item-mega .cmm-dropdown { transition: none !important; }
}