:root{
  --red:#7d2628;
  --red-deep:#3a1012;
  --gold:#cbb48d;
  --gold-soft:#e3d3b6;
  --cream:#fdfdfd;
  --ink:#2a1614;
  --bar:72px;
  --font:'Tajawal','Segoe UI','Noto Sans Arabic',Tahoma,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--cream);
  background:radial-gradient(120% 90% at 50% 0%, #5a1a1c 0%, var(--red-deep) 55%, #240a0c 100%);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:3px 3px;opacity:.6;
}

/* ---------- الشريط العلوي والسفلي ---------- */
.topbar,.bottombar{
  position:fixed;left:0;right:0;z-index:30;height:var(--bar);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(12px,3vw,28px);
  background:linear-gradient(to bottom,rgba(24,7,8,.92),rgba(24,7,8,0));
}
.topbar{top:0}
.bottombar{
  bottom:0;justify-content:center;gap:clamp(10px,3vw,24px);
  background:linear-gradient(to top,rgba(24,7,8,.92),rgba(24,7,8,0));
  padding-bottom:env(safe-area-inset-bottom);
}
.topbar__brand{display:flex;align-items:center;gap:10px}
.topbar__mark{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--gold);color:var(--gold);font-weight:700;letter-spacing:.5px;font-size:15px;
}
/* عند وجود شعار مرفوع نتخلّى عن دائرة DB ونعرض الصورة كما هي */
.topbar__mark.has-logo,.loader__mark.has-logo{
  border:none;width:auto;height:auto;border-radius:0;animation:none;
}
.topbar__mark.has-logo{max-height:46px}
.loader__mark.has-logo{max-height:120px}
.brandlogo{display:block;max-width:100%;object-fit:contain}
.topbar__mark .brandlogo{height:46px;width:auto}
.loader__mark .brandlogo{height:120px;width:auto}
@media (max-width:640px){
  .topbar__mark .brandlogo{height:38px}
  .loader__mark .brandlogo{height:92px}
}

.topbar__title{font-weight:700;font-size:clamp(15px,2.2vw,19px);letter-spacing:.2px}
.topbar__actions{display:flex;gap:6px}

.iconbtn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 12px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(203,180,141,.28);
  color:var(--gold-soft);font-family:inherit;font-size:13px;font-weight:500;
  transition:background .2s,border-color .2s,color .2s,transform .12s;
}
.iconbtn:hover{background:rgba(203,180,141,.16);border-color:var(--gold);color:#fff}
.iconbtn:active{transform:scale(.96)}
.iconbtn[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#3a1012}
.iconbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.iconbtn--ghost{border-color:transparent;background:none;font-size:16px;padding:6px 10px}
@media (max-width:820px){ .iconbtn span{display:none} .iconbtn{padding:9px} }

.pillbtn{
  min-width:96px;padding:11px 20px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(203,180,141,.3);
  color:var(--gold-soft);font-family:inherit;font-size:14px;font-weight:500;
  transition:background .2s,color .2s,opacity .2s;
}
.pillbtn:hover:not(:disabled){background:var(--gold);color:#3a1012;border-color:var(--gold)}
.pillbtn:disabled{opacity:.32;cursor:default}
.counter{
  min-width:120px;text-align:center;font-size:14px;color:var(--gold-soft);
  font-variant-numeric:tabular-nums;letter-spacing:.5px;
}

/* ---------- المسرح والدفتر ---------- */
.stage{
  position:fixed;inset:0;z-index:10;
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--bar) + 8px) clamp(8px,5vw,84px) calc(var(--bar) + 8px);
}
.bookwrap{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
}
.book{width:100%;height:100%}

.page{background:var(--cream);overflow:hidden}
.page__inner{position:relative;width:100%;height:100%}
.page__img{
  display:block;width:100%;height:100%;object-fit:cover;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
}
/* ظل التجليد عند كعب الدفتر */
.page__inner::after{
  content:"";position:absolute;top:0;bottom:0;width:40px;pointer-events:none;opacity:.9;
}
.page.--right .page__inner::after{
  left:0;background:linear-gradient(to right,rgba(0,0,0,.20),transparent);
}
.page.--left .page__inner::after{
  right:0;background:linear-gradient(to left,rgba(0,0,0,.20),transparent);
}

/* ---------- مناطق الأصناف القابلة للطلب ---------- */
.hotspot{
  position:absolute;display:block;border-radius:12px;
  border:2px solid transparent;background:transparent;
  transition:background .22s,border-color .22s,box-shadow .22s;
  cursor:pointer;
}
.hotspot::after{
  content:"اطلب";
  position:absolute;inset-inline-end:8px;inset-block-end:8px;
  padding:4px 12px;border-radius:999px;
  background:var(--red);color:var(--gold-soft);
  font:600 12px/1.6 var(--font);
  opacity:0;transform:translateY(6px);transition:opacity .22s,transform .22s;
}
.hotspot:hover,.hotspot:focus-visible{
  background:rgba(203,180,141,.18);border-color:var(--gold);
  box-shadow:0 6px 22px rgba(0,0,0,.18);outline:none;
}
.hotspot:hover::after,.hotspot:focus-visible::after{opacity:1;transform:translateY(0)}
body.show-hotspots .hotspot{border-color:rgba(125,38,40,.55);background:rgba(203,180,141,.14)}
body.show-hotspots .hotspot::after{opacity:1;transform:translateY(0)}
.hotspot.pulse{animation:pulse 1.6s ease-out 2}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(125,38,40,0)}
  35%{box-shadow:0 0 0 6px rgba(125,38,40,.16);border-color:rgba(125,38,40,.5)}
}

/* ---------- أزرار التنقل الجانبية ---------- */
.nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:20;
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(24,7,8,.55);border:1px solid rgba(203,180,141,.3);
  color:var(--gold-soft);backdrop-filter:blur(6px);
  transition:background .2s,color .2s,opacity .2s;
}
.nav:hover:not(:disabled){background:var(--gold);color:#3a1012}
.nav:disabled{opacity:.25;cursor:default}
.nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* في الدفتر اللاتيني: السابق يسار والتالي يمين، في الشريطين الجانبي والسفلي */
.book-ltr .bottombar{direction:ltr}
.book-ltr .counter{direction:rtl}
.book-ltr .nav--prev{left:clamp(6px,2vw,26px);right:auto}
.book-ltr .nav--next{right:clamp(6px,2vw,26px);left:auto}
/* في الدفتر العربي يقع "السابق" على اليمين، فنعكس الموضع واتجاه السهم */
.book-rtl .nav--prev{right:clamp(6px,2vw,26px);left:auto}
.book-rtl .nav--next{left:clamp(6px,2vw,26px);right:auto}
.book-rtl .nav svg{transform:scaleX(-1)}
@media (max-width:820px){ .nav{display:none} }

/* ---------- شريط الصفحات المصغّرة ---------- */
.thumbs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(20,6,7,.96);border-top:1px solid rgba(203,180,141,.22);
  padding:12px clamp(10px,3vw,20px) calc(14px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .32s cubic-bezier(.22,.8,.3,1);
}
.thumbs[data-open="true"]{transform:translateY(0)}
.thumbs__head{display:flex;justify-content:space-between;align-items:center;color:var(--gold-soft);font-size:14px;margin-bottom:10px}
.thumbs__strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.thumb{
  flex:0 0 auto;width:74px;cursor:pointer;background:none;border:none;padding:0;
  font-family:inherit;color:var(--gold-soft);
}
.thumb img{
  width:74px;height:103px;object-fit:cover;border-radius:6px;
  border:2px solid transparent;transition:border-color .2s,transform .2s;background:var(--cream);
}
.thumb:hover img{transform:translateY(-3px)}
.thumb[aria-current="true"] img{border-color:var(--gold)}
.thumb span{display:block;font-size:11px;margin-top:5px;text-align:center;opacity:.75}

/* ---------- شاشة التحميل والتلميح ---------- */
.loader{
  position:fixed;inset:0;z-index:90;display:grid;place-content:center;justify-items:center;gap:18px;
  background:var(--red-deep);transition:opacity .5s ease,visibility .5s;
}
.loader[hidden]{display:grid;opacity:0;visibility:hidden;pointer-events:none}
.loader__mark{
  display:grid;place-items:center;width:74px;height:74px;border-radius:50%;
  border:2px solid var(--gold);color:var(--gold);font-size:26px;font-weight:700;
  animation:breathe 2.2s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
.loader__bar{width:190px;height:3px;border-radius:2px;background:rgba(203,180,141,.2);overflow:hidden}
.loader__bar span{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
.loader__text{margin:0;font-size:13px;color:var(--gold-soft);opacity:.8}

.hint{
  position:fixed;z-index:50;left:50%;transform:translateX(-50%);
  bottom:calc(var(--bar) + 14px);
  padding:10px 18px;border-radius:999px;
  background:rgba(20,6,7,.88);border:1px solid rgba(203,180,141,.28);
  color:var(--gold-soft);font-size:13px;text-align:center;
  animation:fadein .4s ease both;
}
@keyframes fadein{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width:520px){ .hint{font-size:12px;padding:9px 14px;width:min(92vw,420px)} }

/* على الجوال نضيّق الأشرطة لتكبير مساحة الصفحة */
@media (max-width:640px){
  :root{--bar:60px}
  .stage{padding-left:6px;padding-right:6px}
  .pillbtn{min-width:84px;padding:10px 16px}
}

.draftbar{
  position:fixed;top:0;left:0;right:0;z-index:95;
  padding:6px 12px;text-align:center;
  background:#ffd15c;color:#3a1012;font:700 12px var(--font);
}
body:has(.draftbar) .topbar{top:28px}

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