/* ══════════════════════════════════════════════
   Contact Page Styles
   ============================================== */

.response-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-light);
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--r-full);
  margin-bottom: 24px;
}

.response-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.map-placeholder {
  width: 100%;
  height: 200px;
  border-radius: var(--r-lg);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 24px;
}

/* ── Contact Info Section ── */
.contact-heading { margin-bottom: 12px; }
.contact-intro { margin-bottom: 28px; }
.contact-methods { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }

/* ── Contact Method Icon Colors ── */
.contact-method__icon--green    { background: var(--green-light); }
.contact-method__icon--blue     { background: rgba(37, 99, 235, 0.1); }
.contact-method__icon--whatsapp { background: rgba(37, 211, 102, 0.1); }
.contact-method__icon--orange   { background: var(--orange-light); }

/* ── Contact Method Link ── */
.contact-method--link { text-decoration: none; }
.contact-value-link { color: var(--navy); }

/* ── Footnotes ── */
.contact-footnote { font-size: 0.82rem; color: var(--text-muted); }
.contact-footnote + .contact-footnote { margin-top: 4px; }

/* ── Map ── */
.contact-map { border-radius: var(--r-lg, 12px); overflow: hidden; aspect-ratio: 16/9; }
.contact-map iframe { border: 0; display: block; }

/* ── Form Links ── */
.link--blue { color: var(--blue); }
.link--blue-bold { color: var(--blue); font-weight: 600; }
.link--green-bold { color: var(--green); font-weight: 600; }

/* ── Form Success ── */
.contact-success-msg { margin-bottom: 16px; }
.contact-success-note { font-size: 0.85rem; color: var(--text-muted); }

/* ── Dark Mode ── */
[data-theme="dark"] .contact-method { background: var(--bg-alt); border-color: var(--border); }
[data-theme="dark"] .contact-method__value a { color: var(--text) !important; }
[data-theme="dark"] .contact-value-link { color: var(--text); }