/* ============================================================
   COMPONENT: Contact Page
   FILE: assets/css/contact.css
   Phase: Stage 7 (Final Master Blueprint Roadmap V3, §10).
   Depends on: tokens.css, base.css, surfaces.css, forms.css,
   buttons.css. Owns only .contact-* selectors.
   Bilingual/RTL: logical properties only.
   ============================================================ */

.contact-section {
  padding-block: var(--space-10);
}

.contact-section--alt {
  background-color: var(--color-light-gray);
}

.contact-section__heading {
  font-size: var(--text-h2);
  color: var(--color-navy);
  margin-block-end: var(--space-1);
  text-align: center;
}

.contact-section__subheading {
  color: var(--color-dark-gray);
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-block-end: var(--space-6);
}

/* Form + quick-contact layout */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.contact-form-panel {
  padding: var(--space-5);
}

.contact-panel__heading {
  font-size: var(--text-h3);
  color: var(--color-navy);
  margin: 0 0 var(--space-3);
}

.contact-quick .contact-panel__heading {
  margin-block-end: var(--space-1);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

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

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

.contact-quick__icon {
  flex-shrink: 0;
  color: var(--color-gold);
}

.contact-quick__label {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-navy);
}

.contact-quick__value {
  color: var(--color-dark-gray);
  font-size: var(--text-small);
}

.contact-form__note {
  margin-block-start: var(--space-2);
}

.contact-quick__cta {
  margin-block-start: var(--space-2);
}

/* Three office locations */
.contact-offices__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  list-style: none;
}

.contact-office {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contact-office__country {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-navy);
  font-size: 1.05rem;
  margin-block-end: var(--space-1);
}

.contact-office__flag {
  font-size: 1.25rem;
  line-height: 1;
}

.contact-office__address {
  color: var(--color-dark-gray);
  font-size: var(--text-small);
  font-style: normal;
  line-height: var(--line-height-body);
}

.contact-office__badge {
  align-self: flex-start;
  margin-block-start: var(--space-2);
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
  background: rgba(var(--color-gold-rgb), 0.15);
  color: var(--color-gold);
  font-size: 0.75rem;
  font-weight: 600;
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 3fr 2fr;
  }

  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }

  .contact-offices__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .contact-offices__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ----------------------------------------------------------
   FORM STATUS — Stage 12.1 (Forms & Conversion Wiring).
   Same shape as consultation.css's .consultation-form__status,
   reused here so the two forms share one visual language.
---------------------------------------------------------- */
.contact-form__status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: rgba(var(--color-gold-rgb), 0.08);
  border: 1px solid rgba(46, 139, 87, 0.3);
}

.contact-form__status[data-state="error"] {
  background: rgba(214, 69, 69, 0.08);
  border-color: rgba(214, 69, 69, 0.35);
}

.contact-form__status-icon {
  flex-shrink: 0;
  color: var(--color-success);
}

.contact-form__status[data-state="error"] .contact-form__status-icon {
  color: var(--color-error);
}

.contact-form__status-heading {
  margin: 0 0 2px;
  color: var(--color-navy);
  font-weight: 700;
}

.contact-form__status-text {
  margin: 0;
  color: var(--color-dark-gray);
  font-size: var(--text-small);
}


/* Saudi Arabia head-office map and hours */
.contact-office-map {
  padding-block-start: 0;
}

.contact-office-map__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.contact-office-map__info,
.contact-office-map__map {
  padding: var(--space-5);
}

.contact-office-map__eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--color-gold);
  font-size: var(--text-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.contact-office-map__address {
  color: var(--color-dark-gray);
  font-size: var(--text-small);
  font-style: normal;
  line-height: var(--line-height-body);
}

.contact-office-map__hours {
  margin-block: var(--space-3);
  color: var(--color-dark-gray);
  font-size: var(--text-small);
  line-height: var(--line-height-body);
}

.contact-office-map__hours strong {
  color: var(--color-navy);
}

.contact-office-map__map {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-office-map__frame {
  position: relative;
  width: 100%;
  min-height: 320px;
  overflow: hidden;
  border-radius: var(--radius-btn);
  background: var(--color-light-gray);
}

.contact-office-map__frame iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}

.contact-office-map__caption {
  margin: 0;
  color: var(--color-dark-gray);
  font-size: var(--text-small);
}

@media (min-width: 1024px) {
  .contact-office-map__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: stretch;
  }
}