/* ============================================================
   goud999safe — pagina-CSS: Contact
   Afgesplitst uit de oude pagina-CSS (fase 2). Alleen deze pagina('s).
   ============================================================ */

  /* ─────────────────────────────────────────────
     Contact — contactlijst (rij met icoon-cirkel + chevron) en
     afspraak-card. Hergebruikt .card, .card-header-row, .card-title,
     .card-body en .btn-on-white--solid. Eigen ct-namespace.
     ───────────────────────────────────────────── */
  /* Wrapper rond tabs + kaarten (zoals .cash-page): vangt de content-flexgap op. */
  .ct-page { max-width: 720px; margin-left: auto; margin-right: auto; }
  .ct-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .ct-list { display: flex; flex-direction: column; }
  .ct-item { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 24px; color: var(--ink); transition: background var(--t-fast); }
  .ct-item:not(:last-child)::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 1px; background: var(--grey-line); }
  .ct-item:hover { background: var(--grey-soft); }
  .ct-icon { width: 26px; height: 42px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .ct-icon svg { width: 22px; height: 22px; color: var(--forest); }
  .ct-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .ct-label { font-size: var(--fs-12); font-weight: 600; color: var(--text-muted); }
  .ct-value { font-size: var(--fs-15); font-weight: 600; color: var(--ink); }
  .ct-chevron { display: inline-flex; flex-shrink: 0; color: var(--text-muted); transition: color var(--t-fast); }
  .ct-chevron svg { width: 16px; height: 16px; }
  .ct-item:hover .ct-chevron { color: var(--forest); }

  .ct-appt-text { font-size: var(--fs-14); color: var(--text-soft); line-height: 1.55; margin-bottom: 16px; }

  @media (max-width: 768px) {
    /* Volledige breedte op mobiel (page-CSS laadt ná goud999.css, dus moet hier
       staan om de base .ct-page{max-width;margin:auto} te overrulen). */
    .ct-page { max-width: none; margin-left: 0; margin-right: 0; }
    .ct-item { padding: 14px 16px; gap: 14px; }
    .ct-item:not(:last-child)::after { left: 16px; right: 16px; }
    /* Afspraak-knop over de volledige breedte op mobiel (zoals de referentie). */
    .ct-appt-btn { width: 100%; justify-content: center; }
    /* De mobiele .ct-tabs-stijl staat in 03-components.css (ct-tabs wordt ook op
       online-chat gebruikt). */
  }

/* Contact — opvallende FAQ-CTA tussen de twee cards */
.ct-faq { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: var(--forest); color: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-card); text-decoration: none; transition: background var(--t-fast); }
.ct-faq:hover { background: var(--forest-hover); }
.ct-faq-icon { flex-shrink: 0; width: 30px; height: 40px; color: var(--gold-soft); display: flex; align-items: center; justify-content: center; }
.ct-faq-icon svg { width: 26px; height: 26px; }
.ct-faq-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-faq-title { font-size: var(--fs-16); font-weight: 700; color: #fff; }
.ct-faq-sub { font-size: var(--fs-13); color: rgba(255,255,255,0.7); }
.ct-faq-chevron { flex-shrink: 0; color: rgba(255,255,255,0.65); display: flex; transition: transform var(--t-fast); }
.ct-faq-chevron svg { width: 18px; height: 18px; }
.ct-faq:hover .ct-faq-chevron { transform: translateX(3px); }