/* ==========================================================
   گيمنگ ستور ++ — هوية: كحلي داكن · سماوي · أبيض فقط
   ========================================================== */
:root {
  --navy-900: #030915;
  --navy-800: #071326;
  --navy-700: #0b1c38;
  --navy-600: #10294e;
  --sky:      #06bdfb;
  --sky-soft: rgba(6, 189, 251, .14);
  --sky-line: rgba(6, 189, 251, .28);
  --white:    #ffffff;
  --text:     rgba(255, 255, 255, .94);
  --muted:    rgba(255, 255, 255, .62);
  --faint:    rgba(255, 255, 255, .10);

  --radius:   16px;
  --radius-sm: 10px;
  --gutter:   16px;
  --bar-h:    56px;
  --shadow:   0 10px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  background: var(--navy-900);
  background-image:
    radial-gradient(900px 500px at 85% -10%, rgba(6, 189, 251, .16), transparent 60%),
    radial-gradient(700px 400px at -10% 30%, rgba(6, 189, 251, .07), transparent 60%);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 16px);
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
/* بلا شريط سفلي من 900px */
@media (min-width: 900px) { body { padding-bottom: 12px; } }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 8px; }

.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }
.small { font-size: .82rem; }

/* ---------- Header ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: rgba(3, 9, 21, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--faint);
}
.topbar-inner { display: flex; align-items: center; gap: 12px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; margin-inline-end: auto; }
.brand-name { font-weight: 900; font-size: 1.1rem; white-space: nowrap; color: var(--white); }

.logo-slot {
  position: relative; flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; overflow: hidden;
}
.logo-slot:not(.missing) { border: 1px solid var(--sky-line); }
.logo-slot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-placeholder {
  display: none; width: 100%; height: 100%;
  border: 1.5px dashed var(--sky-line); border-radius: 12px;
  font-size: .55rem; font-weight: 700; line-height: 1.2; text-align: center;
  color: var(--sky); place-items: center; padding: 2px;
}
.logo-slot.missing img { display: none; }
.logo-slot.missing .logo-placeholder { display: grid; }

/* الترويسة على الشاشات الضيقة: الأزرار لا تنكمش، والاسم يأخذ ما بقي دون أن يركب عليها */
.topbar-inner > .btn { flex: none; }
.brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* روابط الترويسة: «الرئيسية» وزر واحد صغير «أقسام المتجر» يفتح قائمة الأقسام، ثم «طلباتي» و«فتح البوت».
   التنقل العلوي للكمبيوتر والآيباد العرضي (من 900px). أقل من ذلك (الهاتف والآيباد العمودي) يبقى الشعار وحده
   في الترويسة، والتنقل من شريط الاختصارات السفلي. */
.top-links { display: flex; align-items: center; gap: 8px; }
.top-links .btn { min-height: 36px; padding: 0 12px; font-size: .84rem; gap: 6px; }
.top-links .btn svg { width: 16px; height: 16px; }
.home-btn[aria-current="page"] { border-color: var(--sky); color: var(--sky); }
.store-btn .chev { width: 14px; height: 14px; transition: transform .2s ease; }
.store-btn[aria-expanded="true"] { border-color: var(--sky); color: var(--sky); }
.store-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* قائمة «أقسام المتجر»: روابط الأقسام الأربعة، والقسم المفتوح حالياً مميّز */
.store-menu { position: relative; }
.store-menu-list {
  position: absolute; top: calc(100% + 10px); inset-inline-start: 0; z-index: 5; min-width: 240px;
  display: grid; gap: 2px; padding: 6px;
  border-radius: 14px; background: var(--navy-800); border: 1px solid var(--sky-line); box-shadow: var(--shadow);
}
.store-menu-list a, .sections-list a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px;
  font-size: .95rem; font-weight: 700; color: var(--text); white-space: nowrap;
}
.store-menu-list a:hover, .store-menu-list a:focus-visible, .sections-list a:hover, .sections-list a:focus-visible { background: var(--faint); color: var(--white); }
.store-menu-list a[aria-current="page"], .sections-list a[aria-current="page"] { background: var(--sky-soft); color: var(--sky); }
/* القائمة نفسها داخل النافذة السفلية (زر «أقسام المتجر» في شريط الاختصارات) */
.sections-list { display: grid; gap: 4px; margin-top: 10px; }
.sections-list a { min-height: 48px; background: var(--navy-700); border: 1px solid var(--faint); }

/* أزرار الترويسة مخفية افتراضياً وتظهر من 900px بنفس شرط إخفاء الشريط السفلي، حتى لا يظهر الاثنان معاً
   ولا يختفيا معاً عند عرض كسري بين 899 و900 */
.topbar-inner.has-links > :not(.brand) { display: none; }
@media (min-width: 900px) {
  .topbar-inner.has-links > .top-links { display: flex; }
  .topbar-inner.has-links > .btn { display: inline-flex; }
  .topbar-inner.has-links > .brand { margin-inline-end: 8px; }
  .top-links { margin-inline-end: auto; }
}
/* جرس الإشعارات: يبقى ظاهراً في كل المقاسات (القاعدة أعلاه تخفي كل ما عدا الشعار تحت 900px) */
.bell {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: inline-grid; place-items: center;
  border: 1.5px solid var(--sky-line); color: var(--white); background: rgba(255, 255, 255, .03);
  transition: border-color .2s ease, transform .12s ease;
}
.bell:hover { border-color: var(--sky); }
.bell:active { transform: scale(.94); }
.bell svg { width: 20px; height: 20px; }
.bell-badge {
  position: absolute; top: -6px; inset-inline-start: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: grid; place-items: center; background: var(--sky); color: var(--navy-900);
  font-size: .7rem; font-weight: 900; font-style: normal; line-height: 1; box-shadow: 0 0 0 2px var(--navy-900);
}
.topbar-inner.has-links > .bell { display: inline-grid; }
@media (max-width: 420px) {
  .topbar-inner { gap: 8px; }
  .brand { gap: 8px; }
  .brand-name { font-size: .95rem; }
  .logo-slot { width: 38px; height: 38px; border-radius: 10px; }
  .topbar-inner > .btn-sm { padding: 0 10px; font-size: .82rem; }
  .topbar-inner > .btn-primary svg { display: none; }
}
/* أضيق الهواتف (320 تقريباً): يبقى الاسم كاملاً بتصغير بسيط */
@media (max-width: 350px) {
  .topbar-inner, .brand { gap: 6px; }
  .brand-name { font-size: .85rem; }
  .logo-slot { width: 34px; height: 34px; }
  .topbar-inner > .btn-sm { padding: 0 8px; font-size: .8rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 18px; border-radius: 12px;
  font-weight: 800; font-size: .92rem; white-space: nowrap;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--sky); color: var(--navy-900); box-shadow: 0 6px 20px rgba(6, 189, 251, .3); }
.btn-outline { border: 1.5px solid var(--sky-line); color: var(--white); background: rgba(255, 255, 255, .03); }
.btn-outline:hover { border-color: var(--sky); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: .85rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }

.demo-note {
  margin: 12px 0 0; padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--sky-soft); border: 1px solid var(--sky-line);
  color: var(--white); font-size: .8rem; text-align: center;
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  margin-top: 14px; padding: 26px 20px 20px;
  border-radius: 22px;
  background: linear-gradient(160deg, var(--navy-600) 0%, var(--navy-800) 70%);
  border: 1px solid var(--sky-line);
  box-shadow: var(--shadow);
}
.hero::before {
  content: ""; position: absolute; inset: auto -30% -60% auto;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 189, 251, .35), transparent 65%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.hero > * { position: relative; z-index: 1; }
.hero-logo {
  display: block; width: 132px; height: 132px; object-fit: contain;
  border-radius: 20px; border: 1px solid var(--sky-line); margin-bottom: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}
.hero-logo.missing { display: none; }
.hero-kicker {
  display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px;
  background: var(--sky-soft); color: var(--sky); font-weight: 800; font-size: .78rem; letter-spacing: .08em;
  direction: ltr;
}
.hero h1 { margin: 0; font-size: 1.8rem; line-height: 1.3; font-weight: 900; color: var(--white); text-wrap: balance; }
.hero h1 span { color: var(--sky); }
.hero-sub { margin: 10px 0 18px; color: var(--muted); font-size: .95rem; max-width: 50ch; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-actions .btn { flex: 1 1 140px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.hero-stats div {
  background: rgba(3, 9, 21, .5); border: 1px solid var(--faint);
  border-radius: 12px; padding: 10px 6px; text-align: center;
}
.hero-stats b { display: block; font-size: 1.35rem; font-weight: 900; color: var(--white); line-height: 1.2; }
.hero-stats span { font-size: .72rem; color: var(--muted); line-height: 1.3; display: block; }

/* ---------- Sections ---------- */
.section { margin-top: 28px; scroll-margin-top: 76px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-head h1, .section-head h2 { margin: 0; font-size: 1.2rem; font-weight: 900; color: var(--white); }
/* عنوان الصفحة المستقلة للقسم */
.section-head h1 { font-size: 1.4rem; }
.section-head h1::before, .section-head h2::before {
  content: ""; display: inline-block; width: 4px; height: 1em; margin-inline-end: 8px;
  vertical-align: -2px; border-radius: 2px; background: var(--sky);
}

.kinds-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 8px; }
.kind-card {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border-radius: var(--radius); background: var(--navy-700); border: 1px solid var(--faint);
}
.kind-icon { font-size: 1.6rem; line-height: 1; }
.kind-card b { color: var(--white); font-size: 1.05rem; }
.kind-card p { margin: 0; color: var(--muted); font-size: .88rem; }

/* ---------- Toolbar ---------- */
.toolbar { display: grid; gap: 10px; }
.search {
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 14px; border-radius: 14px;
  background: var(--navy-700); border: 1px solid var(--faint);
  transition: border-color .2s ease;
}
.search:focus-within { border-color: var(--sky); }
.search svg { color: var(--muted); flex: none; width: 20px; height: 20px; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 1rem; }
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { display: none; }
.search-clear { color: var(--muted); width: 28px; height: 28px; border-radius: 8px; }

.segmented {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
  padding: 4px; border-radius: 14px; background: var(--navy-700); border: 1px solid var(--faint);
}
.segmented button { height: 40px; border-radius: 10px; font-weight: 800; color: var(--muted); transition: background .2s, color .2s; direction: ltr; }
.segmented button[aria-selected="true"] { background: var(--sky); color: var(--navy-900); }

/* ---------- Status pills (شكل لا لون: تعبئة / إطار / منقّط) ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: .72rem; font-weight: 800; padding: 2px 10px; border-radius: 999px; white-space: nowrap;
}
.pill-available { background: var(--sky); color: var(--navy-900); }
.pill-waiting   { border: 1.5px solid var(--sky); color: var(--sky); background: rgba(3, 9, 21, .6); }
.pill-full      { border: 1.5px dashed rgba(255, 255, 255, .4); color: var(--muted); background: rgba(3, 9, 21, .6); }

.legend {
  list-style: none; margin: 12px 0 14px; padding: 10px 12px; display: grid; gap: 6px;
  border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); border: 1px solid var(--faint);
  font-size: .8rem; color: var(--muted);
}
.legend li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Product cards ---------- */
/* الشبكة لكل أقسام المتجر: بطاقتان بالصف على الهاتف، 3 على الآيباد (من 700px)، و4 على الكمبيوتر الواسع (من 1200px) */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius); background: var(--navy-800);
  border: 1px solid var(--faint);
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--sky-line); }

/* صورة المنتج: مساحة طولية 4:5 أعلى البطاقة. الصورة تظهر كاملة داخلها دون قصّ أي جزء منها.
   إذا لم تتوفر صورة في المشروع لا تُحجز هذه المساحة: يظهر مكان مؤقت صغير فقط. */
.cover {
  position: relative; overflow: hidden; flex: none;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(6, 189, 251, .22), transparent 60%),
    linear-gradient(180deg, var(--navy-600), var(--navy-900));
  border-bottom: 1px solid var(--faint);
}
.cover.has-img { aspect-ratio: 4 / 5; }
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.cover-missing {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; margin: 6px; padding: 6px 8px;
  border: 1.5px dashed var(--sky-line); border-radius: 10px; background: rgba(3, 9, 21, .35); text-align: center;
}
.cover-missing svg { flex: none; width: 18px; height: 18px; color: var(--sky); }
.cover-missing b { font-size: .7rem; font-weight: 700; line-height: 1.3; color: var(--muted); }
.cover.has-img .cover-missing { display: none; }
/* وسم المنصة فوق الصورة فقط؛ المكان المؤقت الصغير يبقى بلا وسم */
.plat-tag {
  position: absolute; top: 8px; left: 8px; direction: ltr; z-index: 1;
  font-size: .66rem; font-weight: 800; padding: 1px 8px; border-radius: 6px;
  background: rgba(3, 9, 21, .75); border: 1px solid var(--sky-line); color: var(--white);
}
.cover:not(.has-img) .plat-tag { display: none; }
.card-title { margin: 0; font-size: .95rem; font-weight: 800; color: var(--white); line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }

/* البطاقة المختصرة (كل أقسام المتجر): الصورة، ثم الاسم، ثم السعر وحالة التوفر. البطاقة كلها زر يفتح الخيارات */
.pcard { cursor: pointer; }
.pcard:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: var(--radius); }
.pcard-body { padding: 10px; display: grid; gap: 6px; align-content: start; flex: 1; }
.pcard-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
.pcard-price { min-width: 0; font-size: .78rem; color: var(--muted); }
.pcard-price b { color: var(--white); font-size: .92rem; font-weight: 900; white-space: nowrap; }
@media (min-width: 700px) {
  .card-title { font-size: 1.05rem; }
  .pcard-body { padding: 12px; gap: 8px; }
  .pcard-price { font-size: .86rem; }
  .pcard-price b { font-size: 1rem; }
  .cover-missing { min-height: 64px; margin: 8px; }
  .cover-missing b { font-size: .76rem; }
}

/* نافذة تفاصيل المنتج: الخيارات (سعر ومدة وحالة لكل خيار)، ثم طريقتا المتابعة بعد الاختيار */
.sheet .opt-sub { margin-bottom: 4px; }
.opt-about { margin: 0 0 4px; font-size: .84rem; color: var(--muted); }
.opt-list { display: grid; gap: 8px; margin-top: 10px; }
.opt {
  display: grid; gap: 5px; width: 100%; padding: 10px 12px; text-align: start;
  border-radius: 12px; background: var(--navy-700); border: 1.5px solid var(--faint);
  transition: border-color .2s ease, background .2s ease;
}
.opt:hover:not([disabled]) { border-color: var(--sky-line); }
.opt.is-selected { border-color: var(--sky); background: var(--sky-soft); }
.opt[disabled] { opacity: .6; cursor: not-allowed; }
.opt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.opt-name { font-weight: 800; color: var(--white); font-size: .98rem; }
.opt-desc { font-size: .78rem; color: var(--muted); }
.opt-terms { display: block; }
.opt-price { font-size: .86rem; color: var(--muted); }
.opt-price b { color: var(--white); font-size: 1rem; font-weight: 900; }
.opt-note { font-size: .8rem; color: var(--muted); }
.opt-note b { color: var(--white); }
.opt-next { margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px dashed var(--sky-line); background: rgba(3, 9, 21, .45); }
.opt-hint { margin: 0; text-align: center; font-size: .86rem; color: var(--muted); }
.opt-next-title { margin: 0 0 8px; font-size: .88rem; color: var(--muted); }
.opt-next-title b { color: var(--white); }
/* طريقتا المتابعة: زران صغيران جنب بعض */
.opt-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt-ways .btn { min-height: 40px; padding: 0 8px; font-size: .86rem; box-shadow: none; }
.opt-way-note { margin: 8px 0 0; font-size: .78rem; color: var(--muted); }

.kr-prices { display: flex; flex-wrap: wrap; gap: 6px; }
.price-chip {
  display: inline-flex; flex-direction: column; padding: 4px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--faint); line-height: 1.3;
}
.price-chip b { color: var(--white); font-size: .95rem; font-weight: 900; }
.price-chip small { color: var(--muted); font-size: .72rem; }
.price-chip.has-offer { border-color: var(--sky-line); }
.price-chip s, .choice s, .summary s, .req-box s { color: var(--muted); font-weight: 600; font-size: .85em; }
.price-chip .offer-tag { color: var(--sky); font-weight: 800; }

.empty { text-align: center; padding: 36px 16px; color: var(--muted); border: 1px dashed var(--faint); border-radius: var(--radius); }

/* ---------- Booking form ---------- */
.form { display: grid; gap: 14px; margin-top: 12px; }
.field { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > label, .field > legend { font-size: .84rem; font-weight: 700; color: var(--muted); padding: 0; }
.field input[type="text"], .field input[type="tel"], .field select {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px;
  background: var(--navy-700); border: 1px solid var(--faint); outline: 0; font-size: 1rem;
}
.field input:focus, .field select:focus { border-color: var(--sky); }
.field select option { background: var(--navy-800); }
.field .err { display: none; font-size: .78rem; color: var(--white); }
.field.invalid .err { display: block; }
.field.invalid input[type="text"], .field.invalid input[type="tel"], .field.invalid select { border-color: var(--white); border-style: dashed; }
.field .hint { font-size: .76rem; color: var(--muted); }

.choice-row { display: grid; gap: 8px; }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice > span {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  min-height: 48px; padding: 8px 14px; border-radius: 12px; cursor: pointer;
  background: var(--navy-700); border: 1.5px solid var(--faint); font-weight: 800; color: var(--white);
  transition: border-color .2s, background .2s;
}
.choice input:checked + span { border-color: var(--sky); background: var(--sky-soft); }
.choice input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 2px; }
.choice input:disabled + span { opacity: .5; cursor: not-allowed; border-style: dashed; }
.choice small { color: var(--muted); font-weight: 600; font-size: .76rem; }
.choice-row.cols-2 { grid-template-columns: 1fr 1fr; }

.summary {
  display: grid; gap: 6px; padding: 12px; border-radius: 12px;
  background: rgba(3, 9, 21, .55); border: 1px solid var(--sky-line);
}
.summary .row { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.summary .row span { color: var(--muted); }
.summary .row b { color: var(--white); text-align: end; }
.summary .row.dates b { direction: ltr; unicode-bidi: plaintext; }
.summary .sum-note { margin: 4px 0 0; font-size: .76rem; color: var(--muted); }

.check { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; }
.check input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--sky); }
.check .err { display: none; font-size: .78rem; }
.field.invalid .check { color: var(--white); }
.terms-box { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--faint); font-size: .82rem; }
.terms-box summary { cursor: pointer; font-weight: 700; color: var(--sky); }
.terms-box ul, .terms-box ol { margin: 8px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; color: var(--muted); }
.terms-box ol { padding-inline-start: 22px; }
.phone-shown { direction: ltr; unicode-bidi: plaintext; color: var(--white); font-weight: 800; }

.msg-preview {
  margin: 10px 0; padding: 12px; border-radius: 12px; max-height: 240px; overflow: auto;
  background: rgba(3, 9, 21, .6); border: 1px solid var(--faint);
  font-family: inherit; font-size: .84rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; color: var(--text);
}
.status-steps { margin: 8px 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: .88rem; }

/* الترويسة ثابتة أعلى الصفحة بسطر واحد: 62px على الهاتف و70px من 900px */
@media (min-width: 900px) { .section { scroll-margin-top: 86px; } }

/* ---------- Permanent accounts & Plus ---------- */
.temp-note {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-size: .85rem;
  border: 1.5px dashed var(--sky-line); background: rgba(3, 9, 21, .55); color: var(--white);
}

/* ---------- Request status (تجربة محلية) ---------- */
.my-req { position: relative; }
.dot {
  position: absolute; top: 6px; inset-inline-start: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--sky); box-shadow: 0 0 0 2px var(--navy-900);
}

.req-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px; }
.req-code { direction: ltr; padding: 3px 10px; border-radius: 8px; background: var(--sky-soft); color: var(--sky); font-weight: 900; letter-spacing: .05em; font-size: .85rem; }
.pill-lg { font-size: .85rem; padding: 4px 14px; }
.pill-rejected  { border: 1.5px dashed rgba(255, 255, 255, .5); color: var(--white); background: rgba(3, 9, 21, .6); }
.pill-cancelled { border: 1.5px dashed rgba(255, 255, 255, .3); color: var(--muted); background: rgba(3, 9, 21, .6); }
.req-sub { margin: 0 0 10px; color: var(--muted); font-size: .85rem; }

.req-box { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--navy-700); border: 1px solid var(--faint); margin: 10px 0; }
.req-box .row { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.req-box .row span { color: var(--muted); }
.req-box .row b { color: var(--white); text-align: end; }
.req-box .row.dates b { direction: ltr; unicode-bidi: plaintext; }
.req-box .row.hl b { color: var(--sky); }
.req-note { margin: 4px 0 0; font-size: .78rem; color: var(--muted); }
.req-box .row.was span, .req-box .row.was b { color: var(--muted); font-weight: 600; }
.box-sep {
  margin: 6px 0 0; padding-top: 8px; border-top: 1px dashed var(--faint);
  font-size: .76rem; font-weight: 800; color: var(--sky);
}
.req-box > .box-sep:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.file-btn { cursor: pointer; }

/* ===== الاشتراك الشهري: حالة العضوية، الأزرار، المكتبة ===== */
.mo-status { display: grid; gap: 4px; margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--navy-800); border: 1px solid var(--faint); font-size: .9rem; }
.mo-status p { margin: 0; color: var(--white); }
.mo-status .mo-sub-line { color: var(--sky); font-weight: 700; padding-top: 6px; border-top: 1px solid var(--faint); margin-top: 4px; }
.mo-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.mo-actions .btn { min-height: 44px; padding: 6px 8px; font-size: .84rem; white-space: normal; line-height: 1.35; text-align: center; }
.mo-lib-head { margin-top: 22px; }
.mo-lib-head h2 { min-width: 0; }
.mo-lib-head .muted { white-space: nowrap; flex: none; }
.mo-status p { overflow-wrap: anywhere; }
/* ===== الحسابات الدائمية: أزرار الأنواع، زر «طلباتي»، أزرار واتساب مع النسخ ===== */
.pm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pm-actions .btn { min-height: 44px; }
.pm-wa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.pm-wa .btn-sm { min-height: 44px; }
.mo-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--navy-700); border: 1px solid var(--faint); margin-bottom: 8px; }
.mo-item b { display: block; color: var(--white); }
.mo-item span { color: var(--muted); font-size: .82rem; }
@media (min-width: 720px) { .mo-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cancel-confirm { margin: 12px 0; padding: 12px; border-radius: 12px; border: 1.5px dashed var(--sky-line); background: rgba(3, 9, 21, .55); }
.cancel-confirm p { margin: 0 0 10px; font-size: .9rem; }
.cancel-confirm .sheet-actions { margin-top: 0; }


/* ---------- Steps / info ---------- */
.paths { display: grid; gap: 12px; margin-bottom: 10px; }
.paths h3 { margin: 0 0 8px; font-size: 1rem; color: var(--white); }
.plain-steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: .9rem; }
.plain-steps li::marker { color: var(--sky); font-weight: 800; }
/* ===== الشروحات والتعليمات ===== */
.guides-grid { display: grid; gap: 12px; margin-bottom: 10px; }
.guide-card { display: grid; gap: 10px; align-content: start; min-width: 0; }
.guide-card h3 { margin: 0; font-size: 1.05rem; color: var(--white); }
.guide-card .rules { margin: 0; }
.guide-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.guide-kind { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--navy-800); border: 1px solid var(--faint); }
.guide-kind b { color: var(--white); }
.guide-kind span { font-size: .85rem; color: var(--muted); }
.guide-pay { display: grid; gap: 8px; }
.guide-pay > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--navy-800); border: 1px solid var(--faint); }
.guide-pay span { font-size: .78rem; color: var(--muted); font-weight: 700; }
.guide-pay b { color: var(--white); font-size: .95rem; }
.guide-pay small { color: var(--muted); font-size: .78rem; }
.guide-media { margin: 0; padding: 8px 12px; border-radius: 10px; border: 1.5px dashed var(--sky-line); font-size: .82rem; color: var(--muted); }
#guides a { color: var(--sky); }
@media (min-width: 1000px) { .guides-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }

.notice-line {
  margin: 0; padding: 10px 12px; border-radius: 12px; font-size: .85rem;
  background: var(--sky-soft); border: 1px solid var(--sky-line); color: var(--white);
}
.steps { margin: 0 0 8px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; }
.steps li {
  counter-increment: s; position: relative; padding: 10px 14px; padding-inline-start: 50px;
  border-radius: 12px; background: var(--navy-700); border: 1px solid var(--faint); font-size: .92rem;
}
.steps li::before {
  content: counter(s); position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sky); color: var(--navy-900); font-weight: 900; font-size: .85rem;
}
.info-card { padding: 14px; border-radius: var(--radius); background: var(--navy-700); border: 1px solid var(--faint); }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.fact { padding: 10px; border-radius: 12px; background: rgba(3, 9, 21, .5); border: 1px solid var(--faint); text-align: center; }
.fact b { display: block; color: var(--white); font-size: 1.25rem; font-weight: 900; line-height: 1.2; }
.fact span { color: var(--muted); font-size: .76rem; }
.rules { margin: 0 0 10px; padding-inline-start: 18px; display: grid; gap: 6px; font-size: .9rem; }
.rules li::marker { color: var(--sky); }
.rules b { color: var(--white); }

/* ---------- الرئيسية: بطاقات «خدمات ومعلومات» (رابط لصفحة، أو زر يفتح نافذة الدعم) ---------- */
.home-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 760px) { .home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* بطاقات «أقسام المتجر» الأربع: واحدة بالصف على الموبايل، 2 على الشاشة المتوسطة، و4 على الكمبيوتر */
@media (min-width: 600px) { .home-grid.home-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .home-grid.home-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.home-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 12px; min-width: 0;
  width: 100%; text-align: start;
  padding: 14px; border-radius: var(--radius); background: var(--navy-800); border: 1px solid var(--faint);
  transition: border-color .2s ease, transform .12s ease;
}
.home-card:hover, .home-card:focus-visible { border-color: var(--sky); }
.home-card:active { transform: scale(.99); }
.home-icon {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  font-size: 1.5rem; background: var(--sky-soft); border: 1px solid var(--sky-line);
}
.home-text { display: grid; gap: 2px; min-width: 0; }
.home-text b { color: var(--white); font-size: 1.05rem; font-weight: 800; }
.home-text span { color: var(--muted); font-size: .85rem; line-height: 1.6; }
/* ملاحظة صغيرة داخل البطاقة (مثل: رقم الدعم غير مضبوط) */
.home-text .home-note { font-size: .76rem; color: var(--sky); }

/* ---------- صفحة «غير موجودة» (404.html): صفحة مستقلة بلا ترويسة ولا شريط سفلي ---------- */
body.notfound-page { padding-bottom: 0; }
.notfound {
  min-height: 100vh; min-height: 100dvh; padding: 32px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
}
.notfound .brand { margin: 0 0 12px; }
.notfound-code { margin: 0; font-size: 4.5rem; font-weight: 900; line-height: 1; color: var(--sky); direction: ltr; }
.notfound h1 { margin: 0; font-size: 1.5rem; font-weight: 900; color: var(--white); }
.notfound .muted { margin: 0 0 10px; }

.footer {
  margin-top: 36px; padding: 18px 0 8px; border-top: 1px solid var(--faint);
  display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 800;
}
/* روابط «خدمات ومعلومات» في تذييل صفحات الأقسام (لا تظهر في الرئيسية لأن بطاقاتها هناك) */
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-bottom: 16px; }
.footer-links-title { flex-basis: 100%; text-align: center; font-size: .8rem; font-weight: 700; color: var(--muted); }
.footer-links > a, .footer-links > button {
  display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--faint); background: rgba(255, 255, 255, .03);
  font-size: .84rem; font-weight: 700; color: var(--text); white-space: nowrap;
}
.footer-links > a:hover, .footer-links > a:focus-visible, .footer-links > button:hover, .footer-links > button:focus-visible { border-color: var(--sky-line); color: var(--white); }
.footer-links > a[aria-current="page"] { border-color: var(--sky); color: var(--sky); }

/* ---------- شريط الاختصارات السفلي: ثابت وصغير، للهاتف والآيباد العمودي فقط (أقل من 900px) ----------
   الرئيسية، أقسام المتجر، طلباتي، الدعم، فتح البوت. المحتوى يترك مساحة أسفله (padding-bottom على body) حتى لا يغطيه. */
.bottom-nav {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-inline: max(4px, env(safe-area-inset-left, 0px)) max(4px, env(safe-area-inset-right, 0px));
  background: rgba(3, 9, 21, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--faint);
}
.bottom-nav > * {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; font-size: .66rem; font-weight: 700; line-height: 1.2; color: var(--muted);
}
.bottom-nav > * > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav svg { width: 20px; height: 20px; }
.bottom-nav > *:hover, .bottom-nav > *:focus-visible, .bottom-nav > [aria-current] { color: var(--sky); }
/* الدعم أو البوت بلا رابط مضبوط: الزر يبقى ظاهراً بلون أخف، ويفتح نافذة توضّح ذلك بدل رابط */
.bottom-nav > .is-off { opacity: .55; }
.bottom-nav .dot { top: 6px; inset-inline-start: calc(50% + 6px); }
@media (min-width: 900px) { .bottom-nav { display: none; } }

/* ---------- Sheet ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(3, 9, 21, .7); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s; }
.sheet-backdrop.show { opacity: 1; }
.sheet {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--navy-800); border: 1px solid var(--sky-line); border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding: 10px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  visibility: hidden;
}
.sheet.open { transform: translateY(0); visibility: visible; }
.sheet-handle { width: 44px; height: 5px; border-radius: 3px; background: var(--faint); margin: 0 auto 8px; }
.sheet-close {
  position: absolute; top: 12px; inset-inline-start: 12px;
  width: 36px; height: 36px; border-radius: 10px; background: var(--faint); color: var(--white); z-index: 2;
}
.sheet h3 { margin: 4px 0 2px; font-size: 1.25rem; font-weight: 900; color: var(--white); padding-inline-start: 46px; }
.sheet .lead { color: var(--muted); margin: 4px 0 12px; font-size: .92rem; }
.handoff-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--navy-700); border: 1px solid var(--faint); margin-bottom: 12px; }
.handoff-card b { display: block; color: var(--white); }
.handoff-card span { color: var(--muted); font-size: .82rem; }
.notice {
  margin: 12px 0; padding: 10px 12px; border-radius: 12px; font-size: .85rem;
  background: var(--sky-soft); border: 1px solid var(--sky-line); color: var(--white);
}
.sheet-actions { display: grid; gap: 8px; margin-top: 12px; }

.toast {
  position: fixed; z-index: 60; left: 50%; bottom: calc(var(--bar-h) + 16px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 12px; max-width: calc(100% - 32px);
  background: var(--white); color: var(--navy-900); font-weight: 800; font-size: .9rem; box-shadow: var(--shadow);
  transition: all .25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* تنبيه «إشعار جديد»: يظهر والصفحة مفتوحة، والضغط عليه يفتح نافذة الإشعارات */
.toast.toast-link { width: max-content; text-align: center; white-space: normal; }
.toast.toast-link.show { pointer-events: auto; cursor: pointer; }

/* ---------- الإشعارات (نافذة «الإشعارات» للعميل، وسجل الإشعارات في لوحة المسؤول) ---------- */
.ntf { padding: 12px; border-radius: 14px; background: var(--navy-700); border: 1px solid var(--faint); margin-bottom: 10px; }
.ntf.is-new { border-color: var(--sky-line); background: linear-gradient(180deg, var(--sky-soft), rgba(6, 189, 251, 0) 70%), var(--navy-700); }
.ntf-meta { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--muted); }
.ntf-meta time { margin-inline-start: auto; white-space: nowrap; }
.ntf-tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; color: var(--sky); }
.ntf-new { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--sky); color: var(--navy-900); font-weight: 900; }
.ntf-title { margin: 6px 0 2px; font-weight: 900; color: var(--white); overflow-wrap: anywhere; }
.ntf-body { margin: 0; font-size: .88rem; line-height: 1.75; color: var(--text); overflow-wrap: anywhere; }
.ntf-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ntf-btns .btn { min-height: 36px; padding: 4px 12px; font-size: .8rem; white-space: normal; text-align: center; }
.ntf-key { direction: ltr; unicode-bidi: isolate; font-size: .74rem; color: var(--muted); overflow-wrap: anywhere; }
.ntf-empty { padding: 18px 12px; text-align: center; color: var(--muted); border: 1.5px dashed var(--sky-line); border-radius: 14px; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (min-width: 600px) {
  .paths { grid-template-columns: 1fr 1fr; }
  .kinds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding: 32px 28px 24px; }
  .hero h1 { font-size: 2.2rem; }
  .facts { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 900px) {
  .topbar-inner { height: 70px; }
  .logo-slot { width: 48px; height: 48px; }
  .home-card { padding: 18px; }

  .hero { display: grid; grid-template-columns: 1.5fr 1fr; align-items: end; gap: 28px; padding: 44px 40px; }
  .hero h1 { font-size: 2.8rem; }
  .hero-logo { width: 168px; height: 168px; }
  .hero-actions .btn { flex: 0 0 auto; }
  .hero-stats { grid-template-columns: 1fr; margin: 0; }
  .hero-stats div { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
  .hero-stats b { order: 2; }

  .toolbar { grid-template-columns: 1fr; align-items: center; }
  .legend { grid-template-columns: repeat(3, auto); justify-content: space-between; }
  #how .steps { grid-template-columns: repeat(5, 1fr); }
  #how .steps li { padding: 44px 12px 14px; text-align: center; }
  #how .steps li::before { inset-inline-start: calc(50% - 13px); top: 12px; transform: none; }

  .sheet {
    inset: 50% auto auto 50%; width: min(520px, 92vw); max-height: 88vh;
    border-radius: 22px; border-bottom: 1px solid var(--sky-line); padding: 22px 24px;
    transform: translate(-50%, -46%) scale(.98); opacity: 0;
    transition: transform .25s ease, opacity .25s ease, visibility .25s;
  }
  .sheet.open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .sheet-handle { display: none; }
  .toast { bottom: 24px; }
}

/* ==========================================================
   Motion — الحركة والتأثيرات (CSS فقط + js/motion.js، بلا مكتبات)
   تعمل فقط إذا كان على <html> الصنف motion، ويضيفه js/layout.js عندما لا يطلب الجهاز تقليل الحركة.
   فبدون JavaScript أو مع «تقليل الحركة» يظهر كل شيء مباشرة بلا إخفاء.
   الحركة على transform و opacity فقط حتى تبقى سلسة على الهواتف؛ الضبابية (blur) للشاشات ذات الفأرة فقط.
   ========================================================== */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* ---------- 1) دخول العناصر عند ظهورها في الشاشة ----------
   العنصر يبدأ شفافاً ومنخفضاً قليلاً، ويرتفع إلى مكانه عندما يضيف له js/motion.js الصنف rv-in
   (IntersectionObserver، مرة واحدة لكل عنصر، وتأخير متدرّج بين العناصر التي تظهر معاً). */
.motion main :is(.demo-note, .hero, .section-head, .temp-note, .toolbar, .legend, .notice-line, .info-card, .kind-card, .home-card, .pcard, .pm-actions, .footer) {
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), filter .6s ease-out;
}
.motion main :is(.demo-note, .hero, .section-head, .temp-note, .toolbar, .legend, .notice-line, .info-card, .kind-card, .home-card, .pcard, .pm-actions, .footer):not(.rv-in) {
  opacity: 0; transform: translateY(28px) scale(.97); will-change: opacity, transform;
}
.motion main .section-head:not(.rv-in) { transform: translateY(-18px); }
@media (hover: hover) and (pointer: fine) {
  .motion main :is(.hero, .section-head, .home-card, .pcard, .info-card, .kind-card):not(.rv-in) { filter: blur(4px); }
}
/* بعد انتهاء الدخول: انتقالات التفاعل العادية (الحوم والضغط) */
.motion main .rv-done { transition: border-color .25s ease, box-shadow .25s ease, transform .35s var(--ease-out); }

/* ---------- 2) الصور داخل البطاقات ----------
   تدخل الصورة بتلاشٍ وتكبير خفيف يهدأ عند اكتمال تحميلها، وتقترب قليلاً عند الحوم على البطاقة أو الضغط عليها. */
.cover-img { transition: transform .7s cubic-bezier(.4, 0, .2, 1), opacity .5s ease; }
.motion .cover-img:not(.is-loaded) { opacity: 0; transform: scale(1.08); }
.pcard:active .cover-img { transform: scale(1.05); }
@media (hover: hover) { .pcard:hover .cover-img { transform: scale(1.07); } }

/* ---------- 3) البطاقات: ارتفاع وإمالة ثلاثية الأبعاد مع الفأرة، خط ضوء علوي، وبقعة ضوء تتبع المؤشر ---------- */
.pcard, .home-card { position: relative; }
.pcard::before, .home-card::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(6, 189, 251, .16), transparent 65%);
  opacity: 0; transition: opacity .4s ease;
}
.pcard::after, .home-card::after {
  content: ""; position: absolute; top: 0; inset-inline: 14%; height: 2px; z-index: 3; pointer-events: none; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--sky), transparent); box-shadow: 0 0 12px var(--sky);
  opacity: 0; transition: opacity .35s ease;
}
.pcard:active::after, .home-card:active::after, .pcard:focus-visible::after, .home-card:focus-visible::after { opacity: 1; }
.pcard:active, .home-card:active { transform: scale(.975); border-color: var(--sky); }
@media (hover: hover) {
  .pcard:hover, .home-card:hover { transform: translateY(-4px); border-color: var(--sky); box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 26px rgba(6, 189, 251, .16); }
  .pcard:hover::before, .home-card:hover::before, .pcard:hover::after, .home-card:hover::after { opacity: 1; }
  /* الإمالة تضبطها js/motion.js عبر المتغيرين ‎--rx و ‎--ry أثناء حركة الفأرة فوق البطاقة */
  .motion .pcard.is-tilt, .motion .home-card.is-tilt {
    transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
    transition: border-color .25s ease, box-shadow .25s ease, transform .12s ease-out;
  }
  .motion .pcard.is-tilt:active, .motion .home-card.is-tilt:active { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(.98); }
}
/* أيقونة بطاقة القسم في الرئيسية */
.home-icon { transition: transform .45s var(--ease-out), box-shadow .3s ease; }
.home-card:active .home-icon { transform: scale(1.08); }
@media (hover: hover) { .home-card:hover .home-icon { transform: scale(1.14) rotate(-6deg); box-shadow: 0 0 22px rgba(6, 189, 251, .35); } }

/* ---------- 4) الأزرار ---------- */
.btn { transition: transform .18s var(--ease-out), background .2s ease, border-color .2s ease, box-shadow .25s ease; }
@media (hover: hover) {
  .btn-primary:not([disabled]):hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(6, 189, 251, .5); }
  .btn-outline:not([disabled]):hover { background: rgba(6, 189, 251, .08); }
}
.btn:not([disabled]):active { transform: scale(.96); }
/* لمعة تمرّ على زر الواجهة الرئيسي كل بضع ثوانٍ */
.motion .hero-actions .btn-primary { position: relative; overflow: hidden; }
.motion .hero-actions .btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-130%) skewX(-18deg);
  animation: gsShine 4.8s ease-in-out infinite;
}
@keyframes gsShine { 0%, 62% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(310%) skewX(-18deg); } }

/* ---------- 5) الواجهة الرئيسية: حركة هادئة مستمرة للشعار والتوهج ---------- */
.motion .hero-logo { animation: gsFloat 6s ease-in-out infinite; }
.motion .hero::before { animation: gsGlow 7s ease-in-out infinite; }
@keyframes gsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes gsGlow { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

/* ---------- 6) النافذة السفلية: فتح وإغلاق أنعم، ومحتواها يدخل متدرّجاً عند كل خطوة ---------- */
.sheet { transition: transform .45s var(--ease-out), visibility 0s linear .45s; }
.sheet.open { transition: transform .45s var(--ease-out), visibility 0s; }
.sheet-backdrop { transition: opacity .3s ease; }
@media (min-width: 900px) {
  .sheet { transition: transform .32s var(--ease-out), opacity .25s ease, visibility 0s linear .32s; }
  .sheet.open { transition: transform .32s var(--ease-out), opacity .25s ease, visibility 0s; }
}
@keyframes gsRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.motion .sheet.open .sheet-body > * { animation: gsRise .42s var(--ease-out) both; }
.motion .sheet.open .sheet-body > :nth-child(2) { animation-delay: .04s; }
.motion .sheet.open .sheet-body > :nth-child(3) { animation-delay: .08s; }
.motion .sheet.open .sheet-body > :nth-child(4) { animation-delay: .12s; }
.motion .sheet.open .sheet-body > :nth-child(5) { animation-delay: .16s; }
.motion .sheet.open .sheet-body > :nth-child(n+6) { animation-delay: .2s; }
/* اختيار خيار: نبضة صغيرة للخيار، وطريقتا المتابعة تدخلان بعده */
@keyframes gsPop { 0% { transform: scale(.975); } 60% { transform: scale(1.012); } 100% { transform: scale(1); } }
.motion .opt.is-selected { animation: gsPop .32s var(--ease-out); }
.motion #optNext > * { animation: gsRise .36s var(--ease-out) both; }
.motion #optNext > :nth-child(2) { animation-delay: .05s; }
.motion #optNext > :nth-child(n+3) { animation-delay: .1s; }
.opt:not([disabled]):active { transform: scale(.985); }
.opt { transition: border-color .2s ease, background .2s ease, transform .18s var(--ease-out); }

/* ---------- 7) قائمة «أقسام المتجر» والشريط السفلي ---------- */
@keyframes gsMenu { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
.motion .store-menu-list:not([hidden]) { transform-origin: top; animation: gsMenu .24s var(--ease-out); }
.store-menu-list a, .sections-list a { transition: background .2s ease, color .2s ease, transform .18s var(--ease-out); }
.store-menu-list a:active, .sections-list a:active { transform: scale(.98); }
.bottom-nav > * { transition: color .2s ease; }
.bottom-nav svg { transition: transform .25s var(--ease-out); }
.bottom-nav > *:active svg { transform: scale(.84); }
.bottom-nav > [aria-current] svg { transform: translateY(-1px) scale(1.08); }
/* نقطة «طلباتي» تنبض بهدوء عند وجود طلب مفتوح */
@keyframes gsPulse { 0%, 100% { box-shadow: 0 0 0 2px var(--navy-900), 0 0 0 0 rgba(6, 189, 251, .55); } 50% { box-shadow: 0 0 0 2px var(--navy-900), 0 0 0 7px rgba(6, 189, 251, 0); } }
.motion .dot { animation: gsPulse 2s ease-in-out infinite; }

/* ---------- 8) توهج اللمس: دائرة ضوء صغيرة تتسع وتختفي مكان الضغط ---------- */
@keyframes gsTap { from { transform: scale(.3); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.tap-glow {
  position: fixed; z-index: 70; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(6, 189, 251, .3), rgba(6, 189, 251, .08) 55%, transparent);
  animation: gsTap .65s ease-out forwards;
}

/* ---------- 9) الانتقال بين الصفحات ----------
   عند الضغط على رابط صفحة داخلية يضيف js/motion.js الصنف page-leave: محتوى الصفحة يتلاشى ويرتفع قليلاً ثم يبدأ التنقل،
   والترويسة والشريط السفلي يبقيان في مكانهما. الصفحة الجديدة تدخل بحركة دخول العناصر (القسم 1). */
.page-leave main { opacity: 0; transform: translateY(-10px); transition: opacity .17s ease, transform .17s ease; }
.page-leave .sheet, .page-leave .sheet-backdrop { opacity: 0; transition: opacity .17s ease; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}