/* ===========================================================================
   AQ-MED — zapisy i terminy + nowe menu (Zaloguj z wyborem, „Zapisz się”)
   Ładowany na stronie głównej i podstronach z menu.
   =========================================================================== */
:root { --zp-amber: #9a5200; --zp-amber-bg: #fff3e0; --zp-green: #0b7a4b; --zp-green-bg: rgba(25,184,134,.12); --zp-grey: #5c667d; }

/* ---------- menu ---------- */
.zp-navlinks { display: flex; align-items: center; gap: inherit; }
.zp-login { position: relative; }
button.nav-login { font-family: var(--font-display); }
.zp-chev { transition: transform .25s var(--ease); }
.zp-login-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--ink); }
.zp-login-btn[aria-expanded="true"] .zp-chev { transform: rotate(180deg); }
.zp-login-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 270px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 130; }
.zp-login-menu[hidden] { display: none; }
.zp-login-menu a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; color: var(--ink); }
.zp-login-menu a:hover, .zp-login-menu a:focus-visible { background: var(--bg-soft); }
.zp-login-menu b { display: block; font-family: var(--font-display); font-size: 14.5px; font-weight: 600; }
.zp-login-menu small { display: block; font-size: 12px; color: var(--zp-grey); }
.zp-li-ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--bg-blue); color: var(--blue); }
.zp-li-ic--team { background: rgba(229,52,63,.1); color: var(--red); }

.nav-links .zp-cta.btn { padding: 11px 20px; font-size: 14px; color: #fff; display: inline-flex; }
.zp-cta .zp-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: zpPulse 2s infinite; }
@keyframes zpPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 50% { box-shadow: 0 0 0 5px rgba(255,255,255,0); } }
@media (max-width: 1080px) { .nav-links .zp-cta.btn { display: inline-flex; padding: 10px 16px; font-size: 13.5px; } }
@media (max-width: 620px) {
  .nav-links { display: flex; margin-left: auto; margin-right: 8px; }
  .nav-links > :not(.zp-cta) { display: none; }
  .nav-links .zp-cta.btn { padding: 9px 14px; font-size: 13px; }
}

/* menu mobilne */
.mobile-menu .zp-mob-login { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.mobile-menu .zp-mob-login span { width: 100%; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--zp-grey); }
.mobile-menu .zp-mob-login a { font-size: 15px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); }
.mobile-menu a.zp-mob-cta { color: #fff; padding: 13px 22px; font-size: 16px; }

/* ---------- licznik w hero ---------- */
#heroDash.empty .countdown, #heroDash.empty .dash-foot { opacity: 1; }
#heroDash .dash-foot .btn { flex: 1 1 auto; justify-content: center; }
#heroDash.zp-none .countdown, #heroDash.zp-none .zp-next { display: none; }
.zp-spots { margin-top: 16px; }
.zp-spots:empty { display: none; }
.zp-spots-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.zp-lvl-low { color: var(--zp-amber); } .zp-lvl-ok { color: var(--zp-green); } .zp-lvl-full, .zp-lvl-soon { color: var(--zp-grey); }
.zp-bar { height: 6px; border-radius: 6px; background: var(--bg-soft); border: 1px solid var(--line-soft); overflow: hidden; margin-top: 7px; }
.zp-bar i { display: block; height: 100%; border-radius: 6px; }
.zp-bar.ok i { background: var(--mint); } .zp-bar.low i { background: #e08a00; } .zp-bar.full i { background: var(--zp-grey); }
.zp-next { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.zp-next[hidden] { display: none; }
.zp-next-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--zp-grey); margin: 0 0 8px; display: flex; justify-content: space-between; gap: 8px; }
.zp-next-lbl a { color: var(--red); letter-spacing: .04em; text-transform: none; font-size: 12px; }
.zp-next-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.zp-next-btn { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 7px 10px; color: var(--ink); transition: background .2s, border-color .2s; }
.zp-next-btn:hover { background: var(--bg-soft); }
.zp-next-btn[aria-pressed="true"] { background: #fff; border-color: var(--red); box-shadow: 0 6px 18px rgba(229,52,63,.12); }
.zp-next-date { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--red); min-width: 46px; }
.zp-next-name { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp-pill { font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; background: var(--bg-soft); color: var(--zp-grey); }
.zp-pill.ok { background: var(--zp-green-bg); color: var(--zp-green); } .zp-pill.low { background: var(--zp-amber-bg); color: var(--zp-amber); }

/* ---------- sekcja Najbliższe terminy ---------- */
.zp-terms-sec { background: var(--bg-soft); }
.zp-terms-sec[hidden] { display: none; }
.zp-row { margin-bottom: 28px; }
.zp-row .sec-head { margin-bottom: 22px; }
.zp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.zp-chip { font-family: var(--font-display); font-weight: 500; font-size: 13.5px; padding: 9px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.zp-chip:hover { border-color: var(--zp-grey); }
.zp-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.zp-terms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.zp-term { display: grid; grid-template-columns: 78px minmax(0, 1fr) 220px auto; gap: 22px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px 22px; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.zp-term:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.zp-date { text-align: center; border-right: 1px solid var(--line-soft); padding-right: 18px; }
.zp-date b { display: block; font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--red); }
.zp-date span { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-top: 4px; }
.zp-date i { display: block; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--zp-grey); margin-top: 2px; }
.zp-cat { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.zp-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink); margin: 3px 0 6px; line-height: 1.2; }
.zp-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--zp-grey); }
.zp-meta b { color: var(--ink); font-weight: 500; }
.zp-when { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; }
.zp-term .zp-spots { margin-top: 0; }
.zp-act { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 160px; }
.zp-act .btn { justify-content: center; padding: 11px 18px; font-size: 14px; }
.zp-link { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ink-2); text-align: center; padding: 4px; }
.zp-link:hover { color: var(--red); }
.btn--wait { background: var(--ink); color: #fff; }
.btn--wait:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
@media (max-width: 980px) { .zp-term { grid-template-columns: 70px minmax(0, 1fr); } .zp-term > .zp-spots, .zp-act { grid-column: 1 / -1; } .zp-act { flex-direction: row; align-items: center; } .zp-act .btn { flex: 1; } }
@media (max-width: 520px) { .zp-term { padding: 16px; gap: 14px 16px; } .zp-date { padding-right: 12px; } .zp-date b { font-size: 28px; } .zp-act { flex-direction: column; align-items: stretch; } }
.zp-terms-foot { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* ---------- karty szkoleń ---------- */
.zp-card-next { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.zp-card-next b { color: var(--ink); font-weight: 600; }

/* ---------- telefon przy kontakcie ---------- */
.zp-call { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.zp-call[hidden] { display: none; }

/* ---------- pasek zapisu (telefon) ---------- */
.zp-sticky { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 150; display: none; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 -6px 30px rgba(13,27,51,.16); padding: 10px 10px 10px 14px; transform: translateY(140%); transition: transform .45s var(--ease); }
.zp-sticky.show { transform: none; }
.zp-sticky .zp-s-info { flex: 1; min-width: 0; line-height: 1.25; }
.zp-sticky b { display: block; font-family: var(--font-display); font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zp-sticky span { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--zp-amber); }
.zp-sticky .btn { padding: 10px 16px; font-size: 13.5px; flex-shrink: 0; }
@media (max-width: 620px) { .zp-sticky.on { display: flex; } }

@media (prefers-reduced-motion: reduce) { .zp-cta .zp-dot { animation: none; } .zp-term, .zp-sticky { transition: none; } }