/* 3.2's way in, played on one stop: the shopper's own profile, Settings and activity, Orders and payments. See orders.js. */

/* the profile */
.ig .orders-top { left: 0; top: 54px; width: 402px; height: 44px; justify-content: space-between; padding: 0 16px; }
.ig .orders-user { position: absolute; left: 50%; translate: -50% 0; gap: 4px; font: 700 20px/24px var(--ig-display); letter-spacing: .2px; }
.ig .orders-menu { display: flex; }
.ig .orders-profile { left: 0; top: 110px; width: 402px; padding: 0 16px; }
.ig .orders-name { font: 600 15px/18px var(--ig-text); }
.ig .orders-stats { gap: 26px; }
.ig .orders-stats > .col { gap: 1px; }
.ig .orders-stats b { font: 600 16px/20px var(--ig-text); }
.ig .orders-stats span { font: 400 13px/16px var(--ig-text); color: var(--ig-soft); }
.ig .orders-pbtn { height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #FFFFFF1F; font: 600 14px/18px var(--ig-text); }
.ig .orders-pbtn.sq { width: 34px; flex-shrink: 0; }
.ig .orders-new { align-self: flex-start; align-items: center; gap: 6px; padding-top: 18px; font: 400 12px/15px var(--ig-text); }
.ig .orders-new > .row { width: 64px; height: 64px; justify-content: center; border-radius: 32px; border: 1px solid #FFFFFF40; }
.ig .orders-tabs { left: 0; top: 362px; width: 402px; height: 44px; border-bottom: 1px solid #FFFFFF1A; }
.ig .orders-tabs > span { position: relative; flex: 1 1 0; height: 44px; display: flex; align-items: center; justify-content: center; }
.ig .orders-tabs > .on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #fff; }
.ig .orders-empty { left: 0; top: 446px; width: 402px; align-items: center; gap: 12px; padding: 0 32px; text-align: center; }
.ig .orders-cam { width: 86px; height: 86px; justify-content: center; margin-bottom: 4px; border-radius: 43px; border: 2px solid #fff; }
.ig .orders-link { font: 600 14px/18px var(--ig-text); color: var(--ig-link); }

/* Settings and activity, Orders and payments: sections of rows under a back bar, the tab bar covered */
.ig .orders-page { left: 0; top: 102px; width: 402px; bottom: 0; overflow: clip; }
.ig .orders-sec { padding: 14px 0 6px; border-bottom: 6px solid #121315; }
.ig .orders-h { padding: 6px 16px 8px; font: 400 14px/18px var(--ig-text); color: var(--ig-muted); }
.ig .orders-row { min-height: 48px; gap: 14px; padding: 0 16px; font: 400 16px/20px var(--ig-text); }
.ig .orders-row > .t-meta { font-size: 15px; }
.ig .orders-ic { width: 24px; flex-shrink: 0; }
.ig .orders-blue { color: var(--ig-link); }
.ig .orders-red { color: var(--agent-red); }
.ig .orders-order { gap: 12px; padding: 8px 16px; }
.ig .orders-status { font: 600 13px/17px var(--ig-text); color: var(--agent-green); }
.ig .orders-status.done { font-weight: 400; color: var(--ig-soft); }

/* while the way there plays (orders.js), a clear layer over the phone takes taps, which skip to the order */
.ig .orders-play { inset: 0; z-index: 10; }

/* a press dims what's pressed */
.device .scr:not(.out) .ig :is(.orders-row, .orders-order, .orders-menu, .orders-pbtn) { transition: opacity .12s; }
.device .scr:not(.out) .ig :is(.orders-row, .orders-order, .orders-menu, .orders-pbtn):active { opacity: .6; transition: none; }