/* ==================================================================
   Payment — kwizzbit/payment (whole-file segment)
   Faithful slice of /HTML/payment.html. Globals (reset/body/font-face/:root)
   dropped; tokens canonical (theme.json). Full-bleed via the .kwb-segment wrapper.
   ================================================================== */

.payment-main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 80px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: 2.5rem clamp(1.25rem, 4vw, 2.25rem) 6rem;
}
@media (min-width: 1024px) {
  .payment-main {
    padding-top: calc(2.5rem + 70px);
  }
}

/* =============================================
   LEFT — HERO COPY
   Contact page: 420px left column
   ============================================= */
.payment-hero {
  width: 420px;
  flex-shrink: 0;
  padding-top: 0.25rem;
}

/* H1 — contact page spec exactly:
   Roobert Semimono 400, 4.5rem, lh 0.889, ls -0.10769em
   Does NOT scale down on tablet (unique to contact page)
   Coral full stop matches contact page accent */
.payment-hero__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  font-size: 4.5rem;
  line-height: 0.889;
  letter-spacing: -0.10769em;
  color: var(--wp--preset--color--ink);
  margin-bottom: 2rem;
  position: relative;
}
.payment-hero__title-accent {
  color: var(--wp--preset--color--coral);
}

/* Key image — zero-width anchor technique (matches
   testimonials finger + pricing handshake pattern)
   Floats above the headline, no line-height impact */
.payment-hero__key-anchor {
  display: inline-block;
  width: 0;
  height: 0;
  position: relative;
  vertical-align: baseline;
}
.payment-hero__key {
  position: absolute;
  width: 110px;
  height: auto;
  /* Shifted left ~60px to sit closer to 'your' */
  bottom: 0.1em;
  left: -135px;
  pointer-events: none;
  /* Float animation — same 4s ease-in-out spec as
     pricing handshake and testimonials finger */
  animation: key-float 4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  transform-origin: center center;
}

/* Mobile: shift key rightwards by 40px */
@media (max-width: 640px) {
  .payment-hero__key {
    left: -95px;
  }
}

@keyframes key-float {
  0%   { transform: translateY(0px) rotate(-6deg); }
  25%  { transform: translateY(-6px) rotate(-4deg); }
  50%  { transform: translateY(-10px) rotate(-6deg); }
  75%  { transform: translateY(-5px) rotate(-8deg); }
  100% { transform: translateY(0px) rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .payment-hero__key {
    animation: none;
    transform: translateY(0) rotate(-6deg);
  }
}

/* Lead — contact page: Roobert Medium 17px, lh 1.412, width 327px */
.payment-hero__lead {
  font-weight: 500;
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.412;
  color: #473531;
  max-width: 295px;
  margin-bottom: 2.5rem;
}

/* Back link — contact page: SemiBold 15px, coral on hover */
.payment-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  font-size: var(--wp--preset--font-size--nav);
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  opacity: 0.65;
  transition: opacity var(--wp--custom--motion--dur-fast) ease,
              color var(--wp--custom--motion--dur-fast) ease;
}
.payment-hero__back:hover {
  opacity: 1;
  color: var(--wp--preset--color--coral);
}
.payment-hero__back svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* =============================================
   RIGHT — PAYMENT FORM COLUMN
   ============================================= */
.payment-form-col {
  flex: 1;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* =============================================
   PAYMENT CARDS
   White panels, 0 border-radius (site convention).
   Active card uses animated conic gradient border —
   same technique as Pro card in pricing section.
   @property --border-angle: Chrome 85+, Safari 16.4+,
   Firefox 128+. Matches pricing section fallback spec.
   ============================================= */

/* Animated border angle — registered CSS property
   required for smooth conic gradient interpolation */
@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes border-spin-ccw {
  to { --border-angle: -360deg; }
}

.payment-card {
  background: var(--wp--preset--color--white);
  border-radius: 0;
}

/* Active card — animated conic gradient border.
   ::before fills the gradient, ::after masks interior white.
   2px total border width. 5s CCW. Matches Pro card spec. */
/* Both selectable cards: position + isolation always set.
   Animated gradient border appears only on .is-active.
   Static warm border shown on the inactive card.
   Opacity never changes — both cards always full opacity. */

.payment-card--details,
.payment-card--paypal {
  position: relative;
  isolation: isolate;
}

/* INACTIVE state — static 1.5px warm border */
.payment-card--details {
  border: 0.5px solid var(--wp--custom--color--form-field-border);
  outline: 1px solid transparent;
  padding: 1.375rem;
  box-shadow: var(--wp--custom--shadow--form-card);
}

/* ACTIVE state — animated conic gradient border via pseudos.
   Border stays as transparent 1.5px to hold space — prevents
   any content shift when toggling between active/inactive.
   Pseudos paint the gradient over the reserved border area. */
.payment-card--details.is-active,
.payment-card--paypal.is-active {
  border: 0.5px solid transparent;
  outline: none;
}

.payment-card--details.is-active::before,
.payment-card--paypal.is-active::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 0;
  background: conic-gradient(
    from var(--border-angle),
    #FD4631 0% 60%,
    #FFCB2B 75%,
    #FD4631 90% 100%
  );
  animation: border-spin-ccw 5s linear infinite;
  z-index: -1;
}

.payment-card--details.is-active::after,
.payment-card--paypal.is-active::after {
  content: '';
  position: absolute;
  inset: 1.5px; /* masks interior — 1.5px = border width */
  border-radius: 0;
  background: var(--wp--preset--color--white);
  z-index: -1;
}

/* PayPal — resting state */
.payment-card--paypal {
  border: 0.5px solid var(--wp--custom--color--form-field-border);
  outline: 1px solid transparent;
  padding: 1rem 1.375rem;
  cursor: pointer;
  box-shadow: var(--wp--custom--shadow--form-card);
}

/* Billing summary card — static warm border, no animation */
.payment-card--billing {
  border: 0.5px solid var(--wp--custom--color--form-field-border);
  padding: 1.5rem;
  box-shadow: var(--wp--custom--shadow--form-card);
}

/* =============================================
   PAYMENT DETAILS HEADER
   ============================================= */
.payment-details__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: 0.8125rem; /* 13px */
  color: var(--wp--preset--color--ink);
  margin-bottom: 1rem;
}
.payment-details__header svg {
  opacity: 1;
  flex-shrink: 0;
}

/* =============================================
   FORM FIELDS — contact page spec exactly
   bg: #F6EEE7, no border at rest,
   focus: inset 0 0 0 1px #D7BAAF
   border-radius: 0
   padding: 0.8125rem 0.9375rem (13px/15px)
   placeholder: #827571 (labels removed — placeholder-only pattern)
   field gap: 0.625rem (tighter — no label height above fields)
   ============================================= */
.payment-details__fields {
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* tighter — no labels above fields */
}

/* Labels removed from payment fields — placeholder-only pattern.
   Field purpose is unambiguous (card number, MM/YY, CVV).
   Country select uses sr-only label for screen reader accessibility. */

.form-field {
  position: relative;
}

/* Input — contact page spec */
.form-input {
  width: 100%;
  height: 48px;
  background: var(--wp--custom--color--form-field-bg);
  border: none;
  border-radius: 0;
  padding: 0 0.9375rem;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: 0.875rem; /* 14px — matches contact page desktop spec */
  color: var(--wp--preset--color--ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  /* Focus via inset box-shadow — contact page technique */
  box-shadow: none;
  transition: box-shadow var(--wp--custom--motion--dur-fast) ease,
              background var(--wp--custom--motion--dur-fast) ease;
}
.form-input::placeholder {
  color: var(--wp--custom--color--form-placeholder);
  font-weight: 500;
}
.form-input:focus {
  /* Contact page: inset 0 0 0 1px #D7BAAF */
  box-shadow: inset 0 0 0 1px var(--wp--custom--color--form-field-border);
  background: var(--wp--custom--color--form-field-bg);
  outline: none;
}

/* Card number — payment icons on right */
.form-field--card .form-input {
  padding-right: 7rem;
}
.form-field__card-icons {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  line-height: 0;
  /* Payment_modes.svg is 99×13px — scale to fit */
  height: 13px;
  overflow: hidden;
}
.form-field__card-icons svg {
  height: 13px;
  width: auto;
}

/* Expiry + CVV side by side */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.125rem;
}

/* CVV icon */
.form-field--security .form-input {
  padding-right: 2.75rem;
}
.form-field__cvv-icon {
  position: absolute;
  right: 0.9375rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto; /* tappable/hoverable */
  opacity: 0.38;
  line-height: 0;
  cursor: pointer;
  transition: opacity var(--wp--custom--motion--dur-fast) ease;
}
.form-field__cvv-icon:hover,
.form-field__cvv-icon.is-open {
  opacity: 0.75;
}

/* CVV tooltip — matches nav dropdown + pricing tooltip spec:
   rgba(255,255,255,0.96), backdrop-filter blur(100px), coral shadow.
   Pinpointer caret points down toward the icon. */
/* CVV tooltip — appended to body by JS so it escapes all
   stacking contexts (isolation:isolate on cards, input overflow).
   Position set via getBoundingClientRect. z-index: 9000. */
.cvv-tooltip {
  position: fixed;
  width: 178px;
  background: #FFFFFF;
  border-radius: 0;
  box-shadow: 2px 2px 0px rgba(253,106,97,0.20),
              0px 20px 50px rgba(255,54,35,0.20);
  padding: 0.625rem 0.75rem;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--wp--preset--color--ink);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms cubic-bezier(0.22,1,0.36,1),
              transform 160ms cubic-bezier(0.22,1,0.36,1);
  z-index: 9000;
  white-space: normal;
}
.cvv-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Select — contact page: same bg/border/radius/padding as input */
.form-select {
  width: 100%;
  height: 48px;
  background: var(--wp--custom--color--form-field-bg);
  border: none;
  border-radius: 0;
  padding: 0 2.5rem 0 0.9375rem;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: 0.875rem; /* 14px — matches input fields */
  color: var(--wp--preset--color--ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231D0B09' stroke-opacity='0.4' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9375rem center;
  transition: box-shadow var(--wp--custom--motion--dur-fast) ease;
}
.form-select:focus {
  box-shadow: inset 0 0 0 1px var(--wp--custom--color--form-field-border);
  outline: none;
}

/* =============================================
   PAYPAL ROW
   ============================================= */
.payment-paypal-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  cursor: pointer;
}
.payment-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--wp--custom--color--warm-border); /* --form-field-border token doesn't exist; warm-border (#D7BAAF) matches */
  background: var(--wp--preset--color--white);
  flex-shrink: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--wp--custom--motion--dur-fast) ease,
              border-width 100ms ease;
  position: relative;
}
.payment-radio:checked {
  border-color: var(--wp--preset--color--coral);
  border-width: 5px;
}
.payment-radio:focus-visible {
  outline: 2px solid var(--wp--preset--color--coral);
  outline-offset: 2px;
}

/* =============================================
   BILLING CARD — order summary + CTA
   ============================================= */
.billing-cycle__label {
  font-weight: 700;
  font-size: 0.8125rem; /* 13px */
  color: var(--wp--preset--color--ink);
  margin-bottom: 0.875rem;
}
.billing-cycle__options {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.billing-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-weight: 500;
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--ink);
  user-select: none;
}
.billing-option__save {
  color: var(--wp--preset--color--coral);
  opacity: 0.5; /* Save 25% (Annual) — de-emphasised beneath the headline saving */
  font-weight: 500;
  font-size: 0.8rem; /* ~15% smaller than the billing-option label */
  margin-left: -0.3rem;
}
/* Game-show launch saving — full-strength coral, sits next to Monthly */
.billing-option__save--deal {
  opacity: 1;
}

/* "DEAL" badge beside the plan name — shown by payment.js only for Game-show
   monthly. Matches the features-container badge: coral outline pill, body
   10px/700, sharp corners. */
.plan-summary__deal-badge {
  display: inline-block;
  margin-left: 0.45rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1; /* pin height to 18px (= logo) so showing it never grows the flex row */
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border: 1px solid rgba(255, 54, 35, 0.45);
  color: var(--wp--preset--color--coral);
  text-transform: uppercase;
  vertical-align: middle;
  border-radius: 0;
  /* Resting (off) state — pops in when JS adds .is-popped, out when removed */
  opacity: 0;
  transform: scale(0.6);
  transform-origin: left center;
  transition: opacity 0.2s ease,
              transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.plan-summary__deal-badge.is-popped {
  opacity: 1;
  transform: scale(1);
}
/* The inline-block above outranks the UA [hidden] rule, so the hidden attribute
   alone won't hide it — restore that behaviour explicitly. */
.plan-summary__deal-badge[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .plan-summary__deal-badge { transition: none; }
}
/* =============================================
   BILLING ADDRESS REVEAL
   ============================================= */
.billing-address {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.billing-address.is-visible {
  opacity: 1;
  /* max-height set via JS to scrollHeight */
}
.billing-address__label {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--nav);
  color: var(--wp--preset--color--ink);
  margin-bottom: 0.625rem;
  padding-top: 0.625rem;
}
.billing-address__inner {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.billing-divider {
  height: 1px;
  background: rgba(71,56,51,0.12);
  border: none;
  margin: 1.25rem 0;
}
.plan-summary__name {
  font-weight: 600;
  font-size: var(--wp--preset--font-size--nav);
  color: var(--wp--preset--color--coral);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.plan-logo {
  width: 88px;
  height: 18px;
  flex-shrink: 0;
  overflow: visible;
}
.plan-summary__price-line {
  font-weight: 500;
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--ink);
}
.due-today {
  margin-top: 1.125rem;
}
.due-today__label {
  font-weight: 600;
  font-size: 0.8125rem; /* 13px — matches Payment details & Billing cycle */
  color: var(--wp--preset--color--ink);
  margin-bottom: 0.375rem;
}
.due-today__amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 1.125rem;
}
/* Price — matches pricing section spec: Roobert Semimono 400, 2.375rem, ls -0.06em */
.due-today__price {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  font-size: 2.375rem;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--wp--preset--color--ink);
}
/* £ symbol — Roobert Semimono, 1.375rem, baseline-aligned (pricing spec) */
.due-today__symbol {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--wp--preset--color--ink);
  align-self: flex-end;
  margin-bottom: 0.1em;
}
.due-today__currency {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--wp--preset--color--ink);
  margin-left: 0.25rem;
  vertical-align: super;
  line-height: 1;
}

/* =============================================
   PAY BUTTON — btn--primary spec
   border-radius: 0 (site-wide convention)
   ============================================= */
.btn--pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 52px;
  background: var(--wp--preset--gradient--btn-primary);
  border: none;
  border-radius: 0;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--white);
  cursor: pointer;
  box-shadow: var(--wp--custom--shadow--cta);
  transition: background var(--wp--custom--motion--dur-fast) ease,
              transform var(--wp--custom--motion--dur-fast) ease,
              box-shadow var(--wp--custom--motion--dur-fast) ease;
  -webkit-appearance: none;
  letter-spacing: 0.01em;
}
@media (hover: hover) {
  .btn--pay:hover {
    background: var(--wp--preset--gradient--btn-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255,54,35,0.3);
  }
}
.btn--pay:active {
  background: var(--wp--preset--gradient--btn-primary-hover);
  transform: translateY(1px);
  box-shadow: 0 6px 20px rgba(255,54,35,0.3);
}
.btn--pay:focus-visible {
  outline: 2px solid var(--wp--preset--color--coral);
  outline-offset: 3px;
}
.btn--pay svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.billing-note {
  font-weight: 500;
  font-size: 0.6875rem; /* 11px — per spec */
  color: #473531;
  line-height: 1.55;
  margin-top: 1rem;
  text-align: center;
  max-width: 100%;
}

@media (max-width: 640px) {
  .billing-note {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .payment-hero__key {
    left: -95px; /* shifted right 40px from desktop -135px */
  }
}

/* =============================================
   TRUST SIGNAL
   ============================================= */
.payment-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-weight: 500;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--ink);
  opacity: 0.65;
  margin-top: 0.125rem;
}
.payment-trust svg { flex-shrink: 0; }

/* =============================================
   SCROLL REVEAL — site-wide spec
   opacity 0→1, translateY(40px→0), 0.65s
   cubic-bezier(0.22,1,0.36,1), fires once at 10%
   ============================================= */
.sr-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--wp--custom--motion--scroll-reveal-duration) cubic-bezier(0.22,1,0.36,1),
              transform var(--wp--custom--motion--scroll-reveal-duration) cubic-bezier(0.22,1,0.36,1);
}
.sr-reveal.is-visible { opacity: 1; transform: translateY(0); }
.sr-delay-1 { transition-delay: 0.1s; }
.sr-delay-2 { transition-delay: 0.2s; }
.sr-delay-3 { transition-delay: 0.3s; }
.sr-delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .sr-reveal { opacity: 1; transform: none; transition: none; }
}

/* =============================================
   RESPONSIVE — TABLET (641px–1023px)
   Two-column layout with hero on left (with floating key)
   Same headline + lead positioning as desktop
   ============================================= */
@media (max-width: 1023px) and (min-width: 641px) {
  .payment-main {
    flex-direction: column;
    align-items: center;
    padding-top: 2.5rem;
    gap: 2rem;
    max-width: 560px;
    margin: 0 auto;
  }
  .payment-hero {
    flex-shrink: 0;
    width: 100%;
    max-width: 420px;
    position: relative;
  }
  .payment-hero__lead {
    width: 100%;
    max-width: 295px;
  }
  .payment-form-col {
    width: 100%;
    max-width: 420px;
  }
}

/* =============================================
   RESPONSIVE — MOBILE (≤640px)
   Single column, key shifted right by 40px
   ============================================= */
@media (max-width: 640px) {
  .payment-main {
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;
    gap: 1.75rem;
  }
  .payment-hero {
    width: 100%;
    max-width: 560px;
  }
  .payment-hero__lead {
    width: 100%;
    max-width: 378px;
  }
  .payment-form-col {
    width: 100%;
    max-width: 560px;
  }
}

/* =============================================
   RESPONSIVE — MOBILE (≤640px)
   Contact page H1: clamp(2.1rem, 11.5vw, 2.75rem)
   Lead: 14px, width min(240px, 88vw)
   All inputs: font-size 16px (iOS zoom threshold)
   ============================================= */
@media (max-width: 640px) {
  /* .site-header min-height intentionally not overridden on mobile — no nav present */

  .payment-main {
    padding-top: calc(0.5rem + 80px);
    padding-bottom: 3.5rem;
    gap: 1.75rem;
  }
  .payment-hero__title {
    font-size: clamp(1.875rem, 10.13vw, 2.375rem);
    line-height: 0.8421;
    letter-spacing: -0.10763em;
    margin-bottom: 1.125rem;
  }
  .payment-hero__key {
    width: 72px;
  }
  .payment-hero__lead {
    font-size: 1rem;
    width: min(240px, 88vw);
    margin-bottom: 1.5rem;
  }
  .payment-card--details,
  .payment-card--paypal,
  .payment-card--billing {
    border-radius: 0; /* enforce — no rounding on mobile either */
  }
  .payment-card--details { padding: 1.125rem; }
  .payment-card--billing  { padding: 1.25rem; }

  /* iOS zoom prevention — contact page spec */
  .form-input,
  .form-select {
    font-size: 16px;
  }

  .form-row { gap: 0.75rem; }
  .btn--pay { height: 54px; }
}

/* =============================================
   UTILITY
   ============================================= */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =============================================
   BUTTON LOADING DOTS
   Three 5×5px square white bits — matches contact page spec.
   scale(0.6→1→0.6), 1.2s ease-in-out, staggered 0.2s.
   Button stays full opacity throughout.
   ============================================= */
.btn--pay__dots {
  display: none;
  align-items: center;
  gap: 4px;
}
.btn--pay__dots span {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 0;
  background: #fff;
  animation: btn-square-pulse 1.2s ease-in-out infinite;
}
.btn--pay__dots span:nth-child(2) { animation-delay: 0.2s; }
.btn--pay__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes btn-square-pulse {
  0%, 100% { transform: scale(0.6); }
  50%       { transform: scale(1);   }
}
.btn--pay.is-loading .btn--pay__label,
.btn--pay.is-loading > svg { display: none; }
.btn--pay.is-loading .btn--pay__dots { display: flex; }
/* Button stays full opacity when loading — disabled only when incomplete */
.btn--pay.is-loading { opacity: 1; pointer-events: none; }

/* Button disabled state — not applied during loading */
.btn--pay:disabled:not(.is-loading),
.btn--pay.is-disabled:not(.is-loading) {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* =============================================
   SUCCESS OVERLAY
   ============================================= */
.payment-success {
  position: fixed;
  inset: 0;
  background: var(--wp--preset--color--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 2rem;
  text-align: center;
}
.payment-success.is-visible {
  opacity: 1;
  pointer-events: all;
}
.payment-success__check {
  width: 100px;
  height: 100px;
  margin-top: 50px;
  margin-bottom: 0.75rem;
  transform: scale(0.6) translateY(10px);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
              opacity 0.4s ease 0.2s;
}
.payment-success.is-visible .payment-success__check {
  transform: scale(1) translateY(0);
  opacity: 1;
  animation: badge-float 3.5s cubic-bezier(0.65, 0, 0.35, 1) infinite 0.75s;
}
.payment-success__check img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@keyframes badge-float {
  0%   { transform: translateY(0px) rotate(-2deg); }
  25%  { transform: translateY(-7px) rotate(0deg); }
  50%  { transform: translateY(-12px) rotate(2deg); }
  75%  { transform: translateY(-6px) rotate(0deg); }
  100% { transform: translateY(0px) rotate(-2deg); }
}
.payment-success__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
  color: var(--wp--preset--color--ink);
  margin-top: -20px;
  margin-bottom: 0.875rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease 0.35s, transform 0.5s cubic-bezier(0.22,1,0.36,1) 0.35s;
}
.payment-success__title span {
  color: var(--wp--preset--color--coral);
  animation: none;
}
.payment-success.is-visible .payment-success__title span {
  animation: dot-flash 1.4s steps(1) infinite 1s;
}
@keyframes dot-flash {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.payment-success.is-visible .payment-success__title {
  opacity: 1;
  transform: translateY(0);
}
.payment-success__sub {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 500;
  color: #473531;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.5s, transform 0.5s cubic-bezier(0.22,1,0.36,1) 0.5s;
  max-width: 240px;
  line-height: 1.5;
}
.payment-success.is-visible .payment-success__sub {
  opacity: 1;
  transform: translateY(0);
}
.payment-success__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  padding: 0 1.5rem;
  height: 52px;
  background: linear-gradient(to right, #1D0B09, #3E1916);
  color: #FFFFFF;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--sm);
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: background 160ms ease, transform 160ms ease, opacity 0.5s ease 1s;
}
.payment-success.is-visible .payment-success__cta {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: hover) {
  .payment-success.is-visible .payment-success__cta:hover {
    background: linear-gradient(to right, #0D0504, #2A100E);
    transform: translateY(-2px);
  }
}
.payment-success.is-visible .payment-success__cta:active {
  background: linear-gradient(to right, #0D0504, #2A100E);
  transform: translateY(1px);
}
.payment-success__hint {
  position: absolute;
  bottom: 2rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--wp--preset--color--ink);
  opacity: 0.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* =============================================
   CONFETTI CANVAS
   ============================================= */
#confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
}