/* Reactiesysteem - zie FRIENDS_COMMENTS_LOG.md. Gebruikt de bestaande
   design-tokens uit style.css (--ink, --red, --line, --radius, --shadow)
   zodat dit aanvoelt als een onderdeel van de rest van het thema, niet als
   een los stuk UI. */

/* Eigen regel onder .article-meta - die rij staat op mobiel vast op
   nowrap+scroll (zie style.css), dus dit MOET een los blok-element zijn,
   niet nog een <span> daarbinnen, anders verdwijnt het gewoon mee in die
   horizontaal scrollende rij i.p.v. een eigen, altijd zichtbare regel. */
.obn-reacties-meta-regel{display:block;font-size:13.3px;color:var(--ink-muted);
  margin:2px 0 18px;line-height:1.5}
.obn-reacties-meta-regel svg{width:15px;height:15px;vertical-align:-3px;margin-right:4px}
.obn-reacties-meta-regel a{color:var(--ink-muted);text-decoration:underline}
.obn-reacties-meta-regel a:hover{color:var(--red)}
.obn-reacties-meta-aantal{color:var(--red);font-weight:800}

.obn-reacties-lijst{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.obn-reacties-leeg{color:var(--ink-muted);font-style:italic}
.obn-reacties-aantal{color:var(--ink-muted);font-size:14px}

/* Per-veld foutmelding - rode rand op het veld zelf + tekst er direct
   onder, i.p.v. alleen één algemene melding onderaan het formulier. */
.obn-friends-veld-wrap{margin-bottom:10px}
.obn-friends-veld-wrap input,
.obn-friends-veld-wrap textarea{margin-bottom:4px}
.obn-friends-veld-ongeldig{border-color:var(--red) !important;background:var(--red-tint) !important}
.obn-friends-veld-fout{display:block;font-size:12.5px;color:var(--red);min-height:1em}

.obn-reactie{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow);scroll-margin-top:80px}
.obn-reactie-kop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.obn-reactie-naam{font-weight:700;color:var(--ink)}
.obn-reactie-datum{font-size:12.5px;color:var(--ink-muted)}
.obn-reactie-tekst{color:var(--ink);line-height:1.55;white-space:pre-line}

.obn-reactie-pending{background:var(--surface-2);border-style:dashed}
.obn-reactie-pending-label{font-size:13px;color:var(--ink-muted);font-style:italic}

.obn-reactievak{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px 20px;box-shadow:var(--shadow)}
.obn-reactievak-kop{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
  font-weight:700;color:var(--ink)}
.obn-reactievak-kop a{color:var(--red);font-weight:700;text-decoration:underline;white-space:nowrap}
.obn-reactievak-ingelogd{font-weight:400;font-size:14px;color:var(--ink-muted)}
.obn-reactievak-ingelogd strong{color:var(--ink);font-weight:700}
.obn-reactievak-ingelogd a{color:var(--red);text-decoration:underline;font-weight:600}

.obn-friends-veldrij{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
@media (max-width:520px){.obn-friends-veldrij{grid-template-columns:1fr}}

#obn-friends-form input,
#obn-friends-form textarea,
.obn-friends-popup input{
  /* 16px, niet 14px - onder de 16px zoomt iOS Safari automatisch in bij
     het focussen van een veld (en soms niet meer volledig terug), dus dit
     is geen smaakkeuze maar de vaste iOS-drempel om dat te vermijden. */
  width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink);font-family:inherit;font-size:16px;
  margin-bottom:10px;box-sizing:border-box}
#obn-friends-form textarea{resize:vertical;min-height:90px}

.obn-friends-onder-veld{display:flex;justify-content:space-between;align-items:center;margin:-4px 0 10px;gap:10px}
.obn-friends-huisregels-link{font-size:12px;color:var(--red);text-decoration:underline}
.obn-friends-huisregels-link:hover{color:#8a1826}
.obn-friends-teller{font-size:12px;color:var(--ink-muted)}

.obn-friends-knop{width:100%;padding:11px;border:0;border-radius:8px;background:var(--red);
  color:#fff;font-weight:700;font-size:14.5px;cursor:pointer;transition:background .15s ease;
  display:flex;align-items:center;justify-content:center;gap:8px}
.obn-friends-knop:hover{background:#8a1826}

/* Bezig-status tijdens versturen - alleen de 3 invoervelden op slot +
   knop toont spinner, voorkomt dubbelklikken/dubbel versturen. Turnstile
   blijft ongemoeid (niet gevraagd, en zou een al opgeloste check kunnen
   verstoren). */
.obn-friends-form-bezig input,
.obn-friends-form-bezig textarea{opacity:.55;cursor:not-allowed}
.obn-friends-knop:disabled{background:#555;cursor:not-allowed}
.obn-friends-knop:disabled:hover{background:#555}
.obn-friends-spinner{display:inline-block;width:13px;height:13px;flex:none;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:obn-friends-spin .7s linear infinite}
@keyframes obn-friends-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.obn-friends-spinner{animation:none}}

.obn-friends-melding{font-size:13.5px;margin:4px 0 10px;min-height:1em}
.obn-friends-melding-ok{color:var(--teal)}
.obn-friends-melding-fout{color:var(--red)}

.cf-turnstile{margin-bottom:10px}

/* ---------- login/wachtwoord-vergeten popup ---------- */
.obn-friends-overlay{position:fixed;inset:0;background:rgba(36,31,23,.55);
  display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px}
.obn-friends-overlay[hidden]{display:none}
.obn-friends-popup{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:28px 24px 24px;max-width:380px;width:100%;position:relative}
.obn-friends-popup h3{margin:0 0 14px;color:var(--ink);font-size:19px}
.obn-friends-popup-sluiten{position:absolute;top:10px;right:14px;background:none;border:0;
  font-size:22px;line-height:1;color:var(--ink-muted);cursor:pointer;padding:4px}
.obn-friends-popup-sluiten:hover{color:var(--ink)}
.obn-friends-bekend-melding{background:var(--red-tint);color:var(--red);border-radius:8px;
  padding:10px 12px;font-size:13.5px;margin-bottom:14px;line-height:1.45}
.obn-friends-popup a{color:var(--red);font-size:13.5px;text-decoration:underline}
.obn-friends-popup p{color:var(--ink-muted);font-size:13.5px;margin:0 0 12px}

/* Huisregels-popup - alleen de 7 titels, de volledige tekst staat op
   /huisregels/ (via de link onderaan). Ruime padding-left zodat het
   cijfer + punt van de nummering niet tegen de rand aan komt of afsnijdt. */
.obn-huisregels-popup-inner{max-width:420px}
.obn-huisregels-lijst{list-style:decimal;margin:0 0 18px;padding-left:26px}
.obn-huisregels-lijst li{margin-bottom:10px;color:var(--ink);font-weight:600;line-height:1.4;padding-left:4px}
.obn-huisregels-uitgebreid-link{color:var(--red);font-size:13.5px;text-decoration:underline;font-weight:600}

/* Melden-link onder een reactie - zelfde regel/lettergrootte als de
   reageer-link, bewust NIET rood/onderstreept (secundaire actie) en in
   dezelfde grijstint als de placeholder-tekst in de invoervelden. */
.obn-reactie-acties{margin-top:8px}
.obn-reactie-meld-link{font-size:12.5px;color:var(--ink-muted);font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.obn-reactie-meld-link:hover{color:var(--ink)}
.obn-reactie-meld-icoon{width:13px;height:13px;flex:none}

/* Report-popup - radiolijst van de 7 huisregels */
.obn-report-regels-lijst{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.obn-report-regel-optie{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--ink);cursor:pointer}
/* all:revert - het gedeelde input-selectorblok hierboven (#obn-friends-form
   input, .obn-friends-popup input, ...) is geschreven voor tekstvelden en
   zou een radiobutton anders in een groot gekleurd rechthoekig vlak
   veranderen i.p.v. een normale ronde radio te tonen. */
.obn-report-regel-optie input[type="radio"]{all:revert;margin:3px 0 0;flex:none;cursor:pointer}

/* Eerste reactie wacht nog (op e-mailbevestiging of eenmalige moderatie) -
   deze melding staat dan op de plek van het formulier. */
#obn-friends-form[hidden]{display:none}
.obn-friends-wacht-melding{background:#fdf6e3;border:1px solid #ecd9a8;border-radius:var(--radius);padding:14px 16px;color:var(--ink)}
.obn-friends-wacht-melding strong{display:block;font-size:16px;margin-bottom:6px}
.obn-friends-wacht-melding p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-muted)}
/* Lange placeholder in de meld-popup - kleiner, zodat hij op een telefoon
   niet groot en afgekapt oogt (invoertekst zelf blijft 16px: iOS zoomt
   anders in bij het tikken). */
#obn-report-email::placeholder{font-size:13px}