/* ═══════════════════════════════════════════════
   MEGA MENU — clean, no broken token references
   ═══════════════════════════════════════════════ */

/* ── Panel ── */
.mega-panel {
  position: fixed;
  left: 0; right: 0;
  top: var(--nav-h);       /* 64px */
  background: #ffffff;
  border-top: 1px solid #e2e2ec;
  box-shadow: 0 20px 60px rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
  pointer-events: none;
  z-index: 8900;
}
/* Desktop only: hover-open animation */
@media (min-width: 901px) {
  .nav-item.open .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* ── Inner layout ── */
.mega-inner {
  display: flex;
  max-width: 1160px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  gap: 0;
}

/* ── Columns ── */
.mega-col {
  flex: 1;
  padding: 0 1.25rem;
  border-right: 1px solid var(--border-soft);
  min-width: 0;           /* prevent flex overflow */
}
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child  { border-right: none; padding-right: 0; }
.mega-col--wide  { flex: 1.35; }
.mega-col--promo { flex: 0.95; }

/* ── Section heading ── */
.mega-heading {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:var(--text-muted);
  padding: .25rem .5rem;
  margin-bottom: .5rem;
  display: block;
}

/* ── Item ── */
.mega-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .5rem;
  border-radius: 10px;
  color:var(--text);
  text-decoration: none;
  transition: background .12s;
  margin-bottom: 2px;
}
.mega-item:hover { background:var(--brand-light); }
.mega-item:hover .mi-title { color: #673DE6; }

/* Icon — monochrome */
.mega-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background:var(--brand-mid);
  color: #673DE6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.mega-item:hover .mega-icon { background: #673DE6; color: #ffffff; }
.mega-icon svg { width: 16px; height: 16px; stroke-width: 1.8; display: block; }

/* Text */
.mi-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;           /* allow text truncation */
}
.mi-title {
  font-size: .855rem;
  font-weight: 600;
  color:var(--text);
  transition: color .12s;
  white-space: nowrap;
}
.mi-sub {
  font-size: .74rem;
  color:var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Small variant */
.mega-item--sm { padding: .4rem .5rem; }
.mega-item--sm .mega-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
}
.mega-item--sm .mega-icon svg { width: 13px; height: 13px; }
.mega-item--sm .mi-title { font-size: .82rem; }

/* ── TLD grid ── */
.tld-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin-bottom: .75rem;
}
.tld-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .38rem .65rem;
  background:var(--surface-alt);
  border:1px solid var(--border);
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 700;
  color:var(--text);
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.tld-chip:hover { background:var(--brand-light); border-color: #673DE6; color: #673DE6; }
.tld-chip span  { font-size: .7rem; font-weight: 500; color:var(--text-muted); }
.tld-chip:hover span { color: #673DE6; }

.view-all {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-size: .8rem;
  font-weight: 600;
  color: #673DE6;
  text-decoration: none;
  padding: .25rem .5rem;
  transition: gap .2s;
}
.view-all:hover { gap: .5rem; }

/* ── Quick links ── */
.quick-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .4rem .5rem;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 500;
  color:var(--gray-600);
  text-decoration: none;
  transition: background .12s, color .12s;
  margin-bottom: 2px;
}
.quick-link:hover { background:var(--brand-light); color: #673DE6; }
.quick-link svg   { width: 13px; height: 13px; flex-shrink: 0; color:var(--text-muted); }
.quick-link:hover svg { color: #673DE6; }

/* ── Location pills ── */
.loc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .25rem 0;
}
.loc-pill {
  padding: .18rem .6rem;
  background:var(--surface-alt);
  border:1px solid var(--border);
  border-radius: 9999px;
  font-size: .73rem;
  font-weight: 500;
  color:var(--gray-600);
}

/* ── Promo card ── */
.mega-promo {
  background: linear-gradient(145deg, #f4f0ff 0%, #ede9fe 100%);
  border: 1px solid rgba(103,61,230,.14);
  border-radius: 16px;
  padding: 1.1rem;
  margin-bottom: .75rem;
}
.mega-promo--dark {
  background: linear-gradient(145deg, #1a0533 0%, #2d1065 100%);
  border-color: rgba(255,255,255,.08);
}
.promo-label {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #673DE6;
  margin-bottom: .4rem;
}
.mega-promo--dark .promo-label { color: rgba(255,255,255,.55); }
.promo-title {
  font-size: .95rem;
  font-weight: 800;
  color:var(--text);
  margin-bottom: .3rem;
  line-height: 1.2;
}
.mega-promo--dark .promo-title { color: #ffffff; }
.promo-desc {
  font-size: .78rem;
  color:var(--text-muted);
  margin-bottom: .65rem;
  line-height: 1.5;
}
.mega-promo--dark .promo-desc { color: rgba(255,255,255,.5); }
.promo-price {
  font-size: .78rem;
  color:var(--text-muted);
  margin-bottom: .75rem;
}
.promo-price strong {
  font-size: 1.35rem;
  font-weight: 800;
  color: #673DE6;
  letter-spacing: -.04em;
}
.mega-promo--dark .promo-price         { color: rgba(255,255,255,.45); }
.mega-promo--dark .promo-price strong  { color: #c4b0ff; }
.promo-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #673DE6;
  color: white;
  padding: .45rem .9rem;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.promo-cta:hover { background: #4e26d4; transform: translateY(-1px); }

/* ── Mobile: handled entirely by responsive.css ── */
/* No rules here — responsive.css uses .nav-list.mobile-open scoped selectors */

/* ── Support promo card ── */
.mega-promo--support {
  background: linear-gradient(145deg, #f4f0ff, #ede9fe);
  border: 1px solid rgba(103,61,230,.14);
}
.mega-promo--green {
  background: linear-gradient(145deg, #f0fdf4, #dcfce7);
  border-color: rgba(5,150,105,.12);
}