/* =====================================================================
   MR. ELECTRIC — auto electrical parts store
   Automotive-electrical identity: graphite base, live-wire amber,
   copper accent, voltmeter signature. RTL-aware (logical properties).
   BY IMAGYNEX
   ===================================================================== */

:root{
  --bg:#0F1419;
  --surface:#161D25;
  --surface-2:#1E2833;
  --line:#2A3743;
  --amber:#F3A43B;      /* logo orange — primary action */
  --amber-dim:#D98A22;
  --copper:#E21E27;    /* logo red — brand accent + gradients */
  --green:#2FBF71;      /* in stock / verified */
  --red:#E21E27;        /* brand red */
  --danger:#B45248;     /* out of stock (muted) */
  --text:#E9EDF0;
  --muted:#8B98A5;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 18px 40px -22px rgba(0,0,0,.85);
  --maxw:1180px;
  --body:'IBM Plex Sans Arabic', system-ui, sans-serif;
  --display:'Rajdhani', 'Cairo', sans-serif;
  --arabic:'Cairo', 'IBM Plex Sans Arabic', sans-serif;
}
body.rtl{ --display:'Cairo', 'Rajdhani', sans-serif; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 500px at 85% -10%, rgba(253,181,21,.08), transparent 60%),
    radial-gradient(700px 500px at -10% 20%, rgba(200,118,62,.06), transparent 55%);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); margin:0; line-height:1.15; letter-spacing:.2px; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px; }

/* signature: live voltage line across the very top */
.voltage-line{
  height:3px; width:100%;
  background:linear-gradient(90deg, transparent, var(--amber), var(--copper), var(--amber), transparent);
  background-size:220% 100%;
  animation:current 3.2s linear infinite;
}
@keyframes current{ 0%{ background-position:0% 0 } 100%{ background-position:220% 0 } }
@media (prefers-reduced-motion:reduce){ .voltage-line{ animation:none } }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(15,20,25,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.head-inner{ display:flex; align-items:center; gap:22px; height:66px; }
.brand{ display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:700; }
.brand-name{ font-size:1.35rem; letter-spacing:.5px; }
.brand.small .brand-name{ font-size:1.1rem; }
.brand-logo{ height:38px; width:auto; display:block; }
.brand.small .brand-logo{ height:28px; }
.socials{ display:flex; gap:12px; margin-block-start:12px; }
.socials a{ width:34px; height:34px; display:grid; place-items:center; border-radius:9px;
  border:1px solid var(--line); color:var(--muted); transition:.15s; }
.socials a:hover{ color:#fff; border-color:var(--red); }
.socials a.wa:hover{ border-color:var(--green); color:var(--green); }

.brand-bolt{ color:var(--red); display:grid; place-items:center;
  filter:drop-shadow(0 0 8px rgba(226,30,39,.45)); }
.main-nav{ display:flex; gap:22px; margin-inline-start:auto; font-weight:500; }
.main-nav a{ color:var(--muted); transition:color .15s; }
.main-nav a:hover{ color:var(--text); }
.head-actions{ display:flex; align-items:center; gap:14px; }
.lang-toggle{
  border:1px solid var(--line); border-radius:999px; padding:6px 14px;
  font-family:var(--display); font-weight:600; font-size:.85rem; color:var(--text);
  transition:border-color .15s, color .15s;
}
.lang-toggle:hover{ border-color:var(--amber); color:var(--amber); }
.cart-btn{ position:relative; color:var(--text); display:grid; place-items:center; }
.cart-count{
  position:absolute; inset-block-start:-7px; inset-inline-end:-9px;
  background:var(--amber); color:#111; font-size:.7rem; font-weight:700;
  min-width:17px; height:17px; border-radius:999px; display:grid; place-items:center;
  font-family:var(--display);
}

/* ---------- hero ---------- */
.hero{
  display:grid; grid-template-columns:1.35fr .65fr; gap:30px; align-items:center;
  padding-block:56px 40px;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; color:var(--red);
  font-family:var(--display); font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  font-size:.82rem; margin-block-end:16px;
}
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 rgba(47,191,113,.6); animation:pulse 1.8s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(47,191,113,0) } 100%{ box-shadow:0 0 0 0 rgba(47,191,113,0) } }
.hero-title{ font-size:clamp(2.1rem,5vw,3.5rem); font-weight:800; }
.hero-title .hl{ color:var(--amber); }
.hero-sub{ color:var(--muted); font-size:1.08rem; max-width:44ch; margin-block:16px 26px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-assure{ display:flex; gap:22px; flex-wrap:wrap; margin-block-start:26px;
  color:var(--muted); font-size:.9rem; }
.hero-assure span{ display:inline-flex; align-items:center; gap:8px; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:.4px;
  padding:12px 24px; border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; transition:transform .12s, box-shadow .15s, background .15s;
}
.btn.primary{ background:var(--amber); color:#141414;
  box-shadow:0 10px 22px -10px rgba(253,181,21,.7); }
.btn.primary:hover{ transform:translateY(-2px); }
.btn.ghost{ border-color:var(--line); color:var(--text); background:transparent; }
.btn.ghost:hover{ border-color:var(--amber); color:var(--amber); }

/* signature: voltmeter gauge */
.hero-gauge{ display:grid; place-items:center; }
.gauge{
  position:relative; width:210px; height:210px; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, var(--surface-2), var(--surface));
  border:1px solid var(--line);
  box-shadow:inset 0 0 40px rgba(0,0,0,.6), var(--shadow);
}
.gauge::before{
  content:""; position:absolute; inset:14px; border-radius:50%;
  border:2px dashed rgba(253,181,21,.35);
  -webkit-mask:conic-gradient(from 220deg, #000 0 300deg, transparent 300deg);
          mask:conic-gradient(from 220deg, #000 0 300deg, transparent 300deg);
}
.gauge-needle{
  position:absolute; inset-block-start:50%; inset-inline-start:50%;
  width:4px; height:78px; background:linear-gradient(var(--amber),var(--copper));
  transform-origin:bottom center; transform:translate(-50%,-100%) rotate(24deg);
  border-radius:4px; box-shadow:0 0 10px rgba(253,181,21,.6);
  animation:needle 4s ease-in-out infinite alternate;
}
@keyframes needle{ from{ transform:translate(-50%,-100%) rotate(-18deg) } to{ transform:translate(-50%,-100%) rotate(30deg) } }
@media (prefers-reduced-motion:reduce){ .gauge-needle{ animation:none } }
.gauge-face{ position:absolute; inset-block-end:44px; inset-inline:0; text-align:center;
  font-family:var(--display); }
.gauge-val{ font-size:2rem; font-weight:700; color:var(--amber); }
.gauge-unit{ font-size:1rem; color:var(--muted); margin-inline-start:3px; }

/* ---------- sections ---------- */
.section{ padding-block:26px 10px; }
.section-head{ display:flex; align-items:center; gap:16px; margin-block-end:22px; }
.section-head h2{ font-size:1.5rem; font-weight:700; white-space:nowrap; }
.section-head .rule{ flex:1; height:1px;
  background:linear-gradient(90deg, var(--line), transparent); }
body.rtl .section-head .rule{ background:linear-gradient(270deg, var(--line), transparent); }

/* filters */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-block-end:24px; }
.chip{
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  padding:8px 16px; border-radius:999px; font-size:.9rem; font-weight:500;
  transition:all .15s;
}
.chip:hover{ color:var(--text); border-color:var(--copper); }
.chip.on{ background:var(--amber); color:#141414; border-color:var(--amber); font-weight:600; }

/* ---------- product grid + card ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .16s, border-color .16s, box-shadow .16s;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(253,181,21,.45); box-shadow:var(--shadow); }
.card.sold{ opacity:.72; }
.card-media{ position:relative; aspect-ratio:4/3; background:var(--surface-2); display:block; }
.card-media img{ width:100%; height:100%; object-fit:cover; }
.brand-tag{
  position:absolute; inset-block-start:10px; inset-inline-start:10px;
  background:rgba(15,20,25,.85); color:var(--text); font-size:.72rem; font-weight:600;
  padding:3px 9px; border-radius:999px; border:1px solid var(--line);
  font-family:var(--display);
}
.save-tag{
  position:absolute; inset-block-start:10px; inset-inline-end:10px;
  background:var(--green); color:#04160c; font-size:.72rem; font-weight:700;
  padding:3px 9px; border-radius:999px; font-family:var(--display);
}
.card-body{ padding:14px 15px 16px; display:flex; flex-direction:column; gap:9px; flex:1; }
.card-title{ font-family:var(--arabic); font-weight:700; font-size:1.02rem; color:var(--text); }
.card-title:hover{ color:var(--amber); }
.card-specs{ color:var(--muted); font-size:.86rem; margin:0; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  margin-block-start:auto; padding-block-start:4px; }
.price-box{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.price{ font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--amber); }
.price em{ font-size:.72rem; font-style:normal; color:var(--muted); margin-inline-start:2px; }
.price-old{ font-size:.85rem; color:var(--muted); text-decoration:line-through; }
.stock{ font-size:.78rem; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.stock.ok{ color:var(--green); } .stock.no{ color:var(--danger); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--muted); display:inline-block; }
.dot.ok{ background:var(--green); }
.btn.add{ width:100%; background:transparent; border:1px solid var(--amber); color:var(--amber);
  padding:10px; font-size:.95rem; }
.btn.add:hover{ background:var(--amber); color:#141414; }
.btn.add.disabled{ border-color:var(--line); color:var(--muted); cursor:not-allowed; }
.btn.add.disabled:hover{ background:transparent; color:var(--muted); }
.empty{ color:var(--muted); padding-block:30px; text-align:center; }

/* ---------- footer ---------- */
.site-foot{ border-top:1px solid var(--line); margin-block-start:60px;
  background:linear-gradient(var(--bg), var(--surface)); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; padding-block:44px 30px; }
.foot-tag{ color:var(--muted); font-size:.92rem; margin-block:12px 16px; max-width:34ch; }
.assure{ color:var(--muted); font-size:.86rem; display:flex; align-items:center; gap:8px; margin:6px 0; }
.foot-col h4{ font-size:1rem; color:var(--text); margin-block-end:14px; font-weight:600; }
.foot-links a{ display:block; color:var(--muted); padding:5px 0; transition:color .15s; }
.foot-links a:hover{ color:var(--amber); }
.contact-line{ color:var(--muted); font-size:.9rem; margin:5px 0; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  border-top:1px solid var(--line); padding-block:18px; flex-wrap:wrap; }
.copyright{ color:var(--muted); font-size:.84rem; margin:0; }
.credit{ color:var(--muted); font-size:.82rem; letter-spacing:2px; font-family:var(--display);
  margin:0; opacity:.75; }
/* discreet admin entry — nearly invisible, not for customers */
.admin-dot{ color:var(--bg); opacity:.15; cursor:default; user-select:none; }
.admin-dot:hover{ opacity:.15; }

/* ---------- legal / content pages ---------- */
.doc{ max-width:820px; margin-inline:auto; padding-block:40px; }
.doc h1{ font-size:2rem; margin-block-end:8px; }
.doc .updated{ color:var(--muted); font-size:.85rem; margin-block-end:26px; }
.doc h2{ font-size:1.2rem; color:var(--amber); margin-block:28px 10px; }
.doc p, .doc li{ color:#cfd6dd; }
.doc ul{ padding-inline-start:20px; }
.doc .callout{ background:var(--surface); border:1px solid var(--line);
  border-inline-start:3px solid var(--amber); border-radius:var(--radius-sm);
  padding:16px 18px; margin-block:18px; }

/* ---------- responsive ---------- */
@media (max-width:820px){
  .hero{ grid-template-columns:1fr; padding-block:36px 20px; }
  .hero-gauge{ display:none; }
  .main-nav{ display:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .grid{ grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px; }
  .foot-grid{ grid-template-columns:1fr; }
  .head-inner{ gap:12px; }
}

/* focus visibility */
:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; border-radius:4px; }