/* My orders (design E): client-first, neat. */
.orders-page{background:#ECECEA}
.o-w{max-width:74rem;margin:0 auto;padding:1.5rem 1rem 3rem;box-sizing:border-box;width:100%}
.o-k{font:700 .66rem/1 var(--mono);letter-spacing:.16em;color:#D42A25;margin:0}
.mut{color:#4a515d;font-size:.88rem;font-weight:500}
.o-msg{min-height:1.2em;font-weight:600;font-size:.92rem}
.o-msg.bad{color:#B3261E}.o-msg.good{color:#1D7A4E}
.btn.sm{min-height:2.5rem;padding:.4rem 1rem;font-size:.9rem}
.o-link{all:unset;cursor:pointer;font-weight:700;font-size:.9rem;color:#0B0D11;text-decoration:underline;text-underline-offset:3px}
.o-link:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.o-full{width:100%;box-sizing:border-box}
/* sign in */
.o-sign{max-width:28rem;margin:2.5rem auto;background:#fff;border:1px solid rgba(16,19,24,.11);border-radius:14px;padding:1.6rem}
.o-sign h1{font-size:2.4rem;margin:.4rem 0 .5rem}
.o-tabs{display:flex;gap:.4rem;margin:1rem 0}
.o-tabs button{flex:1;font:700 .9rem var(--body);padding:.6rem;border-radius:8px;border:1px solid rgba(16,19,24,.2);background:#fff;cursor:pointer}
.o-tabs button[aria-selected=true]{background:#0B0D11;color:#fff;border-color:#0B0D11}
.o-form{display:grid;gap:.7rem}
.o-form label{display:grid;gap:.35rem;font-weight:600}
.o-form input{font:inherit;font-weight:400;padding:.75rem .85rem;border:1px solid rgba(16,19,24,.25);border-radius:8px;background:#fff;width:100%;box-sizing:border-box}
.o-form [hidden]{display:none!important}
/* app */
.o-hello{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;margin:.4rem 0 1.4rem}
.o-hello h1{font:400 clamp(2rem,4.6vw,3rem)/1 var(--display);text-transform:uppercase;margin:.35rem 0 .4rem}
#o-sum{margin:0;font-size:1.05rem;font-weight:500}#o-sum b{color:#D42A25}
.o-age{margin:.4rem 0 0;font-size:.85rem;color:#4a515d}.o-age.stale{color:#8a4b00;font-weight:600}
.o-hacts{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.o-hacts select{font:inherit;padding:.45rem .6rem;border-radius:8px;border:1px solid rgba(16,19,24,.25);margin-left:.4rem}
.o-lay{display:grid;gap:1.25rem}
@media(min-width:960px){.o-lay{grid-template-columns:minmax(0,1fr) 20rem;align-items:start}}
.o-sec{margin:0 0 1.25rem}
.o-sh{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0 0 .6rem}
.o-sh h2{font:700 1.05rem var(--body);text-transform:none;letter-spacing:0;margin:0}
.o-card{background:#fff;border:1px solid rgba(16,19,24,.11);border-radius:12px}
.o-pad{padding:1rem 1.1rem}
.o-side .o-card+.o-card{margin-top:1rem}
.o-cnt{font:700 .7rem var(--mono);background:#0B0D11;color:#fff;border-radius:99px;padding:.15rem .5rem;margin-left:.3rem;vertical-align:middle}
.o-th{border-radius:8px;background:#10131a center/cover no-repeat;flex:none;display:grid;place-items:center;color:#ffffff66}
.o-th svg{width:40%;height:auto;fill:none;stroke:currentColor;stroke-width:1.8}
/* needs you */
.o-need{padding:1rem 1.1rem;display:grid;grid-template-columns:72px 1fr;gap:1rem;border-left:4px solid #D42A25}
.o-need+.o-need{margin-top:.75rem}
.o-need .o-th{width:72px;height:128px}
.o-need h3{margin:0;font:700 1.02rem var(--body);text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
.o-need .what{margin:.25rem 0 .7rem;font-weight:600}
.o-acts{display:flex;flex-wrap:wrap;gap:.6rem .9rem;align-items:center}
.o-sent{font:700 .72rem var(--mono);letter-spacing:.08em;color:#1D7A4E;text-transform:uppercase}
.o-note{display:grid;gap:.5rem;margin-top:.7rem}
.o-note textarea{font:inherit;min-height:5rem;padding:.6rem .7rem;border:1px solid rgba(16,19,24,.25);border-radius:8px;resize:vertical}
.o-note[hidden]{display:none}
/* rows */
.o-row{display:grid;grid-template-columns:44px 1fr auto;gap:.9rem;align-items:center;padding:.85rem 1.1rem;border-top:1px solid rgba(16,19,24,.09)}
.o-row:first-child{border-top:0}
.o-row .o-th{width:44px;height:78px;border-radius:6px}
.o-row b{display:block;font-size:.97rem;overflow-wrap:anywhere}
.o-trk{display:flex;gap:3px;margin:.45rem 0 .25rem;max-width:260px}.o-trk i{flex:1;height:4px;border-radius:2px;background:#e3e3e0}.o-trk i.on{background:#D42A25}
.o-eta{text-align:right;font-weight:700;font-size:.9rem}.o-eta small{display:block;font-weight:500;color:#4a515d}
.o-eta .btn{white-space:nowrap}
.o-tag{display:inline-block;margin-left:.5rem;font:700 .6rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#4a515d;background:#ececea;border-radius:4px;padding:.2rem .4rem}
.o-row .o-note{grid-column:1/-1}
/* finished tools */
.o-tools{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;padding:.85rem 1.1rem;border-bottom:1px solid rgba(16,19,24,.09);background:#fafaf8;border-radius:12px 12px 0 0}
.o-srch{flex:1 1 12rem;max-width:16rem}
.o-srch input{font:inherit;font-size:.9rem;width:100%;box-sizing:border-box;border:1px solid rgba(16,19,24,.15);border-radius:8px;padding:.45rem .7rem;background:#fff}
.o-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.o-chips button{font:600 .8rem var(--body);padding:.32rem .7rem;border-radius:99px;border:1px solid rgba(16,19,24,.15);background:#fff;cursor:pointer}
.o-chips button[aria-pressed=true]{background:#0B0D11;color:#fff;border-color:#0B0D11}
.o-sort{font-size:.85rem;color:#4a515d}.o-sort select{font:inherit;font-weight:700;color:#0B0D11;border:0;background:transparent}
.o-more{text-align:center;padding:.8rem;border-top:1px solid rgba(16,19,24,.09)}
.o-empty{padding:1rem 1.1rem;margin:0}
/* side */
.o-plan{display:flex;align-items:center;gap:.9rem;margin:.7rem 0 .5rem}.o-plan b{font:400 2.8rem/1 var(--display)}
.o-bar{height:6px;border-radius:99px;background:#eceae6;overflow:hidden}.o-bar i{display:block;height:100%;background:#D42A25}
.o-inv{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.55rem 0;border-top:1px solid rgba(16,19,24,.09);font-size:.92rem;font-weight:600}
.o-inv:first-child{border-top:0}
.o-tog{display:flex;justify-content:space-between;align-items:center;padding:.45rem 0;font-weight:600;font-size:.9rem;cursor:pointer}
.o-tog input{appearance:none;width:38px;height:22px;border-radius:99px;background:#cfcfcb;position:relative;cursor:pointer;margin:0;flex:none}
.o-tog input::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.o-tog input:checked{background:#D42A25}.o-tog input:checked::after{left:19px}
.o-tog input:focus-visible{outline:3px solid #0B0D11;outline-offset:2px}
@media(max-width:600px){.o-need{grid-template-columns:56px 1fr}.o-need .o-th{width:56px;height:100px}.o-row{grid-template-columns:44px 1fr}.o-eta{grid-column:1/-1;text-align:left;display:flex;gap:.8rem;align-items:center}.o-srch{max-width:none}.o-sort{width:100%}.o-tag{display:none}}
.o-eta{display:grid;gap:.4rem;justify-items:end;align-content:center}
.o-side .o-k{margin-bottom:.6rem}
@media(max-width:600px){.o-eta{display:flex;flex-wrap:wrap;justify-items:start}}
.o-eta.o-fa{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:flex-end}
.o-form[hidden],.o-sign [hidden]{display:none!important}
.o-tabs button[hidden]{display:none}

/* country code + number */
.ccrow{display:flex;gap:.4rem}.ccrow .cc{flex:none;max-width:9.5rem;font:inherit;font-weight:400;padding:.6rem .4rem;border:1px solid rgba(16,19,24,.25);border-radius:8px;background:#fff;color:inherit}.ccrow input{flex:1;min-width:0}

/* the hidden attribute always wins over component display rules (e.g. .btn on #o-next for site-only accounts) */
[hidden]{display:none!important}