/* ════════════════════════════════════════════════════════════
   ShopCoin — Brand Tokens v2.0 (October 2026)
   Source of truth: "دليل الهوية البصرية · شوب كوين"
   Loaded LAST on every page so it overrides older styles.
   Rule: any new colour in code must be one of these variables.
   ════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Thmanyah Sans'; src: url('https://framerusercontent.com/assets/Ej0k3h4Mi5O7TSo2w2JaDCPRgvo.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('https://framerusercontent.com/assets/3XGelYpTgxSxBXN4Oieg9Dt3bc.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('https://framerusercontent.com/assets/JUv6rms2ye2kYL3UI3O9YyExQcQ.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('https://framerusercontent.com/assets/ulQLGTktcl2Qq4AmD6RuVgELZKg.woff2') format('woff2'); font-weight: 800 900; font-display: swap; }

:root {
  /* ── Official brand tokens ── */
  --sc-brand:   #23D07A;  /* أخضر الشعار: الشعار، أزرار الطلب، الشارات، الأرقام المهمة */
  --sc-emerald: #059669;  /* الزمردي: الأيقونات، النصوص والروابط الخضراء على الفاتح، الحدود */
  --sc-neon:    #00FFA3;  /* النيون: التوهج فقط — داخل العناصر الداكنة، لا يُكتب به نص على الفاتح */
  --sc-ink:     #0F172A;  /* الحبري: الصناديق والكبسولات الداكنة */
  --sc-panel:   #1E293B;  /* الفحمي: الصفوف داخل الصناديق */
  --sc-text2:   #475569;  /* الرمادي الغامق: العناوين الفرعية */
  --sc-muted:   #94A3B8;  /* الرمادي: نص ثانوي على الداكن */
  --sc-line:    #E2E8F0;  /* الحدود والفواصل */
  --sc-bg:      #F1F5F9;  /* الخلفية الرخامية الفاتحة */
  --sc-white:   #FFFFFF;
  --sc-gold:    #F59E0B;  /* الرانكات والعروض والـVIP فقط */
  --sc-red:     #E50914;  /* التحذيرات والخصومات */
  --sc-font: "Thmanyah Sans", "Thmanyah", system-ui, sans-serif;
  --sc-radius-box: 20px;
  --sc-radius-pill: 999px;

  /* ── Legacy variables re-mapped to the brand (old pages keep working) ── */
  --blue-50:  #F1F5F9;
  --blue-100: #E2E8F0;
  --blue-200: #D1FAE5;
  --blue-300: #6EE7B7;
  --blue-400: #23D07A;
  --blue-500: #059669;
  --blue-600: #047857;
  --blue-700: #1E293B;
  --blue-800: #0F172A;
  --blue-900: #0F172A;
  --blue-950: #0B1120;
  --gray-700: #1E293B;
  --gray-800: #0F172A;
  --gray-900: #0B1120;
  --bg: var(--sc-bg);
  --surface: #FFFFFF;
  --text-primary: var(--sc-ink);
  --text-secondary: var(--sc-text2);
  --text-muted: var(--sc-muted);
  --text-dark: var(--sc-ink);
  --text-gray: var(--sc-text2);
  --gold: var(--sc-gold);
  --green: var(--sc-brand);
  --red: var(--sc-red);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 16px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.05);
  --shadow-lg: 0 12px 40px rgba(15,23,42,0.10), 0 4px 12px rgba(15,23,42,0.06);
  --shadow-blue: 0 8px 24px rgba(35,208,122,0.28);
  --radius-lg: var(--sc-radius-box);
  --radius-full: var(--sc-radius-pill);
}

/* ── One typeface everywhere (icons and code excluded) ── */
html, body,
body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class^="fa-"]):not(code):not(pre):not(kbd):not(.material-icons) {
  font-family: var(--sc-font) !important;
}
body { -webkit-font-smoothing: antialiased; }

/* ── Light marble background (the dark tone lives only inside components) ── */
html { background: var(--sc-bg); }
body {
  background-color: var(--sc-bg);
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(148,163,184,0.18), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(148,163,184,0.12), transparent 60%),
    radial-gradient(800px 400px at 50% 110%, rgba(35,208,122,0.06), transparent 60%);
  background-attachment: fixed;
  color: var(--sc-ink);
}

::selection { background: var(--sc-brand); color: var(--sc-ink); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sc-emerald); outline-offset: 2px; }

/* ── Brand components (use these classes for anything new) ── */
.sc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--sc-brand); color: var(--sc-ink);
  font-weight: 700; border: 0; border-radius: var(--sc-radius-pill);
  padding: 12px 26px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;
}
.sc-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1.5px var(--sc-neon), 0 8px 24px rgba(0,255,163,0.25); }
.sc-pill-dark {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sc-ink); color: #fff; border: 1.5px solid var(--sc-neon);
  border-radius: var(--sc-radius-pill); padding: 6px 16px; font-weight: 700;
}
.sc-box-dark { background: var(--sc-ink); color: #fff; border-radius: var(--sc-radius-box); border: 1.5px solid rgba(0,255,163,0.35); }
.sc-badge-gold { background: var(--sc-gold); color: var(--sc-ink); border-radius: var(--sc-radius-pill); padding: 4px 14px; font-weight: 700; }
.sc-badge-red  { background: var(--sc-red);  color: #fff; border-radius: var(--sc-radius-pill); padding: 4px 14px; font-weight: 700; }
.sc-signature {
  text-align: center; font-weight: 700; color: var(--sc-emerald);
  letter-spacing: .02em; direction: ltr; padding: 18px 16px 26px; font-size: 0.95rem;
}

/* ── Light-only (brand v2.0): hide the old dark-mode toggle ── */
.theme-toggle-btn, #themeToggleBtn { display: none !important; }

/* ── Mobile: keep header and hero inside the screen ── */
@media (max-width: 640px) {
  .nav-actions { gap: 6px !important; min-width: 0; flex-shrink: 1; }
  .global-currency-picker { max-width: 92px; overflow: hidden; }
  .global-currency-picker select { max-width: 100%; text-overflow: ellipsis; }
  .global-currency-picker i { display: none; }
  .nav-login-btn { padding: 8px 12px !important; }
  .hero-left, .hero-h1 { min-width: 0 !important; max-width: 100% !important; }
  .hero-h1 { font-size: clamp(1.6rem, 7.6vw, 2.2rem) !important; overflow-wrap: anywhere; }
  .blob { max-width: 100vw; }
  .hero-numbers { max-width: 100% !important; min-width: 0 !important; flex-wrap: wrap; justify-content: center; gap: 12px !important; }
  .hero-numbers .hn-item { min-width: 0; }
}

/* Track page: keep search input + button inside the screen on phones */
@media (max-width: 640px) {
  .search-bar-wrap { display: flex !important; flex-wrap: nowrap; gap: 8px; max-width: 100% !important; }
  .search-bar-wrap .search-input { min-width: 0; flex: 1 1 auto; width: auto !important; }
  .search-bar-wrap .search-btn { flex: 0 0 auto; white-space: nowrap; padding-inline: 16px !important; }
}

/* ── Horizontal logo (brand guide: شوب كوين + SHOP COIN) ── */
.sc-wordmark { display: inline-flex; flex-direction: column; line-height: 1; gap: 3px; }
.sc-wordmark b { font-weight: 900; font-size: 1.25rem; color: var(--sc-ink); }
.sc-wordmark small { font-weight: 800; font-size: .6rem; letter-spacing: .32em; color: var(--sc-emerald); direction: ltr; text-align: right; }
.footer .sc-wordmark b, .site-footer .sc-wordmark b { color: #fff; }
.logo-main { font-weight: 900 !important; }
.logo-tag { letter-spacing: .28em !important; color: var(--sc-emerald) !important; }

/* ── Mobile: service pages sticky bar + hero banner ── */
@media (max-width: 640px) {
  .sticky-summary-bar .summary-inner { gap: 10px !important; padding-inline: 12px !important; }
  .sticky-summary-bar .summary-right-details { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .sticky-summary-bar .summary-divider-line, .sticky-summary-bar .summary-coins { display: none !important; }
  .sticky-summary-bar .summary-total-price { font-size: .9rem !important; white-space: normal; line-height: 1.3; }
  .sticky-summary-bar .summary-complete-btn { flex: 0 0 auto; white-space: nowrap; padding: 12px 16px !important; font-size: .9rem !important; }
  .catalog-hero-banner, .catalog-hero-content, .catalog-hero-text { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
  .catalog-hero-banner { padding: 22px 18px !important; }
  .catalog-hero-title { font-size: clamp(1.4rem, 7vw, 1.9rem) !important; overflow-wrap: anywhere; }
  .catalog-hero-desc { overflow-wrap: anywhere; }
}

/* ── شعار الهيدر: مرتب ومتناسق ── */
.navbar .logo{gap:11px;align-items:center}
.navbar .nav-logo-box{width:44px;height:44px;padding:0;border-radius:13px;background:none;box-shadow:0 6px 16px rgba(5,150,105,.28);overflow:hidden}
.navbar .nav-logo-img{width:44px!important;height:44px!important;content:url(/sc-favicon.svg?v=2)}
.navbar .logo-info{gap:4px;line-height:1;align-items:stretch}
.navbar .logo-main{font-family:var(--sc-font,'Cairo',sans-serif);font-size:1.3rem;letter-spacing:0!important;line-height:1.1}
.navbar .logo-tag{font-family:'Montserrat',sans-serif;font-size:.6rem;letter-spacing:.24em!important;line-height:1;width:100%;text-align:center;direction:ltr;padding-left:.24em}