/* Slimme Start — hero-knop met "2 maanden gratis"-sticker en de punten eronder
   Bestand: /app/assets/css/hero-sticker.css
   Wordt geladen via $extraCss in index.php */

/* Knop boven, punten in één rij eronder */
.hp-hero-actie.hp-hero-actie--sticker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-top: 14px;
}

/* Sticker op de knop */
.hp-knop.hp-knop-sticker {
  position: relative;
  overflow: visible;
}
.hp-sticker {
  position: absolute;
  top: -15px;
  right: -14px;
  background: #FFD54A;
  color: #151c3a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  padding: 6px 9px;
  border-radius: 0;
  transform: rotate(6deg);
  box-shadow: 3px 3px 0 #151c3a;
  pointer-events: none;
  transition: transform .2s ease;
}
.hp-knop.hp-knop-sticker:hover .hp-sticker,
.hp-knop.hp-knop-sticker:focus-visible .hp-sticker { transform: rotate(9deg) scale(1.05); }

/* Punten met navy iconen */
.hp-punten {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hp-punten li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  color: #3d4460;
}
.hp-punt-icoon {
  flex: none;
  color: #04024A;
}

/* Mobiel: punten onder elkaar */
@media (max-width: 600px) {
  .hp-sticker { font-size: 12px; right: -6px; top: -14px; }
  .hp-punten { flex-direction: column; gap: 8px; }
  .hp-punten li { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-sticker { transition: none; }
}