/* Fulfillment status, activity and the compact preparing workspace. */
.guided-confirmation #order-timeline{margin:24px 0 27px}
.guided-confirmation #order-timeline .timeline-symbol{width:27px;height:27px;margin:0;border:1px solid var(--line);background:#f2f5f7;color:#70838e;font-size:11px}
.guided-confirmation #order-timeline .complete .timeline-symbol{background:#e1f2e8;color:#24724f;border-color:#b9d9c9}
.guided-confirmation #order-timeline .active .timeline-symbol{background:#dceffc;color:#176ca2;border-color:#aed1e7}
.guided-confirmation [data-status=failed] #order-timeline .active .timeline-symbol{background:var(--coral-light);color:var(--coral);border-color:#efc6af}
.guided-confirmation #order-timeline strong{margin:0;font-size:12px;line-height:1.4;font-weight:550;white-space:nowrap}
.guided-confirmation #order-timeline .waiting strong{color:var(--muted);font-weight:450}
.guided-confirmation .preview-state-control #preview-ready{font-size:11px;padding:5px 0;margin-left:auto}
.guided-confirmation [data-status=preparing] .status-emblem{width:56px;height:56px;top:21px;right:24px}
.preparation-indicator{position:relative;display:grid;place-items:center;width:56px;height:56px;color:#287ca4}
.preparation-indicator::before{content:'';position:absolute;inset:0;border:3px solid #dceffc;border-top-color:#287ca4;border-radius:50%;animation:preparation-spin 1.3s linear infinite}
.preparation-indicator>.icon{width:24px;height:24px}
.guided-confirmation [data-status=preparing] .status-kicker{min-height:40px}
.guided-confirmation [data-status=preparing] .processing-panel{margin-top:0;background:var(--paper);border-color:#d6e3eb;border-radius:17px;padding:24px 27px}
.guided-confirmation [data-status=preparing] .confirmation-workspace{display:grid;grid-template-columns:minmax(0,1fr) 365px;column-gap:36px;align-items:start}
.guided-confirmation [data-status=preparing] .confirmation-layout{display:contents}
.guided-confirmation [data-status=preparing] #order-status{grid-column:1;grid-row:1;margin:0;border-bottom:0;border-radius:17px 17px 0 0}
.guided-confirmation [data-status=preparing] .confirmation-content{grid-column:1;grid-row:1}
.guided-confirmation [data-status=preparing] .processing-panel{border-radius:0 0 17px 17px}
.guided-confirmation [data-status=preparing] .confirmation-aside{grid-column:2;grid-row:1;align-self:start}
@media(max-width:1100px){.guided-confirmation [data-status=preparing] .confirmation-workspace{grid-template-columns:minmax(0,1fr) 300px;column-gap:24px}}
@media(max-width:850px){.guided-confirmation [data-status=preparing] .confirmation-workspace{grid-template-columns:minmax(0,1fr);column-gap:0}.guided-confirmation [data-status=preparing] .confirmation-workspace .confirmation-aside{grid-column:1;grid-row:2;margin-top:22px;max-width:none}}
@keyframes preparation-spin{to{transform:rotate(360deg)}}
@media(max-width:680px){
 .guided-confirmation #order-timeline{margin:21px 0 24px}
 .guided-confirmation #order-timeline .timeline-symbol{width:23px;height:23px;font-size:10px}
 .guided-confirmation #order-timeline strong{font-size:11px}
 .guided-confirmation .preview-state-control #preview-ready{margin:0;flex-basis:100%}
 .guided-confirmation [data-status=preparing] .status-emblem{top:20px;right:18px;width:48px;height:48px}
 .guided-confirmation .preparation-indicator{width:48px;height:48px}
 .guided-confirmation [data-status=preparing] .status-kicker{min-height:42px}
 .guided-confirmation [data-status=preparing] #order-status{border-radius:14px 14px 0 0}
 .guided-confirmation [data-status=preparing] .processing-panel{padding:21px;border-radius:0 0 14px 14px}
}
@media(prefers-reduced-motion:reduce){.preparation-indicator::before{animation:none}}