/*
 * Symplast Practice Finder — plugin component styles, on the design-system tokens
 * declared in form-design.css (#gform_wrapper_1 subtree). px ONLY (1rem ≈ 1px here).
 */

/* Hide the confirmed-name field until manual mode / the green box (prevents load flash). */
.gform_wrapper .practice-name { display: none; }

/* Google autocomplete field matches the design-system text input. */
.gform_wrapper gmp-place-autocomplete {
  display: block; width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--sf-line) !important; border-radius: var(--sf-radius-field) !important; background: #ffffff !important;
  --gmp-mat-color-surface: #ffffff;
  --gmp-mat-color-on-surface: var(--sf-ink);
  --gmp-mat-color-on-surface-variant: var(--sf-mut);
  --gmp-mat-color-outline: var(--sf-line);
  --gmp-mat-color-primary: var(--sf-coral);
}
.gform_wrapper gmp-place-autocomplete:hover { border-color: var(--sf-line-hover) !important; }
.gform_wrapper gmp-place-autocomplete:focus-within { border-color: var(--sf-coral) !important; box-shadow: var(--sf-ring-focus) !important; }
.gform_wrapper gmp-place-autocomplete::part(input) {
  font-family: 'Syne', sans-serif !important; font-size: 17px !important; line-height: 1.5 !important; padding: 12px 13px !important;
  color: var(--sf-ink) !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
}

/* Links: "Enter manually" / "Back to practice search" / "Change". */
.gform_wrapper .spf-link {
  display: inline-block; vertical-align: baseline; white-space: nowrap;
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--sf-coral-ink) !important; font-family: inherit !important; font-size: 13px !important;
  font-weight: 600 !important; line-height: 1.3 !important; text-decoration: underline !important;
  text-underline-offset: 2px; cursor: pointer; padding: 0 !important; margin-left: 12px; width: auto !important;
}
.gform_wrapper .spf-link:hover { color: var(--sf-coral) !important; }

button#spf-manual,
button#spf-back {
  min-height: unset;
  display: inline-block;
  margin-left: 40px;
  font-size: 16px !important;
  line-height: 1.425 !important;
  font-weight: 400 !important;
}

/* Green confirmation box (success family, not coral). */
.spf-box {
  display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 11px 13px;
  border: 1px solid var(--sf-good-line); border-radius: var(--sf-radius-field); background: var(--sf-good-wash);
}
.spf-box .spf-ic {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px;
  background: #fff; border: 1px solid var(--sf-good-line); color: var(--sf-good-d);
  font-size: 16px !important; font-weight: 800 !important; line-height: 1 !important;
}
.spf-box .spf-txt { min-width: 0; line-height: 1.3; }
.spf-box .spf-txt b {
  display: block; color: #0f3d2a; font-size: 15.2px !important; font-weight: 700 !important; line-height: 1.3 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spf-box .spf-txt small {
  display: block; color: var(--sf-mut) !important; font-size: 12.8px !important; line-height: 1.3 !important; margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spf-box .spf-change { margin-left: auto !important; }

/* Manual-entry extras: the relocated State dropdown (field 15), and nothing else — the
   hand-entered ZIP box was removed, since state is the routing key and a typed ZIP was
   only ever another field to get wrong. GF's field wrapper carries the control's own
   styling; this just gives it the form's 16px rhythm under the practice name. */
.spf-extra { margin-top: 16px !important; }
.spf-extra > .gfield { margin: 0 !important; padding: 0 !important; }

/* Client-side guard message.
   .gform_wrapper prefix + !important on the colour: this is an ERROR message and must read
   as one. Without both, the theme's text colour beats the bare class and the message renders
   black — indistinguishable from help text. --sf-coral-d is the same token form-design.css
   uses for Gravity Forms' own validation messages, so the two match. */
.gform_wrapper .spf-guard {
  display: none; margin-top: 8px; font-size: 12.48px !important; line-height: 1.5 !important; font-weight: 500 !important;
  color: var(--sf-coral-d) !important; background: var(--sf-coral-wash); border: 1px solid var(--sf-coral-line);
  border-radius: var(--sf-radius-field); padding: 10px 13px;
}

/* Routing confirmation: heading + embedded AE booking calendar (px only). */
.spf-confirmation { padding: 2px 0 0; }
.spf-confirmation-title {
  margin: 0 0 6px; font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: 20.8px !important; letter-spacing: -.01em; color: var(--sf-coral-cta);
}
.spf-confirmation-lead {
  margin: 0 0 16px; font-size: 15.2px !important; line-height: 1.6 !important; color: var(--sf-ink);
}
.spf-meeting { min-height: 600px; }
.spf-meeting .meetings-iframe-container { width: 100%; text-align: left !important; }
/* Full-width scheduler so HubSpot shows its two-column layout; pinned left, no
   artificial max-width. Height is left to HubSpot's auto-resize, and it collapses
   to single-column responsively on narrow/mobile viewports. */
.spf-meeting .meetings-iframe-container iframe {
  width: 100% !important; margin: 0 !important; display: block !important;
}
.spf-confirmation noscript a { color: var(--sf-coral-cta); font: inherit; }

/* Per-AE booking page (/book/<slug>). Rendered inside the theme, so px only.
   One column, centered on the page, sized to the full two-column scheduler. The
   heading, body text, iframe, and fallback line all share the column's left edge. */
.spf-booking-wrap { padding: 40px 24px 64px; text-align: left !important; }
.spf-booking {
  max-width: 800px !important; margin: 0 auto !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  text-align: left !important;
}
.spf-booking-title {
  margin: 0 0 8px !important; font-family: "Space Grotesk", sans-serif; font-weight: 600 !important;
  font-size: 26px !important; line-height: 1.2 !important; letter-spacing: -.01em;
  color: var(--sf-coral-cta) !important; text-align: left !important;
}
.spf-booking-lead { margin: 0 0 16px !important; font-size: 15.2px !important; line-height: 1.6 !important; color: var(--sf-ink); text-align: left !important; }
.spf-booking-expect { margin: 0 0 20px !important; padding: 0 0 0 18px !important; list-style: disc; text-align: left !important; }
.spf-booking-expect li { margin: 0 0 6px !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--sf-mut); }
.spf-booking-alt { margin: 16px 0 0 !important; font-size: 12.48px !important; line-height: 1.5 !important; color: var(--sf-mut-2); text-align: left !important; }
.spf-booking-sign { margin: 2px 0 24px !important; font-size: 15.2px !important; line-height: 1.7 !important; color: var(--sf-ink); text-align: left !important; }
.spf-booking-sign-name { font-family: "Space Grotesk", sans-serif; font-weight: 600; color: var(--sf-ink); }

/* Inline confirmation (assets/spf-confirmation.js). Same markup as /book/, but
   rendered in place of the form instead of on a second page load, so it inherits
   the surrounding section rather than owning the page. px only — the theme sets
   html{font-size:.052vw}, so 1rem is about 1px and any rem collapses. */
.spf-booking-wrap--confirmation { padding: 4px 0 8px !important; }
.spf-booking-wrap--confirmation .spf-booking {
  max-width: 940px !important; margin: 0 auto !important;
}

/* Collapse the section to a single column so the scheduler gets the room it has
   on /book/, and hide the sales copy the prospect has already acted on. The class
   is put on the section by spf-confirmation.js.

   The card's own surface is deliberately KEPT. The section background is set per
   page (--dark on /get-started/, --grey on velocity/switch/growth, plus --coral
   and --sage), and the booking copy is dark ink; dropping the white card puts dark
   text on a dark section. The card is what guarantees contrast on every variant,
   so widening it is safe where removing it is not. */
.demoFormSection.spf-confirm-wide .demoFormSection__inner {
  grid-template-columns: 1fr;
  align-items: start;
}
.demoFormSection.spf-confirm-wide .demoFormSection__copy { display: none; }
.demoFormSection.spf-confirm-wide .demoFormSection__form {
  max-width: none;
  padding: 28px 32px 32px;
}

/* -------------------------------------------------------------------------
   Our own practice search input (assets/spf-mobile-search.js), at ALL widths.
   Replaces Google's <gmp-place-autocomplete>, whose closed shadow DOM means we
   can neither reposition its fullscreen phone takeover nor read what the user
   typed. These rules were always width-independent — they applied on phones only
   because the JS gated itself; that gate is now SPF_SEARCH_BREAKPOINT = 'all'.
   Nothing here changes if it is set back to a media query. px ONLY (1rem ≈ 1px).
   ------------------------------------------------------------------------- */

/* Hide the Google element (!important beats the inline display the picker
   toggles — we still read that inline value to mirror show/hide). The class is
   set directly on the element, so it works wherever GF renders it. */
.gform_wrapper gmp-place-autocomplete.spf-m-hidden { display: none !important; }

/* .gform_wrapper prefix + !important so form-design.css's #gform_wrapper_1-scoped
   (ID-specificity) rules can't override our positioning and float the list away. */
.gform_wrapper .spf-m { position: relative !important; display: block !important; }

/* The search input — visually identical to the Google field / manual ZIP input. */
.spf-m .spf-m-input {
  width: 100% !important; box-sizing: border-box !important; display: block;
  font-family: 'Syne', sans-serif !important; font-size: 17px !important; line-height: 1.5 !important; padding: 12px 13px !important;
  border: 1.5px solid var(--sf-line) !important; border-radius: var(--sf-radius-field) !important;
  color: var(--sf-ink) !important; background: #ffffff !important; box-shadow: none !important;
}
.spf-m .spf-m-input::placeholder { color: var(--sf-mut) !important; opacity: 1; font-family: 'Syne', sans-serif !important; font-size: 17px !important; }
.spf-m .spf-m-input:hover { border-color: var(--sf-line-hover) !important; }
.spf-m .spf-m-input:focus { outline: none; border-color: var(--sf-coral) !important; box-shadow: var(--sf-ring-focus) !important; }

/* Inline results list — pinned directly UNDER the input, never fullscreen, never
   floated above. top/bottom/left/position forced past the theme's ID-scoped rules. */
.gform_wrapper .spf-m .spf-m-list {
  position: absolute !important; top: 100% !important; bottom: auto !important;
  left: 0 !important; right: auto !important; width: 100% !important;
  margin: 6px 0 0 !important; box-sizing: border-box !important; z-index: 100000;
  max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #ffffff; border: 1px solid var(--sf-line); border-radius: var(--sf-radius-field);
  box-shadow: 0 8px 24px rgba(20, 20, 40, .12); padding: 4px;
}
.spf-m .spf-m-opt {
  display: block; padding: 10px 11px; border-radius: 8px; cursor: pointer;
}
.spf-m .spf-m-opt + .spf-m-opt { margin-top: 2px; }
.spf-m .spf-m-opt:hover,
.spf-m .spf-m-opt.is-active { background: var(--sf-coral-wash); }
.spf-m .spf-m-opt b {
  display: block; font-family: 'Syne', sans-serif; font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--sf-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spf-m .spf-m-opt small {
  display: block; font-size: 12.8px; line-height: 1.3; color: var(--sf-mut); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}