:root {
  --bg: #f5f6f8;
  --card-bg: #ffffff;
  --navy: #131921;
  --orange: #ff9900;
  --orange-dark: #e88a00;
  --green: #067d62;
  --green-dark: #04543f;
  --text: #232f3e;
  --muted: #6b7280;
  --border: #e5e7eb;
  --soft: #eafaf3;
  --danger: #c24141;
  --danger-bg: #fff5f5;
  --warning-bg: #fff8df;
  --warning-border: #efd98c;
  --warning-text: #705000;
  --radius: 16px;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  --transition-speed: 0.25s;
  /* عرض عمود المحتوى — قيمة واحدة مركزية يستخدمها .page/.header-inner/
     .footer-line معاً (البند #18 في CLAUDE.md). قيمة سائلة (clamp) بدل
     رقم ثابت أو قفزات عند نقاط توقف محددة — تكبر تدريجياً وباستمرار مع
     عرض الشاشة (92vw) بين حد أدنى 560px (نفس الجوال تماماً، لا تغيير)
     وحد أقصى 960px (شاشات كبيرة)، فتلقائياً تصبح مناسبة لأي حجم شاشة —
     جوال/تابلت/لابتوب/شاشة كبيرة — بلا أي قفزة مفاجئة عند حجم معيّن،
     تماماً كما طلب المستخدم (إحساس Apple/Google التفاعلي).
  */
  --page-max-width: clamp(560px, 92vw, 960px);
}

/* الوضع الليلي — نفس المتغيرات بقيم داكنة، بدون تغيير أي كلاس أو سلوك حالي */
body.dark {
  --bg: #10141a;
  --card-bg: #1a2029;
  --navy: #f3f7f3;
  --orange: #ffa733;
  --orange-dark: #ffb84d;
  --green: #36c98f;
  --green-dark: #28a374;
  --text: #f3f7f3;
  --muted: #aab3c0;
  --border: #2a313c;
  --soft: #16241d;
  --danger: #ff9b9b;
  --danger-bg: #2a1717;
  --warning-bg: #2b2514;
  --warning-border: #6a5926;
  --warning-text: #ffe28a;
}

* {
  box-sizing: border-box;
}

/* تنقّل سلس بين الأقسام (روابط داخلية، FAQ، ...) — يُعطَّل تلقائياً تحت
   prefers-reduced-motion عبر القاعدة أدناه (scroll-behavior: auto !important) */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  line-height: 1.6;
  transition: background var(--transition-speed) ease, color var(--transition-speed) ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

.page {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 48px;
}

/* ---------------------------------------------------------------------
   الهيدر والفوتر — هوية بصرية منقولة من الصفحة القديمة
--------------------------------------------------------------------- */

.site-header {
  background: var(--navy);
  color: #fff;
  padding: 14px 16px;
}

body.dark .site-header {
  background: #0c1117;
}

.header-inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* على الجوال الضيق: الهيدر بصف واحد مع تصغير طفيف */
@media (max-width: 420px) {
  .header-inner {
    gap: 6px;
  }
  .theme-toggle {
    padding: 5px 9px;
    font-size: 11px;
  }
}

/* هوية الموقع: عنوان أساسي "توفير وكفى" + سطر فرعي صغير تحته — نفس
   التركيبة على الجوال والديسكتوب (البند: لا اسم أمازون في هوية الهيدر). */
.brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
  white-space: nowrap;
}

.brand-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.brand-subtitle {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.2;
}

@media (max-width: 480px) {
  .brand-title {
    font-size: 15px;
  }
  .brand-subtitle {
    font-size: 9.5px;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}

.nav::-webkit-scrollbar {
  display: none;
}

/* الروابط العادية داخل الهيدر — تُستخدم في حال لم يكن عليها theme-toggle */
.nav a {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
/* nav a.theme-toggle: تعامله مثل زر الهيدر تماماً */
.nav a.theme-toggle {
  text-decoration: none;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  border-radius: 999px;
  /* حجم موحّد لكل أزرار الهيدر على الجوال */
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-speed) ease;
  touch-action: manipulation;
  font-family: inherit;
  /* اجعل حجم اللمس مناسباً (44px+) */
  min-height: 34px;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.22);
}

.site-footer {
  background: var(--navy);
  color: #fff;
  margin-top: 24px;
  padding: 18px 16px 28px;
}

body.dark .site-footer {
  background: #0c1117;
}

.footer-line {
  max-width: var(--page-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-pill {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
}

.footer-pill-link {
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.footer-pill-link:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
}

.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* حشو سائل: 20px على الجوال إلى 30px على الشاشات الكبيرة، بلا قفزة */
  padding: clamp(20px, 1vw + 16.3px, 30px);
  margin-bottom: 16px;
  border: 1px solid var(--border);
  transition: background var(--transition-speed) ease, border-color var(--transition-speed) ease,
    opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
}

/* السلاسة عند ظهور البطاقات (تُفعّل عبر IntersectionObserver في app.js) —
   تظهر مرة واحدة فقط عند أول دخول للقسم (observer.unobserve بعد الظهور) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.card h2 {
  margin: 0 0 12px;
  font-size: clamp(17px, 0.3vw + 15.9px, 20px);
  color: var(--navy);
}

/* صف عنوان القسم + إجراء ثانوي (مثل "مسح الكل") بجانبه */
.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.section-header-row h2 {
  margin: 0 0 12px;
}

/* شارة صغيرة على نفس سطر عنوان القسم (مثل "محفوظة على جهازك فقط" أو مصدر
   بيانات "أكثر المنتجات تجهيزاً") — نص مختصر مكتوب مباشرة بعد العنوان */
.section-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  margin-inline-start: 6px;
  vertical-align: middle;
}

.btn-clear-all {
  flex-shrink: 0;
  margin-bottom: 12px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 2px;
  font-family: inherit;
  touch-action: manipulation;
}

.btn-clear-all:hover {
  color: var(--danger);
  text-decoration: underline;
}

.hero-card {
  text-align: center;
  padding: 24px 20px 20px;
  /* الـ hero card هو العنصر البطل — border + glow برتقالي خفيف */
  border-color: rgba(255, 153, 0, 0.30);
  box-shadow:
    0 0 0 4px rgba(255, 153, 0, 0.06),
    0 2px 12px rgba(0, 0, 0, 0.06);
}

body.dark .hero-card {
  border-color: rgba(255, 167, 51, 0.28);
  box-shadow:
    0 0 0 4px rgba(255, 167, 51, 0.07),
    0 2px 16px rgba(0, 0, 0, 0.22);
}

/* توهج انتباه لمدة 5 ثوانٍ بالضبط عند دخول الزائر لأول مرة (1s × 5 دورات)،
   يتوقف تلقائياً بعدها أو فوراً عند أول ضغطة داخل البطاقة (app.js). فقط
   box-shadow متحرك (بدون layout/repaint ثقيل) حتى لا يؤثر على أداء الصفحة. */
@keyframes hero-glow-attention {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(255, 153, 0, 0.06),
      0 2px 12px rgba(0, 0, 0, 0.06);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(255, 153, 0, 0.22),
      0 3px 16px rgba(255, 153, 0, 0.22);
  }
}

@keyframes hero-glow-attention-dark {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(255, 167, 51, 0.07),
      0 2px 16px rgba(0, 0, 0, 0.22);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(255, 167, 51, 0.25),
      0 3px 16px rgba(255, 167, 51, 0.25);
  }
}

.hero-card.hero-glow-attention {
  animation: hero-glow-attention 1s ease-in-out 5;
}

body.dark .hero-card.hero-glow-attention {
  animation-name: hero-glow-attention-dark;
}

@media (prefers-reduced-motion: reduce) {
  .hero-card.hero-glow-attention {
    animation: none;
  }
}

.hero-card .hero-title {
  /* حجم سائل: 22px على الجوال إلى 30px على الشاشات الكبيرة، بلا قفزة */
  font-size: clamp(22px, 0.8vw + 19px, 30px);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 18px;
  line-height: 1.3;
}

.hero-card .hero-subtitle {
  font-size: clamp(13px, 0.2vw + 12.3px, 15px);
  color: var(--muted);
  margin-bottom: 16px;
}

.link-input-wrap {
  position: relative;
}

.link-input {
  width: 100%;
  padding: 14px 16px;
  padding-left: 38px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  /* 16px وليس أقل: أي حقل إدخال بخط أصغر من 16px يجعل Safari/iOS يكبّر
     الصفحة تلقائياً (zoom) عند التركيز عليه — هذا كان سبب تكبّر التصميم
     كله عند اللصق أو الضغط على المسح. */
  font-size: 16px;
  margin-bottom: 14px;
  direction: ltr;
  text-align: right;
  /* تمنع إيماءة "double-tap to zoom" من Safari عند الضغط السريع على الخانة
     دون تعطيل تصغير/تكبير المستخدم اليدوي بإصبعين (pinch) — لا نستخدم
     user-scalable=no أبداً. */
  touch-action: manipulation;
}

.link-input:focus {
  outline: none;
  border-color: var(--orange);
}

/* زر مسح صغير داخل خانة الرابط: يظهر فقط عند وجود نص، ويضمن أن الخانة
   تبدأ فاضية دائماً حتى لو احتفظ المتصفح (Safari خصوصاً) بآخر قيمة بعد
   تحديث الصفحة (form state restoration) رغم autocomplete="off". */
.link-clear-btn {
  position: absolute;
  left: 8px;
  top: 14px;
  width: 26px;
  height: 26px;
  border: none;
  background: var(--soft);
  color: var(--muted);
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.link-clear-btn.hidden {
  display: none;
}

.link-clear-btn:hover {
  color: var(--orange);
}

.hero-input-status {
  font-size: 13px;
  color: var(--green);
  font-weight: 600;
  margin: -6px 0 12px;
  text-align: right;
}

.hero-input-status.hidden {
  display: none;
}

/* -----------------------------------------------------------------------
   Smart Link Preview — بطاقة ذكية تظهر فور كشف رابط أمازون صحيح
----------------------------------------------------------------------- */

@keyframes link-preview-in {
  from { opacity: 0; transform: translateY(-5px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.link-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
  padding: 10px 14px;
  background: var(--soft);
  border: 1px solid rgba(6, 125, 98, 0.18);
  border-radius: 10px;
  animation: link-preview-in 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.link-preview.hidden {
  display: none;
}

.link-preview-check {
  font-size: 20px;
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

.link-preview-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.link-preview-domain {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
  text-align: right;
}

/* رسالة احتفالية عربية (بدون نطاق/ASIN) — عكس .link-preview-domain تماماً:
   نص عربي كامل، لا نطاق تقني قصير، فيحتاج التفاف طبيعي RTL بدل سطر واحد
   مقصوص بـ ellipsis واتجاه LTR. */
.link-preview-message {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  direction: rtl;
  text-align: right;
  white-space: normal;
  line-height: 1.4;
}

.link-preview-asin {
  font-size: 12px;
  color: var(--muted);
  direction: ltr;
  text-align: right;
}

.link-preview-asin strong {
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.5px;
}

body.dark .link-preview {
  border-color: rgba(54, 201, 143, 0.18);
}

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--border);
  font-size: 14px;
  font-weight: 600;
}

.btn-outline:hover {
  border-color: var(--orange);
  color: var(--orange-dark);
}

/* -----------------------------------------------------------------------
   زر اللصق الصغير — يحلّ محل الزر الكامل العرض
----------------------------------------------------------------------- */

.paste-hint-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--muted);
}

.btn-paste-inline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--green);
  border-radius: 8px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* اهتزاز بسيط لجذب الانتباه لزر "عندك رابط؟" لبضع ثوانٍ فقط عند دخول
   الصفحة (أو العودة إليها من bfcache) — تكرار محدود يتوقف تلقائياً بدل
   تكرار لا نهائي مزعج. نفس حركة .input-shake أدناه لكن أخف وتتكرر. */
.btn-paste-inline:hover {
  border-color: var(--green);
  background: var(--soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 18px;
  border-radius: 12px;
  border: none;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.15s ease, background 0.22s ease;
  touch-action: manipulation;
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* .btn-outline يجب أن يأتي بعد .btn لأن .btn يضبط border: none */
.btn.btn-outline {
  border: 1.5px solid var(--border);
}

.btn.btn-outline:hover {
  border-color: var(--orange);
}

.btn-primary {
  background: var(--orange);
  color: #1a1a1a;
}

.btn-primary:hover:not(:disabled) {
  background: var(--orange-dark);
}

/* حالة التحميل — زر غير قابل للضغط مع تعتيم */
.btn.btn-loading {
  opacity: 0.72;
  cursor: wait;
  transform: scale(0.99);
}

/* حالة النجاح — يتحول للأخضر مع نبضة */
.btn-primary.btn-success {
  background: var(--green) !important;
  color: #fff !important;
  animation: btn-success-pulse 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btn-success-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* زر النسخ — حالة النجاح: يتحول لأخضر ويعرض ✓ */
.btn-copy-success {
  color: var(--green) !important;
  border-color: var(--green) !important;
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* -----------------------------------------------------------------------
   Input Shake — اهتزاز عند خطأ في الرابط
----------------------------------------------------------------------- */
@keyframes input-shake {
  0%   { transform: translateX(0); }
  18%  { transform: translateX(-7px); }
  36%  { transform: translateX(6px); }
  54%  { transform: translateX(-5px); }
  72%  { transform: translateX(4px); }
  90%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

.input-shake {
  animation: input-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(194, 65, 65, 0.15) !important;
}

.btn-secondary {
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  font-size: 14px;
  padding: 8px;
  margin-top: 10px;
  text-decoration: underline;
}

.btn-small {
  width: auto;
  padding: 10px 16px;
  font-size: 14px;
}

.icon-row {
  font-size: 28px;
  margin-bottom: 8px;
}

.code-badge {
  display: inline-block;
  background: #fff4e0;
  color: var(--orange-dark);
  border: 1px dashed var(--orange);
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
}

/* البانر الأول كان مُعرَّفاً هنا — أُزيل لصالح التعريف الكامل الموحّد أسفله */

.codes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* -----------------------------------------------------------------------
   Empty State — حالة فراغ النافذة
----------------------------------------------------------------------- */

/* حركة تطوف خفيفة للأيقونة */
@keyframes modal-float {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-8px);  }
}

.codes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 24px 40px;
  gap: 14px;
}

/* دائرة الأيقونة — تدرج ذهبي */
.codes-empty-icon-wrap {
  width: 88px;
  height: 88px;
  background: linear-gradient(150deg, #ffe066 0%, #ffaa00 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  line-height: 1;
  padding-bottom: 1px;
  box-shadow:
    0 0 0 8px rgba(255, 165, 0, 0.08),
    0 10px 28px rgba(255, 140, 0, 0.22);
  animation: modal-float 4.5s ease-in-out infinite;
}

body.dark .codes-empty-icon-wrap {
  background: linear-gradient(150deg, #4a3800 0%, #7a5c00 100%);
  box-shadow:
    0 0 0 8px rgba(255, 165, 0, 0.06),
    0 10px 28px rgba(255, 140, 0, 0.18);
}

.codes-empty-title {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  letter-spacing: -0.3px;
  line-height: 1.3;
  margin: 0;
}

body.dark .codes-empty-title {
  color: #fff;
}

.codes-empty-body {
  font-size: 15px;
  color: rgba(60, 60, 67, 0.60);
  line-height: 1.75;
  margin: 0;
  max-width: 240px;
}

body.dark .codes-empty-body {
  color: rgba(235, 235, 245, 0.60);
}

.code-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.code-item .code-item-title {
  font-weight: 700;
  font-size: 15px;
}

.code-item .code-item-discount {
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}

.code-item .code-item-desc {
  color: var(--muted);
  font-size: 13px;
}

/* نص الكود الحقيقي — بارز وواضح دائماً، لا يُخفى أبداً عن المستخدم */
.code-item .code-item-code {
  display: inline-block;
  align-self: flex-start;
  font-family: "SF Mono", "Courier New", monospace;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  background: var(--soft);
  color: var(--green-dark);
  border: 1px dashed var(--green);
  border-radius: 8px;
  padding: 4px 10px;
}

.code-item .code-item-note {
  color: var(--muted);
  font-size: 12.5px;
}

.code-item .code-item-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
}

.code-item-telegram {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #0088cc;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0, 136, 204, 0.08);
  border: 1px solid rgba(0, 136, 204, 0.2);
}

/* -----------------------------------------------------------------------
   نافذة «اختر كودك» — بطاقات مميزة
----------------------------------------------------------------------- */

#featured-codes-list {
  padding: 4px 16px 20px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.featured-codes-list {
  gap: 16px;
}

.featured-code-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.featured-code-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.featured-code-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}

.featured-code-discount {
  flex-shrink: 0;
  background: rgba(255, 153, 0, 0.12);
  color: var(--orange-dark);
  font-weight: 800;
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 153, 0, 0.28);
  white-space: nowrap;
}

.featured-code-code-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  text-align: center;
}

body.dark .featured-code-code-panel {
  background: rgba(255, 255, 255, 0.04);
}

.featured-code-code-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.featured-code-code {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--navy);
  word-break: break-all;
  line-height: 1.2;
}

.featured-code-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  text-align: center;
}

.featured-code-notice {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}

.featured-code-notice--warn {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
}

.featured-code-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.featured-code-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--muted);
  border: 1px solid var(--border);
}

body.dark .featured-code-chip {
  background: rgba(255, 255, 255, 0.06);
}

.featured-code-chip--prime {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-border);
}

.featured-code-footnote {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
}

.featured-code-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.featured-code-choose {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 800;
}

.featured-code-telegram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(0, 136, 204, 0.28);
  color: #0088cc;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}

.featured-code-telegram:active {
  background: rgba(0, 136, 204, 0.08);
}

.products-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.product-item .product-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-item .product-count {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

/* صورة صغيرة اختيارية لكل منتج (تأتي من api/most-prepared.php أو تُجلب
   بالخلفية عبر enrichProductCard — تُعيد استخدام تصميم .recent-link-thumb) */
.product-thumb {
  width: 44px;
  height: 44px;
}

.product-price {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green-dark);
}

.product-item-actions {
  display: flex;
  gap: 6px;
}

.product-item-actions .btn {
  flex: 1;
  padding: 8px 10px;
  font-size: 12px;
}

.stats-row {
  display: flex;
  gap: 12px;
}

.stat-box {
  flex: 1;
  text-align: center;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 16px 10px;
  border: 1px solid var(--border);
  transition: background var(--transition-speed) ease;
}

.stat-box .stat-number {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
}

.stat-box .stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.activity-note {
  font-size: 12px;
  color: var(--orange-dark);
  background: #fff4e0;
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 10px;
  display: inline-block;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.activity-item .activity-emoji {
  font-size: 18px;
}

.activity-item .activity-time {
  margin-right: auto;
  color: var(--muted);
  font-size: 12px;
}

.trust-message {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  padding: 10px 6px;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  /* خلفية داكنة ثابتة بغض النظر عن الوضع — تمنع اختفاء النص في dark mode */
  background: rgba(18, 20, 28, 0.95);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 10000;
  max-width: 90%;
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Toast مع إجراء مضمّن (مثل "تراجع") — نفس نظام الـ toast، فقط نسمح
   بالضغط عليه (pointer-events) ونرتبه أفقياً مع الزر */
.toast.toast-with-action {
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
  text-align: start;
  white-space: nowrap;
}

.toast-action {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--orange);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 2px;
  font-family: inherit;
  touch-action: manipulation;
}

.toast-action:hover {
  text-decoration: underline;
}


.hidden {
  display: none !important;
}

/* ---------------------------------------------------------------------
   الأسئلة الشائعة — منقولة من الصفحة القديمة (details/summary أصلي،
   بدون JS للفتح والإغلاق)
--------------------------------------------------------------------- */

.faq-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--card-bg);
}

/* أسئلة ما بعد أول 6 — مخفية إلى أن يضغط الزائر "عرض جميع الأسئلة" */
.faq-item.faq-item-extra {
  display: none;
}

.btn-show-all-faq {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 12px 16px;
  background: transparent;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-show-all-faq:hover {
  border-color: var(--orange);
  color: var(--orange-dark);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 16px;
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  position: relative;
  padding-left: 30px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
}

.faq-item[open] summary::after {
  content: "−";
  color: var(--orange);
}

/* أنيميشن فتح سلس */
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes faq-close {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-4px); }
}

.faq-item[open] .faq-answer {
  animation: faq-open 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.faq-answer {
  padding: 0 16px 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
}

.faq-answer a {
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
}

.faq-answer a:hover {
  color: var(--green-dark);
  text-decoration: underline;
}

.faq-answer hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}

.faq-lead {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-right: 4px solid var(--green);
  border-radius: 10px;
  background: var(--soft);
  color: var(--text);
  font-weight: 700;
  line-height: 1.8;
}

.faq-section-title {
  margin: 16px 0 10px;
  color: var(--green);
  font-size: 14px;
  font-weight: 700;
}

.faq-tip {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--soft);
  border: 1px solid rgba(6, 125, 98, 0.2);
  color: var(--text);
  line-height: 1.8;
}

.faq-warning {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
  line-height: 1.8;
}

.faq-steps,
.faq-checks {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.faq-steps span,
.faq-checks span {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text);
}

.faq-steps span b {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-checks span::before {
  content: "✓";
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   نافذة الفيديو المشتركة
--------------------------------------------------------------------- */

.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.video-modal.show {
  display: flex;
}

.video-modal-content {
  width: min(900px, 100%);
  background: #000;
  border-radius: 16px;
  overflow: hidden;
}

.video-modal-content video {
  width: 100%;
  max-height: 80vh;
  display: block;
}

.video-close {
  position: fixed;
  top: 16px;
  left: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 10000;
}

/* ---------------------------------------------------------------------
   زر الرجوع للأعلى — iOS 17 Glassmorphism
--------------------------------------------------------------------- */

.back-to-top {
  position: fixed;
  left: 18px;
  bottom: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 40;

  /* Glassmorphism — light mode */
  background: rgba(255, 255, 255, 0.76);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.10),
    0 1px 4px  rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

  /* أيقونة */
  color: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;

  /* حالة الاختفاء الافتراضية */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.82);

  /* Spring animation — يحاكي iOS */
  transition:
    opacity   0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0.38s ease,
    box-shadow 0.22s ease;

  touch-action: manipulation;
}

/* حالة ظهور الزر */
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Hover — رفع خفيف */
.back-to-top:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.13),
    0 2px 6px  rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Tap — ضغطة ناعمة */
.back-to-top:active {
  transform: scale(0.90) !important;
  transition-duration: 0.08s;
  box-shadow:
    0 2px 8px  rgba(0, 0, 0, 0.08),
    0 1px 2px  rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Dark mode */
body.dark .back-to-top {
  background: rgba(38, 42, 52, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    0 1px 4px  rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.dark .back-to-top:hover {
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.55),
    0 2px 8px  rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* أيقونة SVG */
.btt-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

/* =======================================================================
   Modal Bottom Sheet — iOS quality
   ======================================================================= */

/* قفل تمرير الصفحة أثناء فتح المودال */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

body.modal-open .page,
body.modal-open .site-header,
body.modal-open .site-footer {
  touch-action: none;
}

body.modal-open .modal-overlay {
  touch-action: auto;
  pointer-events: auto;
}

body.modal-open .raffle-win-banner,
body.modal-open .raffle-lose-banner,
body.modal-open .raffle-backup-banner {
  display: none !important;
}

/* -----------------------------------------------------------------------
   نافذة تحقق السحب — مستقلة عن modal-overlay (إصلاح تجمد iOS Safari)
----------------------------------------------------------------------- */

.raffle-check-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

.raffle-check-overlay.hidden {
  display: none !important;
}

.raffle-check-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(560px, 100vw);
  max-height: min(90dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 8px));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: rgba(249, 249, 251, 0.98);
  border-radius: 22px 22px 0 0;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}

body.dark .raffle-check-sheet {
  background: rgba(28, 28, 30, 0.98);
}

.raffle-check-header {
  display: flex;
  align-items: center;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 10px;
  border-bottom: 0.5px solid rgba(60, 60, 67, 0.16);
}

body.dark .raffle-check-header {
  border-bottom-color: rgba(255, 255, 255, 0.10);
}

.raffle-check-header .modal-close {
  min-width: 44px;
  min-height: 44px;
}

html.raffle-modal-open,
body.raffle-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.raffle-modal-open .raffle-win-banner,
body.raffle-modal-open .raffle-lose-banner,
body.raffle-modal-open .raffle-backup-banner {
  display: none !important;
}

@media (min-width: 600px) {
  .raffle-check-overlay {
    align-items: center;
    padding: 20px;
  }

  .raffle-check-sheet {
    border-radius: 20px;
    max-height: 78vh;
  }
}

/* -----------------------------------------------------------------------
   Overlay — يُبقى في الـ DOM دائماً لأنيميشن سلس
----------------------------------------------------------------------- */
/* =======================================================================
   Modal System — iOS-faithful design
======================================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* طبقة داكنة خفيفة تُظهر الصفحة خلف الـ sheet */
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  touch-action: auto;
  overscroll-behavior: contain;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

/* مخفي: يبقى flex للأنيميشن — يتجاوز .hidden{display:none} */
.modal-overlay.hidden {
  display: flex !important;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* أنيميشن الإغلاق */
.modal-overlay.modal-closing {
  opacity: 0;
  pointer-events: none;
  transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
  transition-duration: 0.22s;
}
.modal-overlay.modal-closing .modal-box {
  transform: translateY(56px);
  transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
  transition-duration: 0.22s;
}

/* -----------------------------------------------------------------------
   Desktop — نافذة مركزية
----------------------------------------------------------------------- */
@media (min-width: 600px) {
  .modal-overlay { align-items: center; }

  .modal-box {
    border-radius: 20px !important;
    max-height: 78vh;
    max-width: 400px;
  }
  .modal-handle-area { display: none; }

  .modal-overlay.hidden .modal-box {
    transform: translateY(12px) scale(0.96);
  }
  .modal-overlay.modal-closing .modal-box {
    transform: scale(0.95) translateY(8px);
  }
}

/* -----------------------------------------------------------------------
   Modal Box — الصندوق الرئيسي (frosted glass حقيقي)
----------------------------------------------------------------------- */
.modal-box {
  position: relative;
  background: rgba(249, 249, 251, 0.96);
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(104%);
  backdrop-filter: blur(40px) saturate(200%) brightness(104%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  border-radius: 22px 22px 0 0;
  width: 100%;
  max-width: min(560px, 100vw);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: auto;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 0.5px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 -1px 0 rgba(60, 60, 67, 0.10),
    0 -4px 30px rgba(0, 0, 0, 0.10),
    0 -20px 60px rgba(0, 0, 0, 0.08);
  transform: translateY(0);
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

body.dark .modal-box {
  background: rgba(28, 28, 30, 0.93);
  border-top: 0.5px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.30),
    0 -20px 60px rgba(0, 0, 0, 0.45);
}

/* حالة البداية (مخفي) — ينزلق من الأسفل */
.modal-overlay.hidden .modal-box {
  transform: translateY(72px);
}

/* -----------------------------------------------------------------------
   Handle Area + Drag Handle — iOS exact
----------------------------------------------------------------------- */
.modal-handle-area {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
  cursor: grab;
}

.modal-drag-handle {
  width: 36px;
  height: 5px;
  border-radius: 2.5px;
  background: rgba(60, 60, 67, 0.20);
}

body.dark .modal-drag-handle {
  background: rgba(255, 255, 255, 0.24);
}

/* -----------------------------------------------------------------------
   Modal Header — عنوان وسط + زر إغلاق يمين (iOS sheet pattern)
----------------------------------------------------------------------- */
.modal-header {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 14px 10px;
  /* hairline separator بلون Apple الرسمي */
  border-bottom: 0.5px solid rgba(60, 60, 67, 0.16);
}

body.dark .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.10);
}

/* spacer يعوّض عرض زر الإغلاق لتوسيط العنوان حقاً */
.modal-header-spacer {
  width: 30px;
  flex-shrink: 0;
}

.modal-title {
  flex: 1;
  text-align: center;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #000;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark .modal-title {
  color: #fff;
}

/* زر الإغلاق — iOS exact: دائرة رمادية خفيفة جداً */
.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(116, 116, 128, 0.12);
  color: rgba(60, 60, 67, 0.60);
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.12s ease;
}

.modal-close:hover {
  background: rgba(116, 116, 128, 0.20);
}

.modal-close:active {
  transform: scale(0.85);
  background: rgba(116, 116, 128, 0.28);
}

body.dark .modal-close {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.60);
}

body.dark .modal-close:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* المحتوى داخل الـ modal */
#modal-codes-list {
  padding: 20px 16px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

/* -----------------------------------------------------------------------
   رسالة ترحيب أول زيارة — نفس صندوق .modal-box لكن بدون هيدر (لا عنوان/زر
   إغلاق منفصلين)، فقط محتوى ترحيبي بسيط وزر واحد
------------------------------------------------------------------------ */
/* -----------------------------------------------------------------------
   الحملة التعريفية — ترحيب + مهام + شريط تقدم
------------------------------------------------------------------------ */
.onboarding-box {
  max-height: min(88vh, 640px);
  overflow-y: auto;
}

.onboarding-progress-wrap {
  padding: 0 16px 12px;
}

.onboarding-progress-track {
  height: 8px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.onboarding-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--orange), #ffb347);
  border-radius: 999px;
  transition: width 0.45s ease;
}

.onboarding-progress-label {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

.onboarding-view {
  padding: 4px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}

.onboarding-emoji {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 10px;
}

.onboarding-heading {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}

body.dark .onboarding-heading {
  color: #fff;
}

.onboarding-body {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}

.onboarding-task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
  text-align: right;
}

.onboarding-task {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}

.onboarding-task-done {
  border-color: var(--green);
  background: var(--soft);
}

.onboarding-task-icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.4;
}

.onboarding-task-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.45;
}

body.dark .onboarding-task-label {
  color: #fff;
}

.onboarding-task-done .onboarding-task-label {
  color: var(--green-dark);
}

body.dark .onboarding-task-done .onboarding-task-label {
  color: var(--green);
}

.onboarding-view .btn-primary {
  width: 100%;
}

.onboarding-pill {
  position: fixed;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

body.dark .onboarding-pill {
  color: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.onboarding-pill:active {
  transform: translateX(-50%) scale(0.98);
}

.onboarding-entry-box {
  margin: 12px 0;
  padding: 14px;
  border: 1px dashed var(--orange);
  border-radius: 12px;
  background: var(--soft);
  text-align: center;
}

.onboarding-entry-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.onboarding-entry-number {
  font-family: "SF Mono", "Courier New", monospace;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--navy);
}

body.dark .onboarding-entry-number {
  color: #fff;
}

.onboarding-entry-hint {
  font-size: 12.5px !important;
  margin-top: 10px !important;
}

.raffle-check-body {
  padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0px));
}

.raffle-manual-check label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

.raffle-manual-check input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  -webkit-user-select: text;
  user-select: text;
}

.raffle-manual-check .btn {
  width: 100%;
  min-height: 44px;
}

.raffle-result-box {
  min-height: 80px;
  margin-bottom: 16px;
  text-align: center;
}

.raffle-result-status {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 10px;
  color: var(--navy);
}

body.dark .raffle-result-status {
  color: #fff;
}

.raffle-result-entry {
  font-size: 14px;
  margin: 0 0 12px;
  color: var(--muted);
}

.raffle-result-timer {
  font-weight: 600;
  color: #c45500;
}

.raffle-result-timer.is-urgent {
  color: #d13212;
}

.raffle-result-note {
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0;
}

.raffle-code-display {
  font-family: "SF Mono", "Courier New", monospace;
  font-size: 18px;
  font-weight: 700;
  padding: 12px;
  margin: 12px 0;
  border-radius: 10px;
  background: var(--soft);
  border: 1px solid var(--green);
  word-break: break-all;
}

#onboarding-modal .modal-header {
  background: inherit;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
}

#onboarding-modal .modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
}

.onboarding-box {
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px);
}

#btn-open-raffle-check {
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--card);
  font-family: inherit;
  font-size: 13px;
}

/* -----------------------------------------------------------------------
   بانر إشعار الفوز في السحب
----------------------------------------------------------------------- */

.raffle-win-banner {
  position: sticky;
  top: 0;
  z-index: 900;
  background: linear-gradient(135deg, #131921 0%, #232f3e 100%);
  color: #fff;
  border-bottom: 2px solid var(--orange);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.raffle-win-banner.hidden { display: none; }

.raffle-win-banner-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.raffle-win-banner-body {
  flex: 1 1 180px;
  min-width: 0;
}

.raffle-win-banner-title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.raffle-win-banner-entry {
  margin: 0 0 2px;
  font-size: 12px;
  opacity: 0.95;
}

.raffle-win-banner-entry strong {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.raffle-win-banner-timer {
  margin: 2px 0;
  font-size: 12px;
  font-weight: 600;
  color: #ffb84d;
  line-height: 1.35;
}

.raffle-win-banner-timer.is-urgent {
  color: #ff6b6b;
  animation: raffle-timer-pulse 1s ease-in-out infinite;
}

@keyframes raffle-timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.raffle-win-banner-hint {
  margin: 0;
  font-size: 11px;
  opacity: 0.72;
  line-height: 1.35;
}

.raffle-win-banner-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  align-self: center;
  min-width: 0;
}

.raffle-win-banner-cta,
.raffle-win-banner-done {
  padding: 9px 12px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.raffle-win-banner-cta {
  background: var(--orange);
  color: #131921;
}

.raffle-win-banner-done {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.raffle-win-banner-close {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  align-self: flex-start;
}

.raffle-win-banner-close.hidden { display: none; }

.raffle-win-banner-close:active { color: #fff; }

@media (max-width: 560px) {
  .raffle-win-banner-inner {
    flex-direction: row;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
  }

  .raffle-win-banner-body {
    flex: 1;
    min-width: 0;
  }

  .raffle-win-banner-actions {
    width: auto;
    flex-shrink: 0;
  }

  .raffle-win-banner-cta,
  .raffle-win-banner-done {
    width: auto;
    padding: 8px 10px;
    font-size: 11px;
  }

  .raffle-win-banner-done {
    display: none;
  }

  .raffle-win-banner.is-claimed .raffle-win-banner-done {
    display: block;
  }

  .raffle-win-banner.is-claimed .raffle-win-banner-cta {
    display: none;
  }
}

/* -----------------------------------------------------------------------
   بانر عدم الفوز — تيليجرام
----------------------------------------------------------------------- */

.raffle-lose-banner {
  position: sticky;
  top: 0;
  z-index: 9100;
  background: linear-gradient(135deg, #1a2332 0%, #2a3544 100%);
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.raffle-lose-banner.hidden { display: none; }

.raffle-lose-banner-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.raffle-lose-banner-title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
}

.raffle-lose-banner-text {
  margin: 0;
  font-size: 11px;
  opacity: 0.85;
  line-height: 1.4;
}

.raffle-lose-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.raffle-lose-banner-link {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 9px;
  background: #0088cc;
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
}

.raffle-lose-banner-link-secondary {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.raffle-lose-banner-dismiss {
  padding: 7px 10px;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 560px) {
  .raffle-lose-banner-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .raffle-lose-banner-actions {
    width: 100%;
  }

  .raffle-lose-banner-link,
  .raffle-lose-banner-dismiss {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* -----------------------------------------------------------------------
   بانر الاحتياط — فرصة قادمة
----------------------------------------------------------------------- */

.raffle-backup-banner {
  position: sticky;
  top: 0;
  z-index: 899;
  background: linear-gradient(135deg, #0f2744 0%, #1a3a5c 100%);
  color: #fff;
  border-bottom: 2px solid #4a9eff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.raffle-backup-banner.hidden { display: none; }

.raffle-backup-banner-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.raffle-backup-banner-title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
}

.raffle-backup-banner-entry {
  margin: 0 0 2px;
  font-size: 12px;
  opacity: 0.92;
}

.raffle-backup-banner-entry strong {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.raffle-backup-banner-text {
  margin: 0;
  font-size: 11px;
  opacity: 0.85;
  line-height: 1.4;
}

.raffle-backup-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.raffle-backup-banner-cta {
  padding: 8px 12px;
  border: none;
  border-radius: 9px;
  background: #4a9eff;
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.raffle-backup-banner-dismiss {
  padding: 7px 10px;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 560px) {
  .raffle-backup-banner-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .raffle-backup-banner-actions {
    width: 100%;
  }

  .raffle-backup-banner-cta,
  .raffle-backup-banner-dismiss {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* -----------------------------------------------------------------------
   بانر "أهلاً بعودتك" — شريط رفيع خفيف فوق البطاقة الرئيسية
----------------------------------------------------------------------- */

.banner-returning {
  /* ألوان صريحة لا تعتمد على var فقط — تضمن الظهور الصحيح في كل الحالات */
  background: #fff8ef;
  border: 1.5px solid var(--orange);
  border-radius: 12px;
  /* كرت صغير وخفيف فعلاً — مجرّد تذكير سريع فوق نموذج التجهيز، وليس Hero
     ثانٍ يزاحمه على المساحة والانتباه. */
  padding: 9px 12px;
  margin-bottom: 10px;
  /* لا box-shadow إضافية — نفرّقه عن البطاقة الرئيسية بالحد البرتقالي */
  box-shadow: none;
}

body.dark .banner-returning {
  background: #2b2010;
  border-color: var(--orange);
}

.returning-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.returning-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.returning-icon {
  font-size: 17px;
  flex-shrink: 0;
  display: inline-block;
  /* نطّة بسيطة كأنه فرحان بعودتك — تتوقف تلقائياً بعد دورتين، لا تتكرر
     للأبد حتى لا تُصبح مزعجة. */
  animation: returning-icon-bounce 0.9s ease-in-out 2;
}

@keyframes returning-icon-bounce {
  0%, 100% { transform: translateY(0); }
  20%      { transform: translateY(-4px); }
  40%      { transform: translateY(0); }
  60%      { transform: translateY(-3px); }
  80%      { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .returning-icon {
    animation: none;
  }
}

.returning-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.returning-text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.returning-sub {
  font-size: 11.5px;
  color: var(--muted);
}

.returning-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* أزرار مصغّرة خاصة بهذا الكرت الخفيف — أصغر من .btn-small العام، تناسب
   حجم الكرت المقصود (تذكير سريع، وليس Hero ثانٍ). */
.returning-actions .btn {
  padding: 7px 12px;
  font-size: 12.5px;
}

/* على الجوال: صف الأزرار ينزل بسطر مستقل كامل العرض تحت النص، بدل منافسة
   نص الترحيب على نفس السطر (ما كان يسبب التفاف "ياهلا والله رجعت" لسطرين
   وتوسيط الأزرار عمودياً بينهما بشكل غير منظّم — راجع لقطة المستخدم). */
@media (max-width: 480px) {
  .returning-actions {
    flex-basis: 100%;
    margin-top: 4px;
  }
  .returning-actions .btn {
    flex: 1;
  }
}

/* زر "رابط جديد" — outline خفيف */
.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.btn-ghost:hover {
  border-color: var(--orange);
  color: var(--orange-dark);
}

/* -----------------------------------------------------------------------
   "روابطك الأخيرة" — كروت الروابط الشخصية
----------------------------------------------------------------------- */

.recent-link-item {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card-bg);
  transition: border-color 0.15s ease;
}

.recent-link-item:hover {
  border-color: var(--orange);
}

.recent-link-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.recent-link-emoji {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1.2;
  margin-top: 2px;
}

.recent-link-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.recent-link-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}

.recent-link-domain {
  font-size: 12px;
  color: var(--muted);
  display: block;
}

.recent-link-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
  display: block;
}

.recent-link-time {
  font-size: 12px;
  color: var(--muted);
  display: block;
}

/* عدّاد "جُهِّز × N" — يظهر بجانب الوقت مباشرة (نفس السطر) عندما يُحفَظ
   نفس المنتج/الرابط أكثر من مرة بدل تكرار الكرت بالكامل. */
.recent-link-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.recent-link-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--orange-dark);
  background: color-mix(in srgb, var(--orange) 15%, transparent);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Smart Recent Links (Task 29) — صورة صغيرة 56×56 تُملأ بالخلفية عبر
   api/product-info.php. تبدأ بـ Skeleton (شيمر) ثم تتحول لصورة حقيقية
   أو تختفي وترجع لأيقونة الإيموجي البسيطة إذا فشل الفحص أو انتهت المهلة.
----------------------------------------------------------------------- */

.recent-link-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--bg);
}

.recent-link-thumb.is-loading {
  background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: recent-thumb-shimmer 1.3s ease-in-out infinite;
}

.recent-link-thumb.is-loading .recent-link-emoji {
  opacity: 0.35;
  margin-top: 0;
}

.recent-link-thumb.has-image {
  background: #ffffff;
  border: 1px solid var(--border);
}

.recent-link-thumb.has-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes recent-thumb-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .recent-link-thumb.is-loading {
    animation: none;
  }
}

/* زر حذف صغير Ghost — أقل وضوحاً من زر "فتح في أمازون" عمداً (البند 1) */
.btn-recent-delete {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-recent-delete:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.recent-link-actions {
  display: flex;
  gap: 8px;
}

.btn-recent-open,
.btn-recent-copy {
  flex: 1;
  padding: 11px 12px;
  border-radius: 10px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  font-family: inherit;
  /* ضمان ارتفاع اللمس 44px+ */
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-recent-open {
  background: var(--orange);
  color: #1a1a1a;
}

.btn-recent-open:hover {
  background: var(--orange-dark);
}

.btn-recent-copy {
  background: var(--soft);
  color: var(--green-dark);
  border: 1.5px solid rgba(6, 125, 98, 0.3);
}

.btn-recent-copy:hover {
  background: #d5f5eb;
}

.product-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* الصناديق الثلاثة تبقى بجانب بعضها (صف واحد أفقي) حتى على أضيق الجوالات
   — لا نستخدم عمود عمودي إطلاقاً، فقط نضغط الحشو وحجم الخط لتناسب المساحة */
@media (max-width: 480px) {
  .stats-row {
    gap: 6px;
  }

  .stat-box {
    padding: 10px 4px;
  }

  .stat-box .stat-number {
    font-size: 17px;
  }

  .stat-box .stat-label {
    font-size: 10.5px;
    line-height: 1.3;
  }
}

@media (max-width: 380px) {
  .header-inner {
    gap: 6px;
  }

  .brand {
    font-size: 14px;
  }

  .theme-toggle {
    padding: 5px 8px;
    font-size: 11px;
    min-height: 32px;
  }

  .back-to-top {
    width: 44px;
    height: 44px;
    left: 14px;
    bottom: 20px;
  }

  .video-close {
    top: 10px;
    left: 10px;
    width: 38px;
    height: 38px;
    font-size: 22px;
  }
}

/* -----------------------------------------------------------------------
   Notice لطيف — يظهر عند عدم وجود كود خصم (أكبر وأوضح من toast)
----------------------------------------------------------------------- */

.notice-card {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: min(340px, calc(100vw - 32px));
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-right: 4px solid var(--green);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.notice-card.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.notice-card-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.notice-card-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1.3;
}

.notice-card-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.notice-card-text strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.notice-card-text span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* -----------------------------------------------------------------------
   شخصية التجهيز — مودال فوق الصفحة نفسها (ضغطة 1: عرض الخطوات)، ثم زر
   "فتح أمازون الآن" يظهر بعد انتهاء الخطوات (ضغطة 2: تفتح تاب جديد بأمان
   لأنها ضغطة مستخدم طازجة — لا تحتاج ملف أو صفحة مستقلة).
----------------------------------------------------------------------- */

.prepare-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.prepare-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.prepare-modal-card {
  background: var(--card-bg);
  border-radius: 24px;
  padding: 40px 32px;
  text-align: center;
  min-width: 260px;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35);
  transform: scale(0.9) translateY(12px);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.prepare-modal.show .prepare-modal-card {
  transform: scale(1) translateY(0);
}

.prepare-spinner {
  width: 38px;
  height: 38px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--orange);
  animation: prepare-spin 0.9s linear infinite;
}

@keyframes prepare-spin {
  to { transform: rotate(360deg); }
}

.prepare-step-text {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.6;
  min-height: 2.4em;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prepare-open-btn {
  margin-top: 20px;
  width: 100%;
  animation: prepare-btn-in 0.3s ease both;
}

@keyframes prepare-btn-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .prepare-modal-card,
  .prepare-spinner,
  .prepare-open-btn {
    animation: none;
  }
}

/* ---------------------------------------------------------------------
   تكيّف حقيقي مع حجم الشاشة (جوال/تابلت/لابتوب/شاشة كبيرة) — بلا قفزات
   عند نقاط توقف محددة، بل قيم سائلة (clamp) تكبر/تصغر باستمرار مع عرض
   الشاشة الفعلي (نفس فكرة Apple/Google بالتحجيم، وليس بإعادة الهيكلة):
   --page-max-width أعلاه، وأحجام الخط/الحشو بجانب كل عنصر (hero-title،
   hero-subtitle، .card، .card h2). التصميم والهيكلة نفسها لا تتغيّر —
   عمود واحد دائماً بكل الأحجام، تماماً كالجوال، فقط أعرض وبخط أوضح
   تدريجياً. البنود المتبقية هنا هي فقط قرارات منفصلة (وليست تدرّجاً
   سائلاً) لا تصلح كـ clamp: حشو إضافي للهيدر/الفوتر، وتحديد عرض مريح
   لعناصر البحث/الزر الرئيسي في البطاقة البطلة حتى لا تتمدد حافة إلى حافة
   على شاشة عريضة جداً (يوضع هذا القسم في نهاية الملف عمداً حتى تتغلّب
   قواعده على القواعد الأساسية بنفس درجة التخصيص — ترتيب المصدر الفيصل).
--------------------------------------------------------------------- */
body {
  font-size: clamp(15px, 0.2vw + 14.4px, 16px);
}

@media (min-width: 720px) {
  .site-header,
  .site-footer {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* عناصر التفاعل الرئيسية بالبطاقة البطلة (خانة الرابط + الزر) تبقى
     بعرض مريح ومتمركزة بدل التمدد لعرض البطاقة بالكامل على شاشة عريضة —
     نفس الأسلوب الذي تتبعه مربعات بحث Apple/Google حتى على شاشات كبيرة. */
  .hero-card .link-input-wrap,
  .hero-card .link-preview,
  .hero-card .paste-hint-row,
  .hero-card > .btn-primary {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* -----------------------------------------------------------------------
   حملة زيارات — نافذة + شريط تنبيه (Apple/Google style)
----------------------------------------------------------------------- */

/* ── شريط التنبيه المصغر ── */
.vc-strip {
  position: sticky;
  top: 0;
  z-index: 9000;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

body.dark .vc-strip {
  background: #1a1f28;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.vc-strip.hidden {
  display: none !important;
}

.vc-strip-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vc-strip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.vc-strip-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vc-strip-progress {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.vc-strip-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.vc-strip-cta {
  border: none;
  background: var(--orange);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.vc-strip-cta:active {
  opacity: 0.88;
}

.vc-strip-close {
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--muted);
  width: 44px;
  min-height: 44px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.vc-strip-close:active {
  background: var(--border);
}

/* ── نافذة الحملة ── */
.vc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.vc-modal-overlay.hidden {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.vc-modal-overlay:not(.hidden) .vc-modal-sheet {
  animation: vcModalIn 0.18s ease forwards;
}

@keyframes vcModalIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

body.vc-modal-open {
  overflow: hidden;
}

.vc-modal-sheet {
  position: relative;
  width: min(520px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
  text-align: center;
}

body.dark .vc-modal-sheet {
  background: #1e2430;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.vc-modal-close {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #f0f1f4;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

body.dark .vc-modal-close {
  background: #2a3140;
}

.vc-modal-close:active {
  background: #e4e6ea;
}

.vc-modal-icon-wrap {
  width: 56px;
  height: 56px;
  margin: 8px auto 16px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 153, 0, 0.18) 0%, rgba(255, 153, 0, 0.08) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vc-modal-icon {
  font-size: 28px;
  line-height: 1;
}

.vc-modal-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
}

.vc-modal-desc {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

.vc-modal-benefits {
  list-style: none;
  margin: 0 0 20px;
  padding: 12px 14px;
  background: #f6f7f9;
  border-radius: 14px;
  text-align: right;
}

body.dark .vc-modal-benefits {
  background: #151922;
}

.vc-modal-benefits li {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  padding: 5px 0;
  line-height: 1.4;
}

.vc-modal-primary {
  display: block;
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 14px;
  background: var(--orange);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.vc-modal-primary:active {
  opacity: 0.92;
  transform: scale(0.99);
}

.vc-modal-hint {
  margin: 10px 0 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.vc-modal-secondary {
  display: inline-block;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
  min-height: 44px;
  padding: 8px 16px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.vc-modal-secondary:active {
  color: var(--navy);
}

@media (max-width: 480px) {
  .vc-modal-sheet {
    width: calc(100% - 24px);
    padding: 22px 20px;
  }

  .vc-modal-title {
    font-size: 18px;
  }

  .vc-strip-inner {
    padding: 8px 12px;
  }

  .vc-strip-cta {
    font-size: 13px;
    padding: 8px 14px;
  }
}

/* ── بطاقة الحملة في الصفحة ── */
.visit-campaign-card {
  border: 1px solid rgba(255, 153, 0, 0.28);
  box-shadow: 0 8px 28px rgba(255, 153, 0, 0.07);
  padding: 18px 16px 20px;
}

.visit-campaign-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.visit-campaign-head-text {
  flex: 1;
  min-width: 0;
}

.visit-campaign-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--orange-dark);
  background: rgba(255, 153, 0, 0.12);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 8px;
}

.visit-campaign-card h2 {
  margin: 0 0 6px;
  font-size: 20px;
}

.visit-campaign-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.visit-campaign-dismiss {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
}

.visit-campaign-dismiss:active {
  transform: scale(0.96);
}

.visit-progress-heading {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

.visit-campaign-highlight {
  animation: visitCampaignPulse 0.75s ease 2;
}

@keyframes visitCampaignPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 153, 0, 0); }
  50% { box-shadow: 0 0 0 6px rgba(255, 153, 0, 0.25); }
}

.btn-ghost {
  background: transparent;
  border: none;
  box-shadow: none;
}

.visit-progress-wrap {
  margin: 12px 0 16px;
}

.visit-progress-track {
  height: 10px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.visit-progress-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-dark) 100%);
  transition: width 0.35s ease;
}

.visit-progress-label {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

.visit-links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.visit-link-btn {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 700;
}

.visit-entry-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--soft);
  border: 1px solid var(--border);
  font-size: 14px;
  text-align: center;
  line-height: 1.5;
}

.visit-entry-note strong {
  font-family: "SF Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
}

.visit-empty {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* ── إعلان تحقيق الهدف ── */
.visit-goal-banner {
  position: sticky;
  top: 0;
  z-index: 850;
  background: linear-gradient(135deg, #fff8ed 0%, #fff3dc 100%);
  border-bottom: 1px solid rgba(255, 153, 0, 0.35);
  box-shadow: 0 4px 16px rgba(255, 153, 0, 0.08);
}

body.dark .visit-goal-banner {
  background: linear-gradient(135deg, #2a2218 0%, #1f1a12 100%);
  border-bottom-color: rgba(255, 153, 0, 0.25);
}

.visit-goal-banner.hidden { display: none; }

.visit-goal-banner-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.visit-goal-banner-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.visit-goal-banner-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.visit-goal-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.visit-goal-banner-link,
.visit-goal-notice-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background: #0088cc;
  color: #fff;
  white-space: nowrap;
}

.visit-goal-banner-link-secondary,
.visit-goal-notice-link-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.visit-goal-banner-dismiss {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.visit-goal-notice {
  margin: 14px 0 4px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 153, 0, 0.08);
  border: 1px solid rgba(255, 153, 0, 0.22);
  text-align: center;
}

.visit-goal-notice.hidden { display: none; }

.visit-goal-notice-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.visit-goal-notice-text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.visit-goal-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.visit-goal-closed-msg {
  margin: 12px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.cm-telegram-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.cm-telegram-link {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  text-align: center;
  font-weight: 600;
  text-decoration: none;
  background: #0088cc;
  color: #fff;
}

.cm-telegram-link-secondary {
  background: var(--soft);
  color: var(--text);
  border: 1px solid var(--border);
}

@media (max-width: 640px) {
  .visit-goal-banner-inner {
    flex-direction: column;
  }
  .visit-goal-banner-actions {
    width: 100%;
  }
  .visit-goal-banner-link,
  .visit-goal-banner-dismiss {
    flex: 1 1 calc(50% - 4px);
    text-align: center;
  }
}