/* ============================================================
   characters.css — Character landing page specific styles
   Requires shared.css.
   Used by: km, lezen, luisteren, spreken, schrijven, okt,
            dokter, winkelier, collega, ambtenaar + app/karakter
   ============================================================ */

/* --- Character avatar -------------------------------------- */
.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--surface2);
  border: 2px solid var(--border);
  margin: 0 auto var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-disp-5);
}

/* --- Feature grid ----------------------------------------- */
.feats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.feat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-18);
}
.feat-icon { font-size: var(--text-2xl); margin-bottom: var(--space-sm); }
.feat-title { font-size: var(--text-base); font-weight: 500; margin-bottom: var(--space-xs); }
.feat-desc { font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }

/* --- Example chat (static preview) ------------------------ */
.example-chat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  margin-top: var(--space-28);
  max-width: var(--width-prose);
}
.msg { display: flex; gap: var(--space-10); margin-bottom: var(--space-14); }
.msg:last-child { margin-bottom: 0; }
.msg-av {
  width: var(--space-28);
  height: var(--space-28);
  border-radius: 50%;
  background: var(--surface2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
}
.msg-bubble {
  background: var(--surface2);
  border-radius: var(--radius-md);
  padding: var(--space-10) var(--space-14);
  font-size: var(--text-sm);
  line-height: 1.5;
  max-width: 85%;
}
.msg.user { flex-direction: row-reverse; }
.msg.user .msg-bubble { background: rgba(var(--accent-rgb),0.15); margin-left: auto; }

/* --- Other characters grid -------------------------------- */
.other-chars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-12);
  margin-top: var(--space-lg);
}
.other-char-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  cursor: pointer;
  transition: border-color var(--transition-mid);
  text-decoration: none;
  color: inherit;
  display: block;
}
.other-char-card:hover, .other-char-card:focus-visible { border-color: var(--accent); }
.other-char-card .icon { font-size: var(--text-2xl); margin-bottom: var(--space-sm); }
.other-char-card .name { font-size: var(--text-base); font-weight: 500; margin-bottom: 3px; }
.other-char-card .lvl { font-size: var(--text-xs); color: var(--muted); }

/* --- Enterprise additions --- */

/* Referral banner */
.ref-banner {
  display: none;
  background: rgba(var(--accent-rgb),0.08);
  border-bottom: 1px solid rgba(var(--accent-rgb),0.2);
  padding: var(--space-10) var(--space-lg);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text);
}

/* Trial section helpers */
.trial-actions {
  display: flex;
  gap: var(--space-12);
  justify-content: center;
  flex-wrap: wrap;
}

.trial-caption {
  color: var(--muted);
  font-size: var(--text-base);
  text-align: center;
}

/* Share buttons */
.share-links {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-20);
}
.share-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-sm) var(--space-14);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--text);
  transition: background var(--transition-fast);
}
.share-link:hover, .share-link:focus-visible { background: var(--surface2); }

/* Review / testimonial cards */
.review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-20);
}
.review-avatar {
  width: var(--space-xl);
  height: var(--space-xl);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--white);
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.review-avatar--accent  { background: var(--accent); }
.review-avatar--purple  { background: var(--avatar-purple); }
.review-avatar--green   { background: var(--avatar-green); }
.review-header {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin-bottom: var(--space-10);
}
.review-name {
  font-weight: 600;
  font-size: var(--text-base);
}
.review-stars {
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
}

/* Inline buy modal */
.kar-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-onboarding);
  background: var(--overlay-dark);
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
.kar-modal-overlay.open { display: flex; }
.kar-modal-box {
  background: var(--surface);
  border: 1px solid rgba(var(--text-light-rgb),0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-28);
  max-width: var(--width-xs);
  width: 100%;
  position: relative;
}
.kar-modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: none;
  border: none;
  color: var(--muted);
  font-size: var(--text-xl);
  cursor: pointer;
  line-height: 1;
  transition: color var(--transition-fast);
}
.kar-modal-close:hover, .kar-modal-close:focus-visible { color: var(--text); }
.kar-modal-brand {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}
.kar-modal-char-name {
  font-family: var(--font-serif);
  font-size: var(--text-disp-2);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}
.kar-modal-price-row {
  font-size: var(--text-2xl);
  font-family: var(--font-serif);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}
.kar-modal-price-suffix {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--muted);
}
.kar-modal-cancel-note {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: var(--space-20);
}
.kar-modal-email {
  width: 100%;
  background: var(--surface2);
  border: 1px solid rgba(var(--text-light-rgb),0.08);
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-md);
  font-size: var(--text-md);
  font-family: inherit;
  color: var(--text);
  outline: none;
  margin-bottom: var(--space-12);
  box-sizing: border-box;
  transition: border-color var(--transition-base);
}
.kar-modal-email:focus-visible { border-color: var(--accent); }
.kar-modal-buy-btn {
  width: 100%;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-14);
  font-size: var(--text-md);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-base);
}
.kar-modal-buy-btn:hover, .kar-modal-buy-btn:focus-visible { background: var(--accent-light); }
.kar-modal-error {
  display: none;
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-sm);
  text-align: center;
}
.kar-modal-footer {
  font-size: var(--text-2xs);
  color: var(--muted);
  text-align: center;
  margin-top: var(--space-12);
}
.kar-success-view {
  display: none;
  text-align: center;
}
.kar-success-icon {
  font-size: var(--text-disp-5);
  margin-bottom: var(--space-md);
}
.kar-success-title {
  font-family: var(--font-serif);
  margin-bottom: var(--space-sm);
}
.kar-success-sub {
  color: var(--muted);
  font-size: var(--text-base);
  margin-bottom: var(--space-20);
}

/* Trial form hint */
.trial-form-hint {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

/* Section padding-top reset */
.section-pt0 { padding-top: 0; }

/* Pricing buy button full-width */
.btn-primary-full {
  width: 100%;
  justify-content: center;
}

/* CTA stats row */
.cta-stats {
  display: flex;
  gap: var(--space-xl);
  justify-content: center;
  margin-bottom: var(--space-28);
  flex-wrap: wrap;
}
.cta-stat {
  text-align: center;
}
.cta-stat-num {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 900;
}
.cta-stat-label {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Other chars grid link wrapper */
.feat-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.feat-card-link .feat-card {
  cursor: pointer;
  transition: border-color var(--transition-mid);
}
.feat-card-link .feat-card:hover,
.feat-card-link:focus-visible .feat-card {
  border-color: var(--accent);
}

/* Modal deep link button */
.deeplink-btn {
  display: block;
  padding: var(--space-12) var(--space-md);
  background: var(--surface2);
  border-radius: var(--radius-input);
  color: var(--accent);
  text-decoration: none;
  font-size: var(--text-base);
  transition: background var(--transition-base), color var(--transition-base);
}
.deeplink-btn:hover,
.deeplink-btn:focus-visible {
  background: var(--surface);
  color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Trial email sent confirmation */
.trial-email-sent {
  font-size: var(--text-sm);
  color: var(--green);
  margin: 0;
}

/* FAQ accordion */
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-20);
  cursor: pointer;
  margin-bottom: var(--space-sm);
}
.faq-item summary {
  font-weight: 500;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p {
  margin-top: var(--space-10);
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.6;
}

/* Translation notes inside chat bubbles */
.tr-note {
  color: var(--muted);
  font-size: var(--text-xs);
}

/* Modal hint text */
.modal-hint {
  font-size: var(--text-2xs);
  color: var(--muted);
  margin-top: var(--space-12);
  text-align: center;
}

/* Buy success state */
.buy-success-emoji { font-size: var(--text-disp-5); margin-bottom: var(--space-12); }
.buy-success-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}
.buy-success-msg { color: var(--muted); font-size: var(--text-base); margin-bottom: var(--space-md); }

/* Trial typing indicator */
.trial-typing { color: var(--muted); }

/* --- Round 2 additions --- */
/* Review body text */
.review-body {
  color: var(--text);
  font-size: var(--text-md);
  line-height: 1.6;
  margin-bottom: var(--space-14);
}

/* Review metadata (city, user label) */
.review-meta {
  font-size: var(--text-2xs);
  color: var(--muted);
}

/* FAQ expand icon */
.faq-icon {
  color: var(--accent);
  font-size: var(--text-xl-sm);
  flex-shrink: 0;
}

/* Chat section grid */
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-28);
}

/* FAQ list container */
.faq-list {
  margin-top: var(--space-28);
  max-width: var(--width-faq);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* Chat msg flex helper */
.msg-col { flex: 1; }
.msg-col--right { flex: 1; text-align: right; }
.msg-label {
  font-size: var(--text-2xs);
  color: var(--muted);
  margin-bottom: 3px;
}

/* Button modifiers */
.btn-full {
  width: 100%;
  justify-content: center;
}
.btn-lg {
  font-size: var(--text-md);
}
.btn-md {
  font-size: var(--text-base);
  padding: var(--space-12) var(--space-lg);
}

/* Trial lead form */
.trial-lead {
  margin-top: var(--space-md);
  border-top: 1px solid rgba(var(--text-light-rgb),0.08);
  padding-top: var(--space-14);
}
.trial-lead-caption {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

/* Small muted text */
.text-caption {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-12);
}

/* Section modifier */
.section--no-top { padding-top: 0; }

/* Coming soon badge */
.coming-badge {
  display: inline-block;
  background: rgba(var(--accent-rgb),0.12);
  border: 1px solid rgba(var(--accent-rgb),0.35);
  border-radius: var(--radius-lg);
  padding: var(--space-xs) var(--space-14);
  font-size: var(--text-xs);
  color: var(--accent);
  margin-bottom: var(--space-12);
  font-weight: 500;
}

/* Package-only notice (collega/ambtenaar) */
.pkg-notice {
  background: rgba(var(--accent-rgb),0.08);
  border: 1px solid rgba(var(--accent-rgb),0.2);
  border-radius: var(--radius-input);
  padding: var(--space-14) var(--space-18);
  margin: var(--space-md) 0;
  text-align: center;
}
.pkg-notice-text {
  color: var(--text);
  font-size: var(--text-base);
  margin: 0;
}
.pkg-notice-sub {
  color: var(--muted);
  font-size: var(--text-xs);
  margin-top: var(--space-6);
  margin-bottom: 0;
}

/* Waitlist/success modal emoji */
.success-emoji-lg {
  font-size: var(--text-disp-3);
  margin-bottom: var(--space-10);
}

/* Spinner inside button */
.spinner-btn {
  width: var(--space-18);
  height: var(--space-18);
  border: 2px solid rgba(var(--white-rgb),0.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin var(--anim-spin);
  display: inline-block;
}

/* Lead saved message */
.lead-saved { font-size: var(--text-sm); color: var(--accent); }

/* =============================================
   Responsive — Mobile (≤600px)
   ============================================= */
@media (max-width: 600px) {
  /* Chat grid: single column on mobile */
  .char-grid { grid-template-columns: 1fr; }

  /* Modal: reduce horizontal padding on small screens */
  .kar-modal-box { padding: var(--space-28) var(--space-20); }

  /* CTA stats: reduce gap */
  .cta-stats { gap: var(--space-20); }

  /* Trial actions: stack buttons vertically */
  .trial-actions { flex-direction: column; align-items: stretch; }
  .trial-actions .btn-primary,
  .trial-actions .btn-ghost { justify-content: center; }
}