body.order-page{ background:var(--cream); font-family:var(--font-ar); color:var(--black); min-height:100vh; padding-bottom:40px; }
.o-wrap{ width:100%; max-width:640px; margin:0 auto; padding:0 16px; }
.o-header{ background:var(--white); box-shadow:0 2px 14px rgba(26,16,6,.08); position:sticky; top:0; z-index:10; }
.o-header-in{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.o-logo{ height:38px; }
.o-back{ font-weight:700; color:var(--black); text-decoration:none; font-size:14px; }
.o-cart-pill{ background:var(--red); color:#fff; border-radius:30px; padding:6px 12px; font-size:13px; font-weight:700; white-space:nowrap; }

.o-steps{ list-style:none; display:flex; gap:8px; margin:22px 0 16px; padding:0; }
.o-steps li{ flex:1; display:flex; align-items:center; gap:8px; background:#fff; border-radius:14px; padding:10px 12px; opacity:.55; font-weight:700; font-size:14px; }
.o-steps li i{ font-style:normal; width:26px; height:26px; border-radius:50%; background:#eee; display:grid; place-items:center; font-size:13px; }
.o-steps li.active{ opacity:1; box-shadow:var(--shadow); }
.o-steps li.active i, .o-steps li.done i{ background:var(--yellow); }
.o-steps li.done{ opacity:1; }

.o-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 18px; }
.o-card h1{ font-size:26px; margin:0 0 6px; font-weight:900; }
.o-h2{ font-size:18px; margin:20px 0 10px; }
.o-sub{ color:var(--gray); margin:0 0 16px; }
.o-hint{ color:var(--gray); font-size:13px; margin:8px 0; }
.o-error{ color:var(--red); font-weight:700; margin:10px 0; }

.o-map{ height:300px; border-radius:16px; overflow:hidden; border:2px solid #eadfca; margin-top:6px; z-index:0; position:relative; }
.o-geo{ font-weight:700; font-size:14px; margin:10px 0 0; min-height:20px; }
.o-geo.ok{ color:#27500A; }
.o-geo.bad{ color:var(--red); }
.o-field{ display:block; font-weight:700; font-size:14px; margin:14px 0; }
.o-field input, .o-field textarea{ display:block; width:100%; margin-top:6px; padding:13px 14px; border:2px solid #eadfca; border-radius:14px; font:inherit; font-weight:400; background:#fffdf8; box-sizing:border-box; }
.o-field input:focus, .o-field textarea:focus{ outline:none; border-color:var(--yellow); }

.o-btn{ display:block; width:100%; border:0; border-radius:16px; padding:15px 18px; font:inherit; font-weight:900; font-size:16px; cursor:pointer; transition:transform .15s; margin-top:12px; }
.o-btn:active{ transform:scale(.98); }
.o-btn-red{ background:var(--red); color:#fff; box-shadow:0 10px 22px rgba(236,44,39,.3); }
.o-btn-dark{ background:var(--black); color:#fff; margin-top:0; }
.o-btn-ghost{ background:#f2ead8; color:var(--black); }
.o-btn-wa{ background:#25D366; color:#fff; }
.o-btn:disabled{ opacity:.6; cursor:wait; }
.o-row{ display:flex; gap:10px; }
.o-row .o-btn-ghost{ flex:0 0 32%; }
.o-row .o-btn:not(.o-btn-ghost){ flex:1; }

.o-item{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #f1e8d4; }
.o-item:last-child{ border-bottom:0; }
.o-item img{ width:64px; height:64px; border-radius:14px; object-fit:cover; background:#fff6dd; flex:0 0 auto; }
.o-item .o-info{ flex:1; min-width:0; }
.o-item .o-name{ font-weight:900; font-size:16px; }
.o-item .o-price{ color:var(--gray); font-size:14px; }
.o-cat{ font-weight:900; font-size:17px; margin:18px 0 4px; color:var(--red); }
.o-qty{ display:flex; align-items:center; gap:10px; }
.o-qty button{ width:34px; height:34px; border-radius:50%; border:0; background:var(--yellow); font-size:20px; font-weight:900; cursor:pointer; line-height:1; }
.o-qty button.minus{ background:#f2ead8; }
.o-qty b{ min-width:18px; text-align:center; font-size:16px; }

.o-total-bar{ display:flex; justify-content:space-between; background:#fff6dd; padding:14px 16px; border-radius:14px; margin-top:16px; font-weight:900; }

.o-pay{ display:flex; gap:12px; align-items:flex-start; border:2px solid #eadfca; border-radius:16px; padding:14px; margin-bottom:10px; cursor:pointer; }
.o-pay:has(input:checked){ border-color:var(--yellow); background:#fffbea; }
.o-pay small{ display:block; color:var(--gray); margin-top:2px; }
.o-pay input{ margin-top:5px; accent-color:var(--red); }
.o-bank{ background:#f6f1e4; border-radius:14px; padding:14px; margin-bottom:12px; font-size:14px; line-height:1.9; }
.o-bank code{ direction:ltr; unicode-bidi:embed; font-weight:700; }

.o-summary{ background:#fffbea; border:2px dashed var(--yellow); border-radius:16px; padding:14px 16px; margin-top:18px; }
.o-summary div{ display:flex; justify-content:space-between; padding:3px 0; }
.o-summary .o-grand{ border-top:1px solid #ead9a5; margin-top:6px; padding-top:8px; font-weight:900; font-size:18px; }
[hidden]{display:none!important}
.o-closed{ min-height:62vh; display:flex; align-items:center; justify-content:center; padding:20px 0; }
.o-closed-in{ background:#fff; border-radius:24px; padding:36px 26px; text-align:center; max-width:460px; width:100%; box-shadow:0 18px 44px rgba(26,16,6,.12); }
.o-closed-ico{ font-size:64px; line-height:1; margin-bottom:10px; }
.o-closed-in h1{ margin:0 0 10px; font-size:26px; }
.o-closed-in p{ margin:0 0 22px; line-height:1.9; color:#4a3b2a; }
.o-closed-in .o-btn{ display:block; text-decoration:none; text-align:center; }