/* ═══════════════════════════════════════════════════════════════════════════
   enquiry.css — provider/service enquiry modal (the "Email" contact button)

   The modal shell (.modal-overlay/.modal/.modal-header/.modal-body/.modal-footer),
   form controls (.form-group/.form-label/.form-control/.form-error-msg/.form-hint),
   buttons and alerts (.auth-alert*) all come from Design-A's global.css — only the
   read-only identity summary and one a11y guard are page-specific.

   Shared by the provider page (Stage B) and the service detail pages (Stage C).
   ═══════════════════════════════════════════════════════════════════════════ */

/* global.css hides the closed overlay with opacity:0 + pointer-events:none, which
   still leaves its form tabbable from the keyboard. visibility removes it from the
   tab order and the accessibility tree. Scoped to this modal, not patched into the
   approved global.css (R4). */
#enquiry-overlay:not(.open) { visibility: hidden; }

/* Read-only "From / Reply to" summary above the fields — identity comes from the
   signed-in account, these rows are reassurance, not inputs. */
.enquiry-identity {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--gray-100);
  border-radius: var(--radius-md);
  margin-block-end: var(--sp-5);
}
.enquiry-identity-row {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--text-sm);
}
.enquiry-identity-label {
  min-inline-size: 64px;
  flex-shrink: 0;
  color: var(--gray-700);
}
.enquiry-identity-value {
  color: var(--gray-900);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

/* The modal's alert sits above the identity box; global.css .auth-alert has no
   bottom margin of its own in this context. */
.enquiry-alert { margin-block-end: var(--sp-4); }

/* Footer buttons share the row evenly (global .modal-footer is a plain flex row). */
.enquiry-footer-btn { flex: 1; }

/* ── Contact reveal (service pages) ─────────────────────────────────────────
   Filled by enquiry.js from the reveal endpoint's JSON; hidden until then.
   global.css's [hidden] { display:none !important } handles the hiding. */
.reveal-details {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--gray-100);
  border-radius: var(--radius-md);
}
.reveal-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--navy);
  overflow-wrap: anywhere;
}
.reveal-row:hover { color: var(--primary); }
.reveal-row svg { flex-shrink: 0; }
.reveal-error {
  font-size: var(--text-sm);
  color: var(--error);
}