/* ===================================================
   Voltix — Terra Style — shared.css
   تصميم مشترك بين كل صفحات الموقع (الرئيسية، المتجر، المنتج، الدفع)
=================================================== */
:root{
  --bg:#faf7f2;
  --panel:#ffffff;
  --panel-2:#f4efe6;
  --stroke:#e8e0d3;
  --stroke-strong:#dccdb4;
  --ink:#241a10;
  --dim:#7a6c5d;
  --primary:#c1622e;
  --primary-dark:#a34f22;
  --primary-light:#f3ded1;
  --sage:#7c8b6f;
  --ok:#3f8f5f;
  --err:#b3492f;
  --shadow:0 8px 28px rgba(58,38,18,.08);
  --r:16px;
  --r-lg:22px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:'Cairo',sans-serif;background:var(--bg);color:var(--ink);
  min-height:100vh;overflow-x:hidden;
}
[dir="ltr"] body{font-family:'Inter',sans-serif}
.disp{font-family:'Cairo',sans-serif;font-weight:800}
[dir="ltr"] .disp{font-family:'Poppins',sans-serif;font-weight:700}
.latin{font-family:'Inter',sans-serif}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1180px;margin:auto;padding:0 18px}

/* ===== الهيدر ===== */
header.site{position:sticky;top:0;z-index:50;background:rgba(250,247,242,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--stroke)}
.nav{max-width:1180px;margin:auto;display:flex;align-items:center;gap:16px;padding:14px 18px}
.logo{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:-.01em;text-decoration:none;color:var(--ink);white-space:nowrap}
.logo b{color:var(--primary)}
.navlinks{display:none;gap:22px;font-size:.92rem;font-weight:600;color:var(--dim)}
.navlinks a{text-decoration:none;color:var(--dim);white-space:nowrap;transition:.2s}
.navlinks a.on,.navlinks a:hover{color:var(--primary)}
@media(min-width:860px){.navlinks{display:flex}}
.nav .sp{flex:1}
.icon-btn{
  position:relative;width:42px;height:42px;border-radius:13px;border:1px solid var(--stroke);
  background:var(--panel);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:.2s;font-size:1.05rem;flex:none;
}
.icon-btn:active{transform:scale(.92)}
.lang-btn{width:auto;padding:0 12px;font-family:'Poppins',sans-serif;font-weight:700;font-size:.78rem}
.badge{
  position:absolute;top:-6px;left:-6px;min-width:19px;height:19px;border-radius:10px;
  background:var(--primary);color:#fff;font-weight:700;font-size:.68rem;
  display:grid;place-items:center;padding:0 4px;font-family:'Poppins',sans-serif;
}
.mobsearch{padding:0 18px 12px;max-width:1180px;margin:auto}
.mobsearch input{width:100%;padding:12px 16px;border-radius:13px;border:1px solid var(--stroke);background:var(--panel);color:var(--ink);font-size:.95rem;outline:none;font-family:inherit}
.mobsearch input:focus{border-color:var(--primary)}

/* ===== أزرار عامة ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;border-radius:14px;border:none;cursor:pointer;font-weight:700;font-size:.96rem;
  background:var(--primary);color:#fff;transition:.2s;font-family:inherit;text-decoration:none;width:100%;
}
.btn:active{transform:scale(.97)}
.btn:hover{background:var(--primary-dark)}
.btn.outline{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn.outline:hover{background:var(--ink);color:#fff}
.btn.ghost{background:var(--panel-2);color:var(--ink)}
.btn.sm{width:auto;padding:9px 16px;font-size:.85rem;border-radius:11px}
.btn:disabled{opacity:.55;pointer-events:none}
.chip-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:99px;background:var(--primary);color:#fff;font-size:.72rem;font-weight:700}
.chip-tag.dark{background:var(--ink)}

/* ===== شريط الثقة ===== */
.trustbar{border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);background:var(--panel)}
.trustbar .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;padding:16px 18px}
.titem{display:flex;align-items:center;gap:10px;font-size:.82rem}
.titem .ic{width:34px;height:34px;border-radius:10px;background:var(--primary-light);color:var(--primary-dark);display:grid;place-items:center;font-size:1.1rem;flex:none}
.titem b{display:block;font-size:.85rem}
.titem span{color:var(--dim);font-size:.76rem}

/* ===== بطاقة منتج ===== */
.pgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.pcard{
  border-radius:var(--r);border:1px solid var(--stroke);background:var(--panel);
  overflow:hidden;cursor:pointer;transition:.25s;display:flex;flex-direction:column;
  animation:pop .45s ease both;
}
@keyframes pop{from{opacity:0;transform:translateY(10px)}}
.pcard:hover{border-color:var(--stroke-strong);box-shadow:var(--shadow);transform:translateY(-2px)}
.pcard .img{aspect-ratio:1;background:var(--panel-2);position:relative;overflow:hidden}
.pcard .img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.pcard:hover .img img{transform:scale(1.04)}
.pcard .img .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:2.3rem;opacity:.5}
.pcard .tag{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:8px;background:var(--ink);color:#fff;font-weight:700;font-size:.68rem}
[dir="ltr"] .pcard .tag{left:auto;right:10px}
.pcard .tag.promo{background:var(--primary)}
.pcard .bd{padding:12px;display:flex;flex-direction:column;gap:4px;flex:1}
.pcard .ct{font-size:.68rem;color:var(--primary-dark);font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.pcard .nm{font-size:.88rem;font-weight:700;line-height:1.4}
.swrow{display:flex;gap:4px;margin-top:1px}
.sw-dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.pcard .prices{display:flex;align-items:baseline;gap:7px;margin-top:auto}
.pr{font-weight:800;font-size:1rem;color:var(--primary-dark)}
.old{font-size:.76rem;color:var(--dim);text-decoration:line-through}
.addbtn{
  margin-top:8px;width:100%;padding:9px;border-radius:11px;border:1.5px solid var(--ink);
  background:transparent;color:var(--ink);cursor:pointer;font-weight:700;font-size:.82rem;
  transition:.2s;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;
}
.addbtn:active{transform:scale(.95);background:var(--ink);color:#fff}
.addbtn.out{opacity:.45;pointer-events:none}
.empty{grid-column:1/-1;text-align:center;color:var(--dim);padding:60px 0}
.loader{grid-column:1/-1;text-align:center;padding:60px 0;color:var(--dim)}
.spin{width:32px;height:32px;margin:0 auto 12px;border-radius:50%;border:3px solid var(--stroke);border-top-color:var(--primary);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ===== الأدراج (السلة) ===== */
.ovl{position:fixed;inset:0;background:rgba(36,26,16,.4);backdrop-filter:blur(4px);z-index:190;opacity:0;pointer-events:none;transition:.3s}
.ovl.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(420px,100%);z-index:200;
  background:var(--panel);transform:translateX(-105%);transition:.32s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;box-shadow:12px 0 40px rgba(0,0,0,.12);
}
[dir="ltr"] .drawer{left:auto;right:0;transform:translateX(105%)}
.drawer.open{transform:none}
.dhead{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--stroke)}
.dhead h3{flex:1;font-size:1.1rem;font-weight:800}
.dbody{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.dfoot{padding:16px 18px;border-top:1px solid var(--stroke)}
.citem{display:flex;gap:11px;border:1px solid var(--stroke);background:var(--panel-2);border-radius:14px;padding:9px}
.citem .im{width:58px;height:58px;border-radius:10px;background:#fff;overflow:hidden;display:grid;place-items:center;font-size:1.4rem;flex:none}
.citem .im img{width:100%;height:100%;object-fit:cover}
.citem .in{flex:1;min-width:0}
.citem .in b{font-size:.86rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.citem .in small{color:var(--dim);font-size:.74rem}
.qty{display:flex;align-items:center;gap:9px;margin-top:5px}
.qty button{width:26px;height:26px;border-radius:8px;border:1px solid var(--stroke-strong);background:#fff;color:var(--ink);cursor:pointer;font-size:.95rem}
.rm{background:none;border:none;color:var(--err);cursor:pointer;font-size:1rem;align-self:flex-start}
.tot{display:flex;justify-content:space-between;margin:5px 0;font-size:.9rem;color:var(--dim)}
.tot.big{font-size:1.1rem;color:var(--ink);font-weight:800}

/* ===== نموذج حقول ===== */
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.fld label{font-size:.83rem;color:var(--dim);font-weight:600}
.fld input,.fld select,.fld textarea{
  padding:12px 14px;border-radius:12px;border:1px solid var(--stroke);background:var(--panel);
  color:var(--ink);font-size:.94rem;outline:none;font-family:inherit;width:100%;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--primary)}
.seg{display:flex;gap:8px}
.seg button{flex:1;padding:11px;border-radius:12px;border:1px solid var(--stroke);background:var(--panel);color:var(--dim);cursor:pointer;font-weight:700;font-family:inherit}
.seg button.on{background:var(--primary);color:#fff;border-color:transparent}

/* ===== توست ===== */
.toast{
  position:fixed;bottom:22px;left:50%;transform:translate(-50%,80px);z-index:300;
  padding:12px 20px;border-radius:14px;background:var(--ink);color:#fff;
  font-size:.88rem;opacity:0;transition:.3s;pointer-events:none;max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast b{color:#f3ded1}

/* ===== فوتر ===== */
footer.site{margin-top:50px;border-top:1px solid var(--stroke);background:var(--panel-2)}
footer.site .wrap{padding:36px 18px 26px;display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:700px){footer.site .wrap{grid-template-columns:1.3fr 1fr 1fr 1fr}}
footer.site h4{font-size:.8rem;font-weight:800;margin-bottom:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
footer.site .flogo{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.2rem;margin-bottom:8px}
footer.site .flogo b{color:var(--primary)}
footer.site p{color:var(--dim);font-size:.85rem;line-height:1.7}
footer.site ul{list-style:none;display:flex;flex-direction:column;gap:8px}
footer.site a{text-decoration:none;color:var(--dim);font-size:.85rem}
footer.site a:hover{color:var(--primary)}
.fbottom{border-top:1px solid var(--stroke);padding:16px 18px;text-align:center;color:var(--dim);font-size:.8rem}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}