/* ═══════════════════════════════════════════════════════════════
   banquet.css — صفحة العزومة  (2026-10-09)
   ───────────────────────────────────────────────────────────────
   منقولة عن ملف «عزومة نيرو مكس» الذي أرسله الحاج أيمن، بنفس
   مكوّناته: BorderBeam · ShimmerButton · Marquee · BentoGrid ·
   OrbitingCircles · Dock.

   الصفحة **مستقلّة** عن style.css عمداً: ملف التطبيق القديم فيه
   قواعد عامة (section, .badge, .item) كانت ستتصادم مع مكوّنات
   هذه الصفحة. كل ما هنا مكتفٍ بنفسه، والتناسق مضمون لأن الرموز
   هي نفس رموز skin-live.css حرفاً بحرف.

   الوضع الليلي يعمل هنا تلقائياً (بعكس باقي التطبيق) لأن كل لون
   في هذا الملف رمز، فلا شيء ينكسر.
   ═══════════════════════════════════════════════════════════════ */
@import url('fonts.css');  /* 2026-10-09: الخطوط صارت داخل الموقع — راجع css/fonts.css */

:root{
  --bg:#FFF9F1; --card:#FFFFFF; --ink:#3B2414; --muted:#866A54; --line:#F0E1CC;
  --brand:#E0702F; --brand2:#F2B544; --soft:#FDEBD6; --grid:rgba(224,112,47,.09);
  /* الأبيض على --brand يعطي تبايناً 3.2 والمعيار 4.5؛ هذه الدرجة
     خلف نصوص الأزرار وحدها (4.7). الزبائن يطلبون تحت الشمس. */
  --brand-deep:#C1511C;
  --kufi:"Rakkas","Reem Kufi",serif;
  --body:"Noto Kufi Arabic","Cairo",Tahoma,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#22150B; --card:#2D1D10; --ink:#F8ECDC; --muted:#CDB295; --line:#43301E;
    --brand:#F3843F; --brand2:#F5C460; --soft:#3A2614; --grid:rgba(243,132,63,.10);
    --brand-deep:#F3843F; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#22150B; --card:#2D1D10; --ink:#F8ECDC; --muted:#CDB295; --line:#43301E;
  --brand:#F3843F; --brand2:#F5C460; --soft:#3A2614; --grid:rgba(243,132,63,.10);
  --brand-deep:#F3843F; color-scheme:dark;
}

*{ box-sizing:border-box; }
html,body{ overflow-x:clip; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16.5px; line-height:1.7;
  direction:rtl; padding-bottom:96px;
  -webkit-text-size-adjust:100%;
}
.wrap{ max-width:1160px; margin:0 auto; padding-inline:20px; }
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; text-wrap:balance; }
a{ color:var(--brand-deep); }
:focus-visible{ outline:3px solid var(--brand2); outline-offset:3px; border-radius:10px; }
.logo-d{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-l{ display:none; }
  :root:not([data-theme="light"]) .logo-d{ display:block; }
}
:root[data-theme="dark"] .logo-l{ display:none; }
:root[data-theme="dark"] .logo-d{ display:block; }

.ribbon{
  background:var(--soft); color:var(--muted); font-size:13px; text-align:center;
  padding:6px 16px; font-weight:600; border-bottom:1px solid var(--line);
}
.ribbon a{ color:inherit; }

/* ═══ المقدمة: شبكة نقطية + بقعة ضوء ═══ */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);
}
.hero::after{
  content:""; position:absolute; width:700px; height:700px; top:-380px;
  inset-inline-end:-120px; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--brand2) 35%, transparent), transparent 65%);
}
.top{
  position:relative; z-index:2; display:flex; align-items:center;
  justify-content:space-between; padding-block:16px; gap:12px;
}
.top img{ height:44px; width:auto; }
.hgrid{
  position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr;
  gap:44px; align-items:center; padding-block:30px 64px;
}
.hgrid > *{ min-width:0; }
@media (max-width:900px){ .hgrid{ grid-template-columns:1fr; padding-block:16px 44px; } }

.badge{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line);
  background:var(--card); border-radius:999px; padding:4px 14px 5px;
  font-weight:700; font-size:14px; box-shadow:0 1px 0 var(--line);
}
.badge i{
  width:8px; height:8px; border-radius:50%; background:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent);
  animation:ping 1.6s infinite;
}
@keyframes ping{ 50%{ box-shadow:0 0 0 8px transparent; } }

.grad{
  background:linear-gradient(90deg,var(--brand),var(--brand2),var(--brand));
  background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:gm 4s linear infinite;
}
@keyframes gm{ to{ background-position:200% center; } }

h1{
  font-family:var(--kufi); font-weight:700;
  font-size:clamp(38px,7vw,84px); line-height:1.12; margin-top:16px;
}
.bf{ animation:bf .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes bf{
  from{ opacity:.2; filter:blur(8px); transform:translateY(10px); }
  to{ opacity:1; filter:none; transform:none; }
}
.lead{ color:var(--muted); font-size:18px; max-width:44ch; margin:16px 0 24px; }
.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* ═══ الأزرار ═══ */
.shim{
  position:relative; overflow:hidden; border:0; cursor:pointer;
  font:800 17px var(--body); color:#FFF7EC; background:var(--brand-deep);
  border-radius:14px; padding:11px 26px 13px; text-decoration:none;
  display:inline-flex; gap:8px; align-items:center;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12), 0 10px 24px -10px var(--brand);
}
.shim::after{
  content:""; position:absolute; inset:-2px;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(120%); animation:sh 2.6s infinite;
}
@keyframes sh{ 60%,100%{ transform:translateX(-120%); } }
.ghost{
  font:700 16px var(--body); color:var(--ink); text-decoration:none;
  border:1px solid var(--line); background:var(--card);
  border-radius:14px; padding:10px 20px 12px; cursor:pointer;
}
.trust{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:22px;
  color:var(--muted); font-size:14px; font-weight:600;
}
.trust span::before{ content:"✓ "; color:var(--brand); font-weight:900; }

/* ═══ بطاقة الحاسبة بشعاع دوّار ═══ */
@property --a{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.beam{
  position:relative; border-radius:22px; background:var(--card);
  border:1px solid var(--line); padding:24px;
  box-shadow:0 30px 60px -36px rgba(90,45,10,.45); overflow:hidden;
}
.beam::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--a), transparent 0 75%, var(--brand2) 85%, var(--brand) 92%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spin 5s linear infinite; pointer-events:none;
}
@keyframes spin{ to{ --a:360deg; } }
.beam h3{ font-size:20px; font-weight:900; }
.beam .sub{ color:var(--muted); font-size:14px; margin:0 0 14px; }
.lbl{ display:flex; justify-content:space-between; align-items:baseline; font-weight:700; margin-top:10px; }
.lbl output{ font-family:var(--kufi); font-size:34px; color:var(--brand-deep); font-variant-numeric:tabular-nums; }
input[type=range]{ width:100%; accent-color:var(--brand-deep); margin:6px 0 4px; }
.seg{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  background:var(--soft); padding:5px; border-radius:12px; margin-top:10px;
}
.seg button{
  border:0; background:transparent; font:700 14px var(--body); color:var(--muted);
  padding:7px 4px; border-radius:9px; cursor:pointer;
}
.seg button[aria-pressed="true"]{ background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(80,40,10,.15); }
.res{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.res div{ border:1px solid var(--line); border-radius:14px; padding:10px 12px; background:var(--bg); }
.res b{ display:block; font-family:var(--kufi); font-size:28px; line-height:1.2; font-variant-numeric:tabular-nums; }
.res span{ font-size:13px; color:var(--muted); font-weight:600; }
.hint{ font-size:12.5px; color:var(--muted); margin:10px 0 14px; }
.msg{
  width:100%; font:600 14px/1.6 var(--body); color:var(--ink); background:var(--bg);
  border:1px dashed var(--line); border-radius:12px; padding:10px; resize:none; height:112px;
}
.copyrow{ display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.copyrow small{ color:var(--muted); }
.copyrow .shim{ font-size:15px; padding:8px 18px 10px; }

/* ═══ الشريط المتحرّك ═══ */
.mq{
  overflow:hidden; padding-block:26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.mq-t{ display:flex; gap:16px; width:max-content; direction:ltr; animation:mq 40s linear infinite; }
.mq.rev .mq-t{ animation-name:mq2; }
@keyframes mq{ to{ transform:translateX(-50%); } }
@keyframes mq2{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.mq:hover .mq-t{ animation-play-state:paused; }
.mq figure{
  margin:0; width:190px; flex:none; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:var(--card);
}
.mq img{ width:100%; height:140px; object-fit:cover; }
.mq figcaption{ direction:rtl; font-weight:700; font-size:14px; padding:6px 12px 8px; }

/* ═══ الأقسام ═══ */
section{ padding-block:56px; }
.sh{ text-align:center; max-width:640px; margin:0 auto 34px; }
.sh .k{ font-weight:700; color:var(--brand-deep); font-size:14px; letter-spacing:.03em; }
.sh h2{ font-family:var(--kufi); font-weight:700; font-size:clamp(30px,4.4vw,48px); line-height:1.2; margin-top:4px; }
.sh p{ color:var(--muted); margin:8px 0 0; }

/* ═══ شبكة البنتو ═══ */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:220px; gap:16px; }
.bento .b{
  position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line);
  background:var(--card); display:flex; flex-direction:column; justify-content:flex-end;
}
.bento .b img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.bento .b:hover img{ transform:scale(1.05); }
.bento .b .t{
  position:relative; padding:60px 18px 16px;
  background:linear-gradient(transparent, rgba(46,24,9,.85)); color:#FFF5E8;
}
.bento .b .t h3{ font-size:21px; font-weight:900; }
.bento .b .t p{ margin:0; font-size:14px; opacity:.9; }
.bento .b .t .go{
  display:inline-block; margin-top:4px; font-weight:700; font-size:13px;
  color:#F5C460; transform:translateY(6px); opacity:0; transition:.35s;
}
.bento .b:hover .go, .bento .b:focus-within .go{ transform:none; opacity:1; }
.b1{ grid-column:span 2; grid-row:span 2; }
.b4{ grid-column:span 2; }
@media (max-width:820px){ .bento{ grid-template-columns:1fr 1fr; grid-auto-rows:190px; } .b1{ grid-column:span 2; grid-row:span 1; } .b4{ grid-column:span 2; } }
@media (max-width:480px){ .bento{ grid-template-columns:1fr; } .b1,.b4{ grid-column:span 1; } .bento .b .t .go{ opacity:1; transform:none; } }

/* ═══ المدارات + الخطوات ═══ */
.split2{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.split2 > *{ min-width:0; }
@media (max-width:900px){ .split2{ grid-template-columns:1fr; } }
.orbit{ position:relative; width:min(100%,440px); aspect-ratio:1; margin:0 auto; }
.orbit .ring{ position:absolute; inset:var(--i); border:1px dashed var(--line); border-radius:50%; }
.orbit .core{
  position:absolute; inset:36%; border-radius:50%; background:var(--card);
  border:1px solid var(--line); display:grid; place-items:center;
  box-shadow:0 10px 30px -14px rgba(90,45,10,.5);
}
.orbit .core img{ width:76%; }
.orb{ position:absolute; inset:var(--i); animation:spin2 var(--d) linear infinite; animation-direction:var(--dir,normal); }
.orb span{
  position:absolute; top:50%; left:50%; width:var(--s); height:var(--s);
  margin:calc(var(--s)/-2); border-radius:50%; overflow:hidden;
  border:3px solid var(--card); box-shadow:0 6px 16px -6px rgba(90,45,10,.6);
  transform:rotate(var(--r)) translate(var(--R)) rotate(calc(var(--r)*-1));
}
.orb span img{ width:100%; height:100%; object-fit:cover; animation:spin2 var(--d) linear infinite reverse; animation-direction:var(--rdir,reverse); }
@keyframes spin2{ to{ transform:rotate(360deg); } }

.steps{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.steps li{
  display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start;
  border:1px solid var(--line); background:var(--card); border-radius:16px; padding:14px 16px;
}
.steps .n{
  width:44px; height:44px; border-radius:12px; background:var(--soft);
  color:var(--brand-deep); font-family:var(--kufi); font-size:22px; display:grid; place-items:center;
}
.steps h3{ font-size:18px; font-weight:900; }
.steps p{ margin:0; color:var(--muted); font-size:15px; }

/* ═══ الرصيف العائم ═══ */
.dock{
  position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%); z-index:30; display:flex; align-items:flex-end; gap:8px;
  padding:8px 10px; border-radius:20px;
  background:color-mix(in srgb, var(--card) 82%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--line); box-shadow:0 14px 34px -14px rgba(90,45,10,.5);
}
.dock a, .dock button{
  --z:1; width:calc(46px*var(--z)); height:calc(46px*var(--z)); border-radius:14px;
  display:grid; place-items:center; background:var(--soft); color:var(--brand-deep);
  border:0; cursor:pointer; text-decoration:none; transition:width .15s,height .15s; position:relative;
}
.dock svg{ width:55%; height:55%; }
.dock .tip{
  position:absolute; bottom:115%; white-space:nowrap; background:var(--ink); color:var(--bg);
  font:700 12px var(--body); padding:3px 9px; border-radius:7px; opacity:0; transition:.2s; pointer-events:none;
}
.dock a:hover .tip, .dock button:hover .tip,
.dock a:focus-visible .tip, .dock button:focus-visible .tip{ opacity:1; }

.toast{
  position:fixed; left:50%; bottom:92px; transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:8px 16px; border-radius:12px;
  font-weight:700; font-size:14px; z-index:40;
}

footer{ border-top:1px solid var(--line); padding-block:28px; color:var(--muted); font-size:14px; }
footer .fr{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer code{ font:700 15px var(--body); direction:ltr; display:inline-block; color:var(--ink); user-select:all; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .bento .b .t .go{ opacity:1; transform:none; }
}

/* ═══ الخصم ═══
   يظهر وحده حين يتجاوز الطلب الحدّ. لا نعرض أسعاراً في هذه الصفحة،
   فالخصم تنبيه يُكتب في الرسالة ليبني عليه المطبخ عند التسعير. */
.disc{
  margin:12px 0 0; padding:10px 12px; border-radius:14px;
  background:var(--soft); border:1px solid var(--brand);
  color:var(--ink); font-weight:800; font-size:14.5px; text-align:center;
}
/* نوع بصنف واحد (المفردة والفرشوحة) — يأخذ عرض البطاقة كاملاً
   فلا يبدو نصف الصف فارغاً بلا سبب. */
.res div:only-child{ grid-column:1 / -1; }

/* خمسة خيارات الآن (أُضيف «طلب خاص») — أعمدة مرنة بدل أربعة ثابتة
   حتى لا ينضغط النص على الشاشات الضيقة. */
.seg{ grid-template-columns:repeat(auto-fit, minmax(86px, 1fr)); }

/* ═══ الخطوط المختارة (الحاج أيمن، 2026-10-09) ═══
   العناوين Rakkas والنص Noto Kufi Arabic — اختارهما من مختبر
   الخطوط على المعاينة. Rakkas له وزن واحد (400) وهو ثقيل أصلاً،
   فطلب 700 منه يجعل المتصفّح يُسمّك الحروف صناعياً فتتلطّخ.
   لذلك كل ما يستعمل --kufi يُثبَّت على 400. */
h1, .sh h2, .lbl output, .res b, .steps .n{ font-weight:400; }