/* =================================================================
   Coswaa Mega Menu — Astra compatible
   ================================================================= */

/* ── Trigger in nav ─────────────────────────────────────────── */
.coswaa-mega-trigger > a {
  font-weight: 700 !important;
  color: var(--c-primary) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.coswaa-arrow { display: inline-block; transition: transform .18s ease; }
.coswaa-mega-trigger > a[aria-expanded="true"] .coswaa-arrow { transform: rotate(180deg); }

/* ── Full-screen overlay panel ──────────────────────────────── */
#coswaa-mega-menu {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 999999;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}
#coswaa-mega-menu:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#coswaa-mega-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 999998;
  cursor: pointer;
}

/* ── Inner container ────────────────────────────────────────── */
.coswaa-mega-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 20px 28px 48px;
  flex: 1;
}

/* ── Header row ─────────────────────────────────────────────── */
.coswaa-mega-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 22px;
  border-bottom: 2px solid var(--c-border);
  margin-bottom: 32px;
}
.coswaa-mega-title { font-size: 20px; font-weight: 800; color: var(--c-text); }
.coswaa-mega-close {
  width: 38px; height: 38px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 50%;
  cursor: pointer;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
  transition: background var(--c-t), color var(--c-t), border-color var(--c-t);
}
.coswaa-mega-close:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

/* ── Category grid ──────────────────────────────────────────── */
.coswaa-mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 28px;
}

/* ── Column ─────────────────────────────────────────────────── */
.coswaa-mega-col { display: flex; flex-direction: column; gap: 8px; }

.coswaa-cat-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--c-text);
  text-decoration: none;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--c-border);
  margin-bottom: 4px;
  transition: color var(--c-t);
}
.coswaa-cat-heading:hover { color: var(--c-primary); text-decoration: none; }
.coswaa-cat-icon { font-size: 18px; line-height: 1; }

.coswaa-mega-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.coswaa-mega-col ul li a {
  font-size: 13px;
  color: var(--c-muted);
  text-decoration: none;
  padding: 3px 0;
  display: block;
  transition: color var(--c-t), padding-left var(--c-t);
}
.coswaa-mega-col ul li a:hover { color: var(--c-primary); padding-left: 6px; }

/* ── Coming soon column ─────────────────────────────────────── */
.coswaa-coming-soon-col .coswaa-cat-heading { color: var(--c-muted); }
.coswaa-coming-soon-col ul li a {
  opacity: .5;
  pointer-events: none;
  cursor: default;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .coswaa-mega-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .coswaa-mega-inner { padding: 16px 16px 36px; }
}
@media (max-width: 480px) {
  .coswaa-mega-grid { grid-template-columns: 1fr; }
}