/* KingsCorner Megamenu (Phase 1) */
.megamenu { position: relative; margin: 20px 0; z-index: 1000; }

.megamenu-pills {
  display: flex; gap: 12px; align-items: stretch;
  padding: 8px; border-radius: 16px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}

.mm-pill {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 20px; border-radius: 12px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: #cbd5e1;
  font-size: 15px; font-weight: 600; letter-spacing: 0.2px;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 220ms ease, color 180ms ease, transform 120ms ease;
}
.mm-pill:hover { background: rgba(30, 41, 59, 0.55); color: #f1f5f9; }
.mm-pill:active { transform: translateY(1px); }
.mm-pill.is-active {
  background: rgba(14, 165, 233, 0.10);
  border-color: rgba(14, 165, 233, 0.55);
  color: #e0f2fe;
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.35), 0 0 24px rgba(14, 165, 233, 0.28);
}

.mm-icon { font-size: 18px; line-height: 1; }
.mm-label { line-height: 1; }
.mm-chevron { font-size: 12px; opacity: 0.55; transition: transform 200ms ease; }
.mm-pill.is-active .mm-chevron { transform: rotate(180deg); opacity: 0.9; }

.mm-badge {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  background: #334155; color: #f8fafc;
}
.mm-badge[data-color="green"]  { background: #10b981; }
.mm-badge[data-color="yellow"] { background: #f59e0b; }
.mm-badge[data-color="red"]    { background: #ef4444; }
.mm-badge[data-color="cyan"]   { background: #0ea5e9; }
.mm-badge[data-color="purple"] { background: #a855f7; }

/* Panels float absolutely so opening one does NOT push page content down.
   Promoted from the homepage's inline override (Phase 1b) so every page
   inheriting the megamenu gets the same floating behavior. */
.mm-panel {
  position: absolute;
  top: calc(100% + 12px);
  z-index: 50;
  padding: 20px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 20px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(148,163,184,0.05);
  width: max-content;
  max-width: calc(100% - 24px);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 200ms ease, transform 220ms ease;
}
/* Horizontal alignment based on which segment opened it */
.mm-panel[data-align="left"] { left: 0; right: auto; }
.mm-panel[data-align="center"] { left: 50%; right: auto; transform: translate(-50%, -6px); }
.mm-panel[data-align="center"].is-open { transform: translate(-50%, 0); }
.mm-panel[data-align="right"] { right: 0; left: auto; }
.mm-panel.is-open { opacity: 1; transform: translateY(0); }
.mm-panel[hidden] { display: none; }

/* Homepage hides the panel header; matched here for consistency across pages */
.mm-panel-header { display: none; }
.mm-panel-header h2 { margin: 0 0 4px; font-size: 20px; color: #f1f5f9; display: flex; align-items: center; gap: 10px; }
.mm-icon-lg { font-size: 22px; }
.mm-panel-sub { margin: 0; color: #94a3b8; font-size: 13px; }

.mm-panel-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
.mm-card {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  border-radius: 12px; background: rgba(30, 41, 59, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.10);
  color: #e2e8f0; text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.mm-card:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 165, 233, 0.35);
  background: rgba(30, 41, 59, 0.75);
}
.mm-card-icon {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 10px; display: grid; place-items: center;
  font-size: 20px; font-weight: 700;
  background: color-mix(in srgb, var(--card-accent, #0ea5e9) 18%, transparent);
  color: var(--card-accent, #0ea5e9);
  border: 1px solid color-mix(in srgb, var(--card-accent, #0ea5e9) 35%, transparent);
}
.mm-card-body h3 { margin: 0 0 3px; font-size: 15px; color: #f1f5f9; }
.mm-card-body p  { margin: 0; font-size: 12.5px; color: #94a3b8; line-height: 1.35; }

.mm-tip {
  margin-top: 16px; padding-top: 14px; text-align: center;
  border-top: 1px solid rgba(148, 163, 184, 0.10);
  color: #64748b; font-size: 12.5px;
}
.mm-tip-icon { margin-right: 4px; }

@media (max-width: 900px) {
  .megamenu-pills { flex-wrap: wrap; }
  .mm-pill { flex: 1 1 45%; }
  .mm-label { display: inline; }
}