@charset "UTF-8";
/* ==========================================================================
   Book Call Survey — 3-step CF7 survey page (template-book-call-survey.php)
   Figma node 39582-31263. Self-contained: the template runs a clean-room
   strip, so this file carries fonts, base, header/footer and survey styles.
   Selectors target BOTH the hand-written wrappers (inc/cf7/…-form-en.html)
   and the markup CF7 generates around its tags (.wpcf7-radio, .wpcf7-list-item,
   .wpcf7-acceptance, .wpcf7-not-valid-tip, .wpcf7-response-output).
   ========================================================================== */
/* Field skin (text/email inputs, textarea, acceptance checkbox, validation tip,
   reCAPTCHA badge/note) comes from components/_rs-form.scss. The CF7 body for
   both forms (post 84320 EN / 84330 PL) wraps its fields in <div class="rs-form">
   so this partial's `.rs-form` scope applies. Layout, panels, radios, buttons
   and error states stay below — those are this page's own. */
/*!
 * The design system's button atom — atom/btns, Figma component set 30592:2267.
 *
 * WHY THIS FILE EXISTS
 * The same button box was written out longhand in eight places: four faces on the
 * Reliability Protocol LP, both survey submits, and the two hero faces. Every copy
 * was a place to drift, and it did drift — `.protocol-survey__next` ended up with
 * `min-height: 56px` and a second, higher-specificity `button.protocol-survey__next`
 * rule 400 lines away correcting it back to 48. Reviews kept surfacing button
 * findings page by page for exactly this reason.
 *
 * WHAT BELONGS HERE
 * Only the atom's BOX — the numbers that are identical across every colour.
 * Fill, border colour and label colour deliberately stay with the caller, because
 * that is the only axis the atom actually varies (yellow / teal / black / white),
 * and Bootstrap's own .btn-* variants already carry those for the global buttons.
 *
 * WHAT IS NOT HERE
 * The shadow ladder's hover and click steps, the disabled face and the radius
 * custom property live on the global `.btn` block in main.scss, which every button
 * in the theme already gets. Repeating them here would give two owners to one rule.
 *
 * Imported by main.scss and by the standalone page stylesheets that need it — the
 * pages/ entry points do not include main.scss, so a shared partial is the only way
 * they can share a definition.
 */
/* State shadows. The ladder tightens and strengthens as the button is pressed:
     default   0 20px 40px -10px rgba(38,50,56,.2)
     hover     0 10px 20px  -5px rgba(38,50,56,.3)
     click     0  5px 10px  -5px rgba(38,50,56,.4)
   Figma's ON_HOVER motion is 200ms ease-out, not Bootstrap's 150ms ease-in-out. */
/*
 * rs-form — the shared Contact Form 7 field skin.
 *
 * Neutral scope for RS form fields, so a form does not have to wear another
 * form's name to inherit its styling. Values are the ones book-call-survey
 * established and the Figma popup spec independently matches: 1px #B2C9CB,
 * radius 4, #FFFFFE, 48px tall, Hind Madurai 14px.
 *
 * Imported by the page stylesheets that need it (only one loads per page, so the
 * duplication across compiled files costs nothing over the wire). Layout —
 * rows, columns, submit placement — stays with the page; this is only the skin.
 *
 * pages/book-call-survey.scss imports this too. Its CF7 bodies (post 84320 EN /
 * 84330 PL) wrap their fields in <div class="rs-form">, added alongside the
 * existing .book-call-survey scope rather than replacing it — panels, radios
 * and buttons there are still scoped to .book-call-survey and stay page-local.
 */
/* ---- Text inputs ------------------------------------------------------------ */
.rs-form input[type=text],
.rs-form input[type=email],
.rs-form input[type=tel],
.rs-form textarea {
  width: 100%;
  padding: 15px 20px;
  border: 1px solid #B2C9CB;
  border-radius: 4px;
  background-color: #fffffe;
  color: #5d636a;
  /* No space: config/fonts.scss now declares the face under both spellings,
     but the unspaced one is the canonical self-hosted name. */
  font-family: HindMadurai, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
}

.rs-form input[type=text],
.rs-form input[type=email],
.rs-form input[type=tel] {
  height: 48px;
}

.rs-form textarea {
  height: 111px;
  min-height: 111px;
  resize: vertical;
}

/* Grow downward with the content instead of scrolling inside the fixed box.
   111px is ~3.5 lines at this line-height, while the Diagnostic form's blocker
   field asks for "2-3 things that can't wait" — overflow was near-guaranteed.
   The @supports wrapper is load-bearing, not politeness: an explicit `height`
   beats field-sizing where it works, and dropping `height` unconditionally
   would let a non-supporting browser fall back to CF7's rows="10" (~10 lines).
   So unsupported engines keep exactly the old box. max-height keeps a long
   answer from pushing the submit button off screen; the controls' own
   maxlength (2000 on that field) already caps the realistic worst case.
   Baseline newly available 2026-06-16, Firefox 152 last in. */
@supports (field-sizing: content) {
  .rs-form textarea {
    field-sizing: content;
    height: auto;
    max-height: 50vh;
  }
}
.rs-form input::placeholder,
.rs-form textarea::placeholder {
  color: #5d636a;
  opacity: 1;
}

/* Active state = the amber border, per Figma `molecula/form` (component set
 * 30589:1977, variant state=active). This was #69B9C9 plus a translucent teal
 * ring — a two-part focus treatment the design system does not have; the ladder
 * is border-colour only, and its six values now live in config/_survey-atoms.scss
 * rather than being spelled out here as well.
 *
 * Only active is corrected here. The other states are NOT added at component
 * level on purpose: pages/book-call-survey.scss already implements the full
 * ladder scoped to .book-call-survey, and a second copy here would be two
 * places to keep in step. See the note in that file. */
.rs-form input:focus,
.rs-form textarea:focus {
  border-color: #FFC94B;
  outline: none;
}

/* CF7 wraps every control in an inline <span>. */
.rs-form .wpcf7-form-control-wrap {
  display: block;
}

/* ---- Consent checkbox (CF7 [acceptance]) ------------------------------------ */
.rs-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.rs-form .wpcf7-acceptance .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5d636a;
  cursor: pointer;
  font-family: HindMadurai, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
}

.rs-form .wpcf7-acceptance input[type=checkbox] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: #408897;
  cursor: pointer;
}

.rs-form .wpcf7-acceptance a {
  color: #408897;
  text-decoration: none;
}

.rs-form .wpcf7-acceptance a:hover,
.rs-form .wpcf7-acceptance a:focus-visible {
  text-decoration: underline;
}

/* ---- Validation ------------------------------------------------------------- */
.rs-form .wpcf7-not-valid-tip {
  margin-top: 4px;
  color: #f35b54;
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* ---- reCAPTCHA: hidden badge + required attribution note -------------------- */
/* Google permits hiding the v3 badge only when the attribution text is shown. */
.grecaptcha-badge {
  visibility: hidden !important;
}

.rs-form__recaptcha-note {
  margin: 0;
  color: #84a1a4;
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Colour highlighting, not an underline — the house rule (Raman, 2026-08-13).
   css/rs-cf7-base.css says the same thing for every link inside a CF7 form; this
   rule has to say it too, because its own two classes outrank that sheet's
   `.wpcf7-form a`. */
.rs-form__recaptcha-note a {
  color: #84a1a4;
  text-decoration: none;
}

.rs-form__recaptcha-note a:hover,
.rs-form__recaptcha-note a:focus-visible {
  text-decoration: underline;
}

/* ---- Scoped base (site chrome comes from the theme) ------------------- */
/* Sticky footer: survey steps can be shorter than the viewport, which left
   the footer floating mid-screen. Flex column on the template's body makes
   <main> absorb the leftover height and pins the footer to the bottom. */
body.page-template-template-book-call-survey {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

body.page-template-template-book-call-survey .book-call-survey {
  flex: 1 0 auto;
}

.book-call-survey {
  background-color: #FFFFFE;
  color: #5D636A;
  font-family: "Hind Madurai", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* ---- Survey layout -------------------------------------------------------- */
.book-call-survey__section {
  padding: 60px 16px;
  background-color: #FFFFFE;
}

.book-call-survey__main {
  max-width: 754px;
  margin: 0 auto;
}

.book-call-survey__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.book-call-survey__step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid #D8E2E3;
  border-radius: 50%;
  color: #D8E2E3;
  font-family: "Montserrat", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

.book-call-survey__step--active {
  border-color: #F35B54;
  background-color: #F35B54;
  color: #FFFFFE;
}

/* The step-5 calendar icon (Asana 1216395055806728) was removed in the 2026-08
   rebuild: the last step is now decided by the qualification agent and is only
   sometimes the calendar, so promising one up front would be misleading. The
   final indicator is an ordinary numbered step (--outcome) and needs no rules
   of its own. Its styles are deleted rather than left dangling; the calendar
   glyph belongs on the 4.A page now. */
/* The connector is a grey track with a red bar that GROWS across it, rather
   than a bar that swaps colour instantly. Figma draws the step-1 connector
   part-filled (14px of 30px, 39582-31435), i.e. progress mid-travel — so the
   fill is the point, not decoration.

   Done with a ::after overlay because `width` animates and `background-color`
   does not convey direction. The mixin stays untouched: it is shared with
   .protocol-survey in main.scss, which has not asked for this. */
.book-call-survey__divider {
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background-color: #D8E2E3;
  position: relative;
  overflow: hidden;
}

.book-call-survey__divider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: inherit;
  background-color: #F35B54;
  transition: width 450ms ease;
}

.book-call-survey__divider--active::after {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .book-call-survey__divider::after {
    transition: none;
  }
}
/* 3 steps + 2 connectors still fit a 375px viewport with room to spare, but
   keep the tightening — it costs nothing and holds if a step is ever added. */
@media (max-width: 480px) {
  .book-call-survey__steps {
    gap: 8px;
  }
  .book-call-survey__divider {
    width: 20px;
  }
}
/* Doubled class beats the Elementor kit's `.elementor-kit-8 h1 { font-size: 32px }`
   so the title renders at the designed 24px. */
.book-call-survey .book-call-survey__title {
  margin: 0 0 32px;
  color: #34383C;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.book-call-survey__card {
  padding: 40px;
  border-radius: 4px;
  background-color: #F9F9F9;
}

.book-call-survey__card-inner {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.book-call-survey__supervisor {
  position: sticky;
  top: 20px;
  display: flex;
  flex: 0 0 214px;
  flex-direction: column;
  gap: 16px;
  width: 214px;
}

.book-call-survey__ava img {
  display: block;
  width: 214px;
  height: 278px;
  border-radius: 4px;
  object-fit: cover;
}

.book-call-survey__supervisor-name {
  text-align: center;
}

.book-call-survey__supervisor-fullname {
  margin: 0;
  color: #34383C;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.book-call-survey__supervisor-tags {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  color: #5D636A;
  font-size: 0.875rem;
  line-height: 1.5;
}

.book-call-survey__supervisor-tags p {
  margin: 0;
}

.book-call-survey__form {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- Step panels (inside the CF7 form body) ------------------------------- */
.book-call-survey__panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.book-call-survey__field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.book-call-survey__label {
  margin: 0;
  color: #5D636A;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
}

/* ---- Radio option rows (CF7 [radio] markup) ------------------------------- */
.book-call-survey .wpcf7-radio {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.book-call-survey .wpcf7-list-item {
  display: block;
  margin: 0;
}

.book-call-survey .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 40px;
  margin: 0;
  padding: 8px 16px 8px 8px;
  border: 1px solid #69B9C9;
  border-radius: 4px;
  background-color: #FFFFFE;
  color: #5D636A;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Custom-drawn radio (appearance:none): native rendering ignores everything
   but accent-color and looks off-design on Windows. Figma atoms/radio-icons:
   14px FA "circle" outline (unchecked) / "circle-dot" (checked), #69B9C9.
   The checked inner dot is the teal background showing through a white
   inset ring — no pseudo-elements (unreliable on <input>). */
.book-call-survey .wpcf7-list-item input[type=radio] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin: 0 5px;
  border: 1px solid #69B9C9;
  border-radius: 50%;
  background-color: #FFFFFE;
  cursor: pointer;
}

.book-call-survey .wpcf7-list-item input[type=radio]:checked {
  background-color: #69B9C9;
  box-shadow: inset 0 0 0 3px #FFFFFE;
}

/* No focus styling on radios per designer's request: kill the UA focus ring
   (outline:auto follows the OS accent color on Windows) and beat the theme's
   global `form input:focus { border-color: #FFC94B !important }` (style.css)
   that turned the radio ring yellow while focused. */
.book-call-survey .wpcf7-list-item input[type=radio]:focus {
  outline: none;
  border-color: #69B9C9 !important;
}

/* ---- Buttons ---------------------------------------------------------------- */
.book-call-survey__next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 15px 20px 15px 30px;
  border-radius: 4px;
  box-shadow: 0 20px 40px -10px rgba(38, 50, 56, 0.2);
  font-size: 1rem;
  line-height: 1;
  width: 100%;
  border: 0;
  background-color: #408897;
  color: #FFFFFE;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.book-call-survey__next i,
.book-call-survey__next svg {
  flex: 0 0 auto;
  font-size: 1.125rem;
  line-height: 1;
}

.book-call-survey__next:hover,
.book-call-survey__next:focus-visible {
  background-color: #35717D;
}

.book-call-survey__next:disabled {
  opacity: 0.75;
  pointer-events: none;
}

/* Submit in flight (js adds .bcs-sending + swaps the label): spinner in place
   of the arrow icon so the user sees progress instead of rage-clicking. */
.book-call-survey__next.bcs-sending::after {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 254, 0.35);
  border-top-color: #FFFFFE;
  border-radius: 50%;
  animation: bcs-spin 0.7s linear infinite;
}

@keyframes bcs-spin {
  to {
    transform: rotate(360deg);
  }
}
/* CF7 shows its own spinner next to the submit control */
.book-call-survey .wpcf7-spinner {
  margin: 8px auto 0;
}

/* ---- Error state (DS input states, Figma 30589-1977): coral border +
   warning icon inside the field + coral message below. Applies to both the
   inline JS validation (.bcs-invalid) and CF7 server-side validation
   (.wpcf7-not-valid). ------------------------------------------------------- */
.book-call-survey input.bcs-invalid,
.book-call-survey textarea.bcs-invalid,
.book-call-survey input.wpcf7-not-valid,
.book-call-survey textarea.wpcf7-not-valid {
  border-color: #F35B54;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23F35B54'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
  padding-right: 44px;
}

.book-call-survey textarea.bcs-invalid,
.book-call-survey textarea.wpcf7-not-valid {
  background-position: right 16px top 14px;
}

.book-call-survey input.bcs-invalid:focus,
.book-call-survey textarea.bcs-invalid:focus,
.book-call-survey input.wpcf7-not-valid:focus,
.book-call-survey textarea.wpcf7-not-valid:focus {
  border-color: #F35B54;
  outline: 2px solid rgba(243, 91, 84, 0.2);
}

.book-call-survey .bcs-error-msg {
  display: block;
  margin-top: 4px;
  color: #F35B54;
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* ---- reCAPTCHA: hidden badge + required attribution note ------------------- */
/* Google permits hiding the v3 badge only when the attribution text is shown.
   .grecaptcha-badge itself is hidden via components/_rs-form.scss (unscoped,
   so declaring it twice would be a no-op duplicate, not a second rule). */
/* ⚠️ Hidden on request (Oskar, 2026-08-17). READ THIS BEFORE COPYING THE PATTERN:
   components/_rs-form.scss hides `.grecaptcha-badge` site-wide, and its comment
   states the reason — "Google permits hiding the v3 badge only when the
   attribution text is shown". This note WAS that attribution. With it hidden,
   this page shows neither the badge nor the notice, which is outside Google's
   reCAPTCHA branding requirement.

   The one-line remedy, if we want to be compliant again, is to let the badge
   render on this template instead:
       body.page-template-template-book-call-survey .grecaptcha-badge {
           visibility: visible !important;
       }
   Left as a deliberate, flagged decision rather than silently reintroducing a
   floating widget nobody asked for. */
.book-call-survey__recaptcha-note {
  display: none;
}

/* Sits under the final submit button and sets the expectation that something
   happens between submitting and landing somewhere (the analysis screen).
   Figma `actions` 39582-31756: centred, #5D636A, 16px under the button. The
   panel gap is 24px and only this pair wants 16, so -8px pulls it up — the
   alternative is wrapping button and note together in the CF7 body, which is
   `_form` postmeta and therefore a paste per form per environment. Harmless
   when the note is hidden off the live flow or removed by an empty ACF value:
   neither case is a flex item, so neither sees the margin. */
.book-call-survey__submit-note {
  margin: -8px 0 0;
  color: #5D636A;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
}

/* ---- Analysis screen (step 3.1) -------------------------------------------
   Injected by js/book-call-survey.js on wpcf7mailsent and torn down by the
   redirect. It covers the form for ~6s while the qualification agent decides
   between the calendar page and the toolkit page — the wait is real work, not
   decoration, which is why it gets a full screen rather than a spinner.
   Five lines fade in one at a time, ~1.2s each.
   Visual design is Roman's (Figma 42198-36747); this is the functional floor. */
.book-call-survey__analysis {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: #F9F9F9;
  opacity: 0;
  transition: opacity 240ms ease;
}

.book-call-survey__analysis.is-visible {
  opacity: 1;
}

.book-call-survey__analysis-line {
  max-width: 640px;
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease;
}

.book-call-survey__analysis-line.is-in {
  opacity: 1;
  transform: none;
}

@media (max-width: 767px) {
  .book-call-survey__analysis-line {
    font-size: 1.125rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .book-call-survey__analysis,
  .book-call-survey__analysis-line {
    transition: none;
  }
  .book-call-survey__analysis-line {
    transform: none;
  }
}
/* Colour highlighting, not an underline — the house rule (Raman, 2026-08-13).
   Restated here for the same reason components/_rs-form.scss restates it: this
   selector ties with css/rs-cf7-base.css's `.wpcf7-form a` on specificity, and
   this sheet loads later, so it would win with the old value. */
.book-call-survey__recaptcha-note a {
  color: #84A1A4;
  text-decoration: none;
}

.book-call-survey__recaptcha-note a:hover,
.book-call-survey__recaptcha-note a:focus-visible {
  text-decoration: underline;
}

/* ---- CF7 validation / response output ---------------------------------------
   Figma: error 42380-12804, success 42387-12895. One panel, two tokens swapped
   — tinted fill and no border, 4px radius, 12/20 padding, a 14px icon 10px
   before the text, 30px of air above.

   The icon is a real Font Awesome glyph at weight 400 (regular), which is what
   both frames specify. Worth recording why a `content:` glyph is safe here even
   though the kit is a subset kit: subsetting strips FA's PER-ICON CSS RULES, so
   `.fa-triangle-exclamation::before` resolves to `content: none` for an icon
   that is not in the page markup — but the Pro FONT FILES are loaded whole
   (verified in the browser: weights 400 and 900 both `loaded`, and \f071 / \f00c
   render as glyphs, not tofu). We are not relying on FA's rules, only on the
   family being present, so writing the codepoint ourselves works. That also
   keeps us off a hand-copied SVG path, which is the thing most likely to be
   silently wrong.

   The selector carries `form.wpcf7-form` deliberately: CF7 ships
   `.wpcf7 form .wpcf7-response-output { margin: 2em .5em 1em; padding: .2em 1em }`
   at (0,2,1), which outranks a plain `.book-call-survey .wpcf7-response-output`
   (0,2,0). Without the extra class the panel keeps CF7's 28px margin and
   2.8px/14px padding, and only the border obeys because it has !important.

   .wpcf7-not-valid-tip styling comes from components/_rs-form.scss. */
.book-call-survey form.wpcf7-form .wpcf7-response-output {
  position: relative;
  margin: 30px 0 0;
  /* left = 20 padding + 14 icon + 10 gap */
  padding: 12px 20px 12px 44px;
  border: 0 !important;
  border-radius: 4px;
  background-color: #FFF4F3;
  color: #34383C;
  font-size: 0.875rem;
  line-height: 1.5;
}

.book-call-survey form.wpcf7-form .wpcf7-response-output::before {
  content: "\f071"; /* triangle-exclamation */
  position: absolute;
  top: 50%;
  left: 20px;
  width: 14px;
  color: #F35B54;
  font-family: "Font Awesome 7 Pro", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400; /* regular, per Figma — not solid */
  line-height: 1;
  text-align: center;
  transform: translateY(-50%);
}

/* Success — same panel, teal fill and a check (Figma 42387-12895). */
.book-call-survey form.wpcf7-form.sent .wpcf7-response-output {
  background-color: #F0F8F9;
}

.book-call-survey form.wpcf7-form.sent .wpcf7-response-output::before {
  content: "\f00c"; /* check */
  color: #408897;
}

.book-call-survey__config-warning {
  margin: 0;
  padding: 16px;
  border: 1px dashed #F35B54;
  border-radius: 4px;
  color: #34383C;
  font-size: 0.875rem;
}

/* ---- Responsive --------------------------------------------------------------- */
@media (min-width: 0) and (max-width: 767px) {
  .book-call-survey__section {
    padding: 40px 16px;
  }
  .book-call-survey__steps {
    gap: 8px;
  }
  .book-call-survey__divider {
    width: 20px;
  }
  .book-call-survey .book-call-survey__title {
    margin-bottom: 24px;
    font-size: 1.25rem;
  }
  .book-call-survey__card {
    padding: 24px 16px;
  }
  .book-call-survey__card-inner {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  .book-call-survey__supervisor {
    position: static;
    flex-basis: auto;
    align-items: center;
    width: 100%;
  }
  .book-call-survey__form {
    width: 100%;
  }
}
/* ---- Design-system states (added 2026-08-05) --------------------------------
   Brings this form in line with the same Figma components the Reliability
   Protocol survey was aligned to: molecula/radio-item (30590:2618),
   molecula/form type=text-input + type=text-area (30589:1977) and
   atom/btns (39009:33798).

   Layout is deliberately untouched — the radio rows stay fit-content pills,
   the textarea stays 111px, the button geometry was already on-design. Only
   the missing states are added.
   --------------------------------------------------------------------------- */
/* ---- Radio rows: hover / active / disabled --------------------------------- */
/* The bullet moves from the input to the label so the checked state can use the
   design's Solid check-circle. Pseudo-elements are unreliable on <input>, but
   the label is a normal element, so this is safe. The native control stays in
   the DOM and rendered (opacity 0) rather than display:none — these radios are
   not `required`, but keeping them rendered means any future validation can
   still focus and anchor to them. */
.book-call-survey .wpcf7-radio .wpcf7-list-item label {
  position: relative;
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
}

.book-call-survey .wpcf7-radio .wpcf7-list-item input[type=radio] {
  position: absolute;
  top: 12px;
  left: 8px;
  opacity: 0;
}

.book-call-survey .wpcf7-radio .wpcf7-list-item label::before {
  content: "\f111";
  flex: 0 0 24px;
  color: #69B9C9;
  font-family: "Font Awesome 7 Pro";
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  transition: color 0.2s ease-out;
}

@media (hover: hover) {
  .book-call-survey .wpcf7-radio .wpcf7-list-item label:hover {
    border-color: #4B9EB0;
    background-color: #F0F8F9;
  }
}
.book-call-survey .wpcf7-radio .wpcf7-list-item label:has(input[type=radio]:checked) {
  border-color: #408897;
  background-color: #408897;
  color: #FFFFFE;
}

/* Weight 900 = the SOLID check-circle. The .protocol-survey copy of this same
   Figma component leaves the base weight 400 and renders the REGULAR one — the
   two surveys disagree, and reconciling them is a visible change rather than a
   refactor, so the divergence is passed in here explicitly. */
.book-call-survey .wpcf7-radio .wpcf7-list-item label:has(input[type=radio]:checked)::before {
  content: "\f058";
  color: #FFFFFE;
  font-weight: 900;
}

.book-call-survey .wpcf7-radio .wpcf7-list-item label:has(input[type=radio]:disabled) {
  border-color: #D8E2E3;
  background-color: #F9F9F9;
  color: #B2C9CB;
  cursor: not-allowed;
}

.book-call-survey .wpcf7-radio .wpcf7-list-item label:has(input[type=radio]:disabled)::before {
  color: #D8E2E3;
}

/* Keyboard-only ring. The earlier "no focus styling on radios" note was about
   the UA ring appearing on mouse clicks and turning yellow via the global
   `form input:focus` rule; :focus-visible keeps it off the mouse path while
   leaving keyboard users a visible target. */
.book-call-survey .wpcf7-radio .wpcf7-list-item label:has(input[type=radio]:focus-visible) {
  outline: 2px solid #4B9EB0;
  outline-offset: 2px;
}

/* ---- Text inputs / textarea: hover / filled / error / disabled -------------- */
.book-call-survey input[type=text],
.book-call-survey input[type=email],
.book-call-survey textarea {
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

@media (hover: hover) {
  .book-call-survey input[type=text]:hover:not(.bcs-invalid):not(.wpcf7-not-valid),
  .book-call-survey input[type=email]:hover:not(.bcs-invalid):not(.wpcf7-not-valid),
  .book-call-survey textarea:hover:not(.bcs-invalid):not(.wpcf7-not-valid) {
    border-color: #678689;
  }
}
/* state = filled — has a value, not focused, and not flagged invalid by CF7 */
.book-call-survey input[type=text]:not(:placeholder-shown):not(:focus):not(.bcs-invalid):not(.wpcf7-not-valid),
.book-call-survey input[type=email]:not(:placeholder-shown):not(:focus):not(.bcs-invalid):not(.wpcf7-not-valid),
.book-call-survey textarea:not(:placeholder-shown):not(:focus):not(.bcs-invalid):not(.wpcf7-not-valid) {
  border-color: #546E70;
}

/* Error state is already handled above (coral border + warning icon + message,
   both .bcs-invalid and .wpcf7-not-valid). The hover / filled / focus rules
   here exclude those classes so a flagged field stays coral. */
/* state = active — the design's focus signal is the amber border. style.css
   sets that globally with !important, so matching it here needs !important
   too; declared locally so the intent survives if that global rule changes.
   The translucent ring is dropped — the design has no second focus indicator. */
.book-call-survey input[type=text]:focus:not(.bcs-invalid):not(.wpcf7-not-valid),
.book-call-survey input[type=email]:focus:not(.bcs-invalid):not(.wpcf7-not-valid),
.book-call-survey textarea:focus:not(.bcs-invalid):not(.wpcf7-not-valid) {
  border-color: #FFC94B !important;
  outline: none;
}

.book-call-survey input[type=text]:disabled,
.book-call-survey input[type=email]:disabled,
.book-call-survey textarea:disabled {
  border-color: #D8E2E3;
  background-color: #F9F9F9;
  color: #B2C9CB;
}

/* ---- Button: hover shadow + arrow slide ------------------------------------- */
.book-call-survey__next {
  transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.book-call-survey__next i,
.book-call-survey__next svg {
  transition: transform 0.2s ease-out;
}

/* atom/btns state=hover (32943:30371): the shadow tightens and strengthens,
   and the arrow slides 6px right. */
.book-call-survey__next:hover,
.book-call-survey__next:focus-visible {
  box-shadow: 0 10px 20px -5px rgba(38, 50, 56, 0.3);
}

@media (hover: hover) {
  .book-call-survey__next:hover i,
  .book-call-survey__next:hover svg,
  .book-call-survey__next:focus-visible i,
  .book-call-survey__next:focus-visible svg {
    transform: translateX(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .book-call-survey .wpcf7-radio .wpcf7-list-item label,
  .book-call-survey .wpcf7-radio .wpcf7-list-item label::before,
  .book-call-survey input[type=text],
  .book-call-survey input[type=email],
  .book-call-survey textarea,
  .book-call-survey__next,
  .book-call-survey__next i,
  .book-call-survey__next svg {
    transition: none;
  }
  .book-call-survey__next:hover i,
  .book-call-survey__next:hover svg {
    transform: none;
  }
}
/* The file's coral :focus error rule above is not !important, so the global
   `form input:focus { border-color:#FFC94B !important }` in style.css was
   overriding it — a flagged field showed an amber border with a coral ring.
   Restate it so the authored intent actually applies. */
.book-call-survey input.bcs-invalid:focus,
.book-call-survey input.wpcf7-not-valid:focus,
.book-call-survey textarea.bcs-invalid:focus,
.book-call-survey textarea.wpcf7-not-valid:focus {
  border-color: #F35B54 !important;
}

/* Radio pills are width:fit-content, so in any environment where the available
   width resolves narrower than the label's max-content (larger default font,
   text scaling, a narrower column) the text breaks onto a second line and the
   row grows to ~68px. Keep each pill on one line — the widest is 230px (EN)
   / 223px (PL) inside a column that is never below ~300px, so this cannot
   overflow at any supported width. */
.book-call-survey .wpcf7-radio .wpcf7-list-item label {
  white-space: nowrap;
}