/* site-forms 1.0.0 - shared modal CSS for all FORM sites (hosted next to site-forms-1.0.0.js).
   Replaces the per-site copies of prototypes/dialog-modal/site-modal.css. Defaults = today's look
   (gospotcheck.com, www.form.com). A site changes the look by overriding variables, e.g. in its head:
     <style>.fdc-modal { --fdc-bg: #fff; --fdc-color: #111; }</style>
   Variables (all optional):
     --fdc-bg            panel background colour              #262b2f
     --fdc-dots          panel background image, a url(...)   the FORM dots
     --fdc-color         text colour                          #fff
     --fdc-font          heading / text font stack            "Open Sans", sans-serif
     --fdc-max-width     panel width                          800px
     --fdc-radius        panel corner radius                  4px
     --fdc-pad           panel padding, desktop               50px 60px 76px
     --fdc-pad-mobile    panel padding, <= 767px              30px 20px 76px
     --fdc-backdrop      page overlay colour                  rgba(11, 11, 11, 0.8)
     --fdc-blur          overlay blur                         5px
     --fdc-error         validation message colour            #f45c3a
   Sites that draw the panel with their own ".mfp-content" CSS (www.form.com) set
   window.fdcSite = { magnificMarkup: true } in the JS; section 3 then applies. */

/* 1. Modal shell */
html.fdc-modal-open { overflow: hidden; }            /* no page scroll behind the modal */

.fdc-modal {
  --fdc-bg: #262b2f;
  --fdc-dots: url("https://www.form.com/wp-content/uploads/2021/07/Dots.svg");
  --fdc-color: #fff;
  --fdc-font: "Open Sans", sans-serif;
  --fdc-max-width: 800px;
  --fdc-radius: 4px;
  --fdc-pad: 50px 60px 76px;
  --fdc-pad-mobile: 30px 20px 76px;
  --fdc-backdrop: rgba(11, 11, 11, 0.8);
  --fdc-blur: 5px;
  --fdc-error: #f45c3a;
}

.fdc-modal {
  box-sizing: border-box;
  width: calc(100% - 16px);                          /* 8px side gap */
  max-width: var(--fdc-max-width);
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);                   /* iOS: address bar / keyboard aware */
  margin: auto;
  padding: var(--fdc-pad);
  border: 0;
  border-radius: var(--fdc-radius);
  background: var(--fdc-bg) var(--fdc-dots) right bottom no-repeat;
  background-attachment: local;                      /* dots stay at the end of the form when it scrolls */
  color: var(--fdc-color);
  overflow-y: auto;                                  /* tall forms scroll inside the modal */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.fdc-modal::backdrop {
  background: var(--fdc-backdrop);
  -webkit-backdrop-filter: blur(var(--fdc-blur));
  backdrop-filter: blur(var(--fdc-blur));
}
.fdc-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fdc-color);
  font: 40px/44px Arial, Baskerville, monospace;
  opacity: 0.65;
  cursor: pointer;
}
.fdc-modal__close:hover,
.fdc-modal__close:focus-visible { opacity: 1; }
.fdc-modal:focus { outline: none; }

/* Gentle fade (skipped for reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  .fdc-modal[open] { animation: fdc-modal-in 0.15s ease-out; }
  @keyframes fdc-modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

@media screen and (max-width: 767px) {
  .fdc-modal { padding: var(--fdc-pad-mobile); }
}

/* 2. Content styles */
.fdc-modal p { color: var(--fdc-color); font-weight: 400; }
.fdc-modal h2, .fdc-modal h3, .fdc-modal p, .fdc-modal a { font-family: var(--fdc-font); }
.fdc-modal h2, .fdc-modal h3 { margin-bottom: 0.2em; }
.fdc-modal label.hs-error-msg { color: var(--fdc-error); font-weight: 500; }
.fdc-modal .input { margin-right: 0 !important; }
.fdc-modal .hs-form .field input,
.fdc-modal .hs-form .field select { outline: none; border: none; }

/* 3. Magnific markup (window.fdcSite.magnificMarkup, www.form.com): the site's own ".mfp-content"
   rules draw the panel, so the dialog is only a transparent, scrollable frame. */
.fdc-modal.mfp-wrap {
  max-width: 800px;
  padding: 0;
  background: none;
  border-radius: 0;
}
.fdc-modal.mfp-wrap .mfp-container,
.fdc-modal.mfp-wrap .mfp-content { position: relative; width: 100%; margin: 0 auto; }
.fdc-modal.mfp-wrap .fdc-modal__close { z-index: 1046; } /* above Magnific .mfp-content (1045) */
/* Landing pages load Magnific's own CSS (.mfp-wrap/.mfp-container = fixed/absolute, 100% height),
   which stretched the dialog to the full viewport so the close button sat outside the visible panel.
   Shrink-wrap the dialog and container so the panel's corner is the button's corner. */
.fdc-modal.mfp-wrap {
  width: calc(100% - 16px);
  height: fit-content;
  max-height: calc(100dvh - 16px);
  overflow-x: hidden;
  overflow-y: auto;
}
.fdc-modal.mfp-wrap .mfp-container { height: auto; padding: 0; overflow: visible; }
.fdc-modal.mfp-wrap .mfp-content { box-sizing: border-box; }
@media screen and (max-width: 767px) {
  .fdc-modal.mfp-wrap .mfp-content { padding: 30px 20px 40px; }
}