/* TECH-047 — Feedback widget styles.
 *
 * Mobile-first responsive, existing tokens z atlas-base.css `:root` (žádné nové
 * custom properties). Loaded ze 3 templates (index, kempy_index, kempy_camp)
 * — atlas-base.css MUSÍ být loaded first kvůli tokens.
 *
 * Architektura (Round 2, V2 design — founder 2026-05-28):
 *   .fb-fab — floating action button fixed bottom-right, icon-only collapsed,
 *     expand pill on hover/focus. Z patičky úplně mimo (Round 1 měl pill v footer-row,
 *     teď je standalone floating overlay).
 *   .fb-fab__label — text label, max-width 0 collapsed, animuje na expand.
 *   .feedback-backdrop — full-viewport overlay (rgba + blur).
 *   .feedback-modal — fixed centered card (max-width 420 px desktop).
 *   .feedback-modal__* — header / form / submit / success / error blocks.
 *
 * Spec: docs/design/2026-05-28-feedback-form-spec.md (sekce 4 + 5).
 *
 * Tokens-only s exceptions (justified v spec sekce 4):
 *   - rgba(15, 42, 61, 0.45) — backdrop overlay literál (single-use)
 *   - #fef0ef — danger background literál (single-use)
 *   - 150ms ease-out — mirror compliance-popover animation timing
 *   - 2.75rem touch target — match compliance close button pattern
 *   - #143656 — V2 design dark navy FAB fill (nový nuance, ne --color-primary)
 *   - 220ms ease — FAB expand transition (V2 design)
 */

/* ============================================================
 * Floating action button (.fb-fab) — V2 design, Round 2
 * ============================================================ */

.fb-fab {
  position: fixed;
  right: 14px;
  /* iOS notch safe area — bezpečné minimum 24px na mobile, default 24px
   * na všech 3 stránkách (žádná z nich nemá real sticky footer pull handle,
   * V2 mobile artboard simuluje phone shell — v reálu FAB může níž). */
  bottom: max(24px, env(safe-area-inset-bottom, 0px) + 24px);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 14px;
  background: #143656;
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(20, 54, 86, 0.35);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  gap: 0;
  transition: padding 220ms ease, gap 220ms ease;
}

.fb-fab__label {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 220ms ease, opacity 180ms ease;
}

.fb-fab:hover,
.fb-fab:focus-visible {
  gap: 8px;
  padding-right: 18px;
}

.fb-fab:hover .fb-fab__label,
.fb-fab:focus-visible .fb-fab__label {
  max-width: 140px;
  opacity: 1;
}

/* Desktop ≥769px: posuň FAB výš nad případný browser bottom bar (parita s V2 ref). */
@media (min-width: 769px) {
  .fb-fab {
    right: 24px;
    bottom: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fb-fab,
  .fb-fab__label {
    transition: none;
  }
}

/* ============================================================
 * Backdrop overlay (.feedback-backdrop)
 * ============================================================ */

.feedback-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1290;  /* pod modal 1300, nad compliance popover 1200 */
  background: rgba(15, 42, 61, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);  /* Safari prefix */
  animation: feedback-backdrop-fade 150ms ease-out;
}

/* ============================================================
 * Modal card (.feedback-modal)
 * ============================================================ */

.feedback-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw - 32px);
  max-width: calc(100vw - 32px);
  /* Long error msg + virtual keyboard fallback: scroll uvnitř karty */
  max-height: calc(100vh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
  z-index: 1300;
  animation: feedback-modal-fade 150ms ease-out;
}

@media (min-width: 769px) {
  .feedback-modal {
    width: auto;
    max-width: 420px;
    max-height: 90vh;
  }
}

/* ============================================================
 * Modal header
 * ============================================================ */

.feedback-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.feedback-modal__title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-fg);
  line-height: var(--lh-tight);
  margin: 0;
}

.feedback-modal__close {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--color-fg-muted);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background 150ms ease, color 150ms ease;
}

.feedback-modal__close:hover,
.feedback-modal__close:focus-visible {
  color: var(--color-fg);
  background: var(--color-bg-soft);
}

/* ============================================================
 * Form: textarea + counter
 * ============================================================ */

.feedback-modal__textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 7rem;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  color: var(--color-fg);
  font-family: inherit;
  font-size: var(--fs-base);  /* 1rem = 16px — iOS Safari no auto-zoom */
  line-height: var(--lh-base);
  resize: vertical;
}

.feedback-modal__textarea::placeholder {
  color: var(--color-fg-muted);
  opacity: 1;  /* Firefox override default 0.5 */
  font-style: italic;
}

.feedback-modal__counter {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.feedback-modal__counter-text {
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
}

.feedback-modal__counter-text[data-state="warn"] {
  color: var(--color-warn);
}

.feedback-modal__counter-text[data-state="danger"] {
  color: var(--color-danger);
}

/* ============================================================
 * Form: e-mail block (label + input + helper)
 * ============================================================ */

.feedback-modal__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-fg);
  margin-bottom: var(--space-xs);
}

.feedback-modal__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  color: var(--color-fg);
  font-family: inherit;
  font-size: var(--fs-base);  /* iOS no-zoom */
  margin-bottom: var(--space-xs);
}

.feedback-modal__helper {
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  line-height: 1.4;
  margin: 0 0 var(--space-lg);
}

/* ============================================================
 * Form: submit button
 * ============================================================ */

.feedback-modal__submit {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-primary);
  color: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, opacity 150ms ease, border-color 150ms ease;
}

.feedback-modal__submit:hover:not(:disabled),
.feedback-modal__submit:focus-visible:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.feedback-modal__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.feedback-modal__submit[aria-busy="true"] {
  opacity: 0.7;
  cursor: wait;
}

/* ============================================================
 * Error block (.feedback-modal__error)
 * ============================================================ */

.feedback-modal__error {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: #fef0ef;  /* literál — danger-bg-soft token neexistuje, single-use */
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  font-size: var(--fs-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.feedback-modal__error[hidden] {
  display: none;
}

.feedback-modal__error-icon {
  flex: 0 0 auto;
  line-height: 1.4;
}

/* ============================================================
 * Success block (.feedback-modal__success)
 * ============================================================ */

.feedback-modal__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg) 0;
  text-align: center;
}

.feedback-modal__success[hidden] {
  display: none;
}

.feedback-modal__success-icon {
  font-size: var(--fs-2xl);
  color: var(--color-success);
  line-height: 1;
}

.feedback-modal__success-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-fg);
  margin: 0;
}

.feedback-modal__success-msg {
  font-size: var(--fs-base);
  color: var(--color-fg-muted);
  margin: 0;
}

.feedback-modal__success-hint {
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  margin: var(--space-sm) 0 0;
}

/* ============================================================
 * Animations
 * ============================================================ */

@keyframes feedback-modal-fade {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes feedback-backdrop-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-modal,
  .feedback-backdrop,
  .feedback-modal__close,
  .feedback-modal__submit {
    animation: none;
    transition: none;
  }
  /* .fb-fab + .fb-fab__label mají vlastní prefers-reduced-motion override
   * v dedicated bloku výše (řádek ~85) — zde NEpřidávat, jinak duplicate. */
}

/* ============================================================
 * V3 Round 5 — Drag handle + subtitle + header layout
 * (defaults; mobile sheet override níže v @media block)
 * ============================================================ */

.feedback-modal__handle {
  /* Default desktop: hidden. Mobile @media block ho zviditelní. */
  display: none;
}

.feedback-modal__header-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;  /* allow ellipsis shrink */
  flex: 1 1 auto;
}

.feedback-modal__subtitle {
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  margin: 0;
  /* Single-line ellipsis pro long camp names. Full text zůstává v DOM →
   * screen reader vyčte celé. Per spec sekce 6.6. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Generic mode → subtitle hidden (oba viewporty). Identify mode → visible. */
.feedback-modal[data-mode="generic"] .feedback-modal__subtitle {
  display: none;
}

/* ============================================================
 * Map popup — ⚑ button + bottom link (V3 Round 5)
 * Located in `static/atlas-bubble-map.js` buildCampPopup() — injected
 * dynamicky do Leaflet popup HTML. CSS žije zde kvůli koherenci
 * s feedback widget (žádná duplicace logiky napříč atlas-landing.css).
 * ============================================================ */

.map-popup__actions {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
  margin-top: var(--space-sm);
}

/* Reset existing .map-popup__link (defined v atlas-landing.css) — když je
 * v .map-popup__actions flex row, chceme grow + center text. */
.map-popup__actions .map-popup__link {
  flex: 1 1 auto;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;  /* WCAG override V3 38 → 44 (a11y mandate per spec sekce 6.3) */
  margin-top: 0;     /* override default top margin z .map-popup__link */
}

.map-popup__report {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 44px;       /* WCAG override V3 38 → 44 */
  height: 44px;
  background: var(--color-bg);
  border: 1.4px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 150ms ease, color 150ms ease;
}

.map-popup__report:hover,
.map-popup__report:focus-visible {
  background: var(--color-primary);
  color: var(--color-white);
}

.map-popup__report:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.map-popup__report-link-row {
  margin-top: var(--space-sm);
  text-align: center;
}

.map-popup__report-link {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-fg-muted);
  font-family: inherit;
  font-size: var(--fs-xs);
  text-decoration: underline;
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  min-height: 44px;
  display: inline-block;
  border-radius: var(--radius-sm);
  line-height: 1.3;
  transition: color 150ms ease;
}

.map-popup__report-link:hover,
.map-popup__report-link:focus-visible {
  color: var(--color-fg);
}

.map-popup__report-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ============================================================
 * Mobile bottom-sheet variant (TECH-047 Round 5 — V3 design)
 * Aktivní automaticky pro VŠECHNY .feedback-modal instances na mobile.
 * Desktop ≥ 769 px zůstává center-card (R4 layout intact).
 *
 * Pattern parity: `.compliance-popover--sheet` (atlas-mobile-sheet.css)
 * + `.filter-sheet` — flat slide-up, cubic-bezier(0.32, 0.72, 0, 1)
 * (Apple spring curve). Modal NENÍ draggable (drag handle decorative).
 * ============================================================ */

@media (max-width: 768px) {
  .feedback-modal {
    /* Override center positioning → bottom-sheet */
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    max-height: 90dvh;  /* iOS Safari address bar fix */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-top: 1.5px solid var(--color-primary);
    box-shadow: 0 -10px 30px rgba(15, 42, 61, 0.25);
    padding: var(--space-sm) var(--space-md)
             calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
    animation: none;  /* override center-modal fade keyframes */
  }

  /* Slide-in state — JS odebere `hidden` attribut → CSS transition animuje. */
  .feedback-modal:not([hidden]) {
    transform: translateY(0);
  }

  /* Drag handle — decorative pill, 46×4 px gray, centered above content. */
  .feedback-modal__handle {
    display: block;
    width: 46px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-fg-muted);
    opacity: 0.45;
    margin: 0 auto var(--space-md);
    flex-shrink: 0;
  }

  /* Header — sheet variant title slightly smaller per V3 (font-size 18 px ≈ medium). */
  .feedback-modal__title {
    font-size: var(--fs-md);
    line-height: var(--lh-tight);
  }

  /* Reduced motion — instant slide-up (no animation). */
  @media (prefers-reduced-motion: reduce) {
    .feedback-modal {
      transition: none;
    }
  }
}