/* Contact Us page styles */
.contact-hero {
  background: linear-gradient(135deg, var(--color-gray-50), var(--color-background));
  padding: var(--space-10);
  margin-block: var(--space-8);
}
.contact-hero .hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.contact-hero .response-note { color: var(--color-muted); font-size: var(--font-size-sm); margin-top: var(--space-2); }

.contact-panels { margin-block: var(--space-8); }
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.info-list .label { display: block; font-size: var(--font-size-sm); color: var(--color-muted); margin-bottom: var(--space-1); }
.info-list a.map-link { display: inline-block; margin-top: var(--space-2); }

.hours-list { display: grid; gap: var(--space-2); }
.hours-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; border-bottom: 1px dashed var(--color-border); padding-bottom: var(--space-2); }
.hours-row dt { color: var(--color-muted); }
.timezone { margin-top: var(--space-3); color: var(--color-muted); font-size: var(--font-size-sm); }

.support-options { margin-block: var(--space-10); }
.support-options .meta { color: var(--color-muted); font-size: var(--font-size-sm); margin-top: var(--space-2); }

/* Form styles */
.contact-form-section { margin-block: var(--space-10); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-top: var(--space-4); }
.form-control { display: flex; flex-direction: column; }
.form-control--full { grid-column: 1 / -1; }
.checkbox { display: flex; align-items: center; gap: var(--space-2); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.form-status { margin-top: var(--space-3); font-weight: 500; }
.char-counter { margin-top: var(--space-1); font-size: var(--font-size-xs); color: var(--color-muted); text-align: right; }

/* FAQ */
.faq-section { margin-block: var(--space-10); }
.faq-list { display: grid; gap: var(--space-3); }
.faq-list details { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--color-surface); }
.faq-list summary { cursor: pointer; font-weight: 600; }
.faq-list summary:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 2px; }
.faq-list details[open] { box-shadow: var(--shadow-sm); }
.faq-list details p { margin-top: var(--space-2); }

/* Feedback */
.feedback-section { margin-block: var(--space-10); }
.rating-group { margin-block: var(--space-2) var(--space-3); }
.stars { display: inline-flex; gap: var(--space-1); font-size: 1.5rem; }
.stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.stars label { color: var(--color-gray-300); cursor: pointer; transition: color var(--duration-normal) var(--easing-standard); }
.stars input:focus + label { outline: 2px solid var(--color-primary-600); outline-offset: 2px; border-radius: var(--radius-sm); }
/* fill previous stars when selected */
#rate-1:checked ~ label, #rate-2:checked ~ label, #rate-3:checked ~ label, #rate-4:checked ~ label, #rate-5:checked ~ label { color: var(--color-gray-300); }
#rate-1:checked + label { color: var(--color-primary-600); }
#rate-2:checked + label, #rate-2:checked ~ label[for="rate-1"] { color: var(--color-primary-600); }
#rate-3:checked + label, #rate-3:checked ~ label[for="rate-2"], #rate-3:checked ~ label[for="rate-1"] { color: var(--color-primary-600); }
#rate-4:checked + label, #rate-4:checked ~ label[for="rate-3"], #rate-4:checked ~ label[for="rate-2"], #rate-4:checked ~ label[for="rate-1"] { color: var(--color-primary-600); }
#rate-5:checked + label, #rate-5:checked ~ label[for="rate-4"], #rate-5:checked ~ label[for="rate-3"], #rate-5:checked ~ label[for="rate-2"], #rate-5:checked ~ label[for="rate-1"] { color: var(--color-primary-600); }

/* Social */
.connect-section { margin-block: var(--space-10); }
.social-links { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-4); flex-wrap: wrap; }
.social-links a { text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.social-links a:hover { border-color: var(--color-primary-600); }

/* Privacy brief */
.privacy-brief { margin-block: var(--space-10); }

/* Chat drawer */
.chat-drawer { position: fixed; right: var(--space-4); bottom: var(--space-4); width: min(360px, 92vw); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 1500; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.chat-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); background: var(--color-gray-50); border-bottom: 1px solid var(--color-border); }
.chat-close { font-size: 1rem; cursor: pointer; color: var(--color-text); }
.chat-body { padding: var(--space-4); }
.chat-form { display: grid; gap: var(--space-3); }
.chat-form button { justify-self: start; }
.chat-drawer[hidden] { display: none; }

@media (max-width: 860px) {
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .contact-hero { padding: var(--space-7); }
}