/* ============================================================
   MENU Z ROZWIJANYM PANELEM — wersja ciemna
   Mechanika podpatrzona na cludo.pl (pozycja "Oferta" rozwija
   panel absolutny pod paskiem). U nas: ciemny panel w kolorach
   strony, kazda pozycja z opisem i cena, ostre krawedzie.
   Ladowany PO ui.css na stronach ciemnych.
   ============================================================ */

.mnu { position: relative; display: inline-flex; }
.mnu > button {
  font: inherit; font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  color: var(--on-dark-2, #c3c6d4); background: none; border: 0; cursor: pointer;
  padding: 8px 0; display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s ease;
}
.mnu > button:hover,
.mnu[data-otwarte="tak"] > button { color: #fff; }
.mnu > button::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.mnu[data-otwarte="tak"] > button::after { transform: rotate(-135deg) translate(-2px,-2px); }

.mnu__panel {
  position: absolute; top: calc(100% + 18px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(580px, calc(100vw - 28px));
  background: #14151d;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 26px 60px -24px rgba(0,0,0,.8);
  padding: 6px; z-index: 120;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .28s cubic-bezier(.16,1,.3,1), visibility .2s;
}
.mnu[data-otwarte="tak"] .mnu__panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* strzalka-lacznik z paskiem menu */
.mnu__panel::before {
  content: ""; position: absolute; top: -7px; left: 50%; margin-left: -7px;
  width: 12px; height: 12px; background: #14151d;
  border-left: 1px solid rgba(255,255,255,.14); border-top: 1px solid rgba(255,255,255,.14);
  transform: rotate(45deg);
}

.mnu__poz {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  padding: 15px 18px; text-decoration: none; color: inherit;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .18s ease;
}
.mnu__poz:last-child { border-bottom: 0; }
.mnu__poz:hover, .mnu__poz:focus-visible { background: rgba(255,255,255,.055); outline: none; }
.mnu__poz b {
  grid-column: 1; font-family: 'Sora','Archivo',sans-serif; font-weight: 700;
  font-size: 17px; letter-spacing: -.02em; color: #fff;
}
.mnu__poz span {
  grid-column: 1; font-size: 13.5px; line-height: 1.45; color: var(--on-dark-3, #8b8fa3);
}
.mnu__poz i {
  grid-column: 2; grid-row: 1; font-style: normal; font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--accent-2, #4d74ff); white-space: nowrap; align-self: center;
}
.mnu__poz--aktywna b::after { content: " ·"; color: var(--accent-2, #4d74ff); }

/* na telefonie: panel wchodzi w kolumne menu, bez zawieszania */
@media (max-width: 900px) {
  .mnu { display: block; width: 100%; }
  .mnu > button { width: 100%; justify-content: space-between; padding: 12px 0; }
  .mnu__panel {
    position: static; transform: none; width: 100%; box-shadow: none;
    border-left: 0; border-right: 0; opacity: 1; visibility: visible;
    display: none; margin-bottom: 8px;
  }
  .mnu__panel::before { display: none; }
  .mnu[data-otwarte="tak"] .mnu__panel { display: block; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mnu__panel, .mnu > button, .mnu > button::after { transition: none; }
}