/* =========================================================================
   27 Moments portaal, stijlen voor de module Cadeaulijst
   Eigen bestand per module zodat parallelle wijzigingen elkaar niet raken.

   September 2026: een kaart met de lijst (foto, naam, bedrag, stand, drie
   icoontjes) en eronder een rij met het rekeningnummer en de twee
   deelknoppen. Wie wat stortte zit achter het pijltje van de rij.

   Kleuren en vormen komen alleen uit de --m27-tokens en de bouwstenen uit
   portaal.css (.kaart, .leeg, .veld, m27-btn).
   ========================================================================= */

/* ---------------------------- De lijstkaart ------------------------------ */

.ca-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.ca-kop h3 { margin-bottom: 0; }
.ca-kop .m27-btn { flex: none; }

.ca-lijst { margin-top: 4px; }

/* Een cadeau, een regel. Alles wat je zelden nodig hebt zit in .ca-detail. */
.ca-rij { border-bottom: 1px solid #f0ece5; }
.ca-rij:last-child { border-bottom: 0; }

.ca-rij__kop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  min-width: 0;
}

.ca-rij__uitklap {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--m27-paars);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ca-rij__uitklap svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
.ca-rij__uitklap:hover { background: rgba(131, 95, 165, 0.1); }
.ca-rij__uitklap:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }
.ca-rij__uitklap[aria-expanded="true"] svg { transform: rotate(90deg); }

/* Foto's altijd afgerond. Zonder foto een rustig cadeautje in dezelfde maat,
   zodat de namen onder elkaar blijven staan. */
.ca-rij__foto {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--m27-creme);
}

.ca-rij__foto--leeg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b9b3a8;
}

.ca-rij__foto--leeg svg { width: 22px; height: 22px; }

.ca-rij__titel {
  flex: 1 1 40%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ca-rij__naam {
  font-family: var(--m27-font-titel);
  font-size: 15.5px;
  color: var(--m27-donkergroen);
  overflow-wrap: anywhere;
}

.ca-rij__meta { font-size: 12.5px; color: #8a857e; }

.ca-rij__stand {
  flex: 1 1 26%;
  min-width: 140px;
  font-size: 13px;
  color: var(--m27-tekst);
}

.ca-rij__stand--leeg { color: #8a857e; }

.ca-rij__acties {
  flex: none;
  margin-left: auto;
  display: flex;
  gap: 4px;
}

/* De drie icoontjes in de rij: link, potlood, prullenbak. Nooit primair. */
.ca-icoon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--m27-paars);
  cursor: pointer;
  text-decoration: none;
  flex: none;
}

.ca-icoon svg { width: 18px; height: 18px; }
.ca-icoon:hover { background: rgba(131, 95, 165, 0.1); }
.ca-icoon:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }
.ca-icoon--rood { color: var(--m27-rood); }
.ca-icoon--rood:hover { background: rgba(164, 68, 46, 0.09); }

/* ------------------------------ Het detail -------------------------------- */

.ca-detail[hidden] { display: none; }

.ca-detail { padding: 2px 0 14px 42px; }

.ca-stortingen__leeg { font-size: 13px; color: #8a857e; max-width: 60ch; margin: 0; }

.ca-storting {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f4f1ec;
  flex-wrap: wrap;
}

.ca-storting:last-child { border-bottom: 0; }

.ca-storting__wie { flex: 1 1 220px; min-width: 0; }
.ca-storting__wie strong { font-weight: 600; font-size: 14px; }

.ca-storting__meta {
  display: block;
  font-size: 12.5px;
  color: #8a857e;
  overflow-wrap: anywhere;
}

/* De mededeling in een vaste letter, zodat ze naast het rekeningafschrift
   te leggen is. */
.ca-storting__mededeling {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.03em;
  color: var(--m27-tekst);
}

.ca-storting__boodschap { font-size: 13.5px; margin: 4px 0 0; max-width: 60ch; }

.ca-storting__bedrag {
  flex: none;
  font-family: var(--m27-font-titel);
  font-size: 15px;
  color: var(--m27-donkergroen);
  padding-top: 2px;
}

.ca-storting--ontvangen .ca-storting__bedrag { color: #8a857e; }

/* Het vinkje "Ontvangen": een pil met een echt selectievakje erin. */
.ca-ontvangen {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  padding: 6px 12px 6px 9px;
  border-radius: var(--m27-radius-pill);
  border: 1.5px solid #ded8ce;
  color: var(--m27-tekst);
  cursor: pointer;
  user-select: none;
  min-height: 36px;
}

.ca-ontvangen input { margin: 0; width: 16px; height: 16px; accent-color: var(--m27-donkergroen); cursor: pointer; }
.ca-ontvangen--ja { background: var(--m27-lichtgroen); border-color: var(--m27-lichtgroen); color: var(--m27-donkergroen); }
.ca-ontvangen:focus-within { outline: 3px solid var(--m27-lila); outline-offset: 2px; }

/* --------------------------- De rij onderaan ------------------------------
   Rekeningnummer links, delen rechts. Een kaart, een regel. */

.ca-onder[hidden] { display: none; }

.ca-onder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}

.ca-rekening {
  display: flex;
  align-items: center;
  gap: 6px 12px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 300px;
}

.ca-rekening__label {
  font-size: var(--m27-fs-label);
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: var(--m27-paars);
}

.ca-rekening__waarde { font-size: 14px; color: var(--m27-tekst); overflow-wrap: anywhere; }

.ca-rekening__iban {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.03em;
}

.ca-rekening__leeg { font-size: 13.5px; color: #8a857e; }

.ca-delen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Waarom er geen deelknop staat. Dezelfde stille letter als de regel bij
   het lege rekeningnummer, want het is dezelfde boodschap. */
.ca-delen__wacht { margin: 0; font-size: 13.5px; color: #8a857e; }

/* ----------------------------- Het formulier ------------------------------ */

.ca-fotolabel {
  display: block;
  font-size: var(--m27-fs-label);
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--m27-paars);
}

.ca-fotokeuze { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ca-fotokeuze__beeld { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.ca-fotokeuze__beeld[hidden] { display: none; }
.ca-fotokeuze .m27-btn[hidden] { display: none; }

/* ------------------------- Als het misloopt ------------------------------- */

.ca-storing[hidden] { display: none; }

.ca-storing {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  margin-top: 14px;
  border: 1.5px solid #e6d7cf;
  border-radius: var(--m27-radius-kaart);
  background: #fdf6f3;
}

.ca-storing p {
  flex: 1;
  min-width: 220px;
  font-size: 13.5px;
  color: var(--m27-tekst);
  margin: 0;
}

/* --------------------------- Smalle schermen ------------------------------ */

@media (max-width: 720px) {
  /* Op telefoon twee regels per cadeau: eerst het pijltje, de foto en de
     naam (die krijgt de rest van de regel, anders breekt "huwelijksreis" in
     stukken), daaronder de stand met de icoontjes rechts. Tikdoelen 44px. */
  .ca-rij__kop { flex-wrap: wrap; }
  .ca-rij__uitklap { order: 0; width: 44px; height: 44px; }
  .ca-rij__foto { order: 1; }
  .ca-rij__titel { order: 2; flex: 1 1 40%; }
  .ca-rij__stand { order: 3; flex: 1 1 50%; min-width: 0; padding-left: 54px; }
  .ca-rij__acties { order: 4; margin-left: auto; }

  .ca-detail { padding-left: 0; }

  .ca-icoon { width: 44px; height: 44px; }
  .ca-ontvangen { min-height: 44px; }

  .ca-delen .m27-btn,
  .ca-rekening .m27-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ca-rij__uitklap,
  .ca-rij__uitklap svg { transition: none; }
}