/* ==========================================================================
   Order Confirmation page — unique page-specific components.
   Per the master plan, mostly static "thank you" content — only the
   reference number is dynamic.
   ========================================================================== */
body.checkout-body { overflow-x: hidden; }
.checkout-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem clamp(1.5rem, 4vw, 3rem); border-bottom: 1px solid var(--border); }
.checkout-topbar__brand { display: flex; align-items: center; gap: 0.6rem; }
.checkout-topbar__brand img { height: 28px; width: 28px; }
.checkout-topbar__brand span { font-weight: 700; color: var(--white); }

.oc-wrap { max-width: 560px; margin-inline: auto; padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 2rem); text-align: center; }

/* ---- Checkmark draw-in — the celebratory moment ---- */
.oc-check { width: 84px; height: 84px; margin: 0 auto 1.75rem; }
.oc-check circle { fill: none; stroke: var(--success); stroke-width: 3; stroke-dasharray: 240; stroke-dashoffset: 240; animation: ocCircle 0.6s ease forwards; }
.oc-check path { fill: none; stroke: var(--success); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: ocCheck 0.4s ease 0.5s forwards; }
@keyframes ocCircle { to { stroke-dashoffset: 0; } }
@keyframes ocCheck { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .oc-check circle, .oc-check path { animation: none; stroke-dashoffset: 0; } }

.oc-wrap h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin-bottom: 0.6rem; }
.oc-wrap__lede { color: var(--muted); font-size: 1rem; margin-bottom: 2rem; }

.oc-summary { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-solid); padding: 1.5rem; margin-bottom: 2rem; text-align: left; }
.oc-summary__row { display: flex; justify-content: space-between; padding-block: 0.7rem; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.oc-summary__row:last-child { border-bottom: none; }
.oc-summary__row span:first-child { color: var(--muted); }
.oc-summary__row span:last-child { color: var(--white); font-weight: 500; }

.oc-next { text-align: left; margin-bottom: 2.25rem; }
.oc-next li { display: flex; gap: 0.75rem; align-items: flex-start; padding-bottom: 0.9rem; font-size: 0.9rem; color: var(--muted); list-style: none; }
.oc-next svg { width: 17px; height: 17px; color: var(--success); flex-shrink: 0; margin-top: 0.15rem; }

.oc-actions { display: flex; flex-direction: column; gap: 0.75rem; }
.oc-actions .btn { width: 100%; justify-content: center; }