.booking-help {
  margin:0;
  padding:14px 20px;
  background:#fff;
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.5;
  text-align:left;
}
/* Fit the host popup to the viewport. Only the provider's frame scrolls;
   the header and guidance stay in view without a second outer scrollbar. */
.modal-box:has(> .booking-help) {
  --booking-scale:1;
  height:min(800px,calc(100vh - 40px));
  height:min(800px,calc(100dvh - 40px));
  max-height:none;
  overflow:hidden;
}
.modal-box:has(> .booking-help) > :is(.modal-head,.booking-help) { flex-shrink:0; }
.modal-box:has(> .booking-help) .modal-head { gap:12px; padding:6px 16px; }
.modal-box:has(> .booking-help) .modal-head b { font-size:1rem; line-height:1.4; }
.modal-box:has(> .booking-help) .modal-head a { white-space:nowrap; }
.modal-box:has(> .booking-help) .modal-head button { display:grid; place-items:center; width:44px; height:44px; flex:none; }
.modal-box > .booking-help { padding:10px 16px; font-size:.9375rem; line-height:1.4; }
.modal-box:has(> .booking-help) > .modal-grid {
  flex:1;
  min-height:0;
  grid-template-rows:minmax(0,1fr);
}
.modal-box:has(> .booking-help) .modal-body {
  min-width:0;
  min-height:0;
  height:100%;
  overflow:hidden;
}
/* The positioned iframe is appended after this overlay. Keep loading feedback
   above it until the existing .loaded rule hides the overlay. */
.modal-box:has(> .booking-help) .modal-loading { z-index:1; }
/* We cannot restyle ServiceTitan's cross-origin controls individually. Give
   the frame a proportionally larger viewport, then scale the whole embed. */
.modal-box:has(> .booking-help) .modal-body iframe {
  position:absolute;
  inset:0 auto auto 0;
  width:calc(100% / var(--booking-scale));
  height:calc(100% / var(--booking-scale));
  min-height:0;
  max-width:none;
  transform:scale(var(--booking-scale));
  transform-origin:top left;
}
@media(max-height:760px) {
  .modal-box:has(> .booking-help) { --booking-scale:.85; }
  .modal-box:has(> .booking-help) .modal-head { padding:4px 14px; }
  .modal-box:has(> .booking-help) .modal-head button { display:grid; place-items:center; width:44px; height:44px; flex:none; }
  .modal-box > .booking-help { padding:8px 14px; font-size:.9375rem; line-height:1.4; }
  .modal-box:has(> .booking-help) .modal-intro { padding:18px; }
  .modal-box:has(> .booking-help) .modal-intro h2 { font-size:1.2rem; }
  .modal-box:has(> .booking-help) .modal-intro p { font-size:.85rem; line-height:1.4; }
  .modal-box:has(> .booking-help) .modal-points { gap:8px; margin-top:12px; }
  .modal-box:has(> .booking-help) .modal-points li { font-size:.85rem; }
}
@media(max-width:780px) {
  .modal-box:has(> .booking-help) {
    --booking-scale:.75;
    height:min(720px,calc(100vh - 16px));
    height:min(720px,calc(100dvh - 16px));
  }
}
/* Use the existing mobile composition in short landscape windows too. */
@media(max-height:600px) {
  .modal-box:has(> .booking-help) .modal-intro { display:none; }
  .modal-box:has(> .booking-help) .modal-grid { grid-template-columns:minmax(0,1fr); }
}