/* ============================================================
   MOTORX — Contact Page Styles
   css/contact.css
   ============================================================ */

.contact-page { 
  padding: var(--space-10) 0 var(--space-16); 
  margin-top: var(--navbar-height, 80px);
}

.contact-header { text-align: center; margin-bottom: var(--space-10); }
.contact-title  { font-size: var(--text-4xl); font-weight: var(--font-extrabold); margin-bottom: var(--space-3); }
.contact-subtitle { font-size: var(--text-lg); color: var(--clr-text-muted); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-8);
  align-items: start;
}

/* Info panel */
.contact-info-panel {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-4));
}

.contact-info-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-6);
  color: var(--clr-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.contact-info-items { display: flex; flex-direction: column; gap: var(--space-5); }

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.contact-info-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--clr-brand-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.contact-info-label { font-size: var(--text-xs);
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.contact-info-value { font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--clr-text-primary);
}
a.contact-info-value:hover { color: var(--clr-brand); }

/* Form card */
.contact-form-card {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }

/* Success state */
.contact-success {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.contact-success p { font-size: var(--text-lg); color: var(--clr-success); font-weight: var(--font-semibold); }

@media (max-width: 768px) {
  .contact-grid       { grid-template-columns: 1fr; }
  .contact-info-panel { position: static; }
  .contact-form-card  { padding: var(--space-5); }
}