/* ===========================================================================
   FOUNDER BATCH LAUNCH HARDENING v2, F1 — "Zgłoś uwagę" feedback form.

   Self-contained, same reasoning as site-nav.css (SWEEP #53): index.html
   does not link shared.css (the two stylesheets name their radius tokens
   differently, see CLAUDE.md), so a modal defined in either one could not
   be shared with the other. Everything below depends only on tokens BOTH
   systems define — --ink, --ink-2, --ink-3, --line, --chip, --sans,
   --serif, --accent — plus literal values for its own geometry. The
   `fbm-` prefix (feedback modal) keeps it clear of both systems.
   =========================================================================== */

.fbm-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex; align-items: flex-end;
  justify-content: center;
  /* FOUNDER BATCH LAUNCH HARDENING v2, F2 — real bug found via screenshot
     verification: F2's post-action prompt opens this modal from the
     "down" vote while a success modal (OfferModal/VisitModal,
     index.html's .modal-wrap-offer/-visit) is still open underneath. At
     the base z-index: 200, this overlay rendered fully present in the DOM
     but invisibly BEHIND that modal (z-index: 1100). Same problem
     index.html's own AuthModal already solved (see its .auth-overlay
     comment, "must stack ABOVE modal-wrap-offer/-visit") by raising to
     1150 — matching that exact precedent here, still well under
     site-nav-menu-overlay's z-index: 6000 (irrelevant anyway: open()
     already closes that menu first before ever showing this overlay). */
  z-index: 1150;
}
@media (min-width: 640px) {
  .fbm-overlay { align-items: center; }
}

.fbm-sheet {
  background: #fff;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .fbm-sheet { border-radius: 16px; margin: 0 16px; }
}

.fbm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.fbm-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
}
.fbm-close {
  background: none; border: none; cursor: pointer;
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
}
.fbm-close:hover { background: var(--chip); color: var(--ink); }

.fbm-body {
  padding: 20px;
  display: flex; flex-direction: column;
  gap: 12px;
}

.fbm-chips {
  display: flex; flex-wrap: wrap;
  gap: 8px;
}
.fbm-chip {
  font-family: var(--sans);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  cursor: pointer;
}
.fbm-chip:hover { border-color: var(--ink-3); }
.fbm-chip--selected {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.fbm-textarea {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 96px;
  resize: vertical;
  box-sizing: border-box;
}
.fbm-textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.fbm-email {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-sizing: border-box;
}
.fbm-email:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.fbm-checkbox-row {
  display: flex; align-items: flex-start;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}
.fbm-checkbox-row input { margin-top: 2px; }

/* Reuses kontakt.html's own established convention for a form error line
   (`.fp-status.error { color: var(--accent); }`) rather than introducing a
   new red — CLAUDE.md locks design tokens; no new colors without approval. */
.fbm-error {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--accent);
}

.fbm-submit {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  background: var(--ink);
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
}
.fbm-submit:hover { background: #000; }
.fbm-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.fbm-success {
  text-align: center;
  padding: 24px 20px 32px;
}
.fbm-success p {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
}

/* FOUNDER BATCH LAUNCH HARDENING v2, F1b — "Coś nie działa? Zgłoś to" link,
   dropped inline into error/empty states across ~22 pages. Self-contained
   like the rest of this file (many of those pages don't link shared.css),
   using only --ink/--ink-3, already established as safe everywhere. */
.fbm-inline-link {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
/* Guarded per SWEEP #75 (2026-09-07, merged in #962): on iOS an unguarded
   :hover makes the first tap deliver the hover instead of the click. This
   link is brand new, so it gets the guard at birth rather than shipping the
   bug and fixing it in a later sweep. */
@media (hover: hover) {
  .fbm-inline-link:hover { color: var(--ink); }
}