/* Pricing modal experiment: dialog chrome for the /plans-new-page/ A/B test.
 * Markup: pricing-modal-experiment/modal.php. Behaviour: modal.js.
 * Global .p-multistep* rules come from the site-wide bundle (themes/bov/scss/components/_multistep.scss),
 * and the /pricing/-matching form polish (inputs, buttons, pagination spacing,
 * logo sizing) comes from the site-wide .pricing-2024-form class (scss/pages/_pricing.scss,
 * applied in modal.php) — none of that is redeclared here. Chrome and custom
 * properties follow the abc-sections team bio dialog precedent (assets/css/team.css
 * .team-section__dialog), with hardcoded fallbacks in case the abc-sections
 * design-system stylesheet isn't enqueued on this page.
 *
 * The dialog also carries abc-sections' own `.section-dialog` class (needed for
 * marketo-form.js's success-handler recognition — see modal.php). That class can
 * carry a separate, once-per-page shared base style (abc-sections' own
 * _sections-common.php, 970px max-width / 12px radius) if some other dialog on
 * the page already printed it. The `dialog.pricing-modal-experiment` compound
 * selector here outranks that plain single-class rule regardless of load order,
 * so our own sizing always wins.
 *
 * That same shared stylesheet also sets `.section-dialog:open { display: flex; }`,
 * built for ITS OWN two-pane (.dialog-image + .marketo-one-step) dialog layout.
 * We don't have those children, but our dialog still carries the class, so it
 * still applies — turning .pricing-modal-experiment__inner into a shrink-to-fit
 * flex item instead of a normal full-width block, which only becomes visible as
 * leftover empty (but still clickable, since it's the <dialog>'s own background)
 * space on steps whose content doesn't intrinsically need the full width. The
 * `:open` override below restores the plain `display: block` dialogs normally
 * get, beating `.section-dialog:open` on specificity ((0,2,1) vs (0,2,0)) without
 * needing `!important`. */

dialog.pricing-modal-experiment {
  width: min(100% - 32px, 640px);
  max-width: 640px;
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg, 16px);
  background-color: var(--color-bg, #fff);
  color: var(--color-fg, #1a1a1a);
  box-shadow: 0 8px 40px rgb(0 0 0 / 0.18);
}

dialog.pricing-modal-experiment:open {
  display: block;
}

dialog.pricing-modal-experiment::backdrop {
  background-color: rgb(17 15 20 / 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pricing-modal-experiment__inner {
  position: relative;
  max-height: calc(100dvh - 48px);
  padding: var(--spacing-2xl, 32px);
  overflow-y: auto;
}

.pricing-modal-experiment__close {
  position: absolute;
  inset-block-start: var(--spacing-md, 16px);
  inset-inline-end: var(--spacing-md, 16px);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full, 999px);
  background: transparent;
  color: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.pricing-modal-experiment__close:hover {
  background-color: var(--color-bg-muted, #f2f2f2);
}

.pricing-modal-experiment__close:focus-visible {
  outline: 2px solid var(--color-brand, #0a5cff);
  outline-offset: 2px;
}

/* Shown in place of the preloader when the form genuinely fails to load
 * (queue unavailable, script failed, or render timed out). */
.pricing-modal-experiment__error {
  margin: 0;
  color: var(--color-fg, #1a1a1a);
  font-size: var(--font-size-small, 14px);
  line-height: 1.5;
  text-align: center;
}

.pricing-modal-experiment__error a {
  color: var(--color-cta, #d33b1d);
}

/* Independent confirmation toast, decoupled from the dialog's own lifecycle so
 * it still shows up even if ChiliPiper's own widget can't open after a
 * successful submit. */
.pricing-modal-experiment-toast {
  position: fixed;
  z-index: 1000;
  inset-inline: 0;
  inset-block-end: var(--spacing-xl, 24px);
  margin-inline: auto;
  width: fit-content;
  max-width: calc(100% - 32px);
  padding: var(--spacing-md, 16px) var(--spacing-xl, 24px);
  border-radius: var(--radius-base, 8px);
  background-color: var(--color-bg, #fff);
  color: var(--color-fg, #1a1a1a);
  box-shadow: 0 8px 40px rgb(0 0 0 / 0.18);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.pricing-modal-experiment-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* .pricing-2024-form (applied to .pricing-modal-experiment__inner, see modal.php)
 * already supplies pagination spacing, input/button polish, and the logo
 * wrapper/image sizing from the site-wide bundle (scss/pages/_pricing.scss) —
 * none of that is redeclared here.
 *
 * Its ".c-multistep { box-shadow: none; }" rule is dead code (the real class in
 * the markup is ".p-multistep", not ".c-multistep"), so that one override is
 * still needed here — nothing else in the compiled bundle actually sets it. */
.pricing-modal-experiment .p-multistep {
  box-shadow: none;
}

/* Buttons use the design system's CTA token (abc-sections/assets/css/tokens.css,
 * already loaded site-wide), not a one-off hardcoded color. */
.pricing-modal-experiment button[data-dir="next"],
.pricing-modal-experiment button[type="submit"] {
  background-color: var(--color-cta, #d33b1d) !important;
}

.pricing-modal-experiment button[data-dir="next"]:hover,
.pricing-modal-experiment button[type="submit"]:hover {
  background-color: var(--color-cta-hover, #b32d13) !important;
}

.pricing-modal-experiment button[data-dir="prev"] {
  border-color: var(--color-cta, #d33b1d) !important;
  color: var(--color-cta, #d33b1d) !important;
}

.pricing-modal-experiment button[data-dir="prev"]:hover {
  background-color: var(--color-cta, #d33b1d) !important;
  color: #fff !important;
}

/* .rating-wrapper (G2/Capterra/Trustpilot row) has no site-wide bundle styling —
 * tpl-pricing.php styles it via its own template-local inline <style> block, so
 * that CSS is duplicated here, scoped under .pricing-modal-experiment so it
 * can't leak onto anything else on the page. */
.pricing-modal-experiment .rating-wrapper {
  padding: 54px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  max-width: 414px;
  margin: 0 auto;
}

.pricing-modal-experiment .rating-wrapper .rating {
  position: relative;
}

.pricing-modal-experiment .rating-wrapper .rating:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 45px;
  border-right: 1px solid #d2d1d5;
  top: 16.5px;
  right: -33px;
}

.pricing-modal-experiment .rating-wrapper .rating:last-child:after {
  opacity: 0;
}

.pricing-modal-experiment .rating-wrapper .rating > img {
  margin: 0 0 6px 0;
}

.pricing-modal-experiment .rating-wrapper .star_wrap {
  height: 16px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-modal-experiment .rating-wrapper .rating-text {
  color: #000;
  text-align: center;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

@media (max-width: 767.98px) {
  .pricing-modal-experiment .rating-wrapper {
    max-width: 280px;
    padding: 67px 0 0;
  }

  .pricing-modal-experiment .rating-wrapper .rating {
    max-width: 73.5px;
  }

  .pricing-modal-experiment .rating-wrapper .rating > img {
    margin: 0 0 5px 0;
  }

  .pricing-modal-experiment .rating-wrapper .rating:nth-child(1) {
    max-width: 68px;
  }

  .pricing-modal-experiment .rating-wrapper .rating:nth-child(2) {
    max-width: 72px;
  }

  .pricing-modal-experiment .rating-wrapper .rating:after {
    right: -16.62px;
    top: 13px;
  }

  .pricing-modal-experiment .rating-wrapper .star_wrap {
    margin-bottom: 2px;
  }

  .pricing-modal-experiment .rating-wrapper .star_wrap img {
    max-width: 64.12px;
  }

  .pricing-modal-experiment .rating-wrapper .rating-text {
    font-size: 12px;
  }
}