/* ═══════════════════════════════════════════
   حكايتي — نظام التصميم (Design tokens)
   warm book-brown + page-amber · playful premium
   ═══════════════════════════════════════════ */
:root{
  --bg:#FFFBEB; --bg-2:#FEF3C7; --bg-3:#FDF6E3;
  --surface:#FFFFFF;
  --glass:rgba(255,255,255,.74); --glass-2:rgba(255,255,255,.5);
  --ink:#1C1917; --ink-2:#44403C; --muted:#78716C;
  --line:#EFE6D5; --line-2:rgba(120,113,108,.22);
  --brand:#92400E; --brand-2:#B45309;
  --accent:#D97706; --accent-2:#F59E0B; --accent-3:#FCD34D;
  --ai:#7C3AED; --ok:#15803D; --risk:#DC2626; --info:#0E7490;
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(28,25,23,.06);
  --sh:0 12px 34px -16px rgba(120,53,15,.30);
  --sh-lg:0 34px 70px -28px rgba(120,53,15,.42);
  --ic-sm:16px; --ic-md:20px; --ic-lg:24px;
  --ring:0 0 0 3px rgba(217,119,6,.30);
  --grad:linear-gradient(135deg,#F59E0B,#B45309);
  --grad-ai:linear-gradient(135deg,#8B5CF6,#7C3AED);
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:64px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Readex Pro',system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.75;
  -webkit-font-smoothing:antialiased; min-height:100dvh; overflow-x:hidden;
}
body::before{
  content:''; position:fixed; inset:-30% -10% auto -10%; height:80vh; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 78% 6%, rgba(245,158,11,.26), transparent 58%),
    radial-gradient(ellipse at 10% 20%, rgba(146,64,14,.11), transparent 55%);
}
h1,h2,h3,h4,h5{font-family:'Baloo Bhaijaan 2','Readex Pro',system-ui,sans-serif; line-height:1.35; font-weight:700}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:rgba(245,158,11,.35)}

/* ── تخطيط أساسي ── */
.wrap{width:100%;max-width:1140px;margin-inline:auto;padding-inline:20px}
.sect{position:relative;z-index:1;padding:64px 0}
.sect-sm{padding:40px 0}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.wrapx{flex-wrap:wrap}
.grow{flex:1}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.tiny{font-size:.76rem}
.mx-auto{margin-inline:auto}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.hide{display:none!important}
.i{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;line-height:0}

/* ── أسطح وبطاقات ── */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm); padding:22px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.card-lift:hover{transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:rgba(217,119,6,.35)}
.glass{
  background:var(--glass); border:1px solid rgba(255,255,255,.75);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-radius:var(--r-lg); box-shadow:var(--sh);
}
.panel{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden}
.pad-16{padding:16px}.pad-24{padding:24px}.pad-32{padding:32px}

/* ── أزرار ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; min-height:46px; border-radius:var(--r-pill);
  font-weight:600; font-size:.95rem; border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, opacity .18s;
  white-space:nowrap;
}
.btn:focus-visible{outline:none; box-shadow:var(--ring)}
.btn-primary{background:var(--grad); color:#fff; box-shadow:0 10px 26px -10px rgba(180,83,9,.65)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(180,83,9,.7)}
.btn-ai{background:var(--grad-ai); color:#fff; box-shadow:0 10px 26px -12px rgba(124,58,237,.6)}
.btn-ai:hover{transform:translateY(-2px)}
.btn-ghost{background:var(--surface); border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{background:#FFFDF6; border-color:rgba(217,119,6,.45); transform:translateY(-2px)}
.btn-quiet{background:transparent; border-color:transparent; color:var(--ink-2)}
.btn-quiet:hover{background:rgba(120,113,108,.1)}
.btn-sm{padding:8px 14px; min-height:38px; font-size:.85rem}
.btn-lg{padding:15px 30px; min-height:56px; font-size:1.05rem}
.btn-block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed; transform:none!important; box-shadow:none}
.btn-icon{padding:0; width:44px; min-height:44px; border-radius:14px}

/* ── شارات ووسوم ── */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--r-pill);
  font-size:.76rem; font-weight:600; background:rgba(217,119,6,.13); color:var(--brand-2);
  border:1px solid rgba(217,119,6,.2);
}
.badge.ai{background:rgba(124,58,237,.11); color:#6D28D9; border-color:rgba(124,58,237,.22)}
.badge.ok{background:rgba(21,128,61,.1); color:var(--ok); border-color:rgba(21,128,61,.2)}
.badge.warn{background:rgba(180,83,9,.12); color:var(--brand-2); border-color:rgba(180,83,9,.22)}
.badge.risk{background:rgba(220,38,38,.1); color:var(--risk); border-color:rgba(220,38,38,.2)}
.badge.info{background:rgba(14,116,144,.1); color:var(--info); border-color:rgba(14,116,144,.2)}
.badge.neutral{background:rgba(120,113,108,.1); color:var(--ink-2); border-color:var(--line-2)}

/* ── حقول الإدخال ── */
.field{display:flex; flex-direction:column; gap:7px}
.field > span.lbl{font-size:.84rem; font-weight:600; color:var(--ink-2); display:flex; gap:6px; align-items:center}
.field .req{color:var(--risk)}
.inp{
  width:100%; padding:12px 14px; background:#FFFDF8; border:1px solid var(--line);
  border-radius:var(--r-sm); font-size:.95rem; transition:border-color .2s, box-shadow .2s, background .2s;
}
textarea.inp{min-height:120px; resize:vertical; line-height:1.8}
.inp:focus{outline:none; border-color:var(--accent); background:#fff; box-shadow:var(--ring)}
.inp.bad{border-color:var(--risk); background:#FEF2F2}
.err{color:var(--risk); font-size:.79rem; display:flex; gap:5px; align-items:center}
.hint{font-size:.77rem; color:var(--muted)}
.hint-count{font-size:.76rem; color:var(--muted); text-align:end}

/* ── شريط التنقل ── */
.nav{
  position:sticky; top:0; z-index:40; height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(255,251,235,.82); backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%}
.logo{display:flex; align-items:center; gap:10px; font-family:'Baloo Bhaijaan 2',sans-serif; font-weight:800; font-size:1.28rem; color:var(--brand)}
.logo-mark{
  width:38px; height:38px; border-radius:12px; background:var(--grad); display:grid; place-items:center;
  color:#fff; box-shadow:0 8px 20px -8px rgba(180,83,9,.8);
}
.logo small{display:block; font-family:'Readex Pro',sans-serif; font-size:.62rem; font-weight:500; color:var(--muted); letter-spacing:.04em; margin-top:-4px}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-link{
  padding:9px 14px; border-radius:var(--r-pill); font-size:.9rem; font-weight:500; color:var(--ink-2);
  cursor:pointer; transition:background .18s, color .18s;
}
.nav-link:hover{background:rgba(217,119,6,.1); color:var(--brand)}
.nav-link.active{background:rgba(217,119,6,.14); color:var(--brand); font-weight:600}
.nav-burger{display:none}
.nav-drawer{display:none}

/* ── قسم الهيرو ── */
.hero{position:relative; z-index:1; padding:56px 0 48px}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center}
.hero h1{font-size:clamp(2rem,4.6vw,3.3rem); font-weight:800; line-height:1.22}
.hero h1 em{font-style:normal; color:var(--brand-2); position:relative}
.hero h1 em::after{
  content:''; position:absolute; inset-inline:-4px; bottom:4px; height:34%; z-index:-1;
  background:linear-gradient(90deg,rgba(252,211,77,.7),rgba(245,158,11,.45)); border-radius:6px;
}
.hero-sub{font-size:1.08rem; color:var(--ink-2); max-width:52ch; margin-top:18px}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.trust{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px; max-width:520px}
.trust div{display:flex; gap:9px; align-items:flex-start; font-size:.82rem; color:var(--ink-2); line-height:1.5}
.trust .i{color:var(--accent); margin-top:3px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:600; color:var(--brand-2);
  background:rgba(255,255,255,.7); border:1px solid var(--line); padding:6px 14px; border-radius:var(--r-pill)}

/* ── عناوين الأقسام ── */
.sect-head{max-width:640px; margin-bottom:34px}
.sect-head.center{margin-inline:auto; text-align:center}
.sect-head h2{font-size:clamp(1.5rem,3vw,2.15rem); font-weight:800}
.sect-head p{color:var(--muted); margin-top:10px; font-size:1rem}

/* ── خطوات كيف يعمل ── */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.step{
  background:var(--glass); border:1px solid rgba(255,255,255,.8); backdrop-filter:blur(14px);
  border-radius:var(--r-lg); padding:20px; box-shadow:var(--sh-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.step:hover{transform:translateY(-4px); box-shadow:var(--sh)}
.step-n{font-family:'Baloo Bhaijaan 2',sans-serif; font-size:1.9rem; font-weight:800; color:rgba(217,119,6,.32); line-height:1}
.step-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(245,158,11,.14);color:var(--brand-2);margin-block:8px 12px}
.step h3{font-size:1.03rem; font-weight:700}
.step p{font-size:.86rem; color:var(--muted); margin-top:6px}

/* ── شبكة المواضيع ── */
.tgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.tcard{
  position:relative; border-radius:var(--r-lg); padding:18px; cursor:pointer; overflow:hidden;
  border:1.5px solid var(--line); background:var(--surface); text-align:start;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s;
}
.tcard:hover{transform:translateY(-4px); box-shadow:var(--sh)}
.tcard::after{content:''; position:absolute; inset:auto -30% -60% auto; width:150px; height:150px; border-radius:50%; background:var(--sw); opacity:.16; transition:opacity .25s}
.tcard:hover::after{opacity:.3}
.tcard .em{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;background:var(--sw);box-shadow:0 10px 24px -12px var(--sw)}
.tcard h3{font-size:1rem; margin-top:12px}
.tcard p{font-size:.8rem; color:var(--muted); margin-top:4px; min-height:2.6em}
.tcard.sel{border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,119,6,.22), var(--sh)}
.tcard .tick{position:absolute; inset-block-start:14px; inset-inline-end:14px; width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:none;place-items:center}
.tcard.sel .tick{display:grid}

/* ── قصة جاهزة / فكرتك ── */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.opt{
  border:1.5px solid var(--line); border-radius:var(--r-lg); padding:22px; background:var(--surface);
  cursor:pointer; transition:border-color .2s, box-shadow .2s, transform .25s var(--ease);
}
.opt:hover{transform:translateY(-3px); box-shadow:var(--sh)}
.opt.sel{border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,119,6,.2)}
.opt h3{font-size:1.08rem}
.opt ul{list-style:none; margin-top:12px; display:flex; flex-direction:column; gap:8px}
.opt li{display:flex; gap:9px; font-size:.87rem; color:var(--ink-2)}
.opt li .i{color:var(--ok); margin-top:4px}

.story-list{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:16px}
.story{
  display:flex; gap:12px; align-items:flex-start; padding:14px; border:1.5px solid var(--line);
  border-radius:var(--r); background:#FFFDF8; cursor:pointer; transition:border-color .2s, background .2s, transform .2s;
}
.story:hover{transform:translateY(-2px); border-color:rgba(217,119,6,.4)}
.story.sel{border-color:var(--accent); background:rgba(217,119,6,.06)}
.story .em{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(245,158,11,.16);color:var(--brand-2);flex:0 0 auto}
.story strong{font-size:.93rem; font-weight:600}
.story span{font-size:.78rem; color:var(--muted)}

/* ── الأسعار ── */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
.plan{border:1.5px solid var(--line); border-radius:var(--r-lg); padding:24px; background:var(--surface); display:flex; flex-direction:column; position:relative}
.plan.hot{border-color:var(--accent); box-shadow:var(--sh)}
.plan-hot-tag{position:absolute; inset-block-start:-13px; inset-inline-start:24px; background:var(--grad); color:#fff; font-size:.72rem; font-weight:600; padding:4px 12px; border-radius:var(--r-pill)}
.plan .amt{font-family:'Baloo Bhaijaan 2',sans-serif; font-size:2rem; font-weight:800; color:var(--brand)}
.plan .amt small{font-size:.85rem; font-weight:500; color:var(--muted)}
.plan ul{list-style:none; display:flex; flex-direction:column; gap:9px; margin:18px 0; font-size:.87rem}
.plan li{display:flex; gap:9px; color:var(--ink-2)}
.plan li .i{color:var(--accent); margin-top:4px}
.plan .btn{margin-top:auto}

/* ── FAQ ── */
.faq{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); margin-bottom:10px; overflow:hidden}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; cursor:pointer; font-weight:600; font-size:.95rem}
.faq-q:hover{background:#FFFDF6}
.faq-a{padding:0 18px 18px; color:var(--ink-2); font-size:.9rem; line-height:1.85}
.faq .chev{transition:transform .25s var(--ease); color:var(--muted)}
.faq.open .chev{transform:rotate(180deg)}

/* ── شريط CTA + الفوتر ── */
.cta-band{
  border-radius:var(--r-xl); padding:44px 36px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#7C2D12,#92400E 55%,#B45309);
  box-shadow:var(--sh-lg);
}
.cta-band::after{content:''; position:absolute; inset:-40% -10% auto auto; width:420px;height:420px;border-radius:50%;background:rgba(252,211,77,.18);filter:blur(30px)}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.1rem); color:#fff}
.cta-band p{color:rgba(255,251,235,.85); max-width:56ch; margin-top:10px}
footer.site{border-top:1px solid var(--line); margin-top:56px; padding:36px 0 28px; position:relative; z-index:1; background:rgba(255,255,255,.5)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:24px}
.foot-grid h4{font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-family:'Readex Pro',sans-serif; font-weight:600}
.foot-grid a,.foot-grid button{display:block; font-size:.87rem; color:var(--ink-2); margin-top:9px; background:none; border:0; padding:0; cursor:pointer; text-align:start}
.foot-grid a:hover,.foot-grid button:hover{color:var(--brand)}
.foot-bot{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:28px; padding-top:18px; border-top:1px solid var(--line); font-size:.79rem; color:var(--muted)}

/* ── معالج الطلب (Wizard) ── */
.wiz{display:grid; grid-template-columns:280px 1fr; gap:28px; align-items:start}
.wiz-side{position:sticky; top:calc(var(--nav-h) + 20px)}
.wiz-steps{list-style:none; display:flex; flex-direction:column; gap:4px}
.wiz-steps li{display:flex; gap:12px; align-items:center; padding:11px 14px; border-radius:var(--r); font-size:.88rem; color:var(--muted); cursor:default}
.wiz-steps li.done{color:var(--ink-2); cursor:pointer}
.wiz-steps li.done:hover{background:rgba(120,113,108,.08)}
.wiz-steps li.now{background:rgba(245,158,11,.13); color:var(--brand); font-weight:600}
.wiz-num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;background:rgba(120,113,108,.14);color:var(--ink-2);flex:0 0 auto}
.wiz-steps li.now .wiz-num{background:var(--grad); color:#fff}
.wiz-steps li.done .wiz-num{background:rgba(21,128,61,.14); color:var(--ok)}
.progress{height:7px; border-radius:99px; background:rgba(120,113,108,.16); overflow:hidden; margin-top:14px}
.progress i{display:block; height:100%; background:var(--grad); border-radius:99px; transition:width .4s var(--ease)}
.wiz-body{min-width:0}
.wiz-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px}
.wiz-head h2{font-size:clamp(1.3rem,2.4vw,1.75rem); font-weight:800}
.wiz-foot{display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:26px; padding-top:20px; border-top:1px solid var(--line)}

/* رفع الصورة */
.drop{
  border:2px dashed var(--line-2); border-radius:var(--r-lg); padding:26px; text-align:center;
  background:#FFFDF8; cursor:pointer; transition:border-color .2s, background .2s;
}
.drop:hover,.drop.over{border-color:var(--accent); background:rgba(245,158,11,.07)}
.drop .ic{width:54px;height:54px;border-radius:18px;background:rgba(245,158,11,.15);color:var(--brand-2);display:grid;place-items:center;margin:0 auto 12px}
.photo-prev{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.photo-thumb{width:104px;height:104px;border-radius:18px;object-fit:cover;border:2px solid var(--line);box-shadow:var(--sh-sm)}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  padding:9px 16px; border-radius:var(--r-pill); border:1.5px solid var(--line); background:var(--surface);
  font-size:.86rem; font-weight:500; cursor:pointer; transition:all .2s;
}
.chip:hover{border-color:rgba(217,119,6,.45)}
.chip.sel{background:var(--grad); border-color:transparent; color:#fff; font-weight:600}
.chip.sel.alt{background:var(--grad-ai)}
.grid-2c{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid-3c{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.radio-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.rc{border:1.5px solid var(--line); border-radius:var(--r); padding:14px; cursor:pointer; background:var(--surface); transition:all .2s}
.rc:hover{transform:translateY(-2px); box-shadow:var(--sh-sm)}
.rc.sel{border-color:var(--accent); background:rgba(217,119,6,.06); box-shadow:0 0 0 3px rgba(217,119,6,.16)}
.rc strong{display:block; font-size:.92rem}
.rc span{font-size:.78rem; color:var(--muted)}
.rc .pr{font-family:'Baloo Bhaijaan 2',sans-serif; color:var(--brand); font-size:1.02rem; font-weight:700; margin-top:6px; display:block}
.stepper{display:inline-flex; align-items:center; gap:0; border:1.5px solid var(--line); border-radius:var(--r-pill); overflow:hidden; background:var(--surface)}
.stepper button{width:44px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-items:center;color:var(--ink-2)}
.stepper button:hover{background:rgba(217,119,6,.1); color:var(--brand)}
.stepper input{width:52px; text-align:center; border:0; background:none; font-weight:700; padding:0}
.stepper input:focus{outline:none}
.summary-list{display:flex; flex-direction:column; gap:0}
.sum-row{display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px dashed var(--line); font-size:.89rem}
.sum-row:last-child{border-bottom:0}
.sum-row .k{color:var(--muted)}
.sum-row .v{font-weight:600; text-align:end}
.sum-total{display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding:16px 18px; border-radius:var(--r); background:rgba(245,158,11,.1); border:1px dashed rgba(217,119,6,.35)}
.sum-total .t{font-family:'Baloo Bhaijaan 2',sans-serif; font-size:1.6rem; font-weight:800; color:var(--brand)}
.checkline{display:flex; gap:10px; align-items:flex-start; font-size:.87rem; color:var(--ink-2); cursor:pointer}
.checkline input{width:20px;height:20px;accent-color:var(--accent); margin-top:3px; flex:0 0 auto}

/* ── معاينة غلاف الكتاب ── */
.book-wrap{display:flex; justify-content:center; perspective:1400px}
.book{
  width:min(320px,88%); aspect-ratio:.72; border-radius:8px 22px 22px 8px; position:relative; overflow:hidden;
  box-shadow:0 42px 60px -30px rgba(28,25,23,.6), 0 0 0 1px rgba(28,25,23,.08);
  background:linear-gradient(160deg,#FFF7E6,#FDE9C1); transform:rotateY(-9deg); transition:transform .5s var(--ease);
}
.book:hover{transform:rotateY(-3deg) translateY(-6px)}
.book .spine{position:absolute; inset-block:0; inset-inline-start:0; width:16px; background:linear-gradient(90deg,rgba(120,53,15,.35),rgba(120,53,15,0)); z-index:3}
.book .b-top{position:absolute; inset:0 0 auto 0; padding:16px 20px; z-index:2; display:flex; justify-content:space-between; align-items:center}
.book .b-photo{position:absolute; inset:64px 20px auto 20px; height:52%; border-radius:14px; overflow:hidden; z-index:1; background:rgba(120,113,108,.16); display:grid; place-items:center}
.book .b-photo img{width:100%;height:100%;object-fit:cover}
.book .b-photo .ph{color:var(--muted); font-size:.8rem; display:flex; flex-direction:column; align-items:center; gap:8px}
.book .b-foot{position:absolute; inset:auto 0 0 0; padding:18px 22px 24px; z-index:2; background:linear-gradient(to top,rgba(255,251,235,.98) 55%,rgba(255,251,235,0)); text-align:center}
.book .b-title{font-family:'Baloo Bhaijaan 2',sans-serif; font-size:1.32rem; font-weight:800; color:#7C2D12; line-height:1.3}
.book .b-sub{font-size:.78rem; color:var(--brand-2); margin-top:4px}
.book .b-orn{position:absolute; width:74px; height:74px; border-radius:50%; border:2px dashed rgba(217,119,6,.4); z-index:0}
.book .o1{inset-block-start:-22px; inset-inline-end:-18px}
.book .o2{inset-block-end:74px; inset-inline-start:-26px}

/* ── شاشة النجاح ── */
.done-card{max-width:660px; margin-inline:auto; text-align:center; padding:44px 32px}
.done-ic{width:84px;height:84px;border-radius:26px;background:rgba(21,128,61,.12);color:var(--ok);display:grid;place-items:center;margin:0 auto 20px}
.code-box{display:flex; align-items:center; justify-content:center; gap:12px; margin:22px 0; padding:18px; border-radius:var(--r); background:#FFFDF6; border:1.5px dashed rgba(217,119,6,.4)}
.code-box code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.4rem; font-weight:700; color:var(--brand); letter-spacing:.06em; direction:ltr}
.done-next{list-style:none; text-align:start; display:flex; flex-direction:column; gap:12px; margin-top:22px}
.done-next li{display:flex; gap:12px; font-size:.9rem; color:var(--ink-2)}
.done-next .i{color:var(--accent); margin-top:4px}
.confetti{position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden}
.confetti i{position:absolute; width:9px;height:9px;border-radius:2px;top:-20px; animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(560deg); opacity:.15}}

/* ── لوحة الإدارة ── */
.adm-top{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.stat{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--glass); backdrop-filter:blur(12px); padding:18px}
.stat .lbl{font-size:.78rem; color:var(--muted); display:flex; align-items:center; gap:6px}
.stat .num{font-family:'Baloo Bhaijaan 2',sans-serif; font-size:1.9rem; font-weight:800; line-height:1.2; margin-top:6px}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:22px 0 16px}
.searchbox{position:relative; flex:1; min-width:220px}
.searchbox .i{position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%); color:var(--muted)}
.searchbox .inp{padding-inline-start:38px}
.filter-chips{display:flex; gap:6px; flex-wrap:wrap}
.fchip{padding:7px 13px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); font-size:.8rem; cursor:pointer; transition:all .18s}
.fchip:hover{border-color:rgba(217,119,6,.4)}
.fchip.sel{background:var(--ink); color:#fff; border-color:var(--ink)}
.otable{width:100%; border-collapse:collapse; font-size:.87rem}
.otable th{text-align:start; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap}
.otable td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
.otable tbody tr{cursor:pointer; transition:background .15s}
.otable tbody tr:hover{background:rgba(245,158,11,.07)}
.mini-photo{width:40px;height:40px;border-radius:12px;object-fit:cover;border:1px solid var(--line)}
.mini-ini{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(217,119,6,.14);color:var(--brand);font-weight:700;font-size:.85rem}
.empty{text-align:center; padding:52px 20px; color:var(--muted)}
.empty .ic{width:64px;height:64px;border-radius:20px;background:rgba(120,113,108,.1);display:grid;place-items:center;margin:0 auto 14px; color:var(--muted)}

/* ── درج تفاصيل الطلب ── */
.drawer-scrim{position:fixed; inset:0; background:rgba(28,25,23,.45); backdrop-filter:blur(3px); z-index:60; animation:fadeIn .2s ease}
.drawer{
  position:fixed; inset-block:0; inset-inline-start:0; width:min(560px,94vw); z-index:61;
  background:var(--bg); border-inline-end:1px solid var(--line); overflow-y:auto;
  box-shadow:0 0 60px rgba(28,25,23,.3); animation:slideIn .32s var(--ease);
}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.drawer-head{position:sticky; top:0; z-index:2; background:rgba(255,251,235,.94); backdrop-filter:blur(12px); padding:16px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:12px}
.drawer-body{padding:20px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:8px 14px; font-size:.88rem}
.kv dt{color:var(--muted)}
.kv dd{font-weight:600; word-break:break-word}
.timeline{list-style:none; display:flex; flex-direction:column; gap:0; position:relative}
.timeline li{display:flex; gap:12px; padding-bottom:16px; position:relative}
.timeline li::before{content:''; position:absolute; inset-inline-start:7px; top:20px; bottom:0; width:2px; background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline .dot{width:16px;height:16px;border-radius:50%;background:var(--accent);flex:0 0 auto;margin-top:5px;box-shadow:0 0 0 4px rgba(245,158,11,.18)}
.timeline .t{font-size:.85rem; font-weight:600}
.timeline .d{font-size:.75rem; color:var(--muted)}
.brief{
  background:#1C1917; color:#F5F5F4; border-radius:var(--r); padding:18px; font-size:.83rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; line-height:1.9; direction:rtl;
  white-space:pre-wrap; word-break:break-word; max-height:340px; overflow:auto;
}
.brief b{color:#FCD34D; font-weight:600}
.badge-pipe{display:flex; gap:6px; flex-wrap:wrap}
.pipe-btn{padding:7px 12px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); font-size:.79rem; cursor:pointer; transition:all .18s; display:inline-flex; align-items:center; gap:6px}
.pipe-btn:hover{border-color:var(--accent); transform:translateY(-1px)}
.pipe-btn.on{background:var(--grad); color:#fff; border-color:transparent; font-weight:600}
.note-box{border:1px solid rgba(124,58,237,.2); background:rgba(124,58,237,.05); border-radius:var(--r); padding:14px 16px; font-size:.84rem; color:#4C1D95}

/* ── تنبيهات ── */
.toast-wrap{position:fixed; inset-block-end:20px; inset-inline-start:20px; z-index:90; display:flex; flex-direction:column; gap:8px; max-width:min(380px,90vw)}
.toast{
  display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:var(--r);
  background:#1C1917; color:#FAFAF9; font-size:.87rem; box-shadow:var(--sh-lg); animation:fadeUp .3s var(--ease);
}
.toast.ok{background:#14532D; color:#DCFCE7}
.toast.err{background:#7F1D1D; color:#FEE2E2}
.toast .i{color:currentColor; opacity:.9}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* ── تحميل / حركات ── */
.skel{background:linear-gradient(90deg,rgba(120,113,108,.08) 25%,rgba(120,113,108,.16) 50%,rgba(120,113,108,.08) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--r-sm)}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.reveal{opacity:0; transform:translateY(18px)}
.reveal.in{opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease)}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}
.spin-wrap{display:grid; place-items:center; min-height:60vh}

/* ── استجابة الشاشات ── */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr; gap:34px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .tgrid{grid-template-columns:repeat(3,1fr)}
  .wiz{grid-template-columns:1fr}
  .wiz-side{position:static}
  .wiz-steps{flex-direction:row; overflow-x:auto; padding-bottom:6px}
  .wiz-steps li{white-space:nowrap}
  .adm-top{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  :root{--nav-h:58px}
  .nav-links{display:none}
  .nav-burger{display:inline-flex}
  .nav-drawer{display:block; position:fixed; inset:var(--nav-h) 0 auto 0; z-index:39; background:rgba(255,251,235,.98);
    backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding:12px; box-shadow:var(--sh);
    animation:fadeUp .25s var(--ease)}
  .nav-drawer a,.nav-drawer button{display:flex; align-items:center; gap:10px; width:100%; padding:13px 14px;
    border:0; background:none; border-radius:var(--r); font-size:.95rem; text-align:start; cursor:pointer}
  .nav-drawer a:hover,.nav-drawer button:hover{background:rgba(217,119,6,.1)}
  .sect{padding:44px 0}
  .tgrid,.price-grid,.two-col,.grid-2c,.grid-3c,.radio-cards,.story-list{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr; gap:10px}
  .hero{padding:34px 0}
  .otable thead{display:none}
  .otable tr{display:grid; grid-template-columns:1fr; gap:6px; padding:14px; border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px}
  .otable td{border:0; padding:2px 0}
  .drawer{width:100vw}
  .wiz-foot{flex-direction:column-reverse}
  .wiz-foot .btn{width:100%}
  .adm-top{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
}
@media print{
  body::before,.nav,footer.site,.no-print{display:none!important}
  .drawer{position:static; width:100%; box-shadow:none; border:0}
  .drawer-scrim{display:none!important}
  body{background:#fff}
}

/* ── ضبط الأيقونات والتفاصيل الصغيرة ── */
.i > svg{width:100%; height:100%; stroke-width:1.75}
.field > span.lbl .i,.badge .i,.btn .i,.chip .i{width:auto; height:auto}
h3 .i,h2 .i{vertical-align:-3px; margin-inline-end:6px}
.foot-grid .i{vertical-align:-3px; margin-inline-end:5px}
.logo-mark .i > svg,.step-ic .i > svg,.tcard .em .i > svg,.done-ic .i > svg{stroke-width:1.8}
.hint .i{vertical-align:-3px; margin-inline-end:3px}
.sum-total .t{font-family:'Baloo Bhaijaan 2',sans-serif}
.tcard .em{display:grid}
select.inp{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(0% + 16px) 55%,calc(0% + 21px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-inline-end:38px}
@media (max-width:520px){ .hide-sm{display:none} }