/**
 * PaymentPutty rule demo - self-contained styles.
 *
 * Depends on these CSS variables being defined on the host page:
 *   --pink, --purple, --grad, --grad-diag, --dark,
 *   --gray-bg, --gray-light, --gray-border, --gray-text, --white
 *
 * Every index.html and vertical page already declares these, so the demo
 * inherits the host page's brand tokens automatically.
 */

.rule-demo {
  width: 100%;
  max-width: 1000px;
  margin: 2.5rem auto 0;
  position: relative;
  min-height: 600px;
}

.rd-glow {
  position: absolute;
  inset: -40px -40px -40px -40px;
  background: var(--grad-diag);
  border-radius: 36px;
  filter: blur(120px);
  opacity: .07;
  z-index: 0;
  pointer-events: none;
}

.rd-title-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .45rem;
  margin-bottom: 1.5rem;
  min-height: 45px;
}

.rd-title-eyebrow {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
}

.rd-title-row {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.rd-title-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(136, 32, 247, .3), rgba(225, 29, 117, .3));
}

.rd-title-line.right {
  background: linear-gradient(90deg, rgba(225, 29, 117, .3), rgba(136, 32, 247, .3), transparent);
}

.rd-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--dark);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}

.rd-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 1.75rem;
  align-items: start;
}

/* Vertical orientation: stack the step chips above the checkout card. */
.rule-demo.is-vertical .rd-layout {
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Vertical orientation: step chips fan out horizontally above the checkout
   (3 equal columns with horizontal connectors between them). */
.rule-demo.is-vertical .rd-steps {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  align-items: center;
  gap: .4rem;
}

.rule-demo.is-vertical .rd-step {
  padding: .8rem .9rem;
  height: 90px;
}

.rule-demo.is-vertical .rd-step-value {
  font-size: .85rem;
}

.rule-demo.is-vertical .rd-connector {
  width: 100%;
  height: 2px;
  margin: 0;
}

.rule-demo.is-vertical .rd-connector::after {
  transform: scaleX(0);
  transform-origin: left center;
}

.rule-demo.is-vertical .rd-connector.is-filled::after {
  transform: scaleX(1);
}

/* Vertical step chip stack */
.rd-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.rd-step {
  background: #fff;
  border: 1.5px solid var(--gray-border);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  box-shadow: 0 2px 10px rgba(37, 39, 46, .05);
  transition: border-color .4s, box-shadow .4s, background .4s;
  min-width: 0;
}

.rd-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gray-light);
  color: var(--gray-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: background .4s, color .4s;
}

.rd-step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.rd-step-label {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-text);
  line-height: 1;
  transition: color .4s;
}

.rd-step-value {
  font-size: .95rem;
  font-weight: 700;
  color: var(--gray-text);
  line-height: 1.3;
  transition: color .4s;
}

/* Left-to-right wipe reveal for step values. The gradient mask's hard edge
   moves from left to right, revealing the text character by character. GSAP
   tweens the --rd-reveal custom property to drive the wipe. */
.rd-step-value.is-revealing {
  --rd-reveal: 0%;
  -webkit-mask-image: linear-gradient(90deg,
    #000 0%,
    #000 var(--rd-reveal),
    rgba(0, 0, 0, .15) calc(var(--rd-reveal) + 8%),
    rgba(0, 0, 0, 0) calc(var(--rd-reveal) + 18%),
    rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(90deg,
    #000 0%,
    #000 var(--rd-reveal),
    rgba(0, 0, 0, .15) calc(var(--rd-reveal) + 8%),
    rgba(0, 0, 0, 0) calc(var(--rd-reveal) + 18%),
    rgba(0, 0, 0, 0) 100%);
}

@property --rd-reveal {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.rd-step-value.is-empty::before {
  content: "—";
  opacity: .4;
}

.rd-step.is-active {
  border-color: rgba(136, 32, 247, .5);
  background: #fff;
  box-shadow: 0 4px 14px rgba(136, 32, 247, .1);
}

.rd-step.is-active .rd-step-num {
  background: rgba(136, 32, 247, .12);
  color: var(--purple);
}

.rd-step.is-active .rd-step-label {
  color: var(--purple);
}

.rd-step.is-active .rd-step-value {
  color: var(--dark);
}

.rd-step.is-done {
  border-color: var(--gray-border);
  background: #fff;
}

.rd-step.is-done .rd-step-num {
  background: rgba(136, 32, 247, .12);
  color: var(--purple);
}

.rd-step.is-done .rd-step-label {
  color: var(--gray-text);
}

.rd-step.is-done .rd-step-value {
  color: var(--dark);
}

.rd-connector {
  width: 2px;
  height: 22px;
  background: var(--gray-border);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  margin: 0 auto 0 calc(1.1rem + 16px - 1px);
}

.rd-connector::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--purple);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform .45s ease;
}

.rd-connector.is-filled::after {
  transform: scaleY(1);
}

/* Checkout card */
.rd-checkout {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(136, 32, 247, .2), 0 4px 12px rgba(37, 39, 46, .06);
  padding: 1.25rem 1.4rem 1.4rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.25rem;
}

.rd-checkout-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--gray-border);
}

.rd-logo {
  font-size: .95rem;
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.3px;
}

.rd-lock {
  font-size: .68rem;
  font-weight: 600;
  color: var(--gray-text);
  display: flex;
  align-items: center;
  gap: .35rem;
}

.rd-checkout-main {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  /* Reserve space for the worst-case variant (section with expanded drop
     content) so the checkout card never changes height between animations.
     The only visual motion should be the highlight and drop-in itself. */
  min-height: 320px;
}

.rd-section {
  border-bottom: 1px solid var(--gray-border);
  padding: .15rem 0 .7rem;
  position: relative;
  border-radius: 4px;
}

/* Highlight is rendered as a pseudo-element overlay so the section's layout
   never shifts when it appears. The overlay extends slightly outside the
   section (via negative insets) to mimic the original "expanded" look, and
   fades in smoothly via opacity only — no reflow. */
.rd-section::after {
  content: "";
  position: absolute;
  inset: -.4rem -.6rem;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(225, 29, 117, .05), rgba(136, 32, 247, .05));
  box-shadow: 0 0 0 1.5px var(--pink), 0 8px 20px rgba(225, 29, 117, .14);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
  z-index: 0;
}

/* Keep real content above the highlight overlay. */
.rd-section > * {
  position: relative;
  z-index: 1;
}

/* The summary uses its own highlight rule below; suppress the default overlay
   there so the two don't stack. */
.rd-summary.rd-section::after {
  display: none;
}

.rd-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.rd-section-label {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: .4rem;
}

.rd-skel-line {
  height: 9px;
  background: var(--gray-light);
  border-radius: 100px;
  margin-bottom: .4rem;
}

.rd-skel-line:last-of-type {
  margin-bottom: 0;
}

.rd-skel-line.w100 { width: 100%; }
.rd-skel-line.w85 { width: 85%; }
.rd-skel-line.w70 { width: 70%; }
.rd-skel-line.w65 { width: 65%; }
.rd-skel-line.w60 { width: 60%; }
.rd-skel-line.w55 { width: 55%; }
.rd-skel-line.w50 { width: 50%; }

.rd-section.is-target::after {
  opacity: 1;
}

/* When the order summary is the target, highlight the whole summary card
   without shifting padding/margins around (it's already a padded card).
   Padding must exactly match the base .rd-summary rule above so adding
   the highlight class causes zero layout change. */
.rd-summary.rd-section.is-target {
  background: linear-gradient(180deg, rgba(225, 29, 117, .05), rgba(136, 32, 247, .05));
  box-shadow: 0 0 0 1.5px var(--pink), 0 10px 24px rgba(225, 29, 117, .16);
  padding: 1rem 1.1rem 1.5rem;
  margin: 0;
}

/* Drop-in rule content */
.rd-rule-drop {
  margin-top: .5rem;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.rd-rule-msg {
  background: linear-gradient(90deg, rgba(225, 29, 117, .1), rgba(136, 32, 247, .1));
  border-left: 3px solid var(--pink);
  border-radius: 4px;
  padding: .7rem .8rem;
  font-size: .8rem;
  color: var(--dark);
  line-height: 1.5;
  font-weight: 500;
}

.rd-rule-ack {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: rgba(225, 29, 117, .04);
  border: 1.5px dashed var(--pink);
  border-radius: 6px;
  padding: .7rem .8rem;
}

.rd-rule-ack-box {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: var(--grad);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .55rem;
}

.rd-rule-ack-text {
  font-size: .8rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.4;
}

.rd-rule-field {
  background: #fff;
  border: 1.5px solid var(--purple);
  border-radius: 6px;
  padding: .6rem .75rem;
  box-shadow: 0 4px 12px rgba(136, 32, 247, .12);
}

.rd-rule-field-label {
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: .3rem;
}

.rd-rule-field-input {
  font-size: .75rem;
  color: var(--gray-text);
  font-style: italic;
}

/* Summary sidebar */
.rd-summary {
  background: var(--gray-bg);
  border-radius: 12px;
  /* Matches the bottom breathing room seen in the highlighted state. */
  padding: 1rem 1.1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-self: start;
  /* Lock the summary to its "highlighted-state" natural height so it never
     changes size whether the fee row is visible or not. */
  min-height: 300px;
}

.rd-summary-label {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-text);
  margin-bottom: .3rem;
}

.rd-summary-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .15rem 0;
}

.rd-summary-thumb {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  background: var(--gray-light);
  flex-shrink: 0;
}

.rd-summary-amt {
  font-size: .75rem;
  font-weight: 700;
  color: var(--dark);
  flex-shrink: 0;
}

.rd-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--dark);
}

.rd-summary-row span:last-child {
  font-weight: 700;
}

.rd-summary-row.muted span {
  color: var(--gray-text);
  font-weight: 500;
}

.rd-summary-divider {
  height: 1px;
  background: var(--gray-border);
  margin: .15rem 0;
}

.rd-summary-fee {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  padding: .45rem .55rem;
  border-radius: 5px;
  /* Background is transparent when hidden; tints pink when .is-visible.
     The element always reserves its layout space so the summary's height
     is identical whether a fee is applied or not. */
  background: rgba(225, 29, 117, 0);
  color: var(--pink);
  font-weight: 800;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .4s ease, transform .4s ease, background .4s ease;
}

.rd-summary-fee.is-visible {
  opacity: 1;
  background: rgba(225, 29, 117, .08);
  transform: translateY(0);
}

.rd-summary-total {
  display: flex;
  justify-content: space-between;
  font-size: .95rem;
  font-weight: 800;
  color: var(--dark);
  padding-top: .3rem;
}

.rd-summary-total .rd-amt {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: transform .35s ease;
  display: inline-block;
}

.rd-summary-total .rd-amt.is-pulse {
  transform: scale(1.08);
}

/* Carousel indicators */
.rd-dots {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.75rem;
}

.rd-dot {
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: rgba(37, 39, 46, .18);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width .4s ease, background .3s ease, opacity .3s ease;
  font: inherit;
}

.rd-dot:hover {
  background: rgba(37, 39, 46, .35);
}

.rd-dot.is-active {
  width: 28px;
  background: var(--grad);
}

.rd-dot.is-active:hover {
  opacity: .9;
}

/* Industry chips */
.rd-industries {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem .5rem;
  margin: 1.75rem auto 0;
  max-width: 760px;
}

.rd-industry {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  border: 1px solid var(--gray-border);
  border-radius: 100px;
  padding: .35rem .7rem .35rem .55rem;
  font-size: .68rem;
  font-weight: 600;
  color: var(--gray-text);
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(37, 39, 46, .04);
}

.rd-industry i {
  color: var(--purple);
  font-size: .72rem;
}

/* ── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 960px) {
  .rule-demo {
    min-height: 0;
  }

  .rd-title-wrap {
    margin-bottom: 1.25rem;
    min-height: 48px;
    gap: .3rem;
  }

  .rd-title-row {
    gap: .6rem;
  }

  .rd-title {
    font-size: 1rem;
  }

  .rd-title-eyebrow {
    font-size: .54rem;
  }

  .rd-industries {
    margin-top: 1.25rem;
    gap: .3rem .4rem;
  }

  .rd-industry {
    font-size: .62rem;
    padding: .3rem .6rem .3rem .5rem;
  }

  .rd-layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .rd-checkout {
    grid-template-columns: 1fr;
    padding: 1rem 1.1rem 1.1rem;
    gap: 1rem;
  }

  .rd-checkout-main {
    /* Smaller reservation on mobile since fonts and gaps shrink. */
    min-height: 280px;
  }

  .rd-logo {
    font-size: .85rem;
  }

  .rd-section-label {
    font-size: .6rem;
  }

  .rd-skel-line {
    height: 8px;
  }

  .rd-summary {
    padding: .7rem .85rem;
    gap: .3rem;
  }

  .rd-summary-label {
    font-size: .58rem;
    margin-bottom: .15rem;
  }

  .rd-summary-row,
  .rd-summary-item .rd-summary-amt,
  .rd-summary-fee {
    font-size: .68rem;
  }

  .rd-summary-item {
    gap: .45rem;
    padding: .05rem 0;
  }

  .rd-summary-thumb {
    width: 22px;
    height: 22px;
  }

  .rd-summary-fee {
    padding: .35rem .45rem;
  }

  .rd-summary-divider {
    margin: .1rem 0;
  }

  .rd-summary-total {
    font-size: .8rem;
    padding-top: .15rem;
  }

  .rd-rule-msg,
  .rd-rule-ack-text {
    font-size: .72rem;
  }

  .rd-step {
    padding: .85rem 1rem;
  }

  .rd-step-num {
    width: 28px;
    height: 28px;
    font-size: .85rem;
  }

  .rd-step-value {
    font-size: .85rem;
  }

  .rd-connector {
    margin-left: calc(1rem + 14px - 1px);
  }
}