/* =========================================================
   بوابة طلبات قطع الغيار — التنسيقات
   ========================================================= */
:root{
  --ink:#0B1622;
  --steel:#14324F;
  --steel-2:#1D4E7E;
  --steel-3:#3E6E9E;
  --accent:#F0A415;
  --paper:#F4F7FA;
  --white:#fff;
  --line:#DCE4EC;
  --muted:#6B7B8C;
  --ok:#16794C;
  --low:#B87400;
  --out:#B3261E;
  --soon:#5B4FBF;
  --r:10px;
  --shadow:0 1px 2px rgba(11,22,34,.06), 0 6px 20px rgba(11,22,34,.05);
  --mono:"IBM Plex Mono","Consolas",monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  background:var(--paper); color:var(--ink);
  font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--steel-2); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1180px; margin:0 auto; padding:0 16px}

/* ---------- الترويسة ---------- */
.topbar{background:var(--ink); color:#B9C6D4; font-size:13px; padding:7px 0}
.topbar a{color:#B9C6D4}
.topbar .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

header.site{background:var(--steel); color:#fff; padding:14px 0; position:sticky; top:0; z-index:50}
header.site .wrap{display:flex; align-items:center; gap:18px}
.logo{display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:19px; letter-spacing:-.2px}
.logo:hover{text-decoration:none}
.logo .mark{
  width:34px;height:34px;border-radius:8px;background:var(--accent);
  display:grid;place-items:center;color:var(--ink);font-weight:800;font-size:15px;
}
.hdr-actions{margin-inline-start:auto; display:flex; align-items:center; gap:10px}
.hdr-btn{
  color:#fff; border:1px solid rgba(255,255,255,.28); padding:7px 13px;
  border-radius:8px; font-size:14px; white-space:nowrap; display:inline-flex; gap:7px; align-items:center;
}
.hdr-btn:hover{background:rgba(255,255,255,.1); text-decoration:none}
.hdr-btn.solid{background:var(--accent); border-color:var(--accent); color:var(--ink); font-weight:600}
.badge-count{background:var(--accent); color:var(--ink); border-radius:20px; padding:0 7px; font-size:12px; font-weight:700}

/* ---------- شريط البحث البطل ---------- */
.hero{background:linear-gradient(180deg,var(--steel) 0%, #0F2942 100%); padding:34px 0 30px; color:#fff}
.hero h1{margin:0 0 6px; font-size:24px; font-weight:700}
.hero p{margin:0 0 18px; color:#B9C6D4; font-size:14px}
.searchbox{display:flex; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.22)}
.searchbox input{
  flex:1; border:0; padding:17px 18px; font-size:17px; font-family:var(--mono);
  letter-spacing:.5px; outline:none; min-width:0; color:var(--ink);
}
.searchbox input::placeholder{font-family:"IBM Plex Sans Arabic",sans-serif; letter-spacing:0; color:#9AA9B8}
.searchbox button{
  border:0; background:var(--accent); color:var(--ink); font-weight:700;
  padding:0 26px; font-size:16px; cursor:pointer; font-family:inherit;
}
.searchbox button:hover{filter:brightness(1.06)}
.hint{margin-top:10px; font-size:12.5px; color:#9DB0C2}

/* ---------- شرائح الماركات ---------- */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.chip{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; padding:6px 13px; border-radius:30px; font-size:13.5px;
}
.chip:hover{background:rgba(255,255,255,.2); text-decoration:none}
.chip.active{background:var(--accent); border-color:var(--accent); color:var(--ink); font-weight:600}

/* ---------- التخطيط ---------- */
.layout{display:grid; grid-template-columns:230px 1fr; gap:22px; margin:24px 0 50px}
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.panel .ph{padding:12px 15px; border-bottom:1px solid var(--line); font-weight:700; font-size:14.5px}
.panel .pb{padding:14px 15px}
.side-list{list-style:none; margin:0; padding:6px}
.side-list a{display:block; padding:8px 11px; border-radius:7px; color:var(--ink); font-size:14px}
.side-list a:hover{background:var(--paper); text-decoration:none}
.side-list a.on{background:var(--steel); color:#fff; font-weight:600}

/* ---------- بطاقات المنتجات ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:.15s}
.card:hover{border-color:var(--steel-3); box-shadow:var(--shadow); transform:translateY(-2px)}
.card .thumb{height:150px; background:#fff; display:grid; place-items:center; border-bottom:1px solid var(--line); padding:10px}
.card .thumb img{max-height:130px; object-fit:contain}
.card .body{padding:12px; display:flex; flex-direction:column; gap:8px; flex:1}
.card .name{font-weight:600; font-size:14.5px; line-height:1.5; color:var(--ink); min-height:44px}
.card .name:hover{color:var(--steel-2)}
.card .brand{font-size:12px; color:var(--muted)}
.card .foot{margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px}

/* ---------- لوحة رقم القطعة (العنصر المميز) ---------- */
.plate{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:1.2px;
  background:#EEF3F8; color:var(--steel); border:1px solid #CFDCE8;
  border-radius:5px; padding:3px 9px; direction:ltr;
}
.plate::before{content:""; width:3px; height:13px; background:var(--accent); border-radius:2px}
.plate.dark{background:var(--ink); color:#EAF1F8; border-color:var(--ink)}
.plate.lg{font-size:16px; padding:6px 13px; letter-spacing:1.6px}

/* ---------- حالة التوفر ---------- */
.stk{font-size:12px; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap}
.stk.ok{background:#E4F4EC; color:var(--ok)}
.stk.low{background:#FDF1DC; color:var(--low)}
.stk.out{background:#FBE6E4; color:var(--out)}
.stk.soon{background:#EAE7FB; color:var(--soon)}

/* ---------- الأسعار ---------- */
.price{font-weight:700; font-size:17px; color:var(--ink); font-family:var(--mono); direction:ltr}
.price small{font-size:11px; color:var(--muted); font-family:inherit}
.price-lock{font-size:12.5px; color:var(--muted)}

/* ---------- الأزرار ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:0; border-radius:8px; padding:10px 18px; font-size:14.5px; font-weight:600;
  font-family:inherit; cursor:pointer; background:var(--steel); color:#fff; transition:.15s;
}
.btn:hover{background:var(--steel-2); text-decoration:none; color:#fff}
.btn.amber{background:var(--accent); color:var(--ink)}
.btn.amber:hover{filter:brightness(1.07); background:var(--accent); color:var(--ink)}
.btn.ghost{background:#fff; color:var(--steel); border:1px solid var(--line)}
.btn.ghost:hover{background:var(--paper); color:var(--steel)}
.btn.sm{padding:6px 12px; font-size:13px}
.btn.wide{width:100%}
.btn.danger{background:var(--out)}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------- النماذج ---------- */
label.f{display:block; font-size:13.5px; font-weight:600; margin:0 0 5px}
input[type=text],input[type=password],input[type=number],input[type=tel],input[type=email],select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  font-family:inherit; font-size:14.5px; background:#fff; color:var(--ink); outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--steel-3); box-shadow:0 0 0 3px rgba(62,110,158,.15)}
.field{margin-bottom:14px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.qty{width:76px; text-align:center; font-family:var(--mono)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- الجداول ---------- */
table.tbl{width:100%; border-collapse:collapse; background:#fff; font-size:14px}
table.tbl th{background:var(--paper); text-align:right; padding:11px 12px; font-size:13px; color:var(--muted); border-bottom:1px solid var(--line); font-weight:600; white-space:nowrap}
table.tbl td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tr:hover td{background:#FAFCFE}
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff}

/* ---------- شارات الحالة ---------- */
.st{font-size:12.5px; font-weight:600; padding:4px 11px; border-radius:20px; white-space:nowrap; background:#EEF3F8; color:var(--steel)}
.st.new{background:#E8F0FA; color:var(--steel-2)}
.st.review{background:#FDF1DC; color:var(--low)}
.st.confirmed{background:#E4F4EC; color:var(--ok)}
.st.preparing{background:#EAE7FB; color:var(--soon)}
.st.shipped{background:#DEF0F5; color:#0E6B80}
.st.completed{background:#16794C; color:#fff}
.st.cancelled{background:#FBE6E4; color:var(--out)}

/* ---------- رسائل ---------- */
.flash{padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:14.5px; font-weight:500}
.flash-ok{background:#E4F4EC; color:var(--ok); border:1px solid #BFE3D2}
.flash-err{background:#FBE6E4; color:var(--out); border:1px solid #F0C7C3}
.empty{text-align:center; padding:52px 20px; color:var(--muted)}
.empty h3{color:var(--ink); margin:0 0 8px}

/* ---------- صفحة المنتج ---------- */
.pdp{display:grid; grid-template-columns:400px 1fr; gap:26px}
.pdp .gal{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px; display:grid; place-items:center; min-height:330px}
.pdp h1{font-size:22px; margin:0 0 4px}
.pdp .en{color:var(--muted); font-size:14px; margin:0 0 14px; direction:ltr; text-align:right}
.spec{width:100%; border-collapse:collapse; font-size:14px; margin:16px 0}
.spec th{text-align:right; padding:9px 0; color:var(--muted); font-weight:500; width:140px; vertical-align:top; border-bottom:1px solid var(--line)}
.spec td{padding:9px 0; border-bottom:1px solid var(--line)}
.refs{display:flex; flex-wrap:wrap; gap:6px}
.buybox{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-top:18px}
.buybox .line{display:flex; align-items:center; gap:12px; flex-wrap:wrap}

/* ---------- لوحة الإدارة ---------- */
.admin-shell{display:grid; grid-template-columns:210px 1fr; min-height:100vh}
.admin-nav{background:var(--ink); color:#B9C6D4; padding:16px 0}
.admin-nav .brand{color:#fff; font-weight:700; padding:0 18px 16px; font-size:16px; border-bottom:1px solid #1D2C3C; margin-bottom:10px}
.admin-nav a{display:block; color:#B9C6D4; padding:10px 18px; font-size:14px}
.admin-nav a:hover{background:#152232; color:#fff; text-decoration:none}
.admin-nav a.on{background:var(--steel); color:#fff; font-weight:600; border-inline-start:3px solid var(--accent)}
.admin-main{padding:22px 26px; background:var(--paper)}
.admin-head{display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap}
.admin-head h1{font-size:21px; margin:0}
.admin-head .sp{margin-inline-start:auto; display:flex; gap:8px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:12px; margin-bottom:22px}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:15px}
.stat .n{font-size:26px; font-weight:700; font-family:var(--mono)}
.stat .l{font-size:13px; color:var(--muted)}
.stat.hot{border-inline-start:3px solid var(--accent)}

/* ---------- صفحة الدخول ---------- */
.auth{max-width:410px; margin:60px auto; background:#fff; border:1px solid var(--line); border-radius:14px; padding:32px; box-shadow:var(--shadow)}
.auth h1{font-size:21px; margin:0 0 6px; text-align:center}
.auth p.sub{text-align:center; color:var(--muted); font-size:14px; margin:0 0 24px}

/* ---------- تذييل ---------- */
footer.site{background:var(--ink); color:#8FA1B3; padding:26px 0; font-size:13.5px; margin-top:40px}
footer.site a{color:#B9C6D4}

/* ---------- زر واتساب عائم ---------- */
.wa{position:fixed; inset-inline-start:18px; bottom:18px; width:52px; height:52px; border-radius:50%;
    background:#25D366; display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.2); z-index:60}
.wa svg{width:28px; height:28px; fill:#fff}

/* ---------- الجوال ---------- */
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .layout .side{order:2}
  .pdp{grid-template-columns:1fr}
  .admin-shell{grid-template-columns:1fr}
  .admin-nav{display:flex; overflow-x:auto; padding:0; gap:0}
  .admin-nav .brand{display:none}
  .admin-nav a{white-space:nowrap; padding:12px 14px}
  .admin-main{padding:16px}
  .hero h1{font-size:20px}
  .searchbox input{font-size:16px; padding:14px}
  .searchbox button{padding:0 18px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
  .row2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}
@media print{header.site,footer.site,.wa,.no-print{display:none}}