/*
 * Golonch Booking Form — step visibility + questionnaire styling.
 *
 * The pre-ready rule that hides steps 2-4 before booking-form.js runs is NOT
 * here — it is injected from PHP (wp_add_inline_style) scoped to the exact
 * configured form id, because `.form_step_2` is a class the site ALSO uses on
 * its other e-form (the signup form), and a broad `.e-form-base` selector here
 * would hide that form's step 2 permanently.
 *
 * Everything in this file is either the generic `.golonch-bf-hide` toggle or is
 * scoped under a `.golonch-bf-*` class the script creates itself, so it cannot
 * touch any other form on the site.
 */

.golonch-bf-hide {
  display: none !important;
}

/* Used by lead-capture.js on the lead page (stage 1 of the separate-page
   funnel). Declared here because funnel.css only loads on the booking and
   survey pages, not on the lead page. */
.golonch-fn-hide {
  display: none !important;
}

/* ------------------------------------------------------------------ *
 * Lead form CTA — 3D lift
 * ------------------------------------------------------------------ *
 *
 * A solid offset shadow in the brand's own black rather than a blurred grey
 * one: the button is flat yellow with a 10px radius, and a soft shadow just
 * muddies the edge. A hard edge underneath reads as a physical surface.
 *
 * The button travels DOWN into that shadow on press (translateY + shrinking
 * offset), so the depth is felt rather than only seen. Transform and
 * box-shadow are both compositor-friendly, so this stays smooth.
 *
 * Scoped to body.page-id-1717 so the live pricing CTA elsewhere is untouched.
 */
body.page-id-1717 form[data-id="8c9144d"] button.primary_btn,
body.page-id-1717 form[data-id="8c9144d"] .e-form-submit-button-base {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 0 0 var(--secoundry, #000);
  transform: translateY(0);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  will-change: transform;
}
body.page-id-1717 form[data-id="8c9144d"] button.primary_btn:hover,
body.page-id-1717 form[data-id="8c9144d"] .e-form-submit-button-base:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 var(--secoundry, #000);
  filter: brightness(1.02);
}
body.page-id-1717 form[data-id="8c9144d"] button.primary_btn:active,
body.page-id-1717 form[data-id="8c9144d"] .e-form-submit-button-base:active {
  /* Pressed flat against the shadow. */
  transform: translateY(3px);
  box-shadow: 0 1px 0 0 var(--secoundry, #000);
}

/* "Get Started" is an Elementor <a> button, styled by the kit rather than by
   .primary_btn, so it needs its own selector to get the same treatment. */
body.page-id-1717 form[data-id="8c9144d"] .form_step1_hide .elementor-button {
  box-shadow: 0 4px 0 0 var(--secoundry, #000);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body.page-id-1717 form[data-id="8c9144d"] .form_step1_hide .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 var(--secoundry, #000);
}
body.page-id-1717 form[data-id="8c9144d"] .form_step1_hide .elementor-button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 0 var(--secoundry, #000);
}

@media (prefers-reduced-motion: reduce) {
  body.page-id-1717 form[data-id="8c9144d"] button.primary_btn,
  body.page-id-1717 form[data-id="8c9144d"] .e-form-submit-button-base,
  body.page-id-1717 form[data-id="8c9144d"] .form_step1_hide .elementor-button {
    transition: none;
  }
}

/* ------------------------------------------------------------------ *
 * Lead form — first/last name on one row
 * ------------------------------------------------------------------ *
 *
 * First name (0117316) and Last name (0a11c97) are separate full-width
 * .field_box siblings inside .form_step_2, so they stack. Pairing them on one
 * row halves the apparent length of the form, which matters on the step the
 * visitor sees right before booking.
 *
 * flex-basis with a gap allowance rather than width:50% — .form_step_2 is a
 * flex column with its own gap, and two 50% children would overflow by exactly
 * that gap and wrap straight back to two lines.
 *
 * Scoped to body.page-id-1717 so no other form on the site is touched.
 */
body.page-id-1717 form[data-id="8c9144d"] .form_step_2 {
  flex-direction: row;
  flex-wrap: wrap;
}
body.page-id-1717 form[data-id="8c9144d"] .form_step_2 > .field_box {
  flex: 1 1 100%;
  min-width: 0;
}
body.page-id-1717 form[data-id="8c9144d"] .form_step_2 > [data-id="0117316"],
body.page-id-1717 form[data-id="8c9144d"] .form_step_2 > [data-id="0a11c97"] {
  flex: 1 1 calc(50% - 8px);
}

/* Single column on small screens — two half-width text inputs side by side are
   cramped on a phone. */
@media (max-width: 600px) {
  body.page-id-1717 form[data-id="8c9144d"] .form_step_2 > [data-id="0117316"],
  body.page-id-1717 form[data-id="8c9144d"] .form_step_2 > [data-id="0a11c97"] {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------------ *
 * Lead page CTA weight
 * ------------------------------------------------------------------ *
 *
 * The submit label renders at the kit's default weight, which looks thin
 * against the size of the button and does not read as the primary action.
 * Heavier text, same yellow.
 *
 * Scoped to body.page-id-1717 on purpose: the live Home page (1573) carries
 * an identical form id and the same .primary_btn class, and its pricing CTA
 * must not change. This stylesheet loads site-wide, so the body class is the
 * only thing separating the two.
 */
body.page-id-1717 form[data-id="8c9144d"] button.primary_btn,
body.page-id-1717 form[data-id="8c9144d"] .e-form-submit-button-base {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

/* Small status line under the booking step ("Time booked ✓" / "pick a time"). */
.golonch-bf-note {
  font-size: 13px;
  line-height: 1.4;
  margin-top: 10px;
}
.golonch-bf-note.is-ok {
  color: #1a7f37;
}
.golonch-bf-note.is-warn {
  color: #c00;
}

/* ------------------------------------------------------------------ *
 * Booking popup (step 3)
 * ------------------------------------------------------------------ *
 *
 * Our own modal rather than GHL's built-in one: the flow only advances when we
 * see the booking-confirmed message, so open/close has to stay under our
 * control. Everything is scoped under .golonch-bf-modal / .golonch-bf-book, so
 * it cannot reach any other form on the site.
 */

/* ------------------------------------------------------------------ *
 * Confirmation block (booking step + survey step)
 * ------------------------------------------------------------------ *
 *
 * Sits above the button on step 3 and above the questions on step 4.
 * Typography is inherited from the form on purpose — only scale, weight and
 * rhythm are set here, so it always reads as part of the page's own design
 * rather than something bolted on.
 */
.golonch-bf-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin: 4px 0 22px;
}
.golonch-bf-intro__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
  color: #1a7f37;
  background: rgba(26, 127, 55, 0.1);
  border-radius: 50%;
  /* Gentle entrance — enough to feel responsive, short enough not to delay. */
  animation: golonch-bf-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.golonch-bf-intro__title {
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.golonch-bf-intro__text {
  max-width: 42ch;
  margin: 0;
  font-size: 0.95em;
  line-height: 1.5;
  opacity: 0.72;
}

@keyframes golonch-bf-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Respect a reduced-motion preference — the tick still appears, just without
   the scale animation. */
@media (prefers-reduced-motion: reduce) {
  .golonch-bf-intro__tick {
    animation: none;
  }
}

/* "Book a Meeting" is a clone of the page's own Submit button, so it already
   carries Elementor's styling for this form — colours, hover and radius are
   deliberately NOT set here. Only placement and weight are. */
.golonch-bf-book {
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  /* Site's own button border token — theme-aware, so this follows the theme
     like every other button rather than carrying a hard-coded edge. */
  border: 1px solid var(--border_color, rgba(0, 0, 0, 0.15));
}

/* Make the primary calls-to-action carry more visual weight than the fields
   around them. Scoped to our own classes so no other button on the site moves. */
.golonch-bf-book,
.golonch-bf-cta,
.golonch-bf-final {
  font-weight: 700;
  letter-spacing: 0.01em;
}
.golonch-bf-book,
.golonch-bf-cta {
  font-size: 1.05em;
  padding-top: 1.05em;
  padding-bottom: 1.05em;
}
/* A soft lift so the CTA reads as the next action without changing its colour. */
.golonch-bf-cta,
.golonch-bf-book {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.golonch-bf-cta:hover,
.golonch-bf-book:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
/* The clone may be an Elementor wrapper div rather than the button itself;
   centre whichever element actually paints. */
.golonch-bf-book > button,
.golonch-bf-book > a {
  margin-left: auto;
  margin-right: auto;
}

.golonch-bf-modal {
  position: fixed;
  inset: 0;
  z-index: 100000; /* above Elementor's sticky header */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.6);
}
.golonch-bf-modal[hidden] {
  display: none !important;
}
/* The <body> class stops the page scrolling behind the open modal. */
body.golonch-bf-modal-open {
  overflow: hidden;
}

.golonch-bf-modal__panel {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: min(88vh, 900px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
/* Every state is pinned explicitly, including colour on hover/focus/active.
   The theme styles bare `button` elements site-wide (that is where the red
   hover came from), and this one sits outside the form so it cannot inherit
   the form's own button styling. */
.golonch-bf-modal .golonch-bf-modal__close,
.golonch-bf-modal .golonch-bf-modal__close:link,
.golonch-bf-modal .golonch-bf-modal__close:visited {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 1;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #333;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  transition: background-color 0.15s ease;
}
.golonch-bf-modal .golonch-bf-modal__close:hover,
.golonch-bf-modal .golonch-bf-modal__close:focus,
.golonch-bf-modal .golonch-bf-modal__close:active {
  color: #111;
  background: #ececec;
  border: 0;
  box-shadow: none;
  outline: none;
}
.golonch-bf-modal .golonch-bf-modal__close:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}
.golonch-bf-modal__body,
.golonch-bf-modal__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 640px) {
  .golonch-bf-modal {
    padding: 0;
  }
  .golonch-bf-modal__panel {
    max-width: none;
    height: 100%;
    border-radius: 0;
  }
}

/* Step containers the script creates when the page's form has none of its own
   ("synth" mode — e.g. Home Revamp, which is a single-screen form). They are
   appended inside the <form>, so they inherit its column layout; these rules
   only give them their own spacing and stop them collapsing. */
.golonch-bf-synth {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.golonch-bf-synth.golonch-bf-hide {
  display: none !important;
}

/* "Already booked?" escape hatch under the Book button. Shown only after the
   booking popup was closed without a booking we could observe. */
.golonch-bf-already-booked {
  align-self: center;
  margin: 2px auto 0;
  padding: 6px 4px;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  opacity: 0.72;
}
.golonch-bf-already-booked:hover,
.golonch-bf-already-booked:focus {
  color: #000;
  background: none;
  border-color: #000;
  opacity: 1;
  outline: none;
}

/* "Answer the questions" is a clone of the page's Submit; just place it. */
.golonch-bf-survey-open {
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * Survey popup (step 4)
 * ------------------------------------------------------------------ *
 *
 * One question per screen, option cards, progress bar. Tokens are the
 * page's own (--primary lime, --secoundry black, --border_color, DM Sans
 * headings / Open Sans body) so the popup reads as part of the site. Every
 * button state is pinned because the theme styles bare `button` site-wide.
 */
.golonch-bf-survey {
  --gbf-primary: var(--primary, #e5fe02);
  --gbf-ink: var(--secoundry, #000);
  --gbf-muted: rgba(0, 0, 0, 0.6);
  --gbf-line: var(--border_color, rgba(0, 0, 0, 0.15));
  --gbf-radius: 10px;
  --gbf-head: var(--e-global-typography-primary-font-family, "DM Sans"), sans-serif;
  --gbf-body: var(--body-text, "Open Sans"), sans-serif;
  position: fixed;
  inset: 0;
  z-index: 100001; /* above the booking modal and Elementor's sticky header */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  font-family: var(--gbf-body);
  color: var(--gbf-ink);
  animation: golonch-bf-fade 0.2s ease both;
}
.golonch-bf-survey[hidden] {
  display: none !important;
}
.golonch-bf-survey * {
  box-sizing: border-box;
}

.golonch-bf-survey__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  max-height: min(92vh, 860px);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  animation: golonch-bf-rise 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---- head: kicker, title, close, progress ------------------------- */
.golonch-bf-survey__head {
  position: relative;
  padding: 26px 64px 0 32px;
}
.golonch-bf-survey__kicker {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  font-family: var(--gbf-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gbf-ink);
  background: linear-gradient(180deg, rgba(229, 254, 2, 0.35) 0%, rgba(153, 153, 153, 0.12) 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
}
.golonch-bf-survey__title {
  font-family: var(--gbf-head);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gbf-muted);
}
.golonch-bf-survey .golonch-bf-survey__close,
.golonch-bf-survey .golonch-bf-survey__close:link,
.golonch-bf-survey .golonch-bf-survey__close:visited {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  color: #333;
  background: #f3f3f3;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.golonch-bf-survey .golonch-bf-survey__close:hover,
.golonch-bf-survey .golonch-bf-survey__close:focus,
.golonch-bf-survey .golonch-bf-survey__close:active {
  color: #000;
  background: #e6e6e6;
  border: 0;
  box-shadow: none;
  outline: none;
}
.golonch-bf-survey .golonch-bf-survey__close:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}
.golonch-bf-survey__track {
  height: 6px;
  margin: 16px 0 8px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.golonch-bf-survey__bar {
  height: 100%;
  width: 0;
  background: var(--gbf-primary);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(229, 254, 2, 0.8);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.golonch-bf-survey__step {
  min-height: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gbf-muted);
}
.golonch-bf-survey__head.is-done .golonch-bf-survey__step,
.golonch-bf-survey__head.is-done .golonch-bf-survey__kicker {
  display: none;
}

/* ---- body ----------------------------------------------------------- */
.golonch-bf-survey__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 32px 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.golonch-bf-survey__screen {
  display: flex;
  flex-direction: column;
  gap: 28px;
  animation: golonch-bf-slide 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.golonch-bf-survey__q {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.golonch-bf-survey__q.is-shaking {
  animation: golonch-bf-shake 0.35s ease;
}
.golonch-bf-survey__label {
  margin: 0;
  font-family: var(--gbf-head);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--gbf-ink);
}
.golonch-bf-survey__hint {
  margin: -4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gbf-muted);
}
.golonch-bf-survey__sublabel {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gbf-ink);
}

/* Option cards */
.golonch-bf-survey__opts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 4px;
}
.golonch-bf-survey__opts.is-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.golonch-bf-survey .golonch-bf-survey__opt,
.golonch-bf-survey .golonch-bf-survey__opt:link,
.golonch-bf-survey .golonch-bf-survey__opt:visited {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 12px 14px;
  font-family: var(--gbf-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  color: var(--gbf-ink);
  background: #fff;
  border: 1.5px solid var(--gbf-line);
  border-radius: 12px;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.golonch-bf-survey .golonch-bf-survey__opt:hover,
.golonch-bf-survey .golonch-bf-survey__opt:focus {
  color: var(--gbf-ink);
  background: #fafafa;
  border-color: rgba(0, 0, 0, 0.45);
  outline: none;
  box-shadow: none;
}
.golonch-bf-survey .golonch-bf-survey__opt:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}
.golonch-bf-survey .golonch-bf-survey__opt:active {
  transform: scale(0.99);
}
.golonch-bf-survey .golonch-bf-survey__opt.is-selected,
.golonch-bf-survey .golonch-bf-survey__opt.is-selected:hover,
.golonch-bf-survey .golonch-bf-survey__opt.is-selected:focus {
  background: rgba(229, 254, 2, 0.16);
  border-color: #000;
  box-shadow: 0 0 0 1px #000 inset;
}
.golonch-bf-survey__opt-text {
  flex: 1 1 auto;
}
.golonch-bf-survey__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: transparent;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.golonch-bf-survey__opt[role="checkbox"] .golonch-bf-survey__box {
  border-radius: 6px;
}
.golonch-bf-survey__opt.is-selected .golonch-bf-survey__box {
  color: #000;
  background: var(--gbf-primary);
  border-color: #000;
}
.golonch-bf-survey__box svg {
  width: 14px;
  height: 14px;
}

/* Text inputs: same recipe as the page's .form_field */
.golonch-bf-survey__extra {
  margin-top: 2px;
  animation: golonch-bf-slide 0.22s ease both;
}
.golonch-bf-survey .golonch-bf-survey__input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--gbf-body);
  font-size: 16px;
  line-height: 1.4;
  color: #000;
  background: #fff;
  border: 1px solid var(--gbf-line);
  border-radius: var(--gbf-radius);
  box-shadow: none;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.golonch-bf-survey textarea.golonch-bf-survey__input {
  min-height: 120px;
  resize: vertical;
}
.golonch-bf-survey .golonch-bf-survey__input:focus {
  border-color: #000;
  box-shadow: 0 0 0 3px rgba(229, 254, 2, 0.55);
}
.golonch-bf-survey .golonch-bf-survey__input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.golonch-bf-survey__error {
  font-size: 13px;
  font-weight: 500;
  color: #c62828;
}
.golonch-bf-survey__q.has-error .golonch-bf-survey__opt:not(.is-selected) {
  border-color: rgba(198, 40, 40, 0.5);
}

/* ---- foot: back / continue ----------------------------------------- */
.golonch-bf-survey__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 32px 26px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
}
.golonch-bf-survey__foot[hidden] {
  display: none !important;
}
.golonch-bf-survey .golonch-bf-survey__back,
.golonch-bf-survey .golonch-bf-survey__back:link,
.golonch-bf-survey .golonch-bf-survey__back:visited {
  margin: 0;
  padding: 10px 4px;
  font-family: var(--gbf-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--gbf-muted);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}
.golonch-bf-survey .golonch-bf-survey__back:hover,
.golonch-bf-survey .golonch-bf-survey__back:focus {
  color: #000;
  background: none;
  outline: none;
  text-decoration: underline;
}
.golonch-bf-survey__back[hidden] {
  visibility: hidden;
  display: inline-block !important; /* keep Continue on the right */
}
/* The primary action carries the theme's .primary_btn look (lime, black
   text, 10px radius, glow) — restated here because the theme scopes it under
   .elementor and this popup lives outside it. */
.golonch-bf-survey .golonch-bf-survey__next,
.golonch-bf-survey .golonch-bf-survey__next:link,
.golonch-bf-survey .golonch-bf-survey__next:visited {
  min-width: 160px;
  margin: 0;
  padding: 13px 26px;
  font-family: var(--gbf-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.2px;
  color: #000;
  background: var(--gbf-primary);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--gbf-radius);
  box-shadow: 0 0 40px 0 rgba(229, 254, 2, 0.5), 0 0 0 1px rgba(229, 254, 2, 0.12) inset;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.golonch-bf-survey .golonch-bf-survey__next:hover,
.golonch-bf-survey .golonch-bf-survey__next:focus {
  color: #000;
  background: var(--gbf-primary);
  filter: brightness(0.96);
  box-shadow: 0 0 44px 0 rgba(229, 254, 2, 0.65), 0 0 0 1px rgba(229, 254, 2, 0.12) inset;
  outline: none;
}
.golonch-bf-survey .golonch-bf-survey__next:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}
.golonch-bf-survey .golonch-bf-survey__next:active {
  transform: translateY(1px);
}
.golonch-bf-survey .golonch-bf-survey__next:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ---- done screen ---------------------------------------------------- */
.golonch-bf-survey__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 8px 34px;
  text-align: center;
  animation: golonch-bf-slide 0.26s ease both;
}
.golonch-bf-survey__done-tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 6px;
  color: #000;
  background: var(--gbf-primary);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(229, 254, 2, 0.6);
  animation: golonch-bf-pop 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.golonch-bf-survey__done-title {
  font-family: var(--gbf-head);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.golonch-bf-survey__done-text {
  max-width: 40ch;
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gbf-muted);
}

/* ---- motion ---------------------------------------------------------- */
@keyframes golonch-bf-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes golonch-bf-rise {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes golonch-bf-slide {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes golonch-bf-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .golonch-bf-survey,
  .golonch-bf-survey__panel,
  .golonch-bf-survey__screen,
  .golonch-bf-survey__extra,
  .golonch-bf-survey__done,
  .golonch-bf-survey__done-tick,
  .golonch-bf-survey__q.is-shaking {
    animation: none;
  }
}

/* ---- phones: full-height sheet ------------------------------------- */
@media (max-width: 640px) {
  .golonch-bf-survey {
    padding: 0;
    align-items: flex-end;
  }
  .golonch-bf-survey__panel {
    max-width: none;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
  }
  .golonch-bf-survey__head {
    padding: 20px 60px 0 20px;
  }
  .golonch-bf-survey .golonch-bf-survey__close {
    top: 14px;
    right: 14px;
  }
  .golonch-bf-survey__body {
    padding: 8px 20px;
  }
  .golonch-bf-survey__label {
    font-size: 21px;
  }
  .golonch-bf-survey__opts.is-cols-2 {
    grid-template-columns: 1fr;
  }
  .golonch-bf-survey__foot {
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  }
  .golonch-bf-survey .golonch-bf-survey__next {
    flex: 1 1 auto;
  }
}