/* ==========================================================================
   MAKAW — Contact Page Styles
   ========================================================================== */

/* ---- Contact Grid ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-16);
  align-items: start;
}

.contact-info h2 {
  margin-bottom: var(--space-4);
}

.contact-info > p {
  color: var(--neutral-600);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-8);
}

/* ---- Contact Details ---- */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

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

.contact-detail__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--gradient-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--makaw-white);
  flex-shrink: 0;
}

.contact-detail h4 {
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}

.contact-detail p,
.contact-detail a {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  text-decoration: none;
}

.contact-detail a:hover {
  color: var(--makaw-scarlet);
}

/* ---- Contact Hours ---- */
.contact-hours {
  padding: var(--space-5);
  background: var(--neutral-50);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--makaw-emerald);
}

.contact-hours h4 {
  margin-bottom: var(--space-2);
}

.contact-hours p {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  line-height: var(--leading-loose);
  margin-bottom: 0;
}

/* ---- Form Wrapper ---- */
.contact-form-wrapper {
  background: var(--makaw-white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-xl);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

/* ---- Button Loader ---- */
.btn__loader svg {
  animation: spinLoader 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--space-2);
}

@keyframes spinLoader {
  to { transform: rotate(360deg); }
}

/* ---- Map Section ---- */
.map-section {
  width: 100%;
}

.map-placeholder {
  width: 100%;
  height: 350px;
  background: var(--gradient-hero-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-placeholder__content {
  text-align: center;
  color: var(--neutral-400);
}

.map-placeholder__content svg {
  margin-bottom: var(--space-4);
  opacity: 0.4;
}

.map-placeholder__content p {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  margin-bottom: 0;
}