/* ==== wave9-calc-form-polish.css ==== */
/* ============================================================
   RAYDN - Wave 9 Calculator + Form Polish (styles)
   Restrained, premium. Navy #0b1828 / amber #F5A524.
   ============================================================ */

/* ---------- #1 Count-up ---------- */
.rdn-countup {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  will-change: contents;
}
.rdn-cu--running {
  /* keep width from jittering while digits change */
  letter-spacing: -0.01em;
}
@keyframes rdnCuPop {
  0%   { transform: translateZ(0) scale(1); }
  40%  { transform: translateZ(0) scale(1.045); }
  100% { transform: translateZ(0) scale(1); }
}
.rdn-cu--pop {
  animation: rdnCuPop 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .rdn-cu--pop { animation: none; }
}

/* ---------- #2 Progressive form ---------- */
.rdn-pf__hidden {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.34s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.42s ease;
  transition-delay: calc(var(--rdn-pf-i, 0) * 55ms);
}
.rdn-pf--open .rdn-lead__field {
  max-height: 120px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.rdn-pf__hint {
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
  margin: 6px 2px 10px;
  transition: opacity 0.2s ease;
}
.rdn-pf__hint--fade { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .rdn-pf__hidden {
    transition: none;
    max-height: 120px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}
/* Light-theme variant */
[data-theme="light"] .rdn-pf__hint { color: rgba(13, 27, 46, 0.6); }

/* ---------- #3 Inline validation ---------- */
.rdn-lead__field { position: relative; }
/* subtle check / cross glyph pinned to the field's right edge */
.rdn-fv--ok .rdn-lead__input,
.rdn-fv--err .rdn-lead__input {
  padding-right: 2.2rem;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.rdn-fv--ok .rdn-lead__input {
  border-color: rgba(52, 211, 153, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.12);
}
.rdn-fv--err .rdn-lead__input {
  border-color: rgba(248, 149, 108, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 82, 0.1);
}
.rdn-fv--ok .rdn-lead__field::after,
.rdn-fv--err .rdn-lead__field::after {
  position: absolute;
  top: 50%;
  right: 0.8rem;
  transform: translateY(-50%);
  font-size: 0.95rem;
  line-height: 1;
  pointer-events: none;
  animation: rdnFvGlyph 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
/* if field has a following .rdn-fv__msg, the glyph should sit
   against the input, not the whole wrapper: nudge up */
.rdn-fv--ok .rdn-lead__field:has(.rdn-fv__msg)::after,
.rdn-fv--err .rdn-lead__field:has(.rdn-fv__msg)::after {
  top: 1.35rem;
  transform: none;
}
.rdn-fv--ok .rdn-lead__field::after {
  content: "\2713";              /* check */
  color: #34d399;
}
.rdn-fv--err .rdn-lead__field::after {
  content: "!";
  font-weight: 700;
  color: #f5936c;
}
@keyframes rdnFvGlyph {
  from { opacity: 0; transform: translateY(-50%) scale(0.6); }
  to   { opacity: 1; }
}
.rdn-fv__msg {
  font-size: 0.74rem;
  line-height: 1.35;
  color: #f5936c;
  margin: 5px 2px 0;
  min-height: 0;
  animation: rdnFvMsg 0.24s ease;
}
@keyframes rdnFvMsg {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rdn-fv--ok .rdn-lead__field::after,
  .rdn-fv--err .rdn-lead__field::after,
  .rdn-fv__msg { animation: none; }
}

/* ---------- #10 Submit button choreography ---------- */
.rdn-sb {
  position: relative;
  overflow: hidden;
  transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.3s ease, filter 0.3s ease;
}
.rdn-sb--pressed { transform: scale(0.972); }
.rdn-sb__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.rdn-sb__spin,
.rdn-sb__check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.rdn-sb__spin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}
.rdn-sb__check { color: #fff; display: inline-flex; }
.rdn-sb__check svg path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}

/* loading state */
.rdn-sb--loading { cursor: progress; }
.rdn-sb--loading .rdn-sb__label {
  opacity: 0;
  transform: scale(0.9);
}
.rdn-sb--loading .rdn-sb__spin {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: rdnSbSpin 0.7s linear infinite;
}
@keyframes rdnSbSpin { to { transform: translate(-50%, -50%) scale(1) rotate(360deg); } }

/* success state */
.rdn-sb--success {
  background-color: #1e9e63 !important;
  background-image: none !important;
}
.rdn-sb--success .rdn-sb__label {
  opacity: 1;
  transform: translateX(14px);
}
.rdn-sb--success .rdn-sb__spin { opacity: 0; }
.rdn-sb--success .rdn-sb__check {
  opacity: 1;
  transform: translate(calc(-50% - 46px), -50%) scale(1);
}
.rdn-sb--success .rdn-sb__check svg path {
  animation: rdnSbCheck 0.4s ease forwards 0.08s;
}
@keyframes rdnSbCheck { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rdn-sb, .rdn-sb__label, .rdn-sb__spin, .rdn-sb__check { transition: none; }
  .rdn-sb--loading .rdn-sb__spin { animation-duration: 1.2s; }
  .rdn-sb--success .rdn-sb__check svg path { animation: none; stroke-dashoffset: 0; }
}

/* ==== wave9b-calc-tactile.css ==== */
/* ============================================================
   RAYDN - Wave 9b Calculator Tactile Polish (styles)
   Navy #0b1828 / amber #F5A524. Restrained, premium.
   ============================================================ */

/* ---------- #5 Slider tactile feedback ---------- */
.rdn-slider-tactile { cursor: grab; }
.rdn-slider--active { cursor: grabbing; }

/* thumb lift + glow during active drag (WebKit) */
.rdn-slider-tactile::-webkit-slider-thumb {
  transition: transform 0.14s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.18s ease;
}
.rdn-slider--active::-webkit-slider-thumb {
  transform: scale(1.18);
  box-shadow: 0 4px 14px rgba(245, 165, 36, 0.5),
              0 0 0 6px rgba(245, 165, 36, 0.15);
}
/* Firefox */
.rdn-slider-tactile::-moz-range-thumb {
  transition: transform 0.14s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.18s ease;
}
.rdn-slider--active::-moz-range-thumb {
  transform: scale(1.18);
  box-shadow: 0 4px 14px rgba(245, 165, 36, 0.5),
              0 0 0 6px rgba(245, 165, 36, 0.15);
}

/* bill chip tap pulse */
@keyframes rdnChipTap {
  0%   { transform: scale(1); }
  38%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.rdn-chip--tap { animation: rdnChipTap 0.26s cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
  .rdn-slider--active::-webkit-slider-thumb,
  .rdn-slider--active::-moz-range-thumb { transform: none; }
  .rdn-chip--tap { animation: none; }
}

/* ---------- #4 Desktop bar live number ---------- */
.rdn-bar-num {
  color: #F5A524;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ---------- #4 Mobile sticky savings pill ---------- */
.rdn-pill {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 300;
  display: none;                 /* shown on mobile only, see MQ */
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem 0.55rem 0.95rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13, 24, 40, 0.96) 0%, rgba(9, 16, 28, 0.98) 100%);
  border: 1px solid rgba(245, 165, 36, 0.4);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
  will-change: transform, opacity;
}
.rdn-pill--in { transform: translateY(0); opacity: 1; }

.rdn-pill__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.1;
}
.rdn-pill__eyebrow {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2px;
}
.rdn-pill__num {
  font-size: 1.12rem;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.rdn-pill__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1rem;
  border-radius: 11px;
  background: #F5A524;
  color: #0b1828;
  font-weight: 800;
  font-size: 0.86rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(245, 165, 36, 0.35);
  transition: transform 0.12s ease, filter 0.2s ease;
}
.rdn-pill__cta:active { transform: scale(0.96); filter: brightness(0.96); }
.rdn-pill__call {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.12s ease;
}
.rdn-pill__call:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.14); }

/* Show the pill only on mobile widths (desktop uses the existing bar) */
@media (max-width: 720px) {
  .rdn-pill { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .rdn-pill { transition: opacity 0.2s ease; transform: none; }
  .rdn-pill:not(.rdn-pill--in) { opacity: 0; pointer-events: none; }
}

/* ==== wave9c-calc-chart-trust.css ==== */
/* ============================================================
   RAYDN - Wave 9c Calculator Chart + Trust Polish (styles)
   Additive only. No layout shift; transforms/opacity only.
   ============================================================ */

/* ---------- #6a  Payband draw-on ---------- */
/* Collapsed initial state: fill has zero width, marker sits at
   the center origin. On --in it sweeps out and the marker glides
   to its engine-set position. */
.rdn-band-anim .rdn-payband__fill {
  transform-origin: center;
  transform: scaleX(0);
  transition: transform .82s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.rdn-band-anim.rdn-band-anim--in .rdn-payband__fill {
  transform: scaleX(1);
}
.rdn-band-anim .rdn-payband__marker {
  opacity: 0;
  transition: opacity .4s ease .55s,
              box-shadow .4s ease;
}
.rdn-band-anim.rdn-band-anim--in .rdn-payband__marker {
  opacity: 1;
}
/* a single soft pulse on the marker as it lands */
.rdn-band-anim.rdn-band-anim--in .rdn-payband__marker {
  animation: rdnMarkerLand 1.1s ease .55s 1;
}
@keyframes rdnMarkerLand {
  0%   { box-shadow: 0 2px 6px rgba(245,165,36,.5), 0 0 0 0 rgba(245,165,36,.55); }
  55%  { box-shadow: 0 2px 6px rgba(245,165,36,.5), 0 0 0 7px rgba(245,165,36,0); }
  100% { box-shadow: 0 2px 6px rgba(245,165,36,.5), 0 0 0 0 rgba(245,165,36,0); }
}
/* end labels fade in slightly after the fill */
.rdn-band-anim .rdn-payband__row {
  opacity: 0;
  transition: opacity .5s ease .35s;
}
.rdn-band-anim.rdn-band-anim--in .rdn-payband__row {
  opacity: 1;
}

/* ---------- #6b  Payback number emphasis ring ---------- */
.rdn-payback-emph {
  position: relative;
}
.rdn-payback-emph::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(245,165,36,.45);
  animation: rdnPaybackRing 1.4s cubic-bezier(.22,.61,.36,1) 1;
}
@keyframes rdnPaybackRing {
  0%   { box-shadow: 0 0 0 0 rgba(245,165,36,.45); }
  70%  { box-shadow: 0 0 0 14px rgba(245,165,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,165,36,0); }
}

/* ---------- #8  Trust-chip micro-reveal ---------- */
.rdn-trust-anim .rdn-trust-chip {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .5s cubic-bezier(.22,.61,.36,1),
              transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--rdn-trust-i, 0) * 90ms);
  will-change: opacity, transform;
}
.rdn-trust-anim.rdn-trust-anim--in .rdn-trust-chip {
  opacity: 1;
  transform: translateY(0);
}

/* live "booking" indicator */
.rdn-trust-live {
  display: inline-flex;
  align-items: center;
  gap: .4em;
}
.rdn-trust-live__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #1e9e63;
  box-shadow: 0 0 0 0 rgba(30,158,99,.55);
  animation: rdnLivePulse 2.4s ease-in-out infinite;
  flex: 0 0 auto;
}
.rdn-trust-live__txt {
  font-weight: 600;
  color: rgba(30,158,99,.95);
}
@keyframes rdnLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,158,99,.55); }
  50%      { box-shadow: 0 0 0 5px rgba(30,158,99,0); }
}

/* ---------- reduced motion: show everything, no animation ---------- */
@media (prefers-reduced-motion: reduce) {
  .rdn-band-anim .rdn-payband__fill { transform: scaleX(1) !important; transition: none !important; }
  .rdn-band-anim .rdn-payband__marker { opacity: 1 !important; animation: none !important; transition: none !important; }
  .rdn-band-anim .rdn-payband__row { opacity: 1 !important; transition: none !important; }
  .rdn-payback-emph::after { animation: none !important; content: none !important; }
  .rdn-trust-anim .rdn-trust-chip { opacity: 1 !important; transform: none !important; transition: none !important; }
  .rdn-trust-live__dot { animation: none !important; }
}