@charset "UTF-8";
/*!
 * Two-path CTA + self-audit modal.
 *
 * Pairs with template-parts/cta-two-path.php and template-parts/modal-self-audit.php.
 * Built from the Figma frames (CTA 40941:34775 desktop / 40941:34822 mobile,
 * popup group 32903:31770) with copy taken from staging.
 *
 * Values come from the design-system tokens where one exists, per migration plan
 * §7b ("new work uses var(--rs-*)"), with the Figma hex as the fallback so this
 * file still renders correctly if loaded before the token sheet.
 *
 * Field styling comes from components/_rs-form.scss — a neutral scope, so this
 * modal does not have to wear another form's class name to inherit its skin.
 */
/* The soft-lift shadow and the white panel that rides on it. Shared with
   main.scss, which this file cannot import — see config/_elevation.scss for why
   the same value also exists as --rs-shadow-big and why that is not a conflict. */
/*
 * 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;
}

/* The submit is a raw CF7 <input type="submit"> and so never carries `.btn`;
   the global button block cannot reach it. The atom mixin is how it gets the
   design system's box instead of an approximation of it. */
/*!
 * 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. */
/* ---- Section ---------------------------------------------------------------- */
.rs-cta {
  background-color: var(--rs-white-pure, #fffffe);
  padding: 60px 20px;
}

.rs-cta__inner {
  margin: 0 auto;
  max-width: 1146px; /* Figma content width; 1440 - 2x147 section padding */
}

.rs-cta__intro {
  margin-bottom: 40px;
  text-align: center;
}

.rs-cta__title {
  margin: 0 0 20px;
  color: var(--rs-black-prime, #34383c);
  font-family: Montserrat, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
}

/* The middle run of the heading is regular weight inside an otherwise bold line. */
.rs-cta__title span {
  font-weight: 400;
}

.rs-cta__lead {
  margin: 0;
  color: var(--rs-text-secondary, #5d636a);
  font-family: HindMadurai, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
}

/* ---- Photo collage + the two paths ------------------------------------------ */
/*
 * The collage is one pre-composed image per breakpoint (the diagonal seam is
 * baked in), not two clipped panels — bg_dfdf-1.webp is 2292x760, exactly the
 * Figma panel at 2x. So no clip-path is needed and the seam cannot drift out of
 * alignment with the photography.
 *
 * The URLs arrive as custom properties set inline by the PHP, because the path
 * depends on language (WPML duplicated the media) and on the uploads directory.
 */
/*
 * The 58px card overhang below is a transform, so it takes no layout space and
 * the section's padding-bottom was measured from the photo's bottom edge, not
 * the cards' — 60px of padding rendered as 2px of real gap to the footer, and
 * Home's 120px rendered as 62px. Raman, 2026-08-19: "the bottom part of the
 * double-CTA is not counted correctly … by default it should be 60px bottom
 * padding." The margin gives the overhang real height so every consumer's
 * padding-bottom means what it says. Margin, not padding: .rs-cta__paths and
 * .rs-cta__collage::after are absolute against this box, and padding would move
 * both.
 */
.rs-cta__main {
  position: relative;
  margin-bottom: 58px; /* = .rs-cta__path's translateY */
}

.rs-cta__collage {
  border-radius: 24px;
  background-image: var(--rs-cta-collage-lg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: 1146/380;
}

/*
 * Scrim. The path headings are white and sit directly on photography, so they
 * need guaranteed contrast rather than luck with whatever is behind them.
 * Matches the Figma overlay (#34383c at 35% plus a downward fade).
 */
.rs-cta__collage::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 100%;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(52, 56, 60, 0.15) 0%, rgba(52, 56, 60, 0.55) 100%), rgba(52, 56, 60, 0.2);
  pointer-events: none;
}

.rs-cta__paths {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 90px;
  padding: 0 40px;
}

/*
 * Each path is a column pinned to the bottom, so the card lands at the foot of
 * the photo and the heading floats just above it. The cards deliberately
 * overhang the image (Figma: photo 380 tall, cards ending at 438).
 */
.rs-cta__path {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  transform: translateY(58px);
}

.rs-cta__path-title {
  margin: 0 0 20px;
  color: var(--rs-white-pure, #fffffe);
  font-family: Montserrat, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

/* ---- Cards ------------------------------------------------------------------ */
.rs-cta__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  padding: 30px;
  border-radius: 24px;
  box-shadow: 0 50px 60px -30px rgba(47, 47, 47, 0.1), 0 20px 20px -10px rgba(47, 47, 47, 0.05);
}

/*
 * Decorative wave texture, bottom-anchored. Sits behind the content via a
 * pseudo-element so it can never intercept a click on the card's link.
 */
.rs-cta__card::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  /* Resolves from wp-content/themes/hello-elementor-child/css/ up to wp-content/uploads/. */
  background-image: url("../../../uploads/2024/11/waves-1-1-1-1.svg");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

.rs-cta__card > * {
  position: relative; /* lift content above the wave texture */
}

.rs-cta__card--guided {
  background-color: var(--rs-yellow-00, #ffc94b);
}

/* The waves art is drawn in teal; on the yellow card the design shows it white. */
.rs-cta__card--guided::before {
  filter: brightness(0) invert(1);
  opacity: 0.6;
}

.rs-cta__card--solo {
  background-color: var(--rs-white-pure, #fffffe);
}

.rs-cta__badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.rs-cta__badge-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 1;
  color: var(--rs-black-prime, #34383c);
}

.rs-cta__badge {
  padding: 4px 12px;
  border-radius: 8px;
  color: var(--rs-black-prime, #34383c);
  font-family: HindMadurai, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.rs-cta__card--guided .rs-cta__badge {
  background-color: rgba(255, 255, 254, 0.3);
}

.rs-cta__card--solo .rs-cta__badge {
  background-color: rgba(64, 136, 151, 0.1);
}

/*
 * The action has no button chrome in the design — it reads as a row on the
 * card's own colour. It is still a link, so it keeps a real focus ring.
 */
/*
 * Selector carries `a` deliberately. The parent theme ships
 * `.comments-area a, .page-content a { text-decoration: underline }` (0,2,0),
 * which outranks a lone class and underlines both actions. This block is a
 * shared component that can be dropped into any template, so it needs to win
 * wherever it lands rather than assume the host markup avoids .page-content.
 */
.rs-cta a.rs-cta__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 4px;
  color: var(--rs-black-prime, #34383c);
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.rs-cta a.rs-cta__action:hover,
.rs-cta a.rs-cta__action:focus-visible {
  color: var(--rs-black-prime, #34383c);
  text-decoration: none;
}

.rs-cta__action:hover i {
  transform: translateX(4px);
}

/* 20px regular, not 24px solid: the arrow is a shared atom (Figma 40941:34797,
   reused verbatim in both panels — 40941:34790 and :34805) and both panels draw
   it at 20px/400 in #34383C. Flagged by Raman on the homepage, 2026-08-11;
   fixed in the partial because every consumer of it draws the same atom. */
.rs-cta__action i {
  flex: 0 0 auto;
  font-size: 20px;
  transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .rs-cta__action i {
    transition: none;
  }
}
/* ---- Tablet ----------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .rs-cta__collage {
    background-image: var(--rs-cta-collage-md);
  }
  .rs-cta__paths {
    gap: 40px;
    padding: 0 24px;
  }
  .rs-cta__card {
    padding: 24px;
  }
  .rs-cta__action {
    font-size: 18px;
  }
}
/* ---- Mobile ----------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .rs-cta {
    padding: 40px 20px;
  }
  .rs-cta__title {
    font-size: 24px;
  }
  .rs-cta__lead {
    font-size: 16px;
  }
  /*
   * The mobile artwork stacks the two photos with a horizontal diagonal notch,
   * so the paths stack with it and each card sits at the foot of its own photo.
   */
  .rs-cta__collage {
    background-image: var(--rs-cta-collage-sm);
    aspect-ratio: 670/1248;
  }
  .rs-cta__paths {
    flex-direction: column;
    gap: 0;
    padding: 0 12px;
  }
  .rs-cta__main {
    margin-bottom: 28px; /* = the mobile translateY below */
  }
  .rs-cta__path {
    transform: translateY(28px);
  }
  .rs-cta__path-title {
    font-size: 20px;
    margin-bottom: 12px;
  }
  .rs-cta__card {
    gap: 16px;
    padding: 20px;
    border-radius: 20px;
  }
  .rs-cta__badge {
    border-radius: 6px;
    font-size: 12px;
  }
  .rs-cta__action {
    font-size: 15px;
  }
  .rs-cta__action i {
    font-size: 18px;
  }
}
/* ============================================================================
   Self-audit modal
   ==========================================================================*/
/*
 * Native <dialog>: the browser supplies focus trapping, Esc-to-close, inert
 * background and the backdrop. Only appearance is styled here.
 *
 * ⚠️ Every control below carries an ELEMENT qualifier — `button.rs-modal__close`,
 * `button.rs-selfaudit-form__submit` — and that is load-bearing, not decoration.
 * The parent theme's assets/css/reset.css ships (verbatim from the file on
 * staging, which writes the colour as the 3-digit shorthand):
 *
 *     [type=button],[type=submit],button{background-color:transparent;
 *         border:1px solid #c36;border-radius:3px;color:#c36;padding:.5rem 1rem;…}
 *     [type=button]:focus,[type=button]:hover,[type=submit]:focus,
 *     [type=submit]:hover,button:focus,button:hover{
 *         background-color:#c36;color:#fff;text-decoration:none}
 *
 * without the element qualifier all three buttons in this modal rendered as pink
 * outlined pills, and turned solid pink on hover and on focus.
 *
 * The REASON is specificity, not source order. An earlier version of this comment
 * said hello-elementor "is enqueued AFTER this one, so the tie went to the reset
 * on source order" — that is false, and worth correcting rather than deleting,
 * because it sends the next reader looking for an enqueue fix that cannot exist.
 * Measured 2026-08-21 on local and staging: reset.css is stylesheet #6 of 14 and
 * this sheet is #13, so this sheet loads LAST and still lost. Reset wins on
 * weight: it paints through `[type=button]`/`[type=submit]`, attribute selectors
 * at (0,1,0), so a lone class ties the resting rule and a lone class + pseudo
 * (0,1,1) loses outright to `[type=button]:hover` (0,2,0). The element qualifier
 * takes the resting rule to (0,1,1) and every state to (0,2,1), which wins on
 * weight whatever the load order becomes later. Same fix, same reason, as
 * `.rs-cta a.rs-cta__action` above.
 */
.rs-modal {
  max-width: 558px;
  width: calc(100% - 40px);
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
}

.rs-modal::backdrop {
  background: rgba(52, 56, 60, 0.5);
}

.rs-modal__box {
  position: relative;
  padding: 30px;
  border-radius: 4px;
  box-shadow: 0 50px 60px -30px rgba(47, 47, 47, 0.1), 0 20px 20px -10px rgba(47, 47, 47, 0.05);
  /* The box takes initial focus on open (tabindex="-1" + autofocus in
     modal-self-audit.php) so that no control is focused when the modal appears.
     It must never draw a ring of its own — it is a container, not a target.
     Shared, because the other modal has the same box and was missing this: see
     rs-modal-box-focus-reset. */
  /* --rs-white is not a token and never was; the fallback was doing all the
     work. The real one is --rs-white-pure (#FFFFFE); --rs-white-ivory is
     #F9FAF4, a different colour. */
  background-color: var(--rs-white-pure, #fffffe);
}
.rs-modal__box:focus, .rs-modal__box:focus-visible {
  outline: none;
}

/*
 * The resting box AND all five state faces now come from config/_rs-modal.scss.
 * They were authored here first — this file is where the pink-X bug was
 * originally diagnosed — and moved out when the Diagnostic modal turned out to
 * need every one of them. The values, their Figma provenance (atom/icon-close
 * 30671:24423), the reset.css specificity argument and the style.css !important
 * exception all travelled with them; read them there, not here.
 *
 * Two things changed in the move, both deliberate:
 *  - The focus faces are now declared BEFORE :hover/:active, so a
 *    keyboard-focused X that is then hovered reads as hovered. The old order in
 *    this file said it did that and did the opposite.
 *  - The reason given for the element qualifier was wrong: reset.css loads
 *    BEFORE this sheet (link #6 of 14, measured), so it never won on source
 *    order. It wins on weight, via its [type=button]/[type=submit] selectors.
 */
button.rs-modal__close {
  position: absolute;
  top: 1px;
  right: 1px;
  display: flex;
  /* `column` to match the atom's own frame, which is a single-child column.
     With one centred child it renders identically to `row`; it is here so a
     Figma diff of this node comes back clean instead of reporting a layout
     mismatch that has no visual consequence. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--rs-black-prime, #34383c);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  /* The glyph's own box is 24x24 in the atom (an 18px mark in a 24px frame) —
     the 24px WCAG 2.5.8 target the 32px button is generously clearing.
     Centred by flex rather than by line-height: pinning the box with
     `line-height: 24px` also works, but then the 18->20px hover step is a
     line-box change and the mark drifts vertically mid-transition. A fixed box
     with the glyph centred inside it grows the mark in place, which is what the
     prototype's SMART_ANIMATE does. */
  transition: var(--rs-transition-icon, color 200ms ease-out, font-size 200ms ease-out);
}
button.rs-modal__close > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  line-height: 1;
}
button.rs-modal__close:focus {
  background-color: transparent;
  color: var(--rs-black-prime, #34383c);
}
button.rs-modal__close:focus-visible {
  background-color: transparent;
  color: var(--rs-black-prime, #34383c);
  outline: 2px solid var(--rs-teal-00, #408897) !important;
  outline-offset: 2px !important;
}
button.rs-modal__close:hover {
  background-color: transparent;
  color: var(--rs-coral-00, #f35b54);
  font-size: 20px;
}
button.rs-modal__close:active {
  background-color: transparent;
  color: var(--rs-coral-dark-10, #d9514b);
  font-size: 18px;
}
button.rs-modal__close:disabled {
  background-color: transparent;
  color: var(--rs-grey-light-30, #d8e2e3);
  cursor: default;
  font-size: 18px;
}

.rs-modal__title {
  margin: 0 0 20px;
  color: var(--rs-black-prime, #34383c);
  font-family: Montserrat, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  padding-right: 32px;
}

/* ---- Form layout ------------------------------------------------------------
   The field skin comes from components/_rs-form.scss; only layout lives here.
   The four gaps below are the design's stack, read off Figma 32896:24111:
   title -> fields 20, field -> field 15, fields -> consent 30, consent -> submit 15. */
.rs-selfaudit-form__row + .rs-selfaudit-form__row {
  margin-top: 15px;
}

.rs-selfaudit-form__row--split {
  display: flex;
  gap: 10px;
}

.rs-selfaudit-form__row--split .wpcf7-form-control-wrap {
  flex: 1 1 0;
  min-width: 0;
}

.rs-selfaudit-form__consent {
  margin-top: 30px;
}

/*
 * Hidden on Oskar's instruction, 2026-08-18.
 *
 * ⚠️ COMPLIANCE: this note is the reCAPTCHA v3 attribution, and
 * components/_rs-form.scss hides the badge itself with
 * `.grecaptcha-badge { visibility: hidden !important }`. Google permits hiding the
 * badge ONLY while this text is shown, so with both hidden this modal no longer
 * meets the reCAPTCHA branding requirement. Undo by deleting the display rule
 * here, or unhide the badge for this form instead.
 *
 * Scoped to the modal deliberately — the same note renders under the book-call
 * survey, the RP survey and the quiz through the shared
 * `.rs-form__recaptcha-note` class, and those are untouched.
 */
.rs-selfaudit-form__recaptcha {
  display: none;
}

/*
 * Size-L, type=with icon — atom 30592:2286, the cut the popup frame actually
 * instantiates. Asymmetric 15/20/15/30 from the mixin: the atom runs 10px
 * tighter on the icon side than on the label side.
 *
 * A <button>, not CF7's [submit]. An <input> is a void element, so it cannot
 * hold the design's trailing check glyph, and being replaced it has no
 * ::before/::after to fake one with either. The form body writes the button
 * directly — see the note in inc/cf7/free-audit-toolkit-{en,pl}.html for what
 * was verified on CF7 6.1.6 before switching.
 *
 * `button.` is load-bearing for the same reason `input.` was: it beats
 * hello-elementor reset.css's [type="submit"] on specificity rather than order.
 */
button.rs-selfaudit-form__submit {
  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;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 15px;
  border: 0;
  background-color: var(--rs-yellow-00, #ffc94b);
  color: var(--rs-black-prime, #34383c);
  cursor: pointer;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
}

button.rs-selfaudit-form__submit i {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
}

button.rs-selfaudit-form__submit:hover,
button.rs-selfaudit-form__submit:focus-visible {
  background-color: #f7bd33;
}

/*
 * CF7's spinner, kept. It is inserted by CF7's JS after any control carrying
 * `.has-spinner` — a class trigger, not a tag one — so hand-writing the button
 * keeps it as long as the form body keeps that class. It lands as a sibling
 * <span> after the button, and CF7 ships it 24px with 0 24px margins, which
 * would otherwise add a line box under the button. Parked on the button instead
 * of hidden, so the "sending" state is still visible.
 */
.rs-selfaudit-form {
  position: relative;
}

.rs-selfaudit-form .wpcf7-spinner {
  position: absolute;
  right: 16px;
  bottom: 14px;
  margin: 0;
}

/* CF7 ships 40px of top margin on this; too loose inside a compact modal. */
#rs-selfaudit .wpcf7-response-output {
  margin: 16px 0 0;
}

/* ---- Success panel ----------------------------------------------------------
 * Figma 32903:31748 stacks this icon -> [title + subtitle] -> button on gaps of
 * 20 / 10 / 40. The panel runs on the inner 10px gap and the two outer gaps are
 * made up with margins, rather than wrapping the two text nodes in a div: the
 * copy stays three flat strings, which is what keeps it translatable through the
 * same .mo as everything else.
 */
.rs-modal__panel--success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.rs-modal__panel--success .rs-modal__title {
  margin: 10px 0 0; /* 10 panel gap + 10 = the design's 20 under the icon */
  padding-right: 0;
}

.rs-modal__success-icon {
  font-size: 20px;
  color: var(--rs-teal-00, #408897);
}

.rs-modal__success-text {
  margin: 0;
  color: var(--rs-text-secondary, #5d636a);
  font-family: HindMadurai, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

button.rs-modal__got-it {
  /* Size-L teal, type=default — atom 32901:31327. Was the box and the label size
     longhand, which left it without the atom's shadow ladder. */
  min-height: 52px;
  padding: 15px 30px;
  border-radius: 4px;
  box-shadow: 0 20px 40px -10px rgba(38, 50, 56, 0.2);
  font-size: 1rem;
  line-height: 1;
  /* Hover / press / disabled from config/_rs-modal.scss. The hover fill used to
     be a raw #367582 here — a hand-mixed near-miss of the token the design
     system actually specifies (teal-dark-10 #35717D, dE76 1.72, imperceptible
     but off-system), with no press face and no shadow rung at all. The shared
     mixin supplies all three from tokens. */
  transition: var(--rs-transition, background-color 300ms ease-in, box-shadow 300ms ease-in);
  width: 100%;
  margin-top: 30px; /* 10 panel gap + 30 = the design's 40 above the button */
  border: 0;
  background-color: var(--rs-teal-00, #408897);
  color: var(--rs-white-pure, #fffffe);
  cursor: pointer;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
}
button.rs-modal__got-it:hover, button.rs-modal__got-it:focus-visible {
  background-color: var(--rs-teal-dark-10, #35717d);
  box-shadow: var(--rs-shadow-btn-hover, 0 10px 20px -5px rgba(38, 50, 56, 0.3));
}
button.rs-modal__got-it:active {
  background-color: var(--rs-teal-dark-20, #316874);
  box-shadow: var(--rs-shadow-btn-active, 0 5px 10px -5px rgba(38, 50, 56, 0.4));
}
button.rs-modal__got-it:disabled {
  background-color: var(--rs-grey-light-30, #d8e2e3);
  box-shadow: none;
  color: var(--rs-disabled-ink, #a0babd);
  cursor: default;
}

.rs-modal__setup-warning {
  margin: 0;
  color: #b3261e;
  font-family: HindMadurai, sans-serif;
  font-size: 14px;
}

/* ---- Mobile -----------------------------------------------------------------
   The 335 cut of the same stack (Figma 32896:24154 / 32903:31749): box padding
   20, title -> fields 16, field -> field 8, fields -> consent 16,
   consent -> submit 12, and 32 above the success button. */
@media (max-width: 767.98px) {
  .rs-modal__box {
    padding: 20px;
  }
  .rs-modal__title {
    margin-bottom: 16px;
    font-size: 18px;
  }
  /* The mobile atom sits 4px in from a 335 box — centre at 16, so a 32px button
     lands flush in the corner. */
  button.rs-modal__close {
    top: 0;
    right: 0;
  }
  .rs-selfaudit-form__consent {
    margin-top: 16px;
  }
  .rs-selfaudit-form__row + .rs-selfaudit-form__row {
    margin-top: 8px;
  }
  button.rs-selfaudit-form__submit {
    /* 44px at 14px/1 with 15/20 padding — atom 30650:1662. */
    min-height: 44px;
    padding: 15px 20px;
    font-size: 0.875rem;
    margin-top: 12px;
  }
  /* The glyph drops with the label, same step the arrow atoms take. */
  button.rs-selfaudit-form__submit i {
    font-size: 14px;
  }
  button.rs-modal__got-it {
    min-height: 44px;
    padding: 15px 20px;
    font-size: 0.875rem;
    margin-top: 22px; /* 10 panel gap + 22 = the design's 32 */
  }
}