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

   Het onderdeel heette Offertes en heet sinds augustus 2026 Partners. De
   klassen heten nog of-: het formulier op dat scherm blijft een
   offerteaanvraag, en een selector hernoemen levert niets op wat een
   koppel ziet.

   Drie lagen op het scherm: de beloftebalk (een regel plus de knop naar de
   partnergids), het aanvraagformulier met de partnerchips, en de lijst met
   aanvragen. Alle kleuren via de m27-tokens; de bouwstenen (.kaart, .veld,
   .leeg, m27-btn, m27-tag) komen uit portaal.css en ds/m27.css.

   Sinds de feedbackronde van Vincent staat het bladeren door partners op
   /partners/ en niet meer hier. Dit scherm is daarom compacter: geen
   partnerkaarten meer met logo en verhaal, maar chips om aan te vinken.
   ========================================================================= */

/* ------------------------------ de beloftebalk -------------------------- */
/* Boven de vouw hoort de inhoud, niet de uitleg. De belofte is dus een
   regel met een knop ernaast; de kleine lettertjes zitten in een details
   die dicht begint. */

.of-balk { padding: 14px 18px; }

.of-balk__rij {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.of-balk__kern {
  margin: 0;
  flex: 1 1 260px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--m27-donkergroen);
}
.of-balk__knop { flex: none; text-decoration: none; }

.of-meer { margin-top: 10px; }
.of-meer summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--m27-donkergroen);
  opacity: 0.85;
  list-style: none;
}
.of-meer summary::-webkit-details-marker { display: none; }
/* Een driehoekje dat meedraait: zonder teken lijkt de regel een titel en
   klikt niemand erop. */
.of-meer summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 8px;
  border-left: 5px solid var(--m27-donkergroen);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translateY(-1px);
  transition: transform 0.15s ease;
}
.of-meer[open] summary::before { transform: rotate(90deg) translateX(-1px); }
.of-meer[open] summary { margin-bottom: 10px; }

.of-beloftelijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.of-beloftelijst li {
  position: relative;
  padding-left: 26px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--m27-donkergroen);
}
/* Het vinkje voor elke belofte: getekend, geen extra beeldbestand. */
.of-beloftelijst li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 13px;
  height: 8px;
  border-left: 2.5px solid var(--m27-donkergroen);
  border-bottom: 2.5px solid var(--m27-donkergroen);
  transform: rotate(-45deg);
}

/* --------------------------- meegestuurde context ---------------------- */
/* Eén regel in plaats van een blokje van drie: het is een geheugensteun,
   geen formulier. */

.of-context {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #7c776f;
}
.of-context__leeg { font-style: normal; color: #a9a49c; }

/* ------------------------------ partnerkeuze --------------------------- */

.of-hint {
  margin: 4px 0 14px;
  font-size: 13px;
  color: #8a857e;
}
.of-hint a { color: var(--m27-paars); }

.of-partnerkop {
  margin: 4px 0 10px;
  font-size: var(--m27-fs-label);
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: var(--m27-paars);
}
.of-teller { text-transform: none; letter-spacing: normal; color: #8a857e; }

/* Chips in plaats van kaarten: wie de partner nog niet kent, klikt door
   naar de gids. Hier telt alleen wie de aanvraag mag krijgen. */
.of-keuzes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.of-keuze {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1.5px solid #dad5cd;
  border-radius: var(--m27-radius-pill);
  background: #fff;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--m27-tekst);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.of-keuze:hover { border-color: var(--m27-paars); }
.of-keuze--aan {
  border-color: var(--m27-donkergroen);
  background: var(--m27-lichtgroen);
}
.of-keuze--slot { opacity: 0.5; cursor: not-allowed; }

.of-keuze input {
  width: 17px;
  height: 17px;
  flex: none;
  accent-color: var(--m27-donkergroen);
  cursor: pointer;
}
.of-keuze--slot input { cursor: not-allowed; }
.of-keuze input:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }

.of-keuze__naam { color: var(--m27-donkergroen); }
/* Het tarief hoort zichtbaar te zijn: dat is de transparantiebelofte. */
.of-keuze__tarief {
  font-size: 12px;
  color: var(--m27-paars);
  border-left: 1px solid #e6e2da;
  padding-left: 8px;
}

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

/* De voetregel onder de knop is weg: dat er niets rechtstreeks naar een
   partner vertrekt, staat al in de balk bovenaan en in de uitklapper. */
.of-acties {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ---------------------------- de aanvraaglijst ------------------------- */

.of-aanvragen { display: grid; gap: 10px; }

.of-aanvraag {
  border: 1px solid #ece8e0;
  border-radius: 14px;
  padding: 13px 16px;
  background: #fff;
}
.of-aanvraag__kop {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.of-aanvraag__kop strong { color: var(--m27-donkergroen); }
.of-aanvraag__datum { margin-left: auto; font-size: 12px; color: #a9a49c; }

.of-aanvraag__boodschap {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--m27-tekst);
}
.of-aanvraag__budget { margin: 6px 0 0; font-size: 12.5px; color: #7c776f; }

.of-aanvraag__zonder { margin: 10px 0 0; font-size: 12.5px; color: #8a857e; }

/* ------------------------ de voorstellen vergelijken -------------------- */
/* Hier zit de reden dat het partnerportaal bestaat: elke partner vult
   hetzelfde formulier in, dus staat bij alle drie de prijs op dezelfde plek
   en staat inbegrepen naast niet inbegrepen. Daarom liggen de blokken onder
   elkaar met identieke rijen, en niet als drie vrije kaartjes: het oog moet
   van boven naar onder kunnen scannen. */

.of-vergelijk { margin-top: 12px; }

.of-vergelijk__kop {
  margin: 0 0 8px;
  font-size: var(--m27-fs-label);
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: var(--m27-paars);
}
.of-vergelijk__leeg {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: #7c776f;
}

.of-voorstellen { display: grid; gap: 10px; }

.of-voorstel {
  border: 1px solid #e6e2da;
  border-left: 3px solid #dad5cd;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fdfcfa;
}
/* De gekozen partner licht op, de afgevallen voorstellen zakken naar de
   achtergrond zonder te verdwijnen: wie iets afwees, mag nog kunnen nakijken
   wat er in dat voorstel stond. */
.of-voorstel--bevestigd {
  border-left-color: var(--m27-donkergroen);
  background: var(--m27-lichtgroen);
}
.of-voorstel--voorstel { border-left-color: var(--m27-paars); }
/* Ingetrokken hoort bij deze groep: de aanvraag gaat niet door, er valt niets
   meer te kiezen, en wat er stond blijft leesbaar. */
.of-voorstel--afgewezen,
.of-voorstel--geen-voorstel,
.of-voorstel--ingetrokken { opacity: 0.72; }

/* Een partner die niet reageerde blijft VOLUIT staan, zonder de doorzichtigheid
   van hierboven: dit is geen afgesloten dossier en het is niemands schuld, en
   antwoordt hij morgen alsnog, dan komt zijn voorstel gewoon in dit blok. Wel
   een open rand in plaats van een volle lijn, zodat het oog hem niet meer bij de
   partners rekent waar nog een antwoord van komt. */
.of-voorstel--stil {
  border-left-style: dashed;
  border-left-color: #cfc9c0;
}
/* Hier praten WIJ en niet de partner, dus dezelfde rustige kleur als de andere
   regels van ons en niet die van zijn eigen tekst. */
.of-voorstel__stil { color: #7c776f; }

/* Naam links, prijs rechts in een eigen kolom. Die kolom heeft een vaste
   breedte, zodat de bedragen van alle partners netjes onder elkaar staan. */
.of-voorstel__kop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
  align-items: baseline;
  gap: 8px 12px;
}
.of-voorstel__wie {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.of-voorstel__naam { color: var(--m27-donkergroen); font-size: 14.5px; }
.of-voorstel__prijs {
  text-align: right;
  font-size: 15px;
  color: var(--m27-donkergroen);
  white-space: nowrap;
}
.of-voorstel__prijs--leeg {
  font-size: 12.5px;
  color: #a9a49c;
}

/* Twee vakken, altijd dezelfde twee, ook als er niets in staat. */
.of-voorstel__vakken {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-top: 10px;
}
.of-vak p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--m27-tekst); }
.of-vak__label {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: #8a857e;
}
.of-vak__leeg { color: #a9a49c; }

.of-lijstje {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
}
.of-lijstje li {
  position: relative;
  padding-left: 13px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--m27-tekst);
}
.of-lijstje li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--m27-paars);
}

.of-voorstel__regel {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #7c776f;
}
.of-voorstel__toelichting { color: var(--m27-tekst); }
.of-voorstel__contact a { color: var(--m27-paars); }

/* De reden waarom er geen voorstel is. Even zichtbaar als een prijs: een
   koppel dat dit niet leest, blijft wachten op iets dat niet meer komt. */
.of-voorstel__reden {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--m27-tekst);
}

/* De momenten uit het voorstel. Geen agenda, gewoon de regels die de partner
   zelf voorstelde. */
/* De momenten liggen naast elkaar en niet onder elkaar: onder elkaar duwt
   vier keuzes bijna tweehonderd pixels tussen twee voorstellen, en dan is het
   vergelijken van de prijzen weer scrollwerk. */
.of-momenten {
  margin: 10px 0 0;
  padding: 8px 12px;
  border: 1px solid #ece8e0;
  border-radius: 10px;
  background: #fff;
}
.of-momenten legend {
  padding: 0 4px;
  font-size: 11px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: #8a857e;
}
/* De keuzes in een eigen hoes en niet met display:flex op de fieldset zelf:
   een fieldset die flex wordt, zet de legend in sommige browsers mee in de
   rij en dan valt de vraag weg. */
.of-momenten__keuzes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
}
.of-moment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-right: 4px;
  font-size: 13px;
  color: var(--m27-tekst);
  cursor: pointer;
}
.of-moment input {
  width: 17px;
  height: 17px;
  flex: none;
  accent-color: var(--m27-donkergroen);
  cursor: pointer;
}
.of-moment input:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }

/* Rij-acties, dus nooit primair groen. Rechts uitgelijnd, zoals elders in
   het portaal. */
.of-voorstel__acties {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* -------------------------------- leeg --------------------------------- */

/* Het bloem-motief van .leeg blijft; hier alleen wat compacter, want dit
   vak staat midden in een kaart en niet paginabreed. */
.of-leeg { padding: 30px 20px; }
.of-leeg__tekst { margin: 8px auto 0; max-width: 52ch; }
.of-vraag .of-leeg { margin-bottom: 14px; }

/* ------------------------------ responsive ----------------------------- */

@media (max-width: 768px) {
  /* 48px, want dit zijn knoppen met tekst en die staan op zichzelf. De 44px
     uitzondering uit de standaard geldt alleen voor een icoontje in een dichte
     lijstrij, en hier staat de knop die onomkeerbaar iets vrijgeeft. */
  .of-acties .m27-btn,
  .of-balk__knop,
  .of-voorstel__acties .m27-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .of-acties .m27-btn { flex: 1 1 auto; text-align: center; }
  .of-aanvraag__datum { margin-left: 0; width: 100%; }
  .of-balk__knop { flex: 1 1 auto; text-align: center; }
  /* De uitklapper is ook een tikdoel. Padding en niet min-height met flex:
     display:flex op een summary laat het driehoekje in Chrome verdwijnen
     (zelfde afweging als in mod-checklist.css). */
  .of-meer summary { padding: 15px 0; }

  /* Op telefoon onder elkaar, met de labels erboven: twee kolommen van elk
     zeven tekens breed leest niemand. De volgorde blijft dezelfde, dus
     scrollend vergelijken werkt nog. */
  .of-voorstel__vakken { grid-template-columns: 1fr; }
  .of-voorstel__kop { grid-template-columns: minmax(0, 1fr); }
  .of-voorstel__prijs { text-align: left; }
  .of-voorstel__acties .m27-btn { flex: 1 1 auto; text-align: center; }
  /* Een moment aantikken is een keuze met tekst, dus 48 en niet de 44 van
     hierboven. Op telefoon liggen die keuzes elk op hun eigen regel, dus het
     kost hier geen scrollwerk. */
  .of-moment { min-height: 48px; }
}

@media (max-width: 480px) {
  /* Op telefoon vullen de chips de breedte, anders wordt het een
     puzzeltje van halve woorden. */
  .of-keuze { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .of-keuze,
  .of-meer summary::before { transition: none; }
}