/* =========================================================================
   27 Moments portaal, de opmaak van het onderdeel communicatie

   Dit scherm is de enige plek in het portaal waar WhatsApp staat: een
   keuzerij met elk bericht dat wij in naam van het koppel kunnen versturen,
   van de save the date tot het bedankje, en daaronder één kaart met het
   bericht zoals de gast het leest, de velden die het koppel invult, de stand
   bij WhatsApp, wie het krijgt en de knop.

   De klassen dragen het voorvoegsel com-. Ze heetten anders zolang dit
   onderdeel Dagcommunicatie heette; sinds september 2026 gaat het over het
   hele jaar en niet meer over de dag alleen. De com-klassen van de oude
   mailkaarten zijn met die mail verdwenen, dus het voorvoegsel was vrij.

   Geen eigen kleuren buiten de --m27-tokens; de grijzen zijn dezelfde als in
   portaal.css.
   ========================================================================= */

/* De regel dat wij nog niet kunnen versturen: rustig, geen rode balk. Er is
   niets stuk, er is alleen nog iets niet aangezet. */
.com-wacht {
  font-size: 13.5px;
  line-height: 1.6;
  color: #6b665f;
  background: var(--m27-creme);
  border: 1.5px solid #e7e2da;
  border-radius: var(--m27-radius-kaart);
  padding: 12px 16px;
  margin: 0 0 14px;
}

/* ------------------------------ de keuzerij ---------------------------- */

.com-keuze {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 14px;
}

.com-keuze__knop {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 14px 16px;
  min-height: 48px;
  border: 1.5px solid #dad5cd;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: var(--m27-tekst);
  transition: border-color var(--m27-dur-1) var(--m27-ease), box-shadow var(--m27-dur-1) var(--m27-ease);
}
.com-keuze__knop strong { font-weight: 400; font-size: 15px; }
.com-keuze__knop span { font-size: 13px; color: #8a857e; }
.com-keuze__knop small { font-size: 12px; color: var(--m27-donkergroen); min-height: 1em; }
.com-keuze__knop small:empty { display: none; }
.com-keuze__knop:hover { border-color: var(--m27-lila); }
.com-keuze__knop:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }
.com-keuze__knop--actief {
  border-color: var(--m27-paars);
  box-shadow: 0 0 0 1.5px var(--m27-paars);
}

/* ------------------------------- de kaart ------------------------------ */

.com-kaart .uitleg { max-width: 72ch; }

.com-voorbeeld__label {
  font-size: 11px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: #8a857e;
  margin: 14px 0 8px;
}

/* Een nagebouwd chatbericht. Bewust niet in de kleuren van WhatsApp zelf:
   dit is onze voorvertoning, geen schermafdruk van hun app. */
.com-bubbel {
  background: #fff;
  border: 1.5px solid #e7e2da;
  border-radius: 16px 16px 16px 4px;
  padding: 13px 16px 14px;
  max-width: 46ch;
}
.com-bubbel__afzender {
  display: block;
  font-size: 13px;
  color: var(--m27-donkergroen);
  margin-bottom: 5px;
}
.com-bubbel__tekst {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--m27-tekst);
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.com-bubbel__voet {
  font-size: 12px;
  font-style: italic;
  color: #8a857e;
  margin: 8px 0 0;
}
.com-bubbel__knop {
  display: block;
  text-align: center;
  font-size: 13.5px;
  color: var(--m27-paars);
  border-top: 1px solid #efece6;
  margin-top: 11px;
  padding-top: 10px;
}

/* Een veld dat nog leeg is, of een sjabloon dat nog niet goedgekeurd raakte.
   Zeggen dat het er is, is beter dan een lege plek. */
.com-bubbel__let {
  font-size: 12.5px;
  line-height: 1.55;
  color: #8a6d2f;
  margin: 8px 0 0;
  max-width: 46ch;
}

/* ------------------------------- de velden ----------------------------- */

.com-velden {
  display: grid;
  gap: 4px 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 16px;
}
.com-velden .veld { margin-bottom: 8px; }

/* -------------------------------- de stand ----------------------------- */

.com-stand {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #efece6;
}
.com-stand__regel {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--m27-tekst);
  margin: 0 0 6px;
}
.com-stand__regel strong { font-weight: 400; color: var(--m27-donkergroen); }

.com-details { margin: 4px 0 0; }
.com-details summary {
  font-size: 13px;
  color: var(--m27-paars);
  cursor: pointer;
  min-height: 32px;
  display: flex;
  align-items: center;
}
.com-details summary:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; border-radius: 6px; }
.com-details__voet {
  font-size: 12.5px;
  color: #8a857e;
  margin: 8px 0 0;
}
.com-details__voet a { color: var(--m27-paars); }

.com-lijst {
  list-style: none;
  margin: 6px 0 0;
  padding: 4px 14px;
  border: 1.5px solid #dad5cd;
  border-radius: 14px;
  background: #fff;
  max-height: 300px;
  overflow-y: auto;
}
.com-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid #f4f1ec;
  font-size: 13.5px;
}
.com-rij:last-child { border-bottom: 0; }
.com-rij__naam { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.com-rij__naam small { font-size: 12px; color: #8a857e; }
.com-rij__reden { flex: 1 1 200px; font-size: 12.5px; color: #8a857e; }

/* De stand per gast als pil, in de woorden van de server. */
.com-pil {
  display: inline-block;
  flex: none;
  font-size: 11.5px;
  letter-spacing: .4px;
  padding: 3px 10px;
  border-radius: var(--m27-radius-pill);
  background: var(--m27-creme);
  color: #6b665f;
  white-space: nowrap;
}
.com-pil--verstuurd { background: var(--m27-lichtgroen); color: var(--m27-donkergroen); }
.com-pil--afgeleverd { background: var(--m27-lichtgroen); color: var(--m27-donkergroen); }
.com-pil--gelezen { background: var(--m27-donkergroen); color: var(--m27-wit); }
.com-pil--mislukt { background: #f3ded9; color: #a4432f; }
.com-pil--wachtend { background: #f8f2e2; color: #8a6d2f; }

/* ------------------------------- versturen ----------------------------- */

.com-verstuurrij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.com-telling {
  font-size: 13.5px;
  color: #6b665f;
  margin: 12px 0 0;
  flex: 1 1 220px;
}
.com-verstuurrij .com-telling { margin: 0; }
.com-telling a { color: var(--m27-paars); }

/* ------------------------------- de uitslag ---------------------------- */

.com-uitslag {
  font-size: 13.5px;
  line-height: 1.6;
  border-radius: 12px;
  padding: 12px 15px;
  margin: 14px 0 0;
}
.com-uitslag[hidden] { display: none; }
.com-uitslag--bezig { background: var(--m27-creme); color: #6b665f; }
.com-uitslag--goed { background: var(--m27-lichtgroen); color: var(--m27-donkergroen); }
.com-uitslag--slecht { background: #f8f2e2; color: #8a6d2f; }
.com-uitslag p { margin: 0; }
.com-uitslag p + p { margin-top: 4px; }
.com-uitslag .com-lijst { background: rgba(255, 255, 255, 0.6); }

/* ------------------------------- telefoon ------------------------------ */

@media (max-width: 768px) {
  .com-keuze { grid-template-columns: 1fr; }
  .com-bubbel { max-width: none; }
  .com-velden { grid-template-columns: 1fr; }
  .com-velden .veld input { min-height: 48px; font-size: 16px; }
  .com-details summary { min-height: 48px; }
  .com-lijst { max-height: 360px; }
  .com-verstuurrij .m27-btn {
    flex: 1 1 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---------------------------- de stand bij WhatsApp -------------------

   Wat WhatsApp van dit bericht vindt, in één pil naast de titel. Vijf
   standen plus "onbekend", en die laatste is er met opzet: zolang wij het
   niet weten, zeggen we dat en beweren we geen goedkeuring. */

.com-kaart__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
}
.com-kaart__kop h3 { margin: 0; }

.com-sjabloon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: var(--m27-radius-pill);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  border: 1.5px solid #dad5cd;
  background: #fff;
  color: #6b665f;
  white-space: nowrap;
}
.com-sjabloon--goedgekeurd {
  border-color: var(--m27-donkergroen);
  color: var(--m27-donkergroen);
}
.com-sjabloon--ingediend { border-color: var(--m27-lila); color: var(--m27-paars); }
.com-sjabloon--geweigerd,
.com-sjabloon--gepauzeerd { border-color: #d8a3a3; color: #9d4b4b; }
/* Goedgekeurd bij WhatsApp, maar wij kunnen het bericht niet bouwen: geen
   groen boven een uitgezette knop, maar de amber van iets dat wacht. */
.com-sjabloon--wacht { border-color: #d8bc8a; color: #8a6d2f; }

/* De uitleg onder de pil: waarom dit bericht (nog) niet kan vertrekken. */
.com-sjabloon__uitleg {
  font-size: 13px;
  line-height: 1.6;
  color: #6b665f;
  margin: 10px 0 0;
}

/* Wanneer wij de stand bij WhatsApp gingen halen. Een regel lichter dan de
   uitleg erboven: het is een voetnoot bij de stand en geen bericht op zich. */
.com-sjabloon__nagekeken {
  font-size: 12px;
  line-height: 1.6;
  color: #8a857e;
  margin: 4px 0 0;
}

/* De keuzerij draagt dezelfde stand, maar dan als stipje voor de regel. */
.com-keuze__knop small.com-keuze__stand::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: #c9c3ba;
}
.com-keuze__knop small.com-keuze__stand--goedgekeurd::before { background: var(--m27-donkergroen); }
.com-keuze__knop small.com-keuze__stand--ingediend::before { background: var(--m27-lila); }
.com-keuze__knop small.com-keuze__stand--geweigerd::before,
.com-keuze__knop small.com-keuze__stand--gepauzeerd::before { background: #b96a6a; }
.com-keuze__knop small.com-keuze__stand--wacht::before { background: #d8a13c; }

/* De keuzerij telt sinds september 2026 tien berichten in plaats van drie.
   Een kop per fase houdt die rij leesbaar: eerst alles wat maanden vooraf
   vertrekt, dan de dag zelf, dan wat erna komt. */
.com-fase {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a857e;
}
.com-fase:not(:first-child) { margin-top: 18px; }