/* ============ Design Tokens ============ */
:root{
  --bg:#111315;           /* charcoal */
  --surface:#1A1D1F;      /* deep slate */
  --card:#F3F2EF;         /* bone */
  --text:#FFFFFF;
  --muted:#C7C9CC;
  --gold:#C9A227;
  --cognac:#6B3E2E;
  --success:#17B26A;
  --danger:#E5484D;
  --radius-xl:20px;
  --radius-2xl:28px;
  --shadow:0 6px 30px rgba(0,0,0,.35);
  --ring:1px solid rgba(255,255,255,.12);
  --container:1200px;
  --gap:20px;
  --font-ar:"Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-en:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* RTL/LTR basics */
html[lang="ar"] body{font-family:var(--font-ar);}
html[lang="en"] body{font-family:var(--font-en);}
html,body{height:100%;}
*{box-sizing:border-box}

/* Base */
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  font-size:16px;
}

/* Utilities */
.container{max-width:var(--container); margin:0 auto; padding:0 16px;}
.hide{display:none!important;}
.mt-1{margin-top:8px}.mt-2{margin-top:12px}.mt-3{margin-top:16px}.mt-4{margin-top:24px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:16px}.mb-4{margin-bottom:24px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:999px; border:var(--ring); background:transparent;
  color:var(--text); text-decoration:none; font-weight:600; transition:.25s ease;
}
.btn:hover{background:rgba(255,255,255,.06)}
.btn-primary{background:var(--gold); border-color:transparent; color:#111}
.btn-primary:hover{filter:brightness(.95)}
.btn-outline{background:transparent}
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  border:var(--ring); background:rgba(255,255,255,.05); color:var(--muted); font-size:.8rem;
}

/* Navbar */
.navbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(0,0,0,.35);
  border-bottom:var(--ring);
}
.navbar .row{display:flex; align-items:center; justify-content:space-between; padding:12px 0;}
.logo{height:60px; width:auto; border-radius:12px; padding:6px; border:var(--ring); background:rgba(255,255,255,.03)}
.nav{display:flex; gap:20px}
.nav a{
  color:rgba(255,255,255,.8); text-decoration:none; font-weight:500; transition:.2s;
}
.nav a:hover{color:#fff}
.nav-actions{display:flex; align-items:center; gap:10px}
.lang-toggle{
  padding:8px 10px; min-width:60px; border-radius:12px; border:var(--ring); background:rgba(255,255,255,.05);
  color:#fff; cursor:pointer; transition:.2s;
}
.lang-toggle:hover{background:rgba(255,255,255,.1)}

/* Search (optional placeholder) */
.search{
  position:relative;
}
.search input{
  width:320px; max-width:40vw;
  background:rgba(255,255,255,.05); border:var(--ring); outline:none; color:#fff;
  padding:10px 38px 10px 12px; border-radius:12px;
}
html[dir="rtl"] .search input{padding:10px 12px 10px 38px}
.search .icon{
  position:absolute; top:50%; transform:translateY(-50%);
  color:rgba(255,255,255,.55);
}
html[dir="ltr"] .search .icon{right:10px}
html[dir="rtl"] .search .icon{left:10px}

/* Hero */
.hero{padding:64px 0}
.hero .wrap{
  display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center;
}
.hero .media{
  border-radius:var(--radius-2xl); overflow:hidden; border:var(--ring); box-shadow:var(--shadow);
}
.hero .media img{display:block; width:100%; height:100%; object-fit:cover}
.hero h1{font-size:clamp(28px,4.6vw,54px); line-height:1.15; margin:12px 0 0}
.hero p{color:rgba(255,255,255,.75); margin:14px 0 0; max-width:52ch}
.hero .cta{display:flex; gap:12px; margin-top:20px}

/* Sections */
.section{padding:38px 0}
.section .head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;
}
.section .title{font-size:22px; font-weight:700}
.link{color:var(--gold); text-decoration:none}
.link:hover{text-decoration:underline}

/* Product Grid & Card */
.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(1,minmax(0,1fr));
}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1200px){.grid{grid-template-columns:repeat(4,1fr)}}

.card{
  background:rgba(255,255,255,.05);
  border:var(--ring); border-radius:var(--radius-2xl); overflow:hidden; transition:.25s; box-shadow:var(--shadow);
}
.card:hover{transform:translateY(-2px); border-color:rgba(201,162,39,.6)}
.card .thumb{aspect-ratio:1/1; overflow:hidden}
.card img{width:100%; height:100%; object-fit:cover; transition:transform .3s}
.card:hover img{transform:scale(1.04)}
.card .body{padding:14px}
.card .row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.price{color:var(--muted); font-size:.9rem}
.swatch{display:inline-block; width:12px; height:12px; border-radius:50%; border:1px solid rgba(0,0,0,.25); margin-inline-start:6px}

/* Category tiles */
.cat-grid{display:grid; gap:18px; grid-template-columns:repeat(1,1fr)}
@media (min-width:900px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
.cat{
  position:relative; overflow:hidden; border-radius:var(--radius-2xl); border:var(--ring);
}
.cat img{width:100%; height:260px; object-fit:cover; filter:saturate(.95)}
.cat .label{
  position:absolute; inset:auto 12px 12px 12px; background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px); color:#fff; padding:10px 14px; border-radius:14px; font-weight:700;
  border:1px solid rgba(255,255,255,.15)
}

/* Footer */
.footer{
  border-top:var(--ring); padding:28px 0; color:rgba(255,255,255,.7); font-size:.95rem; text-align:center;
}

/* Forms & Tables (Admin-ready) */
.input, select, textarea{
  width:100%; background:rgba(255,255,255,.05); color:#fff; border:var(--ring);
  border-radius:12px; padding:10px 12px; outline:none;
}
.input:focus, select:focus, textarea:focus{border-color:rgba(201,162,39,.7)}

.table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:16px; border:var(--ring);
}
.table th, .table td{padding:12px 14px; text-align:start}
.table thead th{background:rgba(255,255,255,.06)}
.table tbody tr:nth-child(odd){background:rgba(255,255,255,.03)}
.status{padding:6px 10px; border-radius:999px; font-size:.78rem; border:1px solid rgba(255,255,255,.15)}
.status.new{background:rgba(201,162,39,.12); color:var(--gold)}
.status.processing{background:rgba(255,255,255,.08)}
.status.shipped{background:rgba(23,178,106,.12); color:var(--success)}
.status.cancelled{background:rgba(229,72,77,.12); color:var(--danger)}

/* Responsive tweaks */
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr; gap:20px}
  .search input{width:52vw}
}

/* ===== Floating Cart Button ===== */
.floating-cart{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9999;
  display:flex; align-items:center; gap:12px;
  pointer-events:auto;
  transition:transform .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
  transform:translateY(0);
  text-decoration:none;
}
.floating-cart.hidden{opacity:0; transform:translateY(8px); pointer-events:none}

/* ── fc-btn: reset كل اللي كان هنا وخليه يتتحكم فيه index.html ── */
.floating-cart .fc-btn{
  all:unset;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:0 20px 0 16px !important;
  height:52px !important;
  border-radius:999px !important;
  border:1px solid rgba(147,51,234,.45) !important;
  background:linear-gradient(135deg, rgba(9,6,15,.88), rgba(13,10,26,.82)) !important;
  cursor:pointer !important;
  box-shadow:
    0 0 0 1px rgba(147,51,234,.20) inset,
    0 0 32px rgba(147,51,234,.30),
    0 12px 32px rgba(0,0,0,.60) !important;
  transition:all .25s ease !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  position:relative !important;
  overflow:hidden !important;
  width:auto !important;
  color:#f0e8ff !important;
  font-size:inherit !important;
  font-weight:inherit !important;
}
.floating-cart .fc-btn:hover{
  border-color:rgba(147,51,234,.70) !important;
  box-shadow:
    0 0 0 1px rgba(147,51,234,.30) inset,
    0 0 48px rgba(147,51,234,.45),
    0 16px 40px rgba(0,0,0,.50) !important;
  transform:translateY(-2px) !important;
}

.floating-cart .fc-badge{
  min-width:22px; height:22px; padding:0 5px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#9333ea,#06b6d4);
  color:#fff !important; font-weight:900;
  box-shadow:0 0 10px rgba(147,51,234,.50);
  font-size:.72rem; flex-shrink:0;
}
.floating-cart .fc-badge.pulse{animation:fcPulse .42s ease}
@keyframes fcPulse{0%{transform:scale(.96)}50%{transform:scale(1.08)}100%{transform:scale(1)}}

@media (max-width:520px){
  .floating-cart{right:12px; bottom:12px}
  .floating-cart .fc-btn{height:46px !important; padding:0 16px 0 12px !important}
  .floating-cart .fc-badge{min-width:20px; height:20px; font-size:.68rem}
}