
:root{
 --ink:#191612;--muted:#6f675e;--gold:#9b8767;--cream:#fbf7ef;--sand:#f3ebdf;--white:#fff;
 --line:#d9cfbf;--green:#42654d;--blue:#36576b;--amber:#8a5a1d;--red:#9e3c36;
 --shadow:0 12px 30px rgba(35,28,20,.08)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--cream);color:var(--ink);line-height:1.5}
a{color:#284d61}
.wrap{width:min(1220px,calc(100% - 28px));margin:auto}
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.header-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:12px 0}
.header-row img{width:min(230px,56vw);height:auto;max-height:82px;object-fit:contain}
.userbox{text-align:right;font-size:12px;color:#665f57}.userbox strong{display:block;color:var(--ink);font-size:15px}
.hero{padding:30px 0 16px}.hero h1{font-family:Georgia,serif;font-size:clamp(32px,5vw,52px);font-weight:500;margin:0}
.hero .ar{direction:rtl;text-align:left;font-size:21px;font-weight:700;margin-top:3px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:20px}
.card-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center}
.card-head h2{font-family:Georgia,serif;font-size:25px;font-weight:500;margin:0}
.body,.section{padding:20px 22px}.section{border-bottom:1px solid var(--line)}.section:last-child{border-bottom:0}
.ar-head{direction:rtl;text-align:right;font-weight:700;color:#5b544c;margin-top:3px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:4px}
.field .ar{display:block;direction:rtl;text-align:right;font-size:13px;font-weight:700;color:#514b43;margin-bottom:7px}
.req::after{content:" *";color:var(--red)}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid #cabfad;border-radius:11px;font-size:15px;background:#fff;color:var(--ink)}
input[readonly]{background:#f3efe9;color:#665f56}
textarea{min-height:94px;resize:vertical}
.phone-input,.barcode-input{direction:ltr!important;text-align:left!important;unicode-bidi:isolate}
.help{font-size:12px;color:#746d64;margin-top:5px}.help.ar{direction:rtl;text-align:right}
.btn{display:inline-block;border:0;border-radius:999px;padding:11px 17px;background:#2e2a24;color:#fff;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer}
.btn.alt{background:#eee6da;color:#2e2923}.btn.green{background:var(--green)}.btn.blue{background:var(--blue)}.btn.red{background:#efe2e0;color:#7e312d}.btn.gold{background:#8b7656}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}
.pending{background:#f7e7cf;color:var(--amber)}.ok{background:#e2efe5;color:#365d41}.shipped{background:#dce8f1;color:#36576b}.danger{background:#efe2e0;color:#7e312d}.neutral{background:#eee9e1;color:#595148}
.info{background:#f7f3ec;border:1px solid var(--line);border-radius:11px;padding:11px}
.info span{display:block;font-size:11px;text-transform:uppercase;color:#786f65}.info strong{display:block;margin-top:4px}
.note{margin-top:12px;padding:12px 14px;background:#fff8ef;border:1px solid #e6cfaa;border-radius:12px;font-size:13px;color:#6a4a1f}
.note.oknote{background:#eef4ef;border-color:#c9dccd;color:#365d41}.note.blue{background:#eef4f7;border-color:#c4d6df;color:#2f5265}.note.red{background:#f8eded;border-color:#e4c5c2;color:#7d312d}
nav.menu{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}nav.menu a{padding:9px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700;font-size:13px}
nav.menu a.current{background:#2e2a24;color:#fff;border-color:#2e2a24}
.order{padding:17px 22px;border-bottom:1px solid var(--line)}.order:last-child{border-bottom:0}
.order-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.order-num{font-family:Georgia,serif;font-size:22px}.meta{font-size:13px;color:#71695f;margin-top:3px}
.summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}
.summary-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.summary-card span{display:block;font-size:12px;color:#756d63;text-transform:uppercase}.summary-card strong{display:block;font-size:21px;margin-top:5px}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{border:1px solid var(--line);padding:9px;text-align:left;vertical-align:middle}th{background:#f3eee6;font-size:12px}
code{background:#f3eee6;padding:2px 5px;border-radius:5px}
.kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#786f65;font-weight:700}
.steps{counter-reset:step;display:grid;gap:10px}.step{position:relative;padding:14px 14px 14px 52px;background:#fff;border:1px solid var(--line);border-radius:14px}.step:before{counter-increment:step;content:counter(step);position:absolute;left:14px;top:13px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#2e2a24;color:#fff;font-weight:700}
.inline-check{display:flex;gap:9px;align-items:flex-start}.inline-check input{width:auto;margin-top:5px}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}
footer{padding:24px 0 40px;color:#766e65;font-size:12px;text-align:center}
.small{font-size:12px;color:var(--muted)}
.hidden{display:none}
@media(max-width:950px){.grid3,.grid4,.grid5,.summary{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.grid,.grid3,.grid4,.grid5,.summary{grid-template-columns:1fr}.order-top{flex-direction:column}.userbox{display:none}header{position:static}}
