/* ═══════════════════════════════════════════════════════════════════════════ THEME 4 — LUXE | Global Styles | RTL (Arabic / Hebrew) Dark & Light mode via [data-theme="dark"] on ═══════════════════════════════════════════════════════════════════════════ */ /* ── CSS Variables — Light Mode (default) ─────────────────────────────── */ :root { /* نفس ثيم 3: fallback قبل useGlobalTheme؛ يُستبدل من الإدمن عند التحميل */ --font-family: "Cairo", "Tajawal", "Segoe UI", system-ui, sans-serif; --t4-bg: #ffffff; --t4-bg-secondary: #f5f5f5; --t4-surface: #f8f8f8; --t4-surface-2: #eeeeee; --t4-text: #0a0a0a; --t4-text-muted: #6b6b6b; --t4-text-faint: #aaaaaa; --t4-border: #e5e5e5; --t4-border-light: #f0f0f0; --t4-overlay: rgba(0, 0, 0, 0.04); --t4-shadow-sm: 0 1px 4px rgba(0,0,0,0.06); --t4-shadow-md: 0 4px 16px rgba(0,0,0,0.08); --t4-shadow-lg: 0 8px 32px rgba(0,0,0,0.12); --t4-radius-sm: 6px; --t4-radius-md: 12px; --t4-radius-lg: 20px; --t4-radius-full: 9999px; --t4-nav-height: 72px; --t4-promo-height: 0px; --t4-transition: 0.2s ease; --t4-glass-bg: rgba(255, 255, 255, 0.75); --t4-glass-border: rgba(0, 0, 0, 0.06); --t4-btn-bg: var(--MainColor, #0a0a0a); --t4-btn-text: #ffffff; } /* ── CSS Variables — Dark Mode (soft charcoal, not pure black) ─────────── */ html[data-theme="dark"] { --t4-bg: #1c1d24; --t4-bg-secondary: #24252d; --t4-surface: #2c2d36; --t4-surface-2: #363740; --t4-text: #ececf1; --t4-text-muted: #a8a9b4; --t4-text-faint: #72737f; --t4-border: #43444f; --t4-border-light: #32333c; --t4-overlay: rgba(255, 255, 255, 0.06); --t4-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.18); --t4-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.22); --t4-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.28); --t4-glass-bg: rgba(28, 29, 36, 0.9); --t4-glass-border: rgba(255, 255, 255, 0.1); --t4-btn-bg: #e6e6ec; --t4-btn-text: #1c1d24; } /* ── Base ──────────────────────────────────────────────────────────────── */ body { background-color: var(--t4-bg); color: var(--t4-text); font-family: var(--font-family, 'Cairo', sans-serif); direction: rtl; transition: background-color 0.3s ease, color 0.3s ease; -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img { max-width: 100%; } /* ── Main content padding ──────────────────────────────────────────────── */ #main-content { padding-top: calc(var(--t4-nav-height, 72px) + var(--t4-promo-height, 0px)); min-height: 100vh; background: var(--t4-bg); } /* صفحات المنتجات / التصنيف — خلفية موحّدة للمحتوى والفوتر */ html:has(#main-content .pdRoot), html:has(#main-content .plRoot), html:has(#main-content .msRoot), html:has(#main-content .cuRoot), html:has(#main-content .toRoot), html:has(#main-content .prRoot), html:has(#main-content .ssRoot), html:has(#main-content .erRoot), html:has(#main-content .srRoot), html:has(#main-content .wlRoot) { background-color: var(--t4-bg-secondary); } body:has(#main-content .pdRoot), body:has(#main-content .plRoot), body:has(#main-content .msRoot), body:has(#main-content .cuRoot), body:has(#main-content .toRoot), body:has(#main-content .prRoot), body:has(#main-content .ssRoot), body:has(#main-content .erRoot), body:has(#main-content .srRoot), body:has(#main-content .wlRoot) { background-color: var(--t4-bg-secondary); } #main-content:has(.pdRoot), #main-content:has(.plRoot), #main-content:has(.msRoot), #main-content:has(.cuRoot), #main-content:has(.toRoot), #main-content:has(.prRoot), #main-content:has(.ssRoot), #main-content:has(.erRoot), #main-content:has(.srRoot), #main-content:has(.wlRoot), #main-content.t4SecondSiteMain { background: var(--t4-bg-secondary) !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* مسافة تحت الهيدر الثابت — padding-top لـ #main-content مُصفَّر أعلاه */ #main-content .pdRoot, #main-content .plRoot, #main-content .msRoot, #main-content .cuRoot, #main-content .toRoot, #main-content .prRoot, #main-content .srRoot, #main-content .wlRoot { padding-top: calc(var(--t4-nav-height, 72px) + var(--t4-promo-height, 0px) + 0.5rem); } html.t4-second-site, body.t4-second-site { background-color: var(--t4-bg-secondary) !important; } body.t4-second-site > div { min-height: 100vh; background-color: inherit; } html:has(.erRoot), body:has(.erRoot) { background-color: var(--t4-bg-secondary) !important; } body:has(.erRoot) > div { min-height: 100vh; min-height: 100dvh; background-color: inherit; } html[data-theme="dark"]:has(.erRoot), html[data-theme="dark"] body:has(.erRoot) { background-color: var(--t4-bg) !important; } html[data-theme="dark"] body:has(.erRoot) .erRoot { background: var(--t4-bg) !important; } html[data-theme="dark"].t4-second-site, html[data-theme="dark"] body.t4-second-site { background-color: var(--t4-bg) !important; } html[data-theme="dark"] #main-content.t4SecondSiteMain { background: var(--t4-bg) !important; } /* Profile — mobile: no side gutters on cards */ @media (max-width: 991px) { #main-content .prRoot .prPage { max-width: 100% !important; padding-inline: 0 !important; } #main-content .prRoot .container { max-width: 100% !important; padding-inline: 0 !important; } } html[data-theme="dark"]:has(#main-content .pdRoot), html[data-theme="dark"]:has(#main-content .plRoot), html[data-theme="dark"]:has(#main-content .msRoot), html[data-theme="dark"]:has(#main-content .cuRoot), html[data-theme="dark"]:has(#main-content .toRoot), html[data-theme="dark"]:has(#main-content .prRoot), html[data-theme="dark"]:has(#main-content .ssRoot) { background-color: var(--t4-bg); } html[data-theme="dark"] body:has(#main-content .pdRoot), html[data-theme="dark"] body:has(#main-content .plRoot), html[data-theme="dark"] body:has(#main-content .msRoot), html[data-theme="dark"] body:has(#main-content .cuRoot), html[data-theme="dark"] body:has(#main-content .toRoot), html[data-theme="dark"] body:has(#main-content .prRoot), html[data-theme="dark"] body:has(#main-content .ssRoot), html[data-theme="dark"] body:has(#main-content .erRoot), html[data-theme="dark"] body:has(#main-content .srRoot), html[data-theme="dark"] body:has(#main-content .wlRoot) { background-color: var(--t4-bg); } html[data-theme="dark"] #main-content:has(.pdRoot), html[data-theme="dark"] #main-content:has(.plRoot), html[data-theme="dark"] #main-content:has(.msRoot), html[data-theme="dark"] #main-content:has(.cuRoot), html[data-theme="dark"] #main-content:has(.toRoot), html[data-theme="dark"] #main-content:has(.prRoot), html[data-theme="dark"] #main-content:has(.ssRoot), html[data-theme="dark"] #main-content:has(.erRoot), html[data-theme="dark"] #main-content:has(.srRoot), html[data-theme="dark"] #main-content:has(.wlRoot) { background: var(--t4-bg); } /* ── Scrollbar ──────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--t4-bg); } ::-webkit-scrollbar-thumb { background: var(--t4-border); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--t4-text-faint); } /* ── Selection ──────────────────────────────────────────────────────────── */ ::selection { background: var(--MainColor, #0a0a0a); color: #fff; } html[data-theme="dark"] ::selection { background: var(--t4-surface-2); color: var(--t4-text); }