/* ==========================================================================
   Floating CTA Box (global, blog pages only)
   Loaded conditionally from inc/floating-cta.php, alongside floating-cta.js.
   ========================================================================== */
.floating-cta {
  position: fixed;
  top: 50%;
  right: 16px;
  transform: translateY(-50%) translateX(24px);
  z-index: 9999;
  width: 332px;
  max-width: calc(100vw - 48px);
  padding: 24px 24px 24px;
  background: var(--off-white);
  color: var(--grey-900);
  text-align: center;
  border-radius: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  box-shadow: 0px 0px 25px 0px #00000021;
  border: 1px solid #0000001A;
}


.floating-cta > * {
  max-width: 629px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.floating-cta.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.floating-cta.is-dismissed {
  display: none !important;
}

.floating-cta__close {
  position: absolute;
  top: 26px;
  right: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  padding-bottom: 3px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 0;
  cursor: pointer;
  opacity: 0.7;
}

.floating-cta__close:hover {
  opacity: 1;
}

.floating-cta__title {
  font-family: 'Roobert', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 120%;
  max-width: calc(100% - 48px);
  margin: 0 auto 4px auto;
}

.floating-cta__subtitle {
  font-family: 'Akkurat LL', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0.5px;
  max-width: calc(100% - 40px);
  margin: 0 auto 16px auto;
}

/* Opt-in form */
.floating-cta__error {
  margin: 0 0 16px;
  font-family: 'Akkurat LL', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: 0.5px;
  color: var(--red-600) !important;
}

.floating-cta__error span {
  text-decoration: underline;
}

.floating-cta__subtitle + .floating-cta__form > .floating-cta__error {
  margin-top: -14px;
}

/* Scoped through .floating-cta to override the theme's input[type=email]
   rules (border + 2px radius + padding), which outrank a single class. */
.floating-cta .floating-cta__input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 15px 12px;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  background: var(--white);
  color: var(--grey-900);
  text-align: left;
  font-family: 'Akkurat LL', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0.5px;
}

.floating-cta .floating-cta__input:focus {
  outline: 0;
  box-shadow: none;
}

/* Placeholder same colour as typed text (not the browser/theme grey). */
.floating-cta .floating-cta__input::placeholder {
  color: var(--grey-900);
  opacity: 1;
}

/* Collapse the Turnstile container's reserved space. The token lives in the
   hidden cf-turnstile-response input, not the box, so hiding the box is safe.
   With the real Invisible-mode sitekey the widget renders nothing anyway; this
   only tidies the visible test-key placeholder. Verified in the e2e test. */
.floating-cta .cf-turnstile {
  height: 0;
  min-height: 0;
  overflow: hidden;
}

/* The submit uses the theme's primary .button class for type, size, radius,
   height and hover. Only the form-specific bits are overridden here: full
   width, and the requested brand red (.button computes #f2305a). Scoped
   through .floating-cta so the hover colour wins over .button:hover. */
.floating-cta .floating-cta__submit {
  width: 100%;
  border: 0;
  cursor: pointer;
  position: relative;
}

/* Loading state while the submit is in flight: hide the label (kept in the
   DOM, just made transparent) and spin a ring over it via ::after, so no
   extra markup is needed for the indicator. */
.floating-cta .floating-cta__submit.is-loading {
  color: transparent;
  cursor: default;
}

.floating-cta .floating-cta__submit.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fcta-spin 0.7s linear infinite;
}

@keyframes fcta-spin {
  to {
    transform: rotate(360deg);
  }
}

.floating-cta .floating-cta__submit,
.floating-cta .floating-cta__submit:hover,
.floating-cta .floating-cta__submit:focus {
  background-color: var(--red-600);
}

.floating-cta__success {
  margin: 0;
  font-family: 'Akkurat LL', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0.5px;
}

.floating-cta__disclaimer {
  margin: 16px 0 0;
  font-family: 'Akkurat LL', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 140%;
  letter-spacing: 0.5px;
  color: var(--grey-600);
}

/* The WYSIWYG wraps the copy in a <p>, and the theme colors post paragraphs
   with body.single-post p (specificity 0,1,2), which beats a single-class
   selector. Scope through .floating-cta to win and set the color explicitly. */
.floating-cta .floating-cta__disclaimer p {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: var(--grey-600);
}

.floating-cta .floating-cta__disclaimer a {
  color: var(--grey-600);
  text-decoration: underline;
}

/* Below 1300px: full-bleed bottom sheet spanning the viewport width. Only
   above 1300px is there enough margin for the anchored side card (below,
   the anchored card would sit over article content, per client feedback). */
@media (max-width: 1300px) {
  .floating-cta {
    left: 0;
    right: auto;
    top: auto;
    bottom: 0;
    max-width: none;
    border-radius: 0;
    transform: translateY(100px) !important;
    width: 100%;
  }

  .floating-cta.is-visible {
    transform: translateY(0) !important;
  }
}