.payment-page { display: grid; gap: 1.3rem; margin: 0 auto; max-width: 72rem; padding: clamp(1rem, 3vw, 2.5rem); }
.payment-heading { align-items: end; display: flex; gap: 1rem; justify-content: space-between; }
.payment-heading h1 { font-size: clamp(2rem, 5vw, 4.25rem); letter-spacing: -.055em; margin: .2rem 0 .5rem; }
.payment-heading p { color: var(--muted); margin: 0; max-width: 46rem; }
.payment-heading a { border: 1px solid var(--line); border-radius: 999px; color: var(--text); padding: .65rem 1rem; text-decoration: none; }
.payment-message, .payment-empty, .payment-start-card, .payment-status-card, .payment-simulator { background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-solid) 90%, var(--primary) 5%)); border: 1px solid var(--line); border-radius: 1.5rem; box-shadow: var(--shadow); }
.payment-message { display: grid; gap: .25rem; padding: 1rem 1.2rem; }
.payment-message small, .payment-heading .eyebrow, .payment-start-card .eyebrow, .payment-simulator .eyebrow { color: var(--muted); }
.payment-empty { min-height: 17rem; padding: 3rem; place-content: center; text-align: center; }
.payment-empty .signal { background: var(--danger); border-radius: 50%; box-shadow: 0 0 0 .7rem color-mix(in srgb, var(--danger) 13%, transparent); display: inline-block; height: .75rem; width: .75rem; }
.payment-start-card { align-items: center; display: grid; gap: 2rem; grid-template-columns: 1fr auto; overflow: hidden; padding: clamp(1.4rem, 4vw, 2.4rem); position: relative; }
.payment-start-card::after { background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 24%, transparent), transparent 68%); content: ""; height: 18rem; pointer-events: none; position: absolute; right: -8rem; top: -8rem; width: 18rem; }
.payment-start-card h2, .payment-simulator h2 { margin: .3rem 0; }
.payment-start-card p, .payment-simulator p { color: var(--muted); margin: 0; max-width: 44rem; }
.payment-page button { background: linear-gradient(135deg, var(--primary), var(--cyan)); border: 0; border-radius: .8rem; color: #fff; cursor: pointer; font: inherit; font-weight: 750; min-height: 2.8rem; padding: .7rem 1rem; }
.payment-page button.secondary { background: var(--surface-raised); border: 1px solid var(--line); color: var(--text); }
.payment-page button.negative { background: var(--danger); }
.payment-status-card { display: grid; gap: 1.3rem; grid-template-columns: minmax(11rem, .45fr) 1fr; padding: clamp(1.3rem, 4vw, 2.3rem); }
.payment-state-orbit { align-items: center; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; max-width: 14rem; position: relative; }
.payment-state-orbit::before, .payment-state-orbit::after { border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 50%; content: ""; inset: 10%; position: absolute; }
.payment-state-orbit::after { border-style: dashed; inset: 22%; }
.payment-state-orbit span { background: currentColor; border-radius: 50%; height: .65rem; margin-bottom: .55rem; width: .65rem; }
.payment-state-orbit.positive { color: var(--success); }.payment-state-orbit.pending { color: var(--cyan); }.payment-state-orbit.attention { color: #f5b942; }.payment-state-orbit.ended { color: var(--muted); }
.payment-facts { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.payment-facts div { background: color-mix(in srgb, var(--surface-raised) 78%, transparent); border-radius: .9rem; display: grid; gap: .25rem; padding: .9rem; }
.payment-facts span { color: var(--muted); font-size: .8rem; }.payment-facts strong { overflow-wrap: anywhere; }
.payment-actions { display: flex; flex-wrap: wrap; gap: .7rem; grid-column: 2; }
.payment-simulator { border-color: color-mix(in srgb, var(--primary) 42%, var(--line)); display: grid; gap: 1rem; padding: 1.4rem; }
.simulator-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
@media (max-width: 700px) { .payment-heading { align-items: start; flex-direction: column; }.payment-start-card, .payment-status-card { grid-template-columns: 1fr; }.payment-state-orbit { max-width: 10rem; }.payment-actions { grid-column: 1; }.payment-facts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) { .payment-state-orbit.pending::after { animation: payment-orbit 18s linear infinite; } @keyframes payment-orbit { to { transform: rotate(360deg); } } }