/*
 * Solidus × Razorpay demo theme -- "Midnight Ledger".
 * Dark, glass-forward checkout: translucent cards float over a slow
 * drifting aurora, with monospace figures for anything money/order
 * related. The torn-edge receipt card is the one signature element,
 * reused identically across payment, confirm and the order-complete
 * page so the flow reads as one continuous artifact rather than three
 * different screens.
 *

 */

/* ---------------------------------------------------------------- */
/* Tokens                                                            */
/* ---------------------------------------------------------------- */

:root {
  --bg: #07070c;
  --glass: rgba(255, 255, 255, 0.055);
  --glass-soft: rgba(255, 255, 255, 0.035);
  --ink: #f3f2f7;
  --ink-soft: #a4a2b3;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.2);
  --indigo: #8d7bff;
  --indigo-deep: #6a58e0;
  --indigo-wash: rgba(141, 123, 255, 0.18);
  --indigo-glow: rgba(141, 123, 255, 0.5);
  --mint: #3fe6ab;
  --mint-wash: rgba(63, 230, 171, 0.16);
  --mint-glow: rgba(63, 230, 171, 0.45);
  --red: #ff7a7a;
  --red-wash: rgba(255, 122, 122, 0.14);

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------- */
/* Reset & base                                                       */
/* ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}

p { margin: 0; }

a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

:focus-visible {
  outline: 2.5px solid var(--indigo);
  outline-offset: 2px;
  border-radius: 4px;
}

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; width: 100%; }

.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;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- */
/* Aurora backdrop                                                    */
/* ---------------------------------------------------------------- */

.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--bg);
}

.aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.aurora__blob--1 {
  width: 58vw;
  height: 58vw;
  top: -22%;
  left: -12%;
  background: radial-gradient(circle, var(--indigo) 0%, transparent 70%);
  opacity: 0.5;
  animation: drift-a 24s ease-in-out infinite;
}
.aurora__blob--2 {
  width: 52vw;
  height: 52vw;
  bottom: -24%;
  right: -12%;
  background: radial-gradient(circle, var(--mint) 0%, transparent 70%);
  opacity: 0.32;
  animation: drift-b 28s ease-in-out infinite;
}
.aurora__blob--3 {
  width: 38vw;
  height: 38vw;
  top: 28%;
  right: 12%;
  background: radial-gradient(circle, #ff6bd8 0%, transparent 72%);
  opacity: 0.16;
  animation: drift-a 32s ease-in-out infinite reverse;
}

.aurora__grain {
  position: absolute;
  inset: -10%;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(/%23n)'/></svg>");
}

@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6%, 8%) scale(1.12); }
}
@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6%, -8%) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora__blob { animation: none; }
}

/* ---------------------------------------------------------------- */
/* Shell / topbar / footer                                           */
/* ---------------------------------------------------------------- */

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(20px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.topbar__brand:hover { text-decoration: none; }

.topbar__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--indigo), var(--indigo-deep));
  color: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 6px 16px -6px var(--indigo-glow);
}

.topbar__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.topbar__x { color: var(--ink-soft); font-weight: 400; }

.topbar__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--indigo);
  background: var(--indigo-wash);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 11px 5px 9px;
}

.topbar__pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--indigo);
  box-shadow: 0 0 8px 1px var(--indigo-glow);
  animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.75); }
}

.page {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 32px) 64px;
}

.footer {
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  padding: 16px clamp(20px, 4vw, 48px) 20px;
  text-align: center;
  font-size: 13px;
  color: #b7b5c2;
}
.footer p { margin: 3px 0; }
.footer a { color: #b7b5c2; text-decoration: underline; text-underline-offset: 2px; }
.footer a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- */
/* Flash / errors                                                    */
/* ---------------------------------------------------------------- */

.flash {
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  border: 1px solid var(--line-strong);
  background: var(--glass);
  backdrop-filter: blur(14px);
}
.flash.error, .flash.alert { border-color: var(--red); background: var(--red-wash); color: var(--red); }
.flash.notice, .flash.success { border-color: var(--mint); background: var(--mint-wash); color: var(--mint); }

.error-box {
  border: 1px solid var(--red);
  background: var(--red-wash);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 24px;
  backdrop-filter: blur(14px);
}
.error-box__title { font-weight: 600; color: var(--red); margin-bottom: 6px; }
.error-box ul { padding-left: 18px; list-style: disc; color: var(--red); }
.error-box li { margin: 2px 0; }

/* ---------------------------------------------------------------- */
/* Checkout header + stepper                                         */
/* ---------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.eyebrow--center { text-align: center; }

/* The header (with the stepper) and the body are both direct children of
   .checkout, so they always share the exact same width -- the stepper's
   midpoint necessarily lands on the content's midpoint, and every step
   (payment, confirm) and the complete page all render within the same
   .page max-width, so nothing narrows down page to page. */

.checkout__head {
  margin-bottom: 28px;
  animation: rise 0.5s var(--ease-spring) both;
}

.checkout__title {
  font-size: clamp(28px, 4vw, 34px);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

/* This is a fixed five-step timeline (Address/Delivery/Payment/Confirm/
   Complete), so circles and their connector segments are positioned as
   exact 0/25/50/75/100% points along the row itself (via nth-child),
   rather than centered within each li's own equal-width box. That keeps
   the spacing between circles perfectly even AND keeps the connector
   line's color change landing exactly under each circle, regardless of
   how wide any label's text is. .progress-steps itself (not each li) is
   the positioning root all of this is measured against. */
.progress-steps {
  position: relative;
  display: flex;
  gap: 0;
  counter-reset: step;
}

.progress-steps li {
  flex: 1;
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-soft);
  text-align: center;
}
.progress-steps li:first-child { text-align: left; }
.progress-steps li:last-child { text-align: right; }

.progress-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  z-index: 1;
  top: -12px;
  width: 24px;
  height: 24px;
  line-height: 1;
  border-radius: 50%;
  /* Opaque, not the usual translucent glass -- this sits directly over
     the connector line, which would show straight through anything
     less than fully opaque. */
  background: #17171f;
  border: 2px solid var(--line-strong);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.3s, background 0.3s, color 0.3s, box-shadow 0.3s;
}

.progress-steps li:nth-child(1)::before { left: 0; }
.progress-steps li:nth-child(2)::before { left: calc(25% - 12px); }
.progress-steps li:nth-child(3)::before { left: calc(50% - 12px); }
.progress-steps li:nth-child(4)::before { left: calc(75% - 12px); }
.progress-steps li:nth-child(5)::before { right: 0; }

.progress-steps li::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  height: 2px;
  background: var(--line-strong);
}

/* Each segment spans from this circle's own center to the next circle's
   center -- so the color change (see .completed below) always lands
   exactly at a circle, never short of or past one. The last step has
   nothing after it, so it gets no line. */
.progress-steps li:nth-child(1)::after { left: 12px; right: 75%; }
.progress-steps li:nth-child(2)::after { left: 25%; right: 50%; }
.progress-steps li:nth-child(3)::after { left: 50%; right: 25%; }
.progress-steps li:nth-child(4)::after { left: 75%; right: 12px; }
.progress-steps li:last-child::after { display: none; }

.progress-steps li[class*="completed"] span,
.progress-steps li[class*="current"] span { color: var(--ink); font-weight: 500; }

.progress-steps li[class*="completed"]::before {
  content: "✓";
  font-size: 12px;
  background: var(--mint);
  border-color: var(--mint);
  color: #06120c;
}
.progress-steps li[class*="completed"]::after { background: var(--mint); }

.progress-steps li[class*="current"]::before {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
  box-shadow: 0 0 0 5px var(--indigo-wash), 0 0 16px 2px var(--indigo-glow);
}

.progress-steps a { color: inherit; }
.progress-steps a:hover { text-decoration: none; }

/* ---------------------------------------------------------------- */
/* Checkout layout                                                    */
/* ---------------------------------------------------------------- */

.checkout__body {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  align-items: start;
}

.checkout__body--full { grid-template-columns: 1fr; }

/* Three equal, equal-height cards: stage / payment form / receipt. */
.checkout__body--with-stage { grid-template-columns: 1fr 1fr 1fr; gap: 28px; }

.checkout__stage { animation: rise 0.55s var(--ease-spring) both; }
.checkout__form { animation: rise 0.55s 0.05s var(--ease-spring) both; }
.checkout__summary { animation: rise 0.55s 0.12s var(--ease-spring) both; position: sticky; top: 24px; }

.checkout__body--with-stage > .checkout__stage,
.checkout__body--with-stage > .checkout__form,
.checkout__body--with-stage > .checkout__summary {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.checkout__body--with-stage .checkout__form form,
.checkout__body--with-stage .step-card,
.checkout__body--with-stage .stage,
.checkout__body--with-stage .receipt {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.checkout__body--with-stage .receipt__body { flex: 1; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1080px) {
  .checkout__body--with-stage { grid-template-columns: 1fr 1fr; }
  .checkout__stage { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .checkout__body,
  .checkout__body--with-stage { grid-template-columns: 1fr; }
  .checkout__summary { position: static; }
}

/* ---------------------------------------------------------------- */
/* Cards / panels -- translucent glass over the aurora                */
/* ---------------------------------------------------------------- */

.panel, .step-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  padding: 24px;
}

/* When a .panel's only job is to host an already-styled .step-card (every
   state in this demo except the unused address/delivery ones), don't draw
   a second nested card around it. */
.panel:has(> .step-card) {
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}

/* Cursor-reactive spotlight sheen, tracked via JS-set --mx/--my per element. */
.glow-surface {
  position: relative;
}
.glow-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), rgba(141, 123, 255, 0.16), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.glow-surface:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .glow-surface::before { display: none; }
}

.step-card__legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  padding: 0;
  margin-bottom: 18px;
}

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-bottom: 6px; }
.field-required label::after { content: " *"; color: var(--red); }

input[type="email"], input[type="text"], input[type="tel"] {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="email"]:focus, input[type="text"]:focus, input[type="tel"]:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-wash);
  outline: none;
}

/* ---------------------------------------------------------------- */
/* Payment method selection                                          */
/* ---------------------------------------------------------------- */

.segmented { display: flex; gap: 8px; margin-bottom: 16px; }
.segmented__option {
  flex: 1;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.payment-methods { margin-bottom: 18px; }
.payment-methods__option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.payment-methods__option:has(input:checked) {
  border-color: var(--indigo);
  background: var(--indigo-wash);
}
.payment-methods__option-label { font-weight: 500; flex: 1; }
.payment-methods__badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mint);
  background: var(--mint-wash);
  border-radius: 999px;
  padding: 3px 8px;
}

.payment-gateways__item { list-style: none; }

.pay-card {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-md);
  padding: 18px;
  background: var(--glass-soft);
}

.pay-card__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.pay-card__mark {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--indigo-wash);
  color: var(--indigo);
}

/* Razorpay's own navy-to-blue brand mark, not the generic icon tint. */
.pay-card__mark--brand {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #3395ff 0%, #eaf3ff 55%, #ffffff 100%);
  border: 1px solid rgba(51, 149, 255, 0.4);
}

.pay-card__copy { flex: 1; }
.pay-card__title { font-weight: 600; font-size: 15px; margin-bottom: 3px; }
.pay-card__desc { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }

.pay-card__amount {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
}

.pay-card__trust {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}
.pay-card__trust svg { flex-shrink: 0; color: var(--mint); }

/* ---------------------------------------------------------------- */
/* Buttons                                                            */
/* ---------------------------------------------------------------- */

.btn, input[type="submit"].btn, button.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s var(--ease-spring), box-shadow 0.15s ease, filter 0.15s ease;
}

.btn--primary, input[type="submit"] {
  background: linear-gradient(135deg, var(--indigo), var(--indigo-deep));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 10px 26px -10px var(--indigo-glow);
}
.btn--primary::after, input[type="submit"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.3) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.btn--primary:hover::after, input[type="submit"]:hover::after {
  transform: translateX(120%);
  transition: transform 0.7s ease;
}
.btn--primary:hover, input[type="submit"]:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 14px 34px -10px var(--indigo-glow);
  text-decoration: none;
}
.btn--primary:active, input[type="submit"]:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.08s;
}

.btn--block, input[type="submit"].btn--block { width: 100%; }

.form-buttons { margin-top: 20px; }

.disabled, [disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------------------------------------------------------------- */
/* Receipt (signature component)                                     */
/* ---------------------------------------------------------------- */

.receipt {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  padding: 24px;
  position: relative;
}

.receipt__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px dashed var(--line-strong);
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.receipt__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
}

.receipt__number {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
}

.receipt__body { display: flex; flex-direction: column; gap: 9px; }

.receipt__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
}
.receipt__row--muted { color: var(--ink-soft); }

.receipt__leader {
  flex: 1;
  border-bottom: 1px dotted var(--line-strong);
  transform: translateY(-3px);
}

.receipt__value {
  font-family: var(--font-mono);
  font-size: 13.5px;
  white-space: nowrap;
}

.receipt__total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1.5px solid var(--line-strong);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
}
.receipt__total .receipt__leader { border-bottom-color: var(--line-strong); }
.receipt__value--total { font-size: 18px; color: var(--mint); }

/* ---------------------------------------------------------------- */
/* Order details (confirm step + complete page)                      */
/* ---------------------------------------------------------------- */

/* Same two-card, same-ratio composition as the payment step's form +
   receipt columns, so every step reads as the same system at the same
   overall width instead of confirm/complete suddenly going narrow. */
.order-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 760px) {
  .order-grid { grid-template-columns: 1fr; }
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.details-block__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.address { font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.address .fn { font-weight: 600; }

.delivery__row { font-size: 13.5px; margin-bottom: 4px; }

.payment-info span.type { color: var(--ink-soft); margin-right: 4px; }

.receipt--items { margin-top: 4px; }

.line-items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }

.line-item { display: flex; align-items: center; gap: 12px; }

.line-item__thumb {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--indigo-wash);
  border: 1px solid var(--line);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.line-item__thumb img { width: 100%; height: 100%; object-fit: cover; }

.image-placeholder { display: grid; place-items: center; width: 100%; height: 100%; }

.product-art--sm { width: 30px; height: 30px; }
.product-art--md { width: 56px; height: 56px; }
.product-art--lg {
  width: min(200px, 55%);
  height: auto;
  filter: drop-shadow(0 16px 30px rgba(141, 123, 255, 0.35));
}

/* ---------------------------------------------------------------- */
/* Product stage (interactive showcase, payment step)                */
/* ---------------------------------------------------------------- */

.stage {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 24px;
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  animation: rise 0.55s var(--ease-spring) both;
}

.stage__glow {
  position: absolute;
  inset: -30% -30% auto auto;
  width: 75%;
  height: 75%;
  background: radial-gradient(circle, var(--indigo) 0%, transparent 70%);
  opacity: 0.35;
  filter: blur(36px);
  pointer-events: none;
  animation: drift-a 9s ease-in-out infinite;
}

.stage::after {
  content: "";
  position: absolute;
  inset: auto auto -25% -25%;
  width: 65%;
  height: 65%;
  background: radial-gradient(circle, var(--mint) 0%, transparent 72%);
  opacity: 0.25;
  filter: blur(34px);
  pointer-events: none;
  animation: drift-b 11s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .stage__glow, .stage::after { animation: none; }
}

.stage__eyebrow {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.stage__art-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0 24px;
  perspective: 700px;
  --rx: 0deg;
  --ry: 0deg;
}

.stage__art-wrap .product-art {
  transform: rotateX(var(--ry)) rotateY(var(--rx));
  transition: transform 0.15s ease-out;
  animation: float 4.5s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.stage__tag {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--glass-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  box-shadow: var(--shadow-card);
}
.stage__tag-name { font-weight: 600; font-size: 13.5px; }
.stage__tag-price { font-family: var(--font-mono); font-weight: 600; color: var(--mint); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .stage__art-wrap .product-art { animation: none; transition: none; }
}

.line-item__body { flex: 1; min-width: 0; }
.line-item__name { font-weight: 600; font-size: 14px; }
.line-item__meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

.line-item__total {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13.5px;
  white-space: nowrap;
}

.terms { margin-bottom: 18px; font-size: 13px; }
.terms__policy { color: var(--ink-soft); margin-bottom: 8px; max-height: 120px; overflow-y: auto; }
.terms__accept { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* ---------------------------------------------------------------- */
/* Order complete page                                               */
/* ---------------------------------------------------------------- */

/* .complete itself spans the same .page width as every other step --
   only the celebratory headline is deliberately narrower for readability. */
.complete__hero { max-width: 480px; margin: 0 auto; text-align: center; }

.stamp {
  position: relative;
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  color: var(--mint);
  animation: stamp-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.stamp::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--mint);
  opacity: 0;
  animation: ring-pulse 1s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ring-pulse {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.9); opacity: 0; }
}

.stamp__ring {
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: draw 0.6s 0.05s ease-out forwards;
}
.stamp__check {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: draw 0.4s 0.5s ease-out forwards;
}

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes stamp-in {
  from { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.complete__title {
  font-size: clamp(24px, 4vw, 30px);
  margin-bottom: 10px;
  animation: rise 0.5s 0.15s var(--ease-spring) both;
}
.complete__subtitle {
  color: var(--ink-soft);
  font-size: 14.5px;
  max-width: 460px;
  margin: 0 auto 32px;
  animation: rise 0.5s 0.2s var(--ease-spring) both;
}

.complete__receipt {
  text-align: left;
  margin-bottom: 28px;
  animation: rise 0.55s 0.25s var(--ease-spring) both;
}

.complete__actions { text-align: center; animation: rise 0.5s 0.3s var(--ease-spring) both; }

@media (prefers-reduced-motion: reduce) {
  .stamp__ring, .stamp__check { stroke-dashoffset: 0; }
}