/* ============================================================
   CJ STORE — نظام التصميم
   داكن بميل أخضر، مأخوذ من هوية تصاميم المتجر
   ============================================================ */

:root{
  --bg:        #040605;
  --bg-2:      #070b09;
  --panel:     #0b100d;
  --panel-2:   #0f1611;
  --panel-3:   #141d18;

  --line:      rgba(180,255,215,.08);
  --line-2:    rgba(180,255,215,.15);
  --line-3:    rgba(180,255,215,.26);

  --mint:      #3ddc84;
  --mint-2:    #6df3a8;
  --mint-dim:  #23a463;
  --mint-deep: #0c3722;

  --violet:    #ab7bf7;
  --violet-2:  #c9a6ff;
  --violet-deep:#241640;

  --text:      #edf5f0;
  --text-2:    #9fb2a8;
  --text-3:    #64786d;

  --amber:     #f2c85c;
  --sky:       #63bdf5;
  --rose:      #f58585;

  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --maxw: 1200px;
  --nav-h: 70px;

  --f-display: "Tajawal", "Segoe UI", system-ui, sans-serif;
  --f-body:    "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "Courier New", monospace;

  --ease: cubic-bezier(.22,.7,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 20px)}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:rgba(61,220,132,.28); color:#fff}

/* ---------------------------------------------------------- الخلفية */
.bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.bg .aurora{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; will-change:transform}
.bg .a1{
  width:52vw; height:52vw; top:-16vw; inset-inline-end:-10vw;
  background:radial-gradient(circle, rgba(61,220,132,.55), transparent 68%);
  animation:drift1 24s var(--ease) infinite alternate;
}
.bg .a2{
  width:44vw; height:44vw; top:26vh; inset-inline-start:-14vw;
  background:radial-gradient(circle, rgba(35,164,99,.42), transparent 68%);
  animation:drift2 30s var(--ease) infinite alternate;
}
.bg .a3{
  width:60vw; height:38vw; bottom:-18vw; inset-inline-start:22vw;
  background:radial-gradient(circle, rgba(120,90,220,.2), transparent 70%);
  animation:drift3 34s var(--ease) infinite alternate;
}
@keyframes drift1{to{transform:translate3d(-6vw, 5vh, 0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(7vw, -6vh, 0) scale(1.08)}}
@keyframes drift3{to{transform:translate3d(-5vw, -4vh, 0) scale(1.14)}}

.bg::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(180,255,215,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,255,215,.038) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(1300px 900px at 72% 0%, #000 5%, transparent 76%);
  -webkit-mask-image:radial-gradient(1300px 900px at 72% 0%, #000 5%, transparent 76%);
}
.bg::after{
  content:""; position:absolute; inset:0; opacity:.4; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

.page{position:relative; z-index:1}
.wrap{width:min(100% - 36px, var(--maxw)); margin-inline:auto}

/* ---------------------------------------------------------- سطح بحافة متدرجة */
.panel{
  position:relative;
  background:
    linear-gradient(168deg, var(--panel-2), var(--panel)) padding-box,
    linear-gradient(150deg, rgba(180,255,215,.22), rgba(180,255,215,.04) 42%, rgba(180,255,215,.14)) border-box;
  border:1px solid transparent;
  border-radius:var(--r);
}

/* ---------------------------------------------------------- التنقل */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(4,6,5,.7);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; gap:22px; height:var(--nav-h)}

.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--text); flex:0 0 auto}
.brand img{
  width:36px; height:36px; border-radius:10px; display:block;
  box-shadow:0 0 0 1px var(--line-2), 0 6px 18px -8px rgba(61,220,132,.6);
}
.brand b{font-family:var(--f-mono); font-weight:700; font-size:13px; letter-spacing:.24em; text-transform:uppercase}

.nav-links{display:flex; gap:2px; margin-inline-start:auto}
.nav-links a{
  color:var(--text-2); text-decoration:none; font-size:14.5px; font-weight:500;
  padding:9px 14px; border-radius:10px; transition:color .18s, background .18s;
}
.nav-links a:hover{color:var(--text); background:rgba(180,255,215,.06)}
.nav-actions{display:flex; align-items:center; gap:9px; flex:0 0 auto; margin-inline-start:auto}
.nav-links + .nav-actions{margin-inline-start:0}

.cart-btn{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  padding:9px 15px; border-radius:11px; cursor:pointer;
  background:rgba(180,255,215,.05); border:1px solid var(--line-2);
  color:var(--text); font-family:var(--f-body); font-size:14px; font-weight:500;
  transition:border-color .18s, background .18s;
}
.cart-btn:hover{border-color:var(--line-3); background:rgba(180,255,215,.1)}
.cart-btn svg{width:18px; height:18px}
.cart-btn .n{
  min-width:19px; height:19px; padding:0 5px; border-radius:99px;
  background:var(--mint); color:#04160c; font-family:var(--f-mono);
  font-size:11px; font-weight:700; display:grid; place-items:center;
}
.cart-btn .n:empty{display:none}

/* ---------------------------------------------------------- أزرار */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:12px; border:1px solid transparent;
  font-family:var(--f-body); font-weight:600; font-size:15px;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .2s, background .18s, border-color .18s, color .18s;
}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--mint); outline-offset:3px}

.btn-primary{
  background:linear-gradient(180deg, var(--mint-2), var(--mint) 45%, var(--mint-dim));
  color:#03170d; box-shadow:0 12px 30px -14px rgba(61,220,132,.9);
}
.btn-primary:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(61,220,132,.95)}
.btn-primary::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg); transition:left .55s var(--ease);
}
.btn-primary:hover:not(:disabled)::after{left:130%}

.btn-ghost{border-color:var(--line-2); color:var(--text); background:rgba(180,255,215,.035)}
.btn-ghost:hover:not(:disabled){background:rgba(180,255,215,.09); border-color:var(--line-3)}

.btn-violet{
  background:linear-gradient(180deg, var(--violet-2), var(--violet) 45%, #7d4fd1);
  color:#150a26; box-shadow:0 12px 30px -14px rgba(171,123,247,.9);
}
.btn-violet:hover:not(:disabled){transform:translateY(-2px)}

.btn-sm{padding:9px 16px; font-size:13.5px; border-radius:10px}
.btn-lg{padding:16px 32px; font-size:16.5px; border-radius:14px}
.btn-block{width:100%}

/* ---------------------------------------------------------- أقسام */
section{padding:96px 0; position:relative}
.inner{padding:40px 0 96px}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--mint);
  margin:0 0 14px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:linear-gradient(90deg, transparent, var(--mint))}

h1,h2,h3,h4{font-family:var(--f-display); text-wrap:balance}
h2.title{font-weight:900; font-size:clamp(31px, 4.6vw, 47px); line-height:1.2; margin:0 0 14px; letter-spacing:-.02em}
.lede{color:var(--text-2); font-size:16.5px; max-width:60ch; margin:0}
.head{margin-bottom:44px}
.head.center{text-align:center}
.head.center .eyebrow{justify-content:center}
.head.center .lede{margin-inline:auto}

.rule{font-family:var(--f-display); font-weight:800; font-size:19px; margin:0 0 10px; display:flex; align-items:center; gap:11px}
.rule::before{content:""; width:3px; height:20px; border-radius:2px; flex:0 0 auto; background:linear-gradient(180deg, var(--mint-2), var(--mint-dim))}

/* ---------------------------------------------------------- الواجهة */
.hero{padding:84px 0 66px}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:56px; align-items:center}
.hero h1{font-weight:900; font-size:clamp(40px, 6.6vw, 74px); line-height:1.1; margin:0 0 20px; letter-spacing:-.035em}
.hero h1 .accent{
  background:linear-gradient(100deg, var(--mint-2), var(--mint) 40%, #a8f7cd);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .sub{font-size:17.5px; color:var(--text-2); max-width:52ch; margin:0 0 32px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}

.mark{position:relative; width:min(100%, 330px); margin-inline:auto; aspect-ratio:1; display:grid; place-items:center}
.mark img{width:100%; border-radius:50%; display:block; position:relative; z-index:1}
.mark::before{
  content:""; position:absolute; inset:-16%;
  background:radial-gradient(circle, rgba(61,220,132,.42), transparent 66%);
  filter:blur(30px); animation:breathe 6s ease-in-out infinite;
}
.mark::after{
  content:""; position:absolute; inset:-4%; border-radius:50%;
  border:1px solid var(--line-2); border-top-color:var(--mint); border-right-color:transparent;
  animation:spin 26s linear infinite;
}
@keyframes breathe{0%,100%{opacity:.6; transform:scale(1)} 50%{opacity:1; transform:scale(1.07)}}
@keyframes spin{to{transform:rotate(360deg)}}

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin-top:58px;
}
.stat{background:linear-gradient(180deg, var(--panel-2), var(--panel)); padding:24px 18px; text-align:center}
.stat b{display:block; font-family:var(--f-mono); font-weight:700; font-size:28px; color:var(--mint); font-variant-numeric:tabular-nums; line-height:1.2}
.stat span{font-size:13px; color:var(--text-3)}

/* ---------------------------------------------------------- الخدمات */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.svc{padding:28px 26px; display:flex; flex-direction:column; gap:11px; transition:transform .25s var(--ease), box-shadow .25s}
.svc:hover{transform:translateY(-4px); box-shadow:0 22px 50px -30px rgba(61,220,132,.55)}
.svc .ico{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(160deg, var(--mint-deep), rgba(12,55,34,.4));
  border:1px solid rgba(61,220,132,.22); color:var(--mint); margin-bottom:6px;
}
.svc .ico svg{width:22px; height:22px}
.svc h3{font-weight:800; font-size:20px; margin:0}
.svc p{margin:0; color:var(--text-2); font-size:15px; flex:1}
.svc .price{font-family:var(--f-mono); font-weight:700; font-size:15px; color:var(--mint); margin-top:8px; font-variant-numeric:tabular-nums}
.svc.violet .ico{background:linear-gradient(160deg, var(--violet-deep), rgba(36,22,64,.4)); border-color:rgba(171,123,247,.24); color:var(--violet)}
.svc.violet .price{color:var(--violet)}

/* ---------------------------------------------------------- اليوزرات */
.u-bar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:24px}
.search{position:relative; flex:1 1 260px; min-width:200px}
.search input{
  width:100%; padding:13px 46px 13px 16px;
  background:var(--panel); border:1px solid var(--line-2); border-radius:12px;
  color:var(--text); font-family:var(--f-mono); font-size:14.5px;
  transition:border-color .18s, background .18s;
}
.search input::placeholder{color:var(--text-3); font-family:var(--f-body)}
.search input:focus{outline:none; border-color:var(--mint-dim); background:var(--panel-2)}
.search svg{position:absolute; inset-inline-end:16px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--text-3); pointer-events:none}

.seg{display:flex; gap:1px; background:var(--line); border:1px solid var(--line-2); border-radius:12px; overflow:hidden}
.seg button{
  background:var(--panel); border:0; color:var(--text-2); cursor:pointer;
  padding:12px 17px; font-family:var(--f-body); font-size:13.5px; font-weight:500;
  transition:background .18s, color .18s;
}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--mint-deep); color:var(--mint)}
.seg button:focus-visible{outline:2px solid var(--mint); outline-offset:-2px}

.u-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.u{position:relative; overflow:hidden; padding:16px; display:flex; flex-direction:column; gap:12px; transition:transform .22s var(--ease), box-shadow .22s}
.u:hover{transform:translateY(-3px); box-shadow:0 20px 44px -28px rgba(61,220,132,.6)}
.u .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.u .name{font-family:var(--f-mono); font-weight:500; font-size:17px; letter-spacing:.02em; direction:ltr; unicode-bidi:isolate}
.u .cost{font-family:var(--f-mono); font-weight:700; font-size:15px; color:var(--text-2); font-variant-numeric:tabular-nums; direction:ltr}
.u.top{
  background:
    linear-gradient(150deg, rgba(61,220,132,.13), var(--panel) 55%) padding-box,
    linear-gradient(150deg, rgba(61,220,132,.55), rgba(180,255,215,.08)) border-box;
}
.u.top .cost{color:var(--mint)}
.u .star{
  position:absolute; top:0; inset-inline-start:0;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; font-weight:700;
  background:var(--mint); color:#04160c; padding:3px 10px; border-end-end-radius:9px;
}
.u .add{
  border:1px solid var(--line-2); background:rgba(180,255,215,.04);
  color:var(--text-2); border-radius:9px; padding:9px; cursor:pointer;
  font-family:var(--f-body); font-size:13px; font-weight:600;
  transition:background .18s, color .18s, border-color .18s;
}
.u .add:hover{background:var(--mint); color:#04160c; border-color:var(--mint)}
.u .add:focus-visible{outline:2px solid var(--mint); outline-offset:2px}
.u .add.in{background:var(--mint-deep); color:var(--mint); border-color:rgba(61,220,132,.4)}

.u-empty{grid-column:1/-1; text-align:center; color:var(--text-3); padding:44px; border:1px dashed var(--line-2); border-radius:var(--r)}
.u-foot{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  margin-top:22px; padding-top:20px; border-top:1px solid var(--line); color:var(--text-3); font-size:14px;
}
.u-foot b{font-family:var(--f-mono); color:var(--mint); font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- البوستات */
.boosts{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:800px; margin-inline:auto}
.plan{
  position:relative; overflow:hidden; padding:34px 30px;
  background:
    linear-gradient(170deg, #1b1230, #0b0813) padding-box,
    linear-gradient(150deg, rgba(171,123,247,.5), rgba(171,123,247,.08)) border-box;
  border:1px solid transparent; border-radius:var(--r-lg);
}
.plan::before{
  content:""; position:absolute; top:-38%; right:-22%; width:280px; height:280px;
  background:radial-gradient(circle, rgba(171,123,247,.34), transparent 66%); filter:blur(34px);
}
.plan > *{position:relative}
.plan .tag{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--violet-2); margin:0 0 8px}
.plan h3{font-weight:900; font-size:27px; margin:0}
.plan .amt{font-family:var(--f-mono); font-weight:700; font-size:46px; color:#fff; margin:16px 0 2px; font-variant-numeric:tabular-nums; direction:ltr; letter-spacing:-.02em}
.plan .sar{color:var(--text-2); font-size:15px; margin:0 0 20px}
.plan ul{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:10px}
.plan li{display:flex; gap:10px; align-items:center; color:var(--text-2); font-size:15px}
.plan li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--violet); flex:0 0 auto}
.plan.best .ribbon{
  position:absolute; top:20px; inset-inline-end:-36px;
  background:var(--violet); color:#150a26; font-size:11px; font-weight:700;
  font-family:var(--f-mono); letter-spacing:.1em; padding:5px 40px; transform:rotate(45deg);
}

/* ---------------------------------------------------------- الخطوات */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.step{padding:26px 24px}
.step .n{font-family:var(--f-mono); font-weight:700; font-size:12px; color:var(--mint); letter-spacing:.16em; display:block; margin-bottom:12px}
.step h3{font-weight:800; font-size:18px; margin:0 0 6px}
.step p{margin:0; color:var(--text-2); font-size:14.5px}

/* ---------------------------------------------------------- الدفع */
.pay{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.pay div{display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line-2); border-radius:999px; padding:12px 24px; font-size:15px; color:var(--text-2)}
.pay svg{width:18px; height:18px; color:var(--mint)}

/* ---------------------------------------------------------- الشروط */
.terms{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.tcol{padding:28px 26px}
.tcol ul{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px}
.tcol li{color:var(--text-2); font-size:15px; padding-inline-start:17px; position:relative}
.tcol li::before{content:""; position:absolute; inset-inline-start:0; top:11px; width:6px; height:6px; border-radius:50%; background:var(--mint-dim)}

/* ---------------------------------------------------------- الأسئلة */
.faq{display:grid; gap:10px; max-width:840px; margin-inline:auto}
details{padding:0 24px; transition:box-shadow .22s}
details[open]{box-shadow:0 18px 46px -34px rgba(61,220,132,.7)}
summary{
  cursor:pointer; list-style:none; padding:20px 0;
  font-family:var(--f-display); font-weight:700; font-size:17px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:2px solid var(--mint); outline-offset:3px; border-radius:6px}
summary .chev{width:19px; height:19px; color:var(--mint); flex:0 0 auto; transition:transform .24s var(--ease)}
details[open] summary .chev{transform:rotate(180deg)}
details p{margin:0 0 22px; color:var(--text-2); font-size:15.5px}

/* ---------------------------------------------------------- الختام */
.cta{
  padding:64px 44px; text-align:center; position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:
    linear-gradient(155deg, #0f2a1c, #060a08 62%) padding-box,
    linear-gradient(150deg, rgba(61,220,132,.45), rgba(180,255,215,.06)) border-box;
  border:1px solid transparent;
}
.cta::before{
  content:""; position:absolute; bottom:-62%; left:50%; transform:translateX(-50%);
  width:660px; height:360px; background:radial-gradient(ellipse, rgba(61,220,132,.3), transparent 68%); filter:blur(38px);
}
.cta > *{position:relative}
.cta h2{font-weight:900; font-size:clamp(28px,4.2vw,42px); margin:0 0 14px}
.cta p{color:var(--text-2); margin:0 0 30px; font-size:16.5px}

footer{border-top:1px solid var(--line); padding:34px 0; margin-top:80px}
.foot{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.foot small{color:var(--text-3); font-size:13.5px}
.foot a{color:var(--text-3)}
.foot .mono{font-family:var(--f-mono); letter-spacing:.14em; text-transform:uppercase; font-size:11px}

/* ============================================================
   السلة
   ============================================================ */
.scrim{position:fixed; inset:0; z-index:80; background:rgba(2,4,3,.72); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .28s}
.scrim.on{opacity:1; pointer-events:auto}

.drawer{
  position:fixed; top:0; bottom:0; inset-inline-end:0; z-index:90;
  width:min(100%, 430px); display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--panel-2), var(--bg-2));
  border-inline-start:1px solid var(--line-2);
  transform:translateX(-100%); transition:transform .34s var(--ease);
  box-shadow:30px 0 70px -40px rgba(0,0,0,.9);
}
.drawer.on{transform:translateX(0)}

.drawer-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 22px; border-bottom:1px solid var(--line)}
.drawer-head h3{margin:0; font-weight:800; font-size:19px}
.x{
  background:transparent; border:1px solid var(--line-2); color:var(--text-2);
  width:34px; height:34px; border-radius:10px; cursor:pointer; display:grid; place-items:center;
  transition:color .18s, border-color .18s;
}
.x:hover{color:var(--text); border-color:var(--line-3)}
.x svg{width:16px; height:16px}

.drawer-body{flex:1; overflow-y:auto; padding:16px 22px; display:grid; gap:10px; align-content:start}
.drawer-foot{padding:20px 22px; border-top:1px solid var(--line); display:grid; gap:14px}

.ci{display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px}
.ci .info{flex:1; min-width:0}
.ci .nm{font-family:var(--f-mono); font-size:15px; display:block; direction:ltr; unicode-bidi:isolate; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ci .kd{color:var(--text-3); font-size:12.5px}
.ci .pr{font-family:var(--f-mono); font-weight:700; color:var(--mint); font-size:14.5px; direction:ltr}
.ci .rm{background:transparent; border:0; color:var(--text-3); cursor:pointer; padding:6px; border-radius:8px; transition:color .16s}
.ci .rm:hover{color:var(--rose)}
.ci .rm svg{width:15px; height:15px; display:block}

.cart-empty{text-align:center; color:var(--text-3); padding:56px 20px}
.cart-empty svg{width:40px; height:40px; color:var(--text-3); opacity:.5; margin-bottom:12px}

.sum-row{display:flex; justify-content:space-between; align-items:baseline; font-size:15px}
.sum-row .big{font-family:var(--f-mono); font-size:27px; font-weight:700; color:var(--mint); direction:ltr}

/* ============================================================
   نماذج وصفحات داخلية
   ============================================================ */
.crumb{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin:0 0 20px}
.crumb a{color:var(--mint); text-decoration:none}
.crumb a:hover{text-decoration:underline}

.card{padding:28px 26px}
.card + .card{margin-top:16px}
.card h3{font-weight:800; font-size:19px; margin:0 0 4px}

.two{display:grid; grid-template-columns:1.35fr .85fr; gap:20px; align-items:start}
.sticky{position:sticky; top:calc(var(--nav-h) + 18px)}

.field{display:grid; gap:8px; margin-bottom:18px}
.field label{font-size:14.5px; font-weight:500; color:var(--text-2)}
.req{color:var(--mint)}
.field .hint{font-size:13px; color:var(--text-3)}

input[type=text], input[type=tel], input[type=email], input[type=password],
input[type=search], select, textarea{
  width:100%; padding:13px 15px; background:var(--bg-2);
  border:1px solid var(--line-2); border-radius:12px; color:var(--text);
  font-family:var(--f-body); font-size:15px; transition:border-color .18s, background .18s;
}
textarea{min-height:96px; resize:vertical; line-height:1.7}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--mint-dim); background:var(--panel)}
input::placeholder, textarea::placeholder{color:var(--text-3)}
select{appearance:none; cursor:pointer}

.pick{display:grid; gap:10px}
.pick label{
  display:flex; align-items:flex-start; gap:13px; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:13px;
  padding:16px 17px; transition:border-color .18s, background .18s;
}
.pick label:hover{border-color:var(--line-3)}
.pick input{
  appearance:none; width:18px; height:18px; margin-top:3px; flex:0 0 auto;
  border:2px solid var(--text-3); border-radius:50%; cursor:pointer;
  transition:border-color .18s, box-shadow .18s;
}
.pick input:checked{border-color:var(--mint); box-shadow:inset 0 0 0 4px var(--mint)}
.pick input:focus-visible{outline:2px solid var(--mint); outline-offset:3px}
.pick .t{font-weight:600; font-size:15.5px; display:block}
.pick .d{color:var(--text-3); font-size:13.5px}

.detail{background:var(--bg-2); border:1px dashed var(--line-3); border-radius:13px; padding:17px 19px; margin-top:14px; display:grid; gap:11px}
.detail .row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.detail .k{color:var(--text-3); font-size:13.5px; flex:0 0 auto}
.detail .v{font-family:var(--f-mono); font-size:14.5px; direction:ltr; unicode-bidi:isolate; word-break:break-all; text-align:start; flex:1}
.copy{
  background:transparent; border:1px solid var(--line-2); color:var(--text-2);
  border-radius:9px; padding:6px 12px; font-size:12.5px; cursor:pointer;
  font-family:var(--f-body); flex:0 0 auto; transition:color .16s, border-color .16s;
}
.copy:hover{color:var(--mint); border-color:var(--mint-dim)}

.drop{
  display:block; border:1px dashed var(--line-3); border-radius:13px; padding:30px;
  text-align:center; cursor:pointer; background:var(--bg-2);
  transition:border-color .18s, background .18s;
}
.drop:hover{border-color:var(--mint-dim); background:rgba(61,220,132,.045)}
.drop svg{width:28px; height:28px; color:var(--mint); margin-bottom:10px}
.drop p{margin:0 0 4px; color:var(--text-2); font-size:14.5px}
.drop small{display:block; color:var(--text-3); font-size:13px}
.drop input{display:none}
.drop.has{border-style:solid; border-color:var(--mint-dim)}
.drop img{max-height:180px; border-radius:10px; margin-top:14px}

.summary .line{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:15px}
.summary .line:last-of-type{border:0}
.summary .line span:first-child{color:var(--text-2)}
.summary .line .mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}
.summary .total{display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; padding-top:18px; border-top:1px solid var(--line-2)}
.summary .total b{font-family:var(--f-mono); font-size:28px; color:var(--mint); direction:ltr}

.badge{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:999px; border:1px solid transparent; white-space:nowrap}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.badge.wait{color:var(--amber); background:rgba(242,200,92,.1);  border-color:rgba(242,200,92,.26)}
.badge.paid{color:var(--sky);   background:rgba(99,189,245,.1);  border-color:rgba(99,189,245,.26)}
.badge.done{color:var(--mint);  background:rgba(61,220,132,.1);  border-color:rgba(61,220,132,.28)}
.badge.no{  color:var(--rose);  background:rgba(245,133,133,.1); border-color:rgba(245,133,133,.28)}

.note{border-radius:13px; padding:15px 17px; font-size:14.5px; margin-bottom:18px; border:1px solid var(--line-2); background:var(--bg-2); color:var(--text-2)}
.note.ok{ border-color:rgba(61,220,132,.32);  background:rgba(61,220,132,.08);  color:var(--text)}
.note.bad{border-color:rgba(245,133,133,.34); background:rgba(245,133,133,.08); color:#ffdede}

.track{display:grid; margin-top:8px}
.track .t{display:grid; grid-template-columns:28px 1fr; gap:15px; padding-bottom:22px; position:relative}
.track .t:not(:last-child)::before{content:""; position:absolute; inset-inline-start:13px; top:28px; bottom:0; width:2px; background:var(--line)}
.track .t.on:not(:last-child)::before{background:var(--mint-dim)}
.track .dot{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg-2); border:2px solid var(--line-2); color:var(--text-3);
  font-family:var(--f-mono); font-size:11px; font-weight:700; z-index:1;
}
.track .t.on .dot{border-color:var(--mint); background:var(--mint-deep); color:var(--mint)}
.track h4{margin:3px 0; font-weight:700; font-size:16px}
.track p{margin:0; color:var(--text-3); font-size:14px}

.code{font-family:var(--f-mono); font-weight:700; font-size:22px; letter-spacing:.1em; color:var(--mint); direction:ltr; unicode-bidi:isolate}

/* طلباتي */
.orders{display:grid; gap:14px}
.ordercard{padding:22px 24px}
.ordercard .top{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.ordercard .items{display:grid; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.ordercard .it{display:flex; justify-content:space-between; gap:12px; font-size:14.5px; color:var(--text-2)}
.ordercard .it .nm{font-family:var(--f-mono); direction:ltr; unicode-bidi:isolate}
.ordercard .it .pr{font-family:var(--f-mono); color:var(--text); direction:ltr}
.ordercard .meta{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line); color:var(--text-3); font-size:13.5px;
}
.ordercard .meta b{font-family:var(--f-mono); color:var(--mint); font-size:18px; direction:ltr}

.tabs{display:flex; gap:1px; background:var(--line); border:1px solid var(--line-2); border-radius:12px; overflow:hidden; margin-bottom:24px; flex-wrap:wrap}
.tabs button{background:var(--panel); border:0; color:var(--text-2); cursor:pointer; padding:13px 22px; font-family:var(--f-body); font-size:14.5px; font-weight:500}
.tabs button[aria-selected="true"]{background:var(--mint-deep); color:var(--mint)}
.tabs button:focus-visible{outline:2px solid var(--mint); outline-offset:-2px}

/* ---------------------------------------------------------- جداول */
.tablewrap{overflow-x:auto; border:1px solid var(--line-2); border-radius:var(--r)}
table{width:100%; border-collapse:collapse; min-width:760px; background:var(--panel)}
th, td{padding:14px 16px; text-align:start; border-bottom:1px solid var(--line); font-size:14.5px; vertical-align:middle}
th{color:var(--text-3); font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-family:var(--f-mono); background:var(--bg-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel-2)}
td.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}
.rowbtns{display:flex; gap:6px; flex-wrap:wrap}
.mini{
  border:1px solid var(--line-2); background:transparent; color:var(--text-2);
  border-radius:9px; padding:6px 12px; font-size:12.5px; cursor:pointer;
  font-family:var(--f-body); transition:color .15s, border-color .15s;
}
.mini:hover{color:var(--text); border-color:var(--line-3)}
.mini.go{color:var(--mint); border-color:rgba(61,220,132,.36)}
.mini.no{color:var(--rose); border-color:rgba(245,133,133,.34)}
.mini:focus-visible{outline:2px solid var(--mint); outline-offset:2px}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px}
.kpi{padding:20px 22px}
.kpi b{display:block; font-family:var(--f-mono); font-size:27px; color:var(--text); font-variant-numeric:tabular-nums}
.kpi span{font-size:13px; color:var(--text-3)}
.kpi.acc b{color:var(--mint)}

.login{max-width:430px; margin:70px auto}
.authswitch{text-align:center; margin-top:18px; color:var(--text-3); font-size:14px}
.authswitch button{background:none; border:0; color:var(--mint); cursor:pointer; font-family:var(--f-body); font-size:14px; font-weight:600; padding:0}
.authswitch button:hover{text-decoration:underline}

dialog{
  background:var(--panel-2); color:var(--text); border:1px solid var(--line-3);
  border-radius:var(--r-lg); padding:28px; max-width:min(94vw, 470px); width:100%;
}
dialog::backdrop{background:rgba(2,4,3,.76); backdrop-filter:blur(4px)}
dialog h3{margin:0 0 18px}
.dlg-btns{display:flex; gap:10px; margin-top:8px}
.dlg-btns .btn{flex:1}
.shot{max-width:100%; border-radius:11px; border:1px solid var(--line-2)}

/* ---------------------------------------------------------- توست */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translate(-50%, 130%); z-index:120;
  background:var(--panel-3); border:1px solid var(--line-3); border-radius:13px;
  padding:13px 22px; font-size:14.5px; font-weight:500; max-width:88vw;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.9);
  transition:transform .34s var(--ease); pointer-events:none;
}
.toast.on{transform:translate(-50%, 0)}
.toast.ok{border-color:rgba(61,220,132,.42)}
.toast.bad{border-color:rgba(245,133,133,.45)}

/* ---------------------------------------------------------- الجوال */
@media (max-width:1080px){ .u-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:940px){
  section{padding:74px 0}
  .hero-grid{grid-template-columns:1fr; gap:36px}
  .mark{order:-1; width:min(100%, 200px)}
  .svc-grid, .terms, .steps{grid-template-columns:repeat(2,1fr)}
  .u-grid{grid-template-columns:repeat(2,1fr)}
  .two{grid-template-columns:1fr}
  .sticky{position:static}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none}
}
@media (max-width:620px){
  section{padding:58px 0}
  .svc-grid, .terms, .steps, .boosts{grid-template-columns:1fr}
  .u-grid{grid-template-columns:repeat(2,1fr); gap:10px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .cta{padding:44px 24px}
  .card{padding:22px 20px}
  .brand b{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ============================================================
   إضافات: كلمة السر، اللغة، الكوبون
   ============================================================ */
.pwwrap{position:relative; display:block}
.pwwrap input{padding-inline-end:46px}
.eye{
  position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; display:grid; place-items:center;
  background:transparent; border:0; border-radius:9px; cursor:pointer;
  color:var(--text-3); transition:color .16s, background .16s;
}
.eye:hover{color:var(--mint); background:rgba(180,255,215,.06)}
.eye:focus-visible{outline:2px solid var(--mint); outline-offset:2px}
.eye svg{width:19px; height:19px; display:block}

.lang-btn{
  background:rgba(180,255,215,.05); border:1px solid var(--line-2); color:var(--text-2);
  border-radius:11px; padding:9px 13px; cursor:pointer;
  font-family:var(--f-mono); font-size:12px; font-weight:600; letter-spacing:.06em;
  transition:color .18s, border-color .18s, background .18s;
}
.lang-btn:hover{color:var(--text); border-color:var(--line-3); background:rgba(180,255,215,.1)}
.lang-btn:focus-visible{outline:2px solid var(--mint); outline-offset:2px}

.sarline{color:var(--text-3); font-size:12.5px; font-family:var(--f-mono)}
.coupon-label{display:block; font-size:14px; font-weight:500; color:var(--text-2); margin:20px 0 8px}
.coupon-row{margin-top:0}
.u .sarline{margin-top:-6px}

.coupon-row{display:flex; gap:8px; margin-top:16px}
.coupon-row input{flex:1; text-transform:uppercase; font-family:var(--f-mono); direction:ltr; text-align:center}
.coupon-on{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:14px; padding:11px 14px; border-radius:11px;
  background:rgba(61,220,132,.09); border:1px solid rgba(61,220,132,.32);
}
.coupon-on .c{font-family:var(--f-mono); font-weight:700; color:var(--mint); direction:ltr}

.codebox{
  display:flex; gap:8px; justify-content:center; direction:ltr; margin:6px 0 18px;
}
.codebox input{
  width:100%; text-align:center; font-family:var(--f-mono); font-size:26px;
  letter-spacing:12px; padding:16px 10px; direction:ltr;
}

/* اتجاه انزلاق السلة حسب لغة الصفحة */
html[dir="ltr"] .drawer{transform:translateX(100%); box-shadow:-30px 0 70px -40px rgba(0,0,0,.9)}
html[dir="ltr"] .drawer.on{transform:translateX(0)}

/* إبراز طريقة الدفع المختارة */
.pick label:has(input:checked){border-color:var(--mint-dim); background:rgba(61,220,132,.07)}