/* Calf Care System — feedback-modus
   Login-gate, potlood-trigger (rechtsonder), per-sectie velden.
   Hergebruikt de merk-tokens uit styles.css (:root). */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Site geblokkeerd tot ingelogd */
body.fb-locked { overflow: hidden; }
body.fb-locked > *:not(.fb-modal-backdrop):not(.fb-indicator):not(.fb-btn):not(script) {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}

/* --- Potlood-trigger (rechtsonder, buiten de sticky header) --- */
.fb-btn {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: var(--navy); color: var(--white);
  border: 1.5px solid rgba(255,255,255,.35); border-radius: 50%;
  cursor: pointer; opacity: .65; z-index: 80;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  transition: opacity var(--ease), transform var(--ease);
}
.fb-btn[hidden] { display: none; }
.fb-btn:hover, .fb-btn:focus-visible { opacity: 1; transform: translateY(-2px); }
.fb-btn svg { width: 19px; height: 19px; }
body.fb-mode .fb-btn { display: none; }

/* --- Login modal --- */
.fb-modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,26,46,.82);
  display: grid; place-items: center; padding: var(--space-4);
}
.fb-modal-backdrop[hidden] { display: none; }
.fb-modal {
  width: 100%; max-width: 380px; padding: var(--space-7);
  background: var(--navy); color: var(--white);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius);
  display: grid; gap: var(--space-4); font-family: var(--font);
}
.fb-modal h3 { color: var(--white); font-size: 1.4rem; font-weight: 700; line-height: 1.15; }
.fb-modal__lead { font-size: .96rem; color: var(--muted); line-height: 1.5; }
.fb-modal__form { display: grid; gap: var(--space-3); }
.fb-modal__form label { display: grid; gap: var(--space-1); }
.fb-modal__form label span {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}
.fb-modal__form input {
  padding: var(--space-3); border-radius: 6px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22);
  color: var(--white); font-family: var(--font); font-size: 1rem; outline: 0;
}
.fb-modal__form input:focus-visible { border-color: var(--red); }
.fb-modal__error { font-size: .9rem; color: #ff8a8a; }
.fb-modal__form button[type="submit"] {
  margin-top: var(--space-2); justify-self: start;
  padding: var(--space-3) var(--space-6);
  background: var(--red); color: var(--white);
  border: 0; border-radius: 6px; cursor: pointer;
  font-family: var(--font); font-weight: 700; font-size: .95rem;
  transition: opacity var(--ease);
}
.fb-modal__form button[type="submit"]:hover { opacity: .9; }
.fb-modal__form button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; }

/* --- Indicator (rechtsboven in feedback-modus) --- */
.fb-indicator {
  position: fixed; top: var(--space-3); right: var(--space-3); z-index: 90;
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--navy); color: var(--white);
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  font-family: var(--font); font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.fb-indicator[hidden] { display: none; }
.fb-indicator__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 10px rgba(229,39,19,.7);
}
.fb-indicator__exit {
  background: transparent; border: 0; color: var(--muted);
  font: inherit; cursor: pointer;
  padding-left: var(--space-2); border-left: 1px solid rgba(255,255,255,.2);
}
.fb-indicator__exit:hover { color: var(--white); }

/* --- Per-sectie feedbackveld --- */
[data-fb] { position: relative; }
.fb-widget { display: none; }
body.fb-mode .fb-widget {
  display: grid; gap: var(--space-3);
  margin-top: var(--space-6); padding: var(--space-5);
  background: rgba(229,39,19,.06);
  border: 1px dashed rgba(229,39,19,.5); border-radius: var(--radius);
  position: relative; z-index: 2;
}
.fb-widget__label {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--red);
  display: flex; align-items: center; gap: var(--space-2);
}
.fb-widget__label::before {
  content: ''; width: 8px; height: 8px; background: var(--red); display: inline-block;
}
.fb-widget textarea {
  width: 100%; min-height: 96px; padding: var(--space-3);
  background: var(--white); color: var(--ink);
  border: 1px solid rgba(27,34,58,.2); border-radius: 6px;
  font-family: var(--font); font-size: 1rem; line-height: 1.5;
  resize: vertical; outline: 0;
}
.fb-widget textarea:focus-visible {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(229,39,19,.22);
}
.fb-widget__footer { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.fb-widget__submit {
  padding: var(--space-3) var(--space-5);
  background: var(--red); color: var(--white);
  border: 0; border-radius: 6px; cursor: pointer;
  font-family: var(--font); font-weight: 700; font-size: .85rem;
  letter-spacing: .04em;
  transition: opacity var(--ease);
}
.fb-widget__submit:hover { opacity: .9; }
.fb-widget__submit:disabled { opacity: .4; cursor: not-allowed; }
.fb-widget__status {
  font-size: .8rem; color: var(--ink-soft); min-height: 1em; letter-spacing: .03em;
}
.fb-widget__status[data-state="ok"]  { color: #1a8a4f; }
.fb-widget__status[data-state="err"] { color: #c5341c; }

@media print {
  .fb-btn, .fb-modal-backdrop, .fb-indicator, .fb-widget { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-btn { transition: none; }
}