.flow-panel.order-panel{max-width:560px;margin-inline:auto}
.order-public-id{font-size:.7rem;color:var(--muted);overflow-wrap:anywhere}
.payment-section{max-width:420px;margin:24px auto 0}
.payment-section h2{font-size:.86rem;font-weight:600;text-align:center;color:var(--muted);margin:0 0 12px}
.payment-card{background:#fff;border:1px solid #dee7ee;border-radius:16px;padding:20px;box-shadow:0 8px 28px #092f4609;min-width:0;margin:0 auto 12px}
.payment-card__header{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid #edf1f5}
.payment-card__icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#edf5fa;color:var(--blue);flex:none}
.payment-card__icon{width:48px;height:42px;background:transparent}.payment-logo{display:block;width:50px;height:44px;object-fit:contain;border-radius:6px}.payment-card__icon .payment-logo{width:48px;height:42px}
.payment-card__heading{display:grid;gap:5px;min-width:0}
.payment-card__method{font-size:.86rem;font-weight:650;color:var(--navy)}
.payment-card__status{justify-self:start;display:inline-flex;align-items:center;gap:5px;font-size:.65rem;font-weight:550;line-height:1.4;border-radius:99px;padding:3px 7px;background:#edf2f5;color:#526675}
.payment-card__status::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.payment-card__status--pending,.payment-card__status--submitting,.payment-card__status--created{background:#fff4df;color:#856012}
.payment-card__status--confirmed{background:#e6f5ed;color:#266449}
.payment-card__status--failed,.payment-card__status--expired{background:#fbece9;color:#99473c}
.payment-card__reference{text-align:center;padding:18px 0}
.payment-card__label,.payment-card__grid dt{display:block;font-size:.64rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.payment-card__reference>strong{display:block;font-size:clamp(1.25rem,5vw,1.65rem);font-weight:700;letter-spacing:.08em;line-height:1.25;color:var(--navy);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;user-select:all}
.payment-card__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.payment-card__grid>div{padding:12px 10px;border:1px solid #e6edf2;border-radius:10px;background:#f8fafc;min-width:0;text-align:center}
.payment-card__grid dt .icon{display:block;width:17px;height:17px;margin:0 auto 6px;color:#668ca2}
.payment-card__grid dd{margin:0;color:var(--navy);font-size:1rem;font-weight:650;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.payment-card__deadline{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left!important;background:transparent!important;border:0!important;padding:10px 1px 0!important}
.payment-card__deadline dt{display:flex;align-items:center;gap:6px;margin:0;letter-spacing:0;text-transform:none;font-size:.74rem}
.payment-card__deadline dt .icon{margin:0;width:15px;height:15px}
.payment-card__deadline dd{text-align:right;font-size:.77rem;font-weight:550}
.payment-card__deadline small{display:block;font-size:.62rem;font-weight:400;color:var(--muted);margin-top:3px}
.payment-card__meta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:10px;border-top:1px solid #edf1f5;font-size:.62rem;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.payment-section__actions{text-align:center;margin:12px 0}
.payment-section__actions .button{font-size:.8rem;min-height:36px;padding:8px 14px}
.payment-history{margin:12px 0}
.payment-history summary{display:flex;justify-content:center;align-items:center;gap:6px;padding:10px 0;cursor:pointer;color:var(--muted);font-size:.74rem}
.payment-history summary::before{content:'›';font-size:1rem}
.payment-history[open] summary::before{transform:rotate(90deg)}
.payment-history summary span{border-radius:99px;background:#edf2f5;padding:1px 6px;font-size:.66rem}
.payment-history .payment-card{box-shadow:none;margin-top:8px}
.payment-submit{max-width:420px;margin:18px auto 0}
.payment-submit .choice-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.payment-submit .choice-row .button{display:flex;flex-direction:column;gap:9px;min-width:0;white-space:normal;text-align:center;background:white;color:var(--navy);border:1px solid #dbe6ed;border-radius:12px;padding:16px 10px;font-size:.78rem;line-height:1.4;box-shadow:0 3px 12px #092f4605}
.payment-submit .choice-row .button .icon{width:24px;height:24px;color:var(--blue)}
.payment-submit .choice-row .button:hover:not(:disabled){background:#f1f8fc;border-color:#6da1c0;transform:translateY(-1px)}
.payment-submit .choice-row .button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.payment-submit .choice-row .button:disabled{opacity:.45}
.payment-pending{display:flex;align-items:center;justify-content:center;gap:12px;background:#f0f7fb;border:1px solid #d9e9f2;border-radius:12px;padding:18px 12px;margin-top:12px;color:var(--navy)}
.payment-pending[hidden]{display:none}
.payment-pending strong{font-size:.84rem;font-weight:600}
.payment-spinner{width:22px;height:22px;flex:none;border:2px solid #cee1ed;border-top-color:var(--blue);border-radius:50%;animation:payment-spin .8s linear infinite}
.payment-submit[aria-busy=true] .choice-row{pointer-events:none}
@keyframes payment-spin{to{transform:rotate(360deg)}}
@media(max-width:560px){.payment-card{padding:16px}.payment-section{margin-top:18px}.payment-card__reference{padding:16px 0}.payment-card__meta{font-size:.59rem}}
@media(prefers-reduced-motion:reduce){.payment-spinner{animation:none}.payment-submit .choice-row .button{transform:none!important;transition:none}}