/* ================================================================
   qa.css — Sekcja "Zapytaj użytkowników"
   BEM: qa__element--modifier
   Zmienne: --brand, --ink, --line, --bg, --muted (z main.css)
   ================================================================ */

.qa {
  margin: 40px 0;
  padding: 28px;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 16px;
}

/* ── Header ─────────────────────────────────────────────────── */
.qa__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.qa__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 800;
  color: var(--color-ink);
  margin: 0 0 6px;
}

.qa__title .bi { color: var(--color-primary); }

.qa__count {
  background: #eff6ff;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
}

.qa__sub {
  font-size: 13.5px;
  color: var(--color-ink-soft);
  margin: 0;
  max-width: 520px;
  line-height: 1.6;
}

/* ── Formularze ─────────────────────────────────────────────── */
.qa__form {
  background: #f8fafc;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 22px;
}

.qa__form-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 12px;
}

.qa__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.qa__input,
.qa__textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--color-ink);
  background: #fff;
  box-sizing: border-box;
  transition: border-color .15s;
}

.qa__input:focus,
.qa__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.qa__textarea {
  resize: vertical;
  margin-bottom: 10px;
}

.qa__form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.qa__hint {
  font-size: 11.5px;
  color: var(--color-ink-soft);
}

.qa__msg {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
}

/* ── Lista pytań ────────────────────────────────────────────── */
.qa__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qa__item {
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 18px;
}

/* Pytanie */
.qa__question {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.qa__q-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.qa__q-body { flex: 1; min-width: 0; }

.qa__q-text {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.55;
}

.qa__q-meta {
  font-size: 12px;
  color: var(--color-ink-soft);
  margin-top: 4px;
}

/* Odpowiedź */
.qa__answer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 12px 0 0 42px;
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 10px;
}

.qa__answer--protetyk {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.qa__a-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #e2e8f0;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.qa__a-icon--protetyk {
  background: var(--color-primary);
  color: #fff;
}

.qa__a-body { flex: 1; min-width: 0; }

.qa__a-author {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 4px;
}

.qa__badge-protetyk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--color-primary);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  text-decoration: none;
}

a.qa__badge-protetyk:hover {
  background: var(--color-primary-dark);
  color: #fff;
}

.qa__a-date {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--color-ink-soft);
}

.qa__a-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--color-ink);
}

/* Głos pomocna */
.qa__helpful {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 4px 12px;
  background: none;
  border: 1.5px solid var(--color-border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: all .15s;
}

.qa__helpful:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.qa__helpful:disabled { cursor: default; }

/* Odpowiedz na pytanie */
.qa__reply-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0 42px;
  padding: 0;
  background: none;
  border: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  font-family: inherit;
}

.qa__reply-toggle:hover { text-decoration: underline; }

.qa__reply-form {
  margin: 12px 0 0 42px;
  padding: 14px;
  background: #f8fafc;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Pusty stan ─────────────────────────────────────────────── */
.qa__empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--color-ink-soft);
}

.qa__empty-icon {
  font-size: 38px;
  display: block;
  margin-bottom: 12px;
  color: #cbd5e1;
}

.qa__empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 4px;
}

.qa__empty-sub { font-size: 13px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .qa { padding: 18px; }
  .qa__form-row { grid-template-columns: 1fr; }
  .qa__answer,
  .qa__reply-toggle,
  .qa__reply-form { margin-left: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   Rozszerzenia: role autorów odpowiedzi, boks placówki, prywatna wiadomość
   ════════════════════════════════════════════════════════════════════════ */

/* ── Odznaki autorów ──────────────────────────────────────────────────────
   Wspólna klasa .qa__badge + wariant roli. Stara .qa__badge-protetyk
   zostaje wyżej dla zgodności, nowy szablon używa .qa__badge--protetyk. */
.qa__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.qa__badge--protetyk { background: var(--color-primary, #1d4ed8); color: #fff; }
a.qa__badge--protetyk:hover { background: var(--color-primary-dark, #1e3a8a); color: #fff; }
.qa__badge--manager  { background: #047857; color: #fff; }
.qa__badge--admin    { background: #334155; color: #fff; }

/* Tło odpowiedzi według roli — protetyk ma już swoje wyżej. */
.qa__answer--manager { background: #ecfdf5; border: 1px solid #a7f3d0; }
.qa__answer--admin   { background: #f8fafc; border: 1px solid #cbd5e1; }
.qa__a-icon--manager { background: #047857; color: #fff; }
.qa__a-icon--admin   { background: #334155; color: #fff; }

/* ── Zaproszenie do logowania zamiast formularza odpowiedzi ─────────────── */
.qa__reply-guest {
  margin: 8px 0 0 38px;
  font-size: 12.5px;
  color: var(--color-ink-soft, #64748b);
}
.qa__link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary, #1d4ed8);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.qa__more-note {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--color-ink-soft, #64748b);
  text-align: center;
}
.qa__helpful--done { color: var(--color-primary, #1d4ed8); }

/* ── Boks w bocznej kolumnie placówki (zamiast „Szybkiego kontaktu”) ──────
   Niebieskie tło jak dawny „Szybki kontakt” (.clinic-cta-box) — boks ma
   przyciągać wzrok w bocznej kolumnie. Konsekwencje odwrócenia kolorów,
   o które łatwo się potknąć:
   • przycisk .btn--primary (niebieski) zniknąłby na niebieskim tle —
     w boksie jest biały z niebieskim tekstem,
   • szare podpowiedzi i linki byłyby nieczytelne — są w odcieniach bieli,
   • pola formularza zostają BIAŁE z ciemnym tekstem: najczytelniejsze
     i od razu widać, gdzie pisać.
   Kontrast białego tekstu na #1d4ed8 ≈ 6.7:1 (WCAG AA wymaga 4.5:1). */
.qa-box {
  background: var(--color-primary, #1d4ed8);
  color: #fff;
  border-radius: var(--radius-lg, 14px);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(29, 78, 216, .22);
}
.qa-box__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #fff;
}
.qa-box__sub {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .85);
  margin: 0 0 14px;
}
.qa-box a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.qa-box a:hover { text-decoration-thickness: 2px; }

/* Formularz: bez własnej ramki, pola jedno pod drugim (wąska kolumna). */
.qa-box .qa__form { border: 0; padding: 0; margin: 0; background: none; }
.qa-box .qa__form-title { display: none; }
.qa-box .qa__form-row { display: flex; flex-direction: column; gap: 8px; }
.qa-box .qa__form-footer { flex-direction: column; align-items: stretch; gap: 10px; }

.qa-box .qa__input,
.qa-box .qa__textarea {
  width: 100%;
  background: #fff;
  color: var(--color-ink, #0f172a);
  border: 1px solid transparent;
}
.qa-box .qa__input::placeholder,
.qa-box .qa__textarea::placeholder { color: #64748b; }
.qa-box .qa__input:focus,
.qa-box .qa__textarea:focus {
  outline: 3px solid rgba(255, 255, 255, .55);
  outline-offset: 1px;
  border-color: #fff;
}
.qa-box .qa__hint { color: rgba(255, 255, 255, .8); font-size: 11.5px; }

/* Przycisk: biały na niebieskim — .btn--primary byłby niewidoczny. */
.qa-box .btn--primary {
  width: 100%;
  justify-content: center;
  background: #fff;
  border-color: #fff;
  color: var(--color-primary, #1d4ed8);
  font-weight: 700;
}
.qa-box .btn--primary:hover,
.qa-box .btn--primary:focus-visible {
  background: #eff6ff;
  border-color: #eff6ff;
  color: var(--color-primary-dark, #1e40af);
}
.qa-box .btn--outline {
  width: 100%;
  justify-content: center;
  background: transparent;
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
}
.qa-box .btn--outline:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* Komunikaty mają własne tło (zielone/czerwone) — dodajemy tylko zaokrąglenie. */
.qa-box .qa__msg { border-radius: 8px; }

/* ── Prywatna wiadomość (tylko placówki z przypisanym protetykiem) ──────── */
.qa-private {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, .35);
}
.qa-private__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  margin-bottom: 6px;
  color: #fff;
}
.qa-private__head .bi { color: rgba(255, 255, 255, .8); }
.qa-private__text {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .85);
  margin: 0 0 10px;
}
.qa-private .qa__textarea,
.qa-private .qa__input { width: 100%; margin-bottom: 8px; }

/* Placówka bez przypisanego protetyka/zarządcy — kto naprawdę odpowiada */
/* Neutralna informacja (nie ostrzeżenie) — jak notka o generacji aparatu. */
.qa-notice {
  display: flex; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border-radius: 10px;
  background: #f8fafc; border: 1px solid var(--color-border, #e2e8f0);
  font-size: 13px; line-height: 1.55; color: var(--color-ink-soft, #64748b);
}
.qa-notice strong { color: var(--color-ink-mid, #334155); }
.qa-notice__icon { color: var(--color-ink-soft, #64748b); font-size: 15px; margin-top: 2px; flex-shrink: 0; }
.qa-notice__body { min-width: 0; }
.qa-notice a { color: var(--color-primary, #1d4ed8); font-weight: 600; white-space: nowrap; }
.clinic-contact-note { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--color-border, #e2e8f0); font-size: 12px; line-height: 1.5; color: var(--color-ink-soft, #64748b); }