/* Pop-up service intake form modal.
   NEW feature (client request, post sign-off) — intentionally NOT in the
   verbatim design CSS so parity of the signed-off pages is preserved.
   Reuses .booking-modal for positioning + show/hide; only widens the card
   and adds a scrollable iframe area. Scoped to .service-form-modal. */

.service-form-modal .modal-card {
  max-width: 760px;
  width: 100%;
  padding: 28px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}

.service-form-modal .sf-head {
  margin: 0 36px 14px 0;
}
.service-form-modal .sf-title {
  font: 700 22px/1.2 var(--font-display);
  color: var(--navy);
  margin: 4px 0 4px;
}
.service-form-modal .sf-sub {
  font: 500 13px/1.45 var(--font-body);
  color: var(--slate);
  margin: 0;
}

.service-form-modal .sf-frame-wrap {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper);
  min-height: 280px;
}
.service-form-modal .sf-frame-wrap iframe {
  display: block;
  width: 100%;
  height: 1800px;       /* tall so the Google Form scrolls inside the wrap */
  border: 0;
}

.service-form-modal .sf-fallback {
  display: block;
  margin-top: 12px;
  font: 500 12px/1.4 var(--font-mono);
  letter-spacing: .04em;
  color: var(--slate);
}
.service-form-modal .sf-fallback a { color: var(--navy); }

@media (max-width: 640px) {
  .service-form-modal .modal-card { padding: 20px; max-height: calc(100vh - 24px); }
  .service-form-modal .sf-title { font-size: 19px; }
}