/* ==========================================================================
   Contact page (contact.css)
   ========================================================================== */
.contact-hero { padding: 48px 0 28px; }
.contact-hero h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; margin: 0 0 8px; }
.contact-hero p { color: var(--tb-muted); font-size: 1.05rem; max-width: 60ch; margin: 0; }

.contact-grid { padding-bottom: 72px; }

/* Help routing cards */
.help-card {
  display: flex; gap: 14px; align-items: flex-start;
  width: 100%; padding: 16px 18px;
  border: 1px solid var(--tb-line); border-radius: 14px;
  background: #fff; color: var(--tb-ink); text-align: left;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.help-card:hover, .help-card:focus-visible { border-color: var(--tb-primary); box-shadow: 0 10px 24px rgba(0, 102, 204, 0.12); transform: translateY(-2px); outline: none; color: var(--tb-ink); }
.help-card.is-active { border-color: var(--tb-primary); background: var(--tb-primary-soft); }
.help-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 12px; background: var(--tb-primary-soft); color: var(--tb-primary); }
.help-card.is-active .help-icon { background: var(--tb-primary); color: #fff; }
.help-icon svg { width: 20px; height: 20px; }
.help-card strong { display: block; font-size: 0.98rem; margin-bottom: 2px; }
.help-card span { display: block; color: var(--tb-muted); font-size: 0.86rem; line-height: 1.45; }

.help-note {
  margin-top: 18px; padding: 16px 18px;
  border-radius: 14px; background: var(--tb-navy); color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem; line-height: 1.5;
}
.help-note strong { color: #fff; }
.help-note a { color: #fff; font-weight: 600; }

/* Form card */
.contact-card { border: 0; border-radius: var(--tb-radius-lg); box-shadow: var(--tb-shadow); background: #fff; }
.contact-card .card-body { padding: 32px; }
.contact-card h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 4px; }
.contact-card .form-floating > .form-control, .contact-card .form-floating > .form-select { border-radius: 12px; }
.contact-card .form-floating > textarea.form-control { height: 150px; }
.contact-card .btn-lg { height: 52px; border-radius: 12px; }
.contact-card .alert { border-radius: 12px; }
.contact-success { text-align: center; padding: 24px 8px; }
.contact-success .ok-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: #e7f7ef; color: #0f9d6b; }
.contact-success .ok-icon svg { width: 30px; height: 30px; }
.contact-success h3 { font-size: 1.35rem; margin-bottom: 6px; }
.contact-success p { color: var(--tb-muted); margin: 0 0 18px; }
.grecaptcha-badge { visibility: visible !important; opacity: 0.8; }

@media (max-width: 991.98px) {
  .contact-hero { padding: 32px 0 20px; }
  .contact-card .card-body { padding: 24px 20px; }
  .help-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .help-list .help-card { margin: 0 !important; }
}
@media (max-width: 575.98px) {
  .help-list { grid-template-columns: 1fr; }
}