/*
 * WatWillenWijDoen — kerncomponenten (sectie 49).
 * Componentisering in CSS/JS betekent niet dat alles visueel een kaart wordt:
 * sommige van deze componenten zijn bewust vlak (tags, avatars, progress).
 */

/* ============ Buttons (sectie 32) ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  min-height: 48px;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--color-primary-500);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-primary-600); box-shadow: var(--shadow-md); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { border-color: var(--color-ink); }
.btn-secondary.is-selected { background: var(--color-primary-500); color: #fff; border-color: var(--color-primary-500); }

.btn-ghost {
  background: transparent;
  color: var(--color-ink-soft);
}
.btn-ghost:hover { background: var(--color-border); color: var(--color-ink); }

.btn-danger {
  background: var(--color-danger);
  color: #fff;
}

.btn-block { width: 100%; }

/* ============ Activity Mood Tags (eigen patroon, sectie 51) ============ */
.mood-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.mood-tag__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary-500);
  flex-shrink: 0;
}
.mood-tag:hover { border-color: var(--color-primary-500); transform: translateY(-1px); }
.mood-tag[aria-pressed="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fff;
}
.mood-tag[aria-pressed="true"] .mood-tag__dot { background: var(--color-primary-300); }

/* Distinct per mood, used via data attribute rather than N ad-hoc classes */
.mood-tag[data-mood="actief"] .mood-tag__dot { background: var(--color-primary-500); }
.mood-tag[data-mood="eten"] .mood-tag__dot { background: #C87A3B; }
.mood-tag[data-mood="avontuur"] .mood-tag__dot { background: var(--color-accent-500); }
.mood-tag[data-mood="drinken"] .mood-tag__dot { background: #9A5CB4; }
.mood-tag[data-mood="relaxen"] .mood-tag__dot { background: #4B8FBE; }
.mood-tag[data-mood="geen-idee"] .mood-tag__dot { background: var(--color-muted); }

/* ============ Activity Card (sectie 10/37) ============ */
.activity-card {
  display: block;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.activity-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.activity-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-border); }
.media-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-border);
}
.activity-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.activity-card:hover .activity-card__media img { transform: scale(1.03); }

.activity-card__badges {
  position: absolute; top: var(--space-3); left: var(--space-3); right: var(--space-3);
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2);
}

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  background: rgba(27, 24, 21, 0.72);
  color: #fff;
  backdrop-filter: blur(4px);
}
.badge-match { background: var(--color-ink); }
.badge-price { background: rgba(255, 255, 255, 0.92); color: var(--color-ink); }
.badge-booking { background: var(--color-accent-500); }
.badge-community { background: var(--color-surface); color: var(--color-ink-soft); border: 1px solid var(--color-border-strong); }

.activity-card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.activity-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0 0 4px;
  line-height: var(--leading-snug);
}
.activity-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
.activity-card__meta span:not(:last-child)::after { content: '·'; margin-left: var(--space-2); color: var(--color-border-strong); }
.activity-card__context {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: var(--leading-normal);
}

/* ============ Match Ring (eigen patroon, sectie 51/19) ============ */
.match-ring {
  --ring-size: 64px;
  position: relative;
  width: var(--ring-size);
  height: var(--ring-size);
  flex-shrink: 0;
}
.match-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.match-ring circle { fill: none; stroke-width: 6; }
.match-ring__track { stroke: var(--color-accent-500); opacity: 0.18; }
.match-ring__fill {
  stroke: var(--color-primary-500);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--duration-reveal) var(--ease-out);
}
.match-ring__value {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.match-ring--lg { --ring-size: 96px; }
.match-ring--lg .match-ring__value { font-size: var(--text-lg); }

/* ============ Participant Bubbles (eigen patroon, sectie 15/46) ============ */
.participant-bubble {
  --bubble-size: 44px;
  position: relative;
  width: var(--bubble-size);
  height: var(--bubble-size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: #fff;
  flex-shrink: 0;
}
/* Deterministic palette (toegankelijk contrast tegen wit tekst) — gekozen via data-hue in HTML/PHP, niet via JS-kleurgeneratie */
.participant-bubble[data-hue="1"] { background: var(--color-primary-500); }
.participant-bubble[data-hue="2"] { background: var(--color-accent-500); }
.participant-bubble[data-hue="3"] { background: #9A5CB4; }
.participant-bubble[data-hue="4"] { background: #4B8FBE; }
.participant-bubble[data-hue="5"] { background: #C87A3B; }
.participant-bubble[data-hue="6"] { background: var(--color-ink-soft); }

.participant-bubble__ring {
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--color-primary-500);
  opacity: 0;
}
.participant-bubble[data-status="bezig"] .participant-bubble__ring {
  opacity: 1;
  animation: group-pulse 1.6s var(--ease-out) infinite;
}
@keyframes group-pulse {
  0% { transform: scale(0.92); opacity: 0.9; }
  70% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

.participant-row { display: flex; align-items: center; gap: var(--space-3); }
.participant-row__info { display: flex; flex-direction: column; }
.participant-row__name { font-weight: 600; }
.participant-row__status { font-size: var(--text-sm); color: var(--color-muted); display: flex; align-items: center; gap: 6px; }
.participant-row__status--klaar { color: var(--color-success); }
.participant-row__status--klaar::before { content: '✓'; font-weight: 700; }

/* ============ Progress Indicator (sectie 13) ============ */
.progress-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  overflow: hidden;
}
.progress-track__fill {
  height: 100%;
  background: var(--color-primary-500);
  border-radius: var(--radius-pill);
  transition: width var(--duration-slow) var(--ease-out);
}
.progress-label { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-2); }

/* ============ Quiz Card (sectie 12/14) ============ */
.quiz-question { max-width: 560px; margin-inline: auto; text-align: center; }
.quiz-question__label {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-bottom: var(--space-6);
  line-height: var(--leading-snug);
}
.quiz-options { display: grid; gap: var(--space-3); }
.quiz-options--row { grid-auto-flow: column; grid-auto-columns: 1fr; }

.quiz-option {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.quiz-option:hover { border-color: var(--color-primary-300); }
.quiz-option__symbol { font-family: var(--font-display); font-size: var(--text-xl); }
.quiz-option__label { font-weight: 600; }
.quiz-option__sub { font-size: var(--text-sm); color: var(--color-muted); }
.quiz-option.is-selected {
  border-color: var(--color-primary-500);
  background: var(--color-primary-50);
  transform: scale(1.02);
}
.quiz-option.is-selected::after {
  content: '✓';
  position: absolute;
}

.quiz-slider { padding: var(--space-4) 0; }
.quiz-slider input[type="range"] {
  width: 100%;
  accent-color: var(--color-primary-500);
  height: 6px;
}
.quiz-slider__labels { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2); }

.quiz-budget-input {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
}
.quiz-budget-input input {
  width: 5ch;
  border: none;
  border-bottom: 3px solid var(--color-primary-500);
  text-align: center;
  font: inherit;
  color: var(--color-ink);
  background: transparent;
}
.quiz-budget-input input:focus { outline: none; }
.quiz-budget-unit { font-size: var(--text-md); color: var(--color-muted); font-family: var(--font-body); }

/* ============ Vote Card (sectie 21) ============ */
.vote-card {
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  padding: var(--space-5);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  background: var(--color-surface);
}
.vote-card:hover { border-color: var(--color-primary-300); }
.vote-card.is-voted { border-color: var(--color-primary-500); }
.vote-card__confirm {
  display: none;
  align-items: center; gap: 6px;
  color: var(--color-success);
  font-weight: 700; font-size: var(--text-sm);
  margin-top: var(--space-2);
}
.vote-card.is-voted .vote-card__confirm { display: flex; }

/* ============ Empty state (sectie 27) ============ */
.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}
.empty-state__title { font-family: var(--font-display); font-size: var(--text-xl); margin-bottom: var(--space-2); }
.empty-state__body { color: var(--color-muted); margin-bottom: var(--space-4); }
.empty-state__suggestions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }

/* ============ Skeleton (sectie 31) ============ */
.skeleton {
  background: linear-gradient(90deg, var(--color-border) 25%, var(--color-paper) 37%, var(--color-border) 63%);
  background-size: 400% 100%;
  animation: skeleton-sheen 1.4s ease infinite;
  border-radius: var(--radius-md);
}
@keyframes skeleton-sheen {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.skeleton-card { border-radius: var(--radius-lg); aspect-ratio: 4/3; }

/* ============ Toast (delight moments, sectie 44) ============ */
.toast {
  position: fixed; bottom: var(--space-5); left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--color-ink); color: #fff;
  padding: 14px 22px; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  z-index: var(--z-toast);
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }