/* ─────────────────────────────────────────────────────────────────────────────
   De prijskaarten. EEN opmaak voor drie plekken: de homepage, /prijzen en elke
   branchepagina.

   WAAROM DIT BESTAAT. Die drie hadden elk hun eigen markup en hun eigen stijl.
   Op de homepage lichtten de kaarten op bij aanwijzen en kon je ze aanklikken,
   op /prijzen en de branchepagina's niet, en de opsommingen liepen uiteen omdat
   de homepage ze hardcoded had staan. Nu komt alles uit pricing.js via
   views/partials/prijskaarten.ejs, en de opmaak uit dit bestand.

   LET OP: dit bestand wordt ook geladen door pagina's die hun eigen
   kleurvariabelen hebben. Elke var() heeft daarom een terugvalwaarde, anders
   wordt een kaart onzichtbaar op een pagina waar die variabele niet bestaat.
   ───────────────────────────────────────────────────────────────────────────── */

.pricing-grid {
  display: grid;
  /* auto-fit in plaats van een vast aantal: met drie kaarten staan er drie naast
     elkaar, met vier vier, en op een smal scherm vouwt het vanzelf naar 2x2 en dan
     naar een kolom. Anders moet hier een regel bij elk pakket dat erbij komt. */
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: 16px;
  margin-top: 48px;
  /* De kaarten even hoog, zodat de knoppen onderaan op een lijn komen. */
  align-items: stretch;
}

.price-card {
  background: var(--navy2, #fff);
  border: .5px solid rgba(15, 23, 42, .07);
  border-radius: var(--rl, 18px);
  padding: 32px 22px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative;
  cursor: pointer;
  /* De knop onderaan vastzetten. Zonder dit hangt hij direct onder de laatste
     opsomming, en dan staat de knop van de kaart met de minste regels hoger dan
     de rest. Dat was precies wat er misging bij Team. */
  display: flex;
  flex-direction: column;
}

/* Aanwijzen moet net zo duidelijk zijn als aanklikken: wie met de muis over een
   kaart gaat, is aan het vergelijken. */
.price-card:hover {
  border-color: rgba(0, 85, 255, .45);
  box-shadow: 0 14px 40px -18px rgba(0, 85, 255, .35);
  transform: translateY(-3px);
}
.price-card:focus-visible {
  outline: 2px solid var(--blue2, #3375FF);
  outline-offset: 3px;
}
.price-card:hover .price-btn { background: rgba(15, 23, 42, .1); }
.price-card.popular:hover .price-btn { background: var(--blue2, #3375FF); }

.price-card.selected {
  border-color: var(--blue2, #3375FF);
  box-shadow: 0 0 0 2px rgba(51, 117, 255, .35), 0 20px 60px -20px rgba(0, 85, 255, .4);
  transform: translateY(-4px);
}
.price-card.selected .price-btn { background: var(--blue, #0055FF); border-color: var(--blue, #0055FF); color: #fff; }

.price-card.popular {
  border-color: var(--blue, #0055FF);
  background: linear-gradient(160deg, rgba(0, 85, 255, .12) 0%, var(--navy2, #fff) 100%);
}
.price-card.popular:before {
  content: attr(data-badge);
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--blue, #0055FF); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 14px; border-radius: 100px;
  white-space: nowrap; letter-spacing: .06em;
}

.price-name {
  font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700;
  color: var(--text2, #57607A); letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 18px;
}
.price-amount {
  font-family: 'Sora', sans-serif; font-size: 36px; font-weight: 800;
  letter-spacing: -1px; line-height: 1; color: var(--white, #0B1220);
}
.price-amount sup { font-size: 18px; vertical-align: super; font-weight: 600; }

/* De vroege-klantprijs. Die stond eerder als grijze kleine tekst ergens achteraan,
   waardoor niemand zag dat er korting op zat. Nu staat de reguliere prijs
   doorgestreept naast het bedrag en de uitleg er direct onder. */
.price-anchor {
  font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 700;
  color: var(--text2, #57607A); text-decoration: line-through;
  text-decoration-thickness: 2px; opacity: .55; margin-left: 8px;
}
.price-korting {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255, 209, 102, .14); border: .5px solid rgba(255, 209, 102, .45);
  color: #8A6D1F; font-size: 11.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 100px; margin-top: 8px;
}
.price-period { font-size: 13px; color: var(--text2, #57607A); margin-top: 6px; margin-bottom: 8px; }
.price-limit {
  font-size: 13px; color: var(--text2, #57607A); padding: 10px 0;
  border-top: .5px solid rgba(15, 23, 42, .06);
  border-bottom: .5px solid rgba(15, 23, 42, .06);
  margin-bottom: 22px;
}
.price-limit b { color: var(--teal, #0A9B76); font-weight: 700; }
.price-werkdag { font-size: 11px; opacity: .6; }

.price-features { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0 0 24px; padding: 0; }
.price-features li {
  font-size: 13px; color: var(--text2, #57607A);
  display: flex; align-items: flex-start; gap: 8px; line-height: 1.4;
}
.price-features li:before {
  content: ''; flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px;
  background: var(--teal, #0A9B76);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.4 3.4 3.4L13 5.2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.4 3.4 3.4L13 5.2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.price-btn {
  width: 100%; background: rgba(15, 23, 42, .05); color: var(--white, #0B1220);
  font-family: inherit; font-size: 14px; font-weight: 600; padding: 12px;
  border-radius: 8px; border: .5px solid rgba(15, 23, 42, .12);
  cursor: pointer; transition: background .2s, transform .2s;
  text-align: center; text-decoration: none; display: block;
  /* Dit duwt de knop naar de onderkant van de kaart. */
  margin-top: auto;
}
.price-card.popular .price-btn { background: var(--blue, #0055FF); border-color: var(--blue, #0055FF); color: #fff; }
.price-btn:hover { transform: translateY(-1px); }

@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* Voor wie dit pakket bedoeld is. Staat onder de naam, want dat is de vraag die
   iemand als eerste heeft: is dit er een voor mij? */
.price-voor {
  font-size: 12px; line-height: 1.45; color: var(--text2, #57607A);
  margin: 2px 0 10px; min-height: 34px;
}
/* Het gesprekkenaantal stond groot onder de prijs en was daarmee het tweede wat je
   zag. Juist dat getal laat de kleinste klant rekenen en afhaken. Nu klein, onder
   de opsomming, meteen met de zachte grens erbij. */
.price-limit {
  font-size: 11px; line-height: 1.5; color: var(--text2, #57607A);
  border-top: 1px solid rgba(15,23,42,.08); padding-top: 10px; margin: 0 0 14px;
}