@charset "UTF-8"; /* ========================================================================== microopay — نظام التصميم ========================================================================== الترتيب: 1) التوكنز 7) بطاقات الألعاب والمنتجات 2) الأساسيات 8) المحفظة والطلبات 3) الحركات 9) الدرج الجانبي والنوافذ والقوايم 4) الهيدر والتنقّل 10) الإشعارات وهياكل التحميل 5) البانر العلوي 11) صفحات الدخول/التأكيد 6) العناصر الأساسية 12) الاستجابة ========================================================================== */ /* ══════════════════════════════════════════════════════════════════════════ 1) التوكنز ══════════════════════════════════════════════════════════════════════════ */ :root { /* ⚠️ الوضع الفاتح اتظبط في v4. كان --bg: #f4f5f8 و--surface: #ffffff — الفرق بينهم 3% إضاءة بس، يعني الكارت والصفحة كانوا بيبانوا نفس الطبقة والعين تفضل تدوّر على الحدود. والنتيجة سطح أبيض كبير متصل، وده اللي بيرهق فعلاً في جلسة طويلة. دلوقتي الخلفية محايدة أعمق شوية والأسطح فوقها بيضا — الفرق بين الطبقات جاي من الخلفية نفسها مش من ظل تقيل. الرماديات النصية تحت **ماتغيرتش**: هي متحسوبة على WCAG AA مقابل أفتح خلفية، وتغميق الخلفية بيحسّن التباين مش بيقلّله. */ --bg: #eef1f5; --bg-2: #e3e8ef; --surface: #ffffff; --surface-2: #f6f8fb; --surface-3: #e9edf3; --pill: #e8ebf1; --border: #dde3ec; --border-2: #c9d2de; --text: #171a20; --text-2: #454b57; /* ⚠️ الرماديات دي اتظبطت على تباين WCAG AA (4.5:1) مش على الشكل بس. #737a88 القديم كان بيدي 3.72:1 على --bg و3.96 على .trust-row — يعني كل النصوص الثانوية (وصف الأقسام، شريط الثقة، الملاحظات الصغيرة) كانت تحت الحد في الوضع الفاتح. #5f6673 بيدي 4.98:1 في أسوأ خلفية. أي تفتيح تاني هنا لازم يتحسب الأول. */ --muted: #5f6673; /* للـ placeholder بس (.header-search) — بيترسم على --surface-2. القديم #99a0ad كان 2.5:1، والجديد 4.59:1. */ --muted-2: #6b7280; --brand: #4f46e5; /* ⚠️ نهاية التدرّج في علامة المتجر. مرسومة inline في index.html و login.html و verify.php بـ var(--brand-2)، فلما الأدمن يغيّر لون العلامة من صفحة "الواجهة"، اللوجو بيتغيّر معاها من غير أي جافاسكريبت ومن غير أي وميض — theme.php بيكتب القيمة الجديدة في . */ --brand-2: #8b3ff0; --brand-dk: #4338ca; --brand-lt: #6366f1; --brand-soft: #eeeffe; --brand-border: #c9cbf8; --on-brand: #ffffff; --buy: #0f7a5a; --buy-dk: #0b6349; --buy-soft: #e6f5ef; --buy-border: #b6e0d0; --on-buy: #ffffff; --ok: #0f7a5a; --ok-soft: #e6f5ef; --warn: #a2600a; --warn-soft: #fdf2e2; --danger: #bb1338; --danger-soft: #fdedf1; --info: #1e4fd8; --info-soft: #e9effe; --r-xs: 6px; --r-sm: 9px; --r: 13px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* ظلال أخف من الأول: مع خلفية محايدة أعمق، الحدود بقت كافية لفصل الطبقات، والظل التقيل كان بيضيف ضبابية حوالين كل كارت من غير أي معنى. */ --sh-xs: 0 1px 1px rgba(15,20,30,.04); --sh-sm: 0 1px 3px rgba(15,20,30,.06); --sh: 0 3px 10px rgba(15,20,30,.06); --sh-md: 0 10px 26px rgba(15,20,30,.08); --sh-lg: 0 22px 54px rgba(15,20,30,.14); --ring: 0 0 0 3px rgba(79,70,229,.18); --header-h: 64px; /* ارتفاع شريط الأقسام. القيمة دي احتياطي بس — store.js بيقيس الشريط الفعلي ويكتب القيمة الصح، عشان شريط الألعاب اللي تحته يلزق في المكان الصح مهما اتغيّر الخط أو حجمه في متصفح العميل. */ --nav-h: 45px; --wrap: 1240px; --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --t-fast: 120ms; --t: 180ms; --t-slow: 280ms; --font: "Segoe UI", "Noto Sans Arabic", "Noto Kufi Arabic", Tahoma, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* توافق خلفي مع أسماء كانت مستخدمة في صفحات تانية */ --accent: var(--brand); --accent-dk: var(--brand-dk); --success: var(--ok); --success-soft: var(--ok-soft); --radius: var(--r); --radius-sm: var(--r-sm); --radius-lg: var(--r-lg); --shadow: var(--sh); --shadow-sm: var(--sh-sm); --shadow-lg: var(--sh-lg); color-scheme: light; } /* ⚠️ لوح الغامق مكتوب **مرتين** بالظبط تحت، والاتنين لازم يفضلوا متطابقين. السبب إن CSS مفيهاش طريقة تعيد استخدام بلوك تعريفات في سياقين مختلفين (جوّه @media وبره‌ه)، والاتنين مطلوبين فعلاً: · جوّه الـ @media → الغامق التلقائي حسب إعداد الجهاز، وبيشتغل **من غير جافاسكريبت**. ده اللي بيمنع وميض أبيض قبل ما السكريبت يشتغل. · [data-theme="dark"] → لما العميل يختار الغامق بإيده وجهازه فاتح. الـ :not([data-theme="light"]) مهم: من غيره اختيار العميل للفاتح كان هيتلغي على أي جهاز إعداده غامق. البلوكين اتولّدوا من نفس النص، فأي تعديل لازم يتعمل في الاتنين. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #101216; --bg-2: #0b0d10; --surface: #191c22; --surface-2: #1e222a; --surface-3: #242932; --pill: #242932; --border: #2b3039; --border-2: #3a4049; --text: #e9ebef; --text-2: #bcc2cc; --muted: #8a919e; /* #6e7684 القديم كان 3.48:1 على --surface-2 — تحت الحد. الجديد 4.59:1. */ --muted-2: #828a99; --brand: #7d79f2; /* نهاية تدرّج العلامة في الوضع الغامق — أفتح من نسخة النهار عشان تفضل بايناً على الخلفية الغامقة. */ --brand-2: #a86ff5; --brand-dk: #6b67ea; --brand-lt: #918ef5; --brand-soft: #23234a; --brand-border: #3b3a77; --on-brand: #ffffff; --buy: #16b283; --buy-dk: #12a077; --buy-soft: #12302a; --buy-border: #1e4d43; --on-buy: #04231b; --ok: #16b283; --ok-soft: #12302a; --warn: #d99a2b; --warn-soft: #33280f; --danger: #f2617f; --danger-soft: #3a1723; --info: #6b9bfb; --info-soft: #16244a; --sh-xs: 0 1px 2px rgba(0,0,0,.4); --sh-sm: 0 1px 3px rgba(0,0,0,.45); --sh: 0 3px 12px rgba(0,0,0,.45); --sh-md: 0 12px 30px rgba(0,0,0,.5); --sh-lg: 0 26px 64px rgba(0,0,0,.6); --ring: 0 0 0 3px rgba(125,121,242,.28); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #101216; --bg-2: #0b0d10; --surface: #191c22; --surface-2: #1e222a; --surface-3: #242932; --pill: #242932; --border: #2b3039; --border-2: #3a4049; --text: #e9ebef; --text-2: #bcc2cc; --muted: #8a919e; /* #6e7684 القديم كان 3.48:1 على --surface-2 — تحت الحد. الجديد 4.59:1. */ --muted-2: #828a99; --brand: #7d79f2; /* نهاية تدرّج العلامة في الوضع الغامق — أفتح من نسخة النهار عشان تفضل بايناً على الخلفية الغامقة. */ --brand-2: #a86ff5; --brand-dk: #6b67ea; --brand-lt: #918ef5; --brand-soft: #23234a; --brand-border: #3b3a77; --on-brand: #ffffff; --buy: #16b283; --buy-dk: #12a077; --buy-soft: #12302a; --buy-border: #1e4d43; --on-buy: #04231b; --ok: #16b283; --ok-soft: #12302a; --warn: #d99a2b; --warn-soft: #33280f; --danger: #f2617f; --danger-soft: #3a1723; --info: #6b9bfb; --info-soft: #16244a; --sh-xs: 0 1px 2px rgba(0,0,0,.4); --sh-sm: 0 1px 3px rgba(0,0,0,.45); --sh: 0 3px 12px rgba(0,0,0,.45); --sh-md: 0 12px 30px rgba(0,0,0,.5); --sh-lg: 0 26px 64px rgba(0,0,0,.6); --ring: 0 0 0 3px rgba(125,121,242,.28); color-scheme: dark; } /* ══════════════════════════════════════════════════════════════════════════ 2) الأساسيات ══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } body.no-scroll { overflow: hidden; } h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; } h1 { font-size: 30px; } h2 { font-size: 20px; } h3 { font-size: 17px; } h4 { font-size: 15px; } p { margin: 0; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); } [hidden] { display: none !important; } /* الأرقام والأكواد والإيميلات — دايماً من الشمال لليمين */ .ltr { direction: ltr; unicode-bidi: isolate; text-align: start; } .num { font-variant-numeric: tabular-nums; } .small { font-size: 13px; } .tiny { font-size: 12px; } .muted { color: var(--muted); } .container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; } .stack { display: flex; flex-direction: column; gap: 10px; } .inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .grow { flex: 1; min-width: 0; } /* ══════════════════════════════════════════════════════════════════════════ 3) الحركات ══════════════════════════════════════════════════════════════════════════ */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes zoom-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes drawer-in{ from { transform: translateX(-100%); } to { transform: none; } } @keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { 100% { background-position-x: -200%; } } @keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } } .view-enter > * { animation: rise var(--t-slow) var(--ease-out) both; } .view-enter > *:nth-child(1) { animation-delay: 0ms; } .view-enter > *:nth-child(2) { animation-delay: 45ms; } .view-enter > *:nth-child(3) { animation-delay: 90ms; } .view-enter > *:nth-child(4) { animation-delay: 135ms; } .anim-pop { animation: pop 380ms var(--ease-out); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ══════════════════════════════════════════════════════════════════════════ 4) الهيدر والتنقّل ══════════════════════════════════════════════════════════════════════════ */ .site-header { position: sticky; top: 0; z-index: 60; background: var(--surface); border-bottom: 1px solid var(--border); transition: box-shadow var(--t) var(--ease); } .site-header.is-stuck { box-shadow: var(--sh-sm); } .header-inner { max-width: var(--wrap); margin-inline: auto; padding: 0 20px; height: var(--header-h); display: flex; align-items: center; gap: 12px; } .logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex: none; } .logo:hover { text-decoration: none; } .logo-mark { width: 34px; height: 34px; border-radius: 10px; flex: none; } .logo-word { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--text); direction: ltr; } .logo-word b { color: var(--brand); } /* ⚠️ .logo-ar اتشالت في v5: الاسم بقى كلمة واحدة (microopay) من غير جزء عربي منفصل جنبه، فمابقاش فيه حاجة تترسم في الخانة دي. الصورة اللي الأدمن بيرفعها من صفحة "الواجهة" بتتحط مكان العلامة كلها عن طريق theme.php — شوف .logo-custom تحت. */ /* لوجو مرفوع من لوحة التحكم: theme.php بيولّد القاعدة اللي بتخفي العلامة المرسومة وبتحط الصورة مكانها. الارتفاع مثبّت والعرض بيتحسب — عشان أي نسبة أبعاد للصورة تفضل مظبوطة من غير ما الهيدر يتمطّط. */ .logo-img { height: 34px; width: auto; max-width: 190px; display: block; } .header-search { flex: 1; min-width: 0; max-width: 460px; height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t) var(--ease); } .header-search::placeholder { color: var(--muted-2); } .header-search:focus { outline: none; background-color: var(--surface); border-color: var(--brand); box-shadow: var(--ring); } .header-search::-webkit-search-cancel-button { cursor: pointer; } .header-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-inline-start: auto; } /* شريحة الرصيد — أهم رقم في الهيدر، وبتفتح المحفظة */ .balance-chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 1px solid var(--buy-border); background: var(--buy-soft); color: var(--buy); border-radius: var(--r-pill); font-size: 13px; font-weight: 800; cursor: pointer; font-variant-numeric: tabular-nums; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); } .balance-chip:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); } .balance-chip .b-label { color: var(--muted); font-weight: 600; } .cur-switch { display: inline-flex; padding: 3px; background: var(--pill); border-radius: var(--r-pill); border: 1px solid var(--border); } .cur-btn { border: 0; background: none; cursor: pointer; padding: 4px 11px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; color: var(--muted); transition: all var(--t) var(--ease); } .cur-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--sh-xs); } .icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; min-width: 38px; padding: 0 13px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: var(--r-pill); font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--t) var(--ease); } .icon-btn:hover { border-color: var(--border-2); color: var(--text); transform: translateY(-1px); } .count-badge { position: absolute; top: -6px; inset-inline-start: -6px; min-width: 19px; height: 19px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: var(--on-brand); border-radius: var(--r-pill); font-size: 11px; font-weight: 800; line-height: 1; border: 2px solid var(--surface); } /* شريط الأقسام */ .main-nav { position: sticky; top: var(--header-h); z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); } .main-nav-inner { max-width: var(--wrap); margin-inline: auto; padding: 0 20px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .main-nav-inner::-webkit-scrollbar { display: none; } .nav-link { position: relative; padding: 13px 14px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; border: 0; background: none; cursor: pointer; transition: color var(--t) var(--ease); } .nav-link:hover { color: var(--text); text-decoration: none; } .nav-link::after { content: ""; position: absolute; inset-inline: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--brand); transform: scaleX(0); transition: transform var(--t) var(--ease-out); } .nav-link.active { color: var(--brand); } .nav-link.active::after { transform: scaleX(1); } .nav-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 19px; padding: 0 6px; margin-inline-start: 6px; background: var(--pill); color: var(--text-2); border-radius: var(--r-pill); font-size: 11px; font-weight: 800; } .nav-link.active .nav-pill { background: var(--brand-soft); color: var(--brand); } /* ══════════════════════════════════════════════════════════════════════════ 5) البانر العلوي ══════════════════════════════════════════════════════════════════════════ */ .hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); border-bottom: 1px solid var(--border); } .hero::before { content: ""; position: absolute; top: -190px; left: 50%; width: 760px; height: 440px; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 22%, transparent), transparent); pointer-events: none; } .hero-inner { position: relative; max-width: var(--wrap); margin-inline: auto; padding: 46px 20px 30px; text-align: center; } .hero h1 { font-size: clamp(26px, 4.4vw, 40px); letter-spacing: -.025em; } .hero-lead { margin: 12px auto 0; max-width: 580px; color: var(--text-2); font-size: 16px; } .hero-actions { margin-top: 22px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } /* ── السلايدر ──────────────────────────────────────────────────────────── ⚠️ الشرائح كلها فوق بعض في نفس المكان (grid بخانة واحدة)، والتبديل بـ opacity/transform بس. ليه مش شريط بينزلق أفقياً (translateX على كل الشرائح)؟ عشان ده بيطلب من المتصفح يرسم كل الشرائح مع بعض في كل إطار — على تليفون ضعيف بـ4 بانرات فيهم صور، ده بيقطّع بشكل واضح. التلاشي بيرسم اتنين بس. وليه grid مش position:absolute؟ عشان أطول شريحة هي اللي بتحدد الارتفاع لوحدها، فمفيش قفزة في تخطيط الصفحة لما الشريحة تتبدّل. */ .hero-track { display: grid; } .hero-slide { grid-area: 1 / 1; position: relative; min-width: 0; opacity: 0; visibility: hidden; transform: scale(1.015); transition: opacity 520ms var(--ease), transform 620ms var(--ease), visibility 520ms; } .hero-slide.is-active { opacity: 1; visibility: visible; transform: none; } /* ── صورة البانر ───────────────────────────────────────────────────────── ⚠️ الشريحة اللي فيها صورة بتشتغل بقواعد تانية خالص (.has-image تحت). اللي كان بيحصل قبل v4: الصورة بتتحط بشفافية 30% ورا النص، وفوقها `::after` بتدرّج لوني كامل، وفوقهم الهالة الدايرية بتاعة `.hero::before`. يعني الأدمن يرفع بانر مصمّم، والموقع يعتّمه ويحط عليه تلات طبقات وشارة وعنوان وزرار — وكل ده مالوش أي علاقة بالصورة اللي هو اختارها. الافتراضي (شريحة نصية من غير صورة) لسه زي ما هو تحت. */ .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; } /* طبقة تدرّج فوق الصورة — من غيرها النص بيبقى غير مقروء على صورة فاتحة. بتستخدم لون البانر لو الأدمن حدّده. */ .hero-slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--slide-accent, var(--brand)) 16%, transparent) 0%, var(--bg) 100%); } .hero-slide > .hero-inner { z-index: 1; } /* ── شريحة فيها صورة مرفوعة ──────────────────────────────────────────── */ .hero-slide.has-image { /* الصورة بقت في السياق العادي مش absolute، فهي اللي بتحدد ارتفاع الشريحة — يعني نسبة أبعاد الصورة الأصلية هي اللي بتظهر، من غير قص على ارتفاع متخمّن. */ display: grid; min-height: 0; /* صورة نسبتها مختلفة عن نسبة الشريحة بيفضل على جنبها فراغ (لأننا مش بنقص). الفراغ بياخد لون الصفحة عشان يبان جزء من التصميم مش شريط أبيض غريب. */ background: var(--bg-2); } .hero-slide.has-image > .hero-bg { position: relative; grid-area: 1 / 1; width: 100%; height: auto; /* أوبيسيتي كاملة — الصورة هي البانر. */ opacity: 1; /* contain مش cover: مبيقصّش من الصورة. الحد الأقصى للارتفاع بيمنع صورة طويلة جداً من إنها تاخد الشاشة كلها على الموبايل. */ object-fit: contain; max-height: min(58vh, 520px); display: block; } /* مفيش أي طبقة فوق الصورة */ .hero-slide.has-image::after { content: none; } .hero:has(.hero-slide.has-image.is-active)::before { display: none; } /* لو الأدمن كتب نص مع الصورة، النص بيتحط فوقها ومعاه تدرّج **موضعي** من تحت بس — مساحة مقروءة تحت الكلام، مش طبقة على الصورة كلها. */ .hero-slide.has-image > .hero-inner { grid-area: 1 / 1; align-self: end; padding: 34px 20px 26px; background: linear-gradient(0deg, rgba(8, 10, 16, .82) 0%, rgba(8, 10, 16, .55) 45%, transparent 100%); color: #fff; } .hero-slide.has-image > .hero-inner h1, .hero-slide.has-image > .hero-inner .hero-lead { color: #fff; } .hero-slide.has-image > .hero-inner .hero-badge { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .34); color: #fff; } /* صورة من غير أي نص: مفيش تدرّج ولا حشو — الصورة لوحدها بالظبط. العنوان لسه موجود في الـ DOM لقارئ الشاشة (`.sr-only`) بس مش مرسوم. */ .hero-slide.image-only > .hero-inner { background: none; padding: 0; } /* ⚠️ الكلاس ده لازم يفضل موجود — store.js بيستخدمه لعنوان البانر لما يكون فيه صورة من غير نص. من غيره العنوان بيتكتب فوق الصورة بالفعل. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hero-badge { display: inline-block; margin-bottom: 12px; padding: 5px 13px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--slide-accent, var(--brand)) 16%, transparent); border: 1px solid color-mix(in srgb, var(--slide-accent, var(--brand)) 40%, transparent); color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .02em; } /* ── أزرار ونقاط التنقّل ─────────────────────────────────────────────── */ .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: var(--sh-sm); opacity: .82; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); } .hero-arrow:hover { opacity: 1; } .hero-arrow:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; opacity: 1; } /* inset-inline بيتقلب لوحده مع اتجاه الصفحة — سهم "السابق" بيفضل في ناحية بداية السطر في العربي والإنجليزي من غير قاعدة منفصلة لكل اتجاه. */ .hero-prev { inset-inline-start: 12px; } .hero-next { inset-inline-end: 12px; } /* ⚠️ النقط في السياق العادي مش absolute. كانت bottom:64px — رقم متخمّن على ارتفاع المحتوى، وأول ما اتضاف صف زراير الحساب تحتها بقت قريبة منه جداً، وكانت هتتكسر تاني مع أي بانر نصه أطول. في السياق العادي بتاخد مكانها لوحدها مهما اتغيّر اللي فوقها أو تحتها. */ .hero-dots { position: relative; z-index: 2; display: flex; justify-content: center; gap: 7px; padding: 4px 20px 0; } .hero-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--border-2); border: 0; cursor: pointer; transition: width var(--t) var(--ease), background var(--t) var(--ease); } .hero-dot.is-on { width: 22px; border-radius: var(--r-pill); background: var(--brand); } .hero-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* صف زراير الحساب — ثابت تحت الشرائح، مش جوّه أي شريحة. بيفضل ظاهر مهما اتبدّل البانر. مسافة تحت عشان النقط ماتركبش عليه. */ .hero-cta { position: relative; z-index: 1; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 0 20px 26px; } .hero-cta:empty { display: none; } /* ⚠️ احترام إعداد تقليل الحركة. التشغيل التلقائي بيتوقف من الجافاسكريبت كمان — الاتنين مطلوبين: ده بيشيل الانتقال، وده بيمنع التبديل أصلاً. */ @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; transform: none; } .hero-dot { transition: none; } } @media (max-width: 700px) { /* الأسهم بتتخفي على الموبايل — السحب بالإصبع أطبيعي، والأسهم بتغطي النص */ .hero-arrow { display: none; } /* على الموبايل الصورة بتاخد عرض الشاشة كامل وارتفاعها بيتحسب من نسبتها. الحد الأقصى أقل شوية عشان الأقسام اللي تحت البانر يبان منها حاجة من غير سكرول. */ .hero-slide.has-image > .hero-bg { max-height: 46vh; } .hero-slide.has-image > .hero-inner { padding: 26px 16px 18px; } } .trust-row { max-width: var(--wrap); margin-inline: auto; padding: 12px 20px; display: flex; justify-content: center; gap: 8px 26px; flex-wrap: wrap; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; } .trust-row span { display: inline-flex; align-items: center; gap: 6px; } .trust-row .tick { color: var(--ok); font-weight: 800; } /* ── عدّاد الطلبات ───────────────────────────────────────────────────────── ⚠️ [hidden] لازم تكون أقوى من display:inline-flex اللي فوق، وإلا العدّاد كان هيفضل باين وهو فاضي على أي متجر لسه محصلش العدد الكافي. */ .trust-row .trust-live[hidden] { display: none; } .trust-live { color: var(--text-2); font-weight: 700; } /* النقطة اللي بتنبض — هي اللي بتقول "الرقم ده حيّ" من غير أي كلام زيادة */ .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: live-pulse 2.4s var(--ease) infinite; } @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ok) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 0%, transparent); } } /* ⚠️ اللي مفعّل عنده "قلّل الحركة" في نظامه مش المفروض يشوف أي نبض — دي إعدادات بيحطها ناس عندهم حساسية للحركة أو دوار، مش تفضيل شكلي. */ @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } } /* ══════════════════════════════════════════════════════════════════════════ 6) العناصر الأساسية ══════════════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 18px; border: 1px solid var(--border-2); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), opacity var(--t) var(--ease); } .btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--sh-sm); } .btn:active { transform: translateY(0); box-shadow: none; } .btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } .btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .btn-primary:hover { background: var(--brand-dk); border-color: var(--brand-dk); } .btn-buy { background: var(--buy); border-color: var(--buy); color: var(--on-buy); } .btn-buy:hover { background: var(--buy-dk); border-color: var(--buy-dk); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text-2); } .btn-ghost:hover { background: var(--surface-3); color: var(--text); } .btn-danger { background: transparent; border-color: var(--border); color: var(--danger); } .btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); } .btn-sm { min-height: 34px; padding: 0 13px; font-size: 13px; } .btn-lg { min-height: 50px; padding: 0 26px; font-size: 15px; } .btn-block { width: 100%; } .btn.is-loading { color: transparent !important; pointer-events: none; position: relative; } .btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; color: var(--text); animation: spin 620ms linear infinite; } .btn-primary.is-loading::after { color: var(--on-brand); } .btn-buy.is-loading::after { color: var(--on-buy); } .field { margin-bottom: 14px; } .field > label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); } .field input, .field select, .field textarea, .input { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .field textarea { min-height: 84px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); } .field-hint { margin-top: 6px; font-size: 12px; color: var(--muted); } .form-msg { margin: 10px 0 0; font-size: 13px; min-height: 18px; color: var(--muted); } .form-msg.ok { color: var(--ok); font-weight: 600; } .form-msg.error { color: var(--danger); font-weight: 600; } .tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; background: var(--pill); color: var(--text-2); } .tag-ok { background: var(--ok-soft); color: var(--ok); } .tag-warn { background: var(--warn-soft); color: var(--warn); } .tag-danger { background: var(--danger-soft); color: var(--danger); } .tag-info { background: var(--info-soft); color: var(--info); } .tag-brand { background: var(--brand-soft); color: var(--brand); } .tag-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ── شريط التوفر ────────────────────────────────────────────────────── بديل عرض **عدد** الأكواد المتبقية. الرقم الحقيقي مبقاش بيتعرض للعميل خالص: أربع خانات بتتملي حسب مستوى المخزون، وكلمة واحدة بتوصف المستوى. ليه؟ الرقم الصريح ("آخر 3 قطع") كان بيقول لأي حد بالظبط كام كود فاضل في الخزنة — معلومة تشغيلية بتفيد اللي عايز يفضّي المخزون أكتر ما بتفيد المشتري العادي. المستوى وحده بيدّي نفس الإحساس بالإلحاح من غير ما يدّي رقم يتبني عليه. المستويات في stockBar() في store.js: 0 نفد · 1 قليل جداً · 2 كمية محدودة · 3 متوفر · 4 متوفر بكثرة. */ .stock-meter { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .stock-bar { display: inline-flex; gap: 3px; flex: none; /* الشريط دايماً بنفس العرض مهما كان المستوى — الخانات الفاضية بتفضل مرسومة باهتة. من غير كده الشريط كان بيقصر مع نقص المخزون والبطاقات تبان مش متساوية. */ } .stock-bar i { display: block; width: 15px; height: 5px; border-radius: 3px; background: var(--border); transition: background var(--t) var(--ease); } .stock-bar i.on { background: currentColor; } .stock-word { font-size: 12px; font-weight: 700; } .stock-meter.lv-0 { color: var(--danger); } .stock-meter.lv-1 { color: var(--danger); } .stock-meter.lv-2 { color: var(--warn); } .stock-meter.lv-3 { color: var(--ok); } .stock-meter.lv-4 { color: var(--ok); } .price { font-size: 19px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .price-lg { font-size: 27px; } .price-alt { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .price-tag { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .section { margin: 26px 0; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .section-head h2 { font-size: 20px; } .section-sub { color: var(--muted); font-size: 13px; margin-top: 3px; font-weight: 400; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-xs); } .panel-tight { padding: 14px; } .chip-row { display: flex; gap: 8px; flex-wrap: wrap; } .chip { padding: 7px 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: var(--r-pill); font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--t) var(--ease); } .chip:hover { border-color: var(--border-2); color: var(--text); } .chip.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .empty-state { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px; } .empty-state .empty-icon { font-size: 36px; display: block; margin-bottom: 10px; opacity: .5; } .empty-state h4 { color: var(--text); margin-bottom: 6px; } .empty-state .btn { margin-top: 14px; } .notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 16px; margin: 16px 0; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); font-size: 14px; } .notice-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 32%, transparent); color: var(--warn); } .notice-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 32%, transparent); color: var(--danger); } .notice-info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 32%, transparent); color: var(--info); } .notice-actions { margin-inline-start: auto; } .tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--surface-3); border-radius: var(--r-pill); } .tab { flex: 1; padding: 8px 12px; border: 0; background: none; cursor: pointer; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; color: var(--muted); transition: all var(--t) var(--ease); } .tab:hover { color: var(--text); } .tab.active { background: var(--surface); color: var(--text); box-shadow: var(--sh-xs); } /* ══════════════════════════════════════════════════════════════════════════ 7) بطاقات الألعاب والمنتجات ══════════════════════════════════════════════════════════════════════════ */ .game-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); } .game-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; cursor: pointer; text-align: start; padding: 0; box-shadow: var(--sh-xs); transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); } .game-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--brand-border); text-decoration: none; } .game-card:hover .game-cover-art { transform: scale(1.06); } .game-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-lt) 100%); display: flex; align-items: center; justify-content: center; } .game-cover-art { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); } .game-cover-emoji { font-size: 46px; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,.28)); transition: transform var(--t-slow) var(--ease-out); } .game-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.42) 100%); pointer-events: none; } /* ⚠️ الشارة اتنقلت من فوق الصورة لجسم البطاقة (تحت الاسم وفوق السعر). عشان كده بقت بألوان الثيم بدل الخلفية السودا الشفافة والـ blur — دول كانوا لازمين وهي فوق صورة ممكن تكون فاتحة أو غامقة، ومالهمش أي لازمة على سطح البطاقة. align-self: flex-start مهمة: .game-body عمود flex، ومن غيرها الشارة كانت هتتمدّ على عرض البطاقة كله بدل ما تحضن نصّها. */ .game-platform { align-self: flex-start; margin-top: 2px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--pill); color: var(--text-2); font-size: 11px; font-weight: 700; } /* ── إطار بطاقة اللعبة (صورة بيرفعها الأدمن من صفحة الواجهة) ───────────── ⚠️ display:none هنا هو الحالة الافتراضية: العنصر موجود في كل بطاقة، بس مبيبانش غير لما theme.php يشغّله ويحط صورته. كده إضافة الإطار أو شيله بتبقى تغيير في CSS بس — من غير إعادة رسم للبطاقات ومن غير وميض. ⚠️ pointer-events:none مش تفصيلة: الإطار مغطّي البطاقة كلها، ومن غيرها كان بيبلع الضغط والعميل يدوس على اللعبة ومفيش حاجة تحصل. وinset السالب (اللي theme.php بيحطه) هو اللي بيخلي الزوايد المدببة تخرج بره حدود البطاقة — وده الفرق بين "إطار" و"صورة مربّعة تانية". */ .game-frame { display: none; position: absolute; inset: 0; z-index: 3; pointer-events: none; background-repeat: no-repeat; /* 100% 100% مش contain: الإطار مرسوم على نسبة الغلاف بالظبط، والمطلوب إنه يتمدّد معاه لا يفضل محتفظ بنسبته ويسيب فراغ على الجناب. */ background-size: 100% 100%; background-position: center; } .game-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 4px; flex: 1; } /* ⚠️ سطر واحد بالظبط + "..." للاسم الطويل. من غير القص، لعبة باسم طويل بتاخد سطرين، فبطاقتها بتطول عن اللي جنبها، والصف كله بيتمطّ لأطول بطاقة فيه — فالشبكة بتطلع غير منتظمة من غير سبب ظاهر. مع القص، كل البطاقات بنفس الارتفاع بالظبط. */ .game-body h3 { font-size: 16px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .game-meta { color: var(--muted); font-size: 12.5px; } .game-foot { margin-top: auto; padding-top: 11px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .game-from { font-size: 12px; color: var(--muted); } .game-price { font-size: 17px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } /* ══════════════════════════════════════════════════════════════════════════ شريط الألعاب الأفقي ══════════════════════════════════════════════════════════════════════════ ⚠️ القاعدة الأهم هنا: `flex-wrap: nowrap`. الشريط كان `flex-wrap: wrap` فمع أول 8 ألعاب كان بيلف لسطرين وتلاتة — يعني عملياً بيتحوّل لقايمة رأسية بتاكل نص الشاشة على الموبايل، وبيكبر أكتر مع كل لعبة جديدة تتضاف من اللوحة. سطر واحد + تمرير أفقي معناه إن عدد الألعاب مبقاش بيغيّر ارتفاع الصفحة خالص. التمرير ناعم على الأجهزة كلها: -webkit-overflow-scrolling بيدّي الزخم المعتاد على iOS، وoverscroll-behavior-x: contain بيمنع تمرير الشريط لآخره من إنه يرجّع الصفحة للخلف في المتصفح (سلوك swipe-back اللي بيطلّع العميل من الموقع بالغلط). */ .games-bar { position: sticky; top: calc(var(--header-h) + var(--nav-h, 44px)); z-index: 45; background: var(--surface); border-bottom: 1px solid var(--border); } .games-bar-inner { position: relative; max-width: var(--wrap); margin-inline: auto; display: flex; align-items: center; } .game-strip { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; /* ← ماينفعش يتغيّر لـ wrap */ align-items: center; gap: 8px; padding: 10px 20px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* ⚠️ `scroll-behavior: auto` هنا مكتوبة عن قصد، مش قيمة زيادة. الخاصية دي **بتتوارث**، والصفحة فيها `html { scroll-behavior: smooth }` عشان الروابط الداخلية — فالشريط بيرثها من غير ما حد يكتبها عليه، و**كل** ضبط برمجي لموضعه بيتحوّل لحركة، حتى اللي المفروض يحصل فوراً (زي إرجاع الشريط لأوله بعد إعادة بناء المحتوى). النعومة بتتطلب صراحةً في نداءات store.js (behavior: 'smooth') عند ضغط السهم وعند توسيط اللعبة المفتوحة — يعني في المكانين اللي محتاجينها بس. ومفيش scroll-snap عن قصد كمان: على شريط شرايح صغيّرة زي ده بيخلي التمرير "لزج" — كل سحبة بتتشدّ عشان توسّط شريحة عرضها 100px. الشرايح مش صفحات، والتمرير الحر هو المتوقّع منها. */ scroll-behavior: auto; } .game-strip::-webkit-scrollbar { display: none; } .game-strip:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } .game-strip-item { flex: none; /* ← بيمنع البطاقات من الانضغاط */ display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; cursor: pointer; transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease); } .game-strip-item:hover { border-color: var(--brand-border); color: var(--text); transform: translateY(-1px); text-decoration: none; } .game-strip-item.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); } .game-strip-item.active .game-strip-thumb { background: var(--surface); } .game-strip-thumb { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); font-size: 14px; overflow: hidden; flex: none; } .game-strip-thumb img { width: 100%; height: 100%; object-fit: cover; } /* أسهم التمرير — للماوس اللي مالوش تمرير أفقي. بتتخفي لوحدها لما مفيش حاجة تتمرّر لها في الاتجاه ده (شوف updateStripArrows في store.js). */ .gb-arrow { position: absolute; top: 0; bottom: 0; z-index: 2; width: 44px; flex: none; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; font-size: 22px; font-weight: 700; line-height: 1; color: var(--text-2); transition: color var(--t) var(--ease); } .gb-arrow:hover { color: var(--brand); } /* تدرّج بيوضّح إن فيه محتوى مقصوص ورا السهم، مش مجرد زرار طايح فوق البطاقات */ .gb-prev { inset-inline-start: 0; background: linear-gradient(to left, transparent, var(--surface) 55%); } .gb-next { inset-inline-end: 0; background: linear-gradient(to right, transparent, var(--surface) 55%); } [dir="rtl"] .gb-prev { background: linear-gradient(to right, transparent, var(--surface) 55%); } [dir="rtl"] .gb-next { background: linear-gradient(to left, transparent, var(--surface) 55%); } /* على اللمس مفيش داعي للأسهم — الإصبع بيمرّر أسرع منها، والمساحة أهم. */ @media (hover: none) { .gb-arrow { display: none; } } /* ── بطاقة المنتج ────────────────────────────────────────────────────── */ .prod-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); } .prod-card { display: flex; flex-direction: column; gap: 9px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-xs); transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); } .prod-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--border-2); } .prod-card.is-out { opacity: .62; } .prod-card.is-out:hover { transform: none; box-shadow: var(--sh-xs); } .prod-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .prod-card h4 { font-size: 15.5px; } /* أيقونة المنتج نفسه (صورة يرفعها الأدمن، أو إيموجي). المقاس ثابت و flex: none عشان اسم منتج طويل ما يضغطش الأيقونة لشكل بيضاوي. */ .prod-thumb { width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--brand) 0%, var(--brand-lt) 100%); display: flex; align-items: center; justify-content: center; font-size: 21px; line-height: 1; overflow: hidden; } .prod-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* الإيموجي محتاج خلفية أهدى من التدرّج عشان يفضل مقروء */ .prod-thumb.is-emoji { background: var(--surface-2); } .prod-desc { font-size: 13px; color: var(--text-2); } .prod-price-row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-top: 2px; } .prod-foot { margin-top: auto; padding-top: 11px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .prod-foot .btn-buy { flex: 1; } /* عدّاد الكمية */ .qty { display: inline-flex; align-items: center; border: 1px solid var(--border-2); border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; flex: none; } .qty button { width: 32px; height: 36px; border: 0; background: none; cursor: pointer; color: var(--text-2); font-size: 17px; font-weight: 700; line-height: 1; transition: background var(--t) var(--ease), color var(--t) var(--ease); } .qty button:hover:not(:disabled) { background: var(--surface-3); color: var(--text); } .qty button:disabled { opacity: .35; cursor: not-allowed; } .qty input { width: 38px; height: 36px; padding: 0; border: 0; background: none; text-align: center; font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .qty input:focus { outline: none; } .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ── رأس صفحة اللعبة ─────────────────────────────────────────────────── */ .crumbs { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); margin-bottom: 14px; flex-wrap: wrap; } .crumbs button, .crumbs a { border: 0; background: none; padding: 0; cursor: pointer; color: var(--brand); font: inherit; } .crumbs .sep { opacity: .6; } .game-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-xs); } .game-hero-thumb { width: 68px; height: 68px; flex: none; border-radius: var(--r); background: linear-gradient(135deg, var(--brand) 0%, var(--brand-lt) 100%); display: flex; align-items: center; justify-content: center; font-size: 32px; overflow: hidden; } .game-hero-thumb img { width: 100%; height: 100%; object-fit: cover; } .game-hero-body { flex: 1; min-width: 180px; } .game-hero-body h1 { font-size: 25px; } .game-hero-body p { color: var(--muted); font-size: 13.5px; margin-top: 3px; } /* ══════════════════════════════════════════════════════════════════════════ 8) صفوف القوائم، المحفظة، والطلبات ══════════════════════════════════════════════════════════════════════════ */ .row-list { display: flex; flex-direction: column; } .row-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 2px; border-bottom: 1px solid var(--border); } .row-list > .row-item:last-child { border-bottom: 0; } .row-main { flex: 1; min-width: 150px; } .row-main h4 { font-size: 14.5px; } .row-side { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-inline-start: auto; } .row-icon { width: 38px; height: 38px; flex: none; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; background: var(--pill); color: var(--text-2); } .row-icon.in { background: var(--ok-soft); color: var(--ok); } .row-icon.out { background: var(--danger-soft); color: var(--danger); } .row-icon.pend{ background: var(--warn-soft); color: var(--warn); } .amount-in { color: var(--ok); font-weight: 800; font-variant-numeric: tabular-nums; } .amount-out { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; } /* بطاقة الرصيد */ .wallet-card { position: relative; overflow: hidden; padding: 26px 24px; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dk) 100%); color: #fff; box-shadow: var(--sh-md); } .wallet-card::after { content: ""; position: absolute; top: -70px; inset-inline-end: -40px; width: 230px; height: 230px; border-radius: 50%; background: rgba(255,255,255,.09); } .wallet-card > * { position: relative; z-index: 1; } .wallet-label { font-size: 13px; opacity: .82; font-weight: 600; } .wallet-amount { font-size: 40px; font-weight: 800; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .wallet-alt { font-size: 13px; opacity: .82; font-variant-numeric: tabular-nums; } .wallet-foot { margin-top: 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wallet-rank { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.16); font-size: 12.5px; font-weight: 700; } .wallet-card .btn { background: #fff; border-color: #fff; color: var(--brand-dk); } .wallet-card .btn:hover { background: rgba(255,255,255,.9); border-color: rgba(255,255,255,.9); } .amount-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .amount-preset { /* "1,000 EGP" — من غير العزل ده الصفحة الـ RTL كانت بتقلبه لـ "EGP 1,000" */ direction: ltr; unicode-bidi: isolate; padding: 9px 16px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); border-radius: var(--r-pill); font-size: 13.5px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; transition: all var(--t) var(--ease); } .amount-preset:hover { border-color: var(--brand); color: var(--brand); } .amount-preset.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); } .stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .stat { padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); } .stat-label { font-size: 12.5px; color: var(--muted); font-weight: 600; } .stat-value { font-size: 21px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; } /* الطلبات */ .order-card { padding: 15px 17px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-xs); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .order-card:hover { border-color: var(--border-2); box-shadow: var(--sh-sm); } .order-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; } .order-id { font-size: 12.5px; color: var(--muted); font-weight: 600; } .order-items { display: flex; flex-direction: column; gap: 3px; font-size: 14px; } .order-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* صف الكود المسلَّم */ .code-row { display: flex; align-items: center; gap: 10px; padding: 10px 13px; margin-bottom: 8px; background: var(--surface-2); border: 1px dashed var(--border-2); border-radius: var(--r-sm); } .code-text { flex: 1; min-width: 0; direction: ltr; text-align: start; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; font-weight: 700; letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; } .code-label { font-size: 11.5px; color: var(--muted); display: block; margin-bottom: 2px; } /* ملخص الشراء */ .sum-list { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; } .sum-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 14px; } .sum-row:last-child { border-bottom: 0; } .sum-row.muted-row { background: var(--surface-2); color: var(--muted); } .sum-row.discount { color: var(--ok); font-weight: 700; } .sum-row.total { background: var(--surface-2); font-weight: 800; font-size: 15.5px; } .sum-row.total .price-tag { font-size: 19px; } /* ══════════════════════════════════════════════════════════════════════════ 9) الدرج الجانبي والنوافذ والقوايم ══════════════════════════════════════════════════════════════════════════ */ .scrim { position: fixed; inset: 0; z-index: 90; background: rgba(10,13,20,.5); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease), visibility var(--t); } .scrim.open { opacity: 1; visibility: visible; } /* درج السلة — بيدخل من جهة نهاية السطر (الشمال في العربي) */ .drawer { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 95; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--surface); border-inline-start: 1px solid var(--border); box-shadow: var(--sh-lg); transform: translateX(-100%); visibility: hidden; transition: transform var(--t-slow) var(--ease-out), visibility var(--t-slow); } .drawer.open { transform: none; visibility: visible; } .drawer-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex: none; } .drawer-head h3 { flex: 1; } .drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; } .drawer-foot { flex: none; padding: 16px 20px; border-top: 1px solid var(--border); background: var(--surface-2); } .cart-line { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); } .cart-line:last-child { border-bottom: 0; } .cart-thumb { width: 46px; height: 46px; flex: none; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: var(--brand-soft); font-size: 20px; overflow: hidden; } .cart-thumb img { width: 100%; height: 100%; object-fit: cover; } .cart-line-body { flex: 1; min-width: 0; } .cart-line-body h4 { font-size: 14px; } .cart-line-foot { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .promo-row { display: flex; gap: 8px; } .promo-row .input { flex: 1; min-height: 40px; } .promo-applied { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: var(--r-sm); background: var(--ok-soft); color: var(--ok); font-size: 13px; font-weight: 700; } .promo-applied .btn { margin-inline-start: auto; } /* النوافذ */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10,13,20,.5); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease), visibility var(--t); } .modal.open { opacity: 1; visibility: visible; } .modal-box { width: 100%; max-width: 560px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-lg); transform: translateY(14px) scale(.97); opacity: 0; transition: transform var(--t-slow) var(--ease-out), opacity var(--t) var(--ease); } .modal.open .modal-box { transform: none; opacity: 1; } .modal-narrow { max-width: 440px; } .modal-wide { max-width: 720px; } .modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px 14px; flex: none; } .modal-head h3 { flex: 1; font-size: 18px; } .modal-close { width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; background: var(--surface-3); color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; transition: all var(--t) var(--ease); } .modal-close:hover { background: var(--danger-soft); color: var(--danger); } .modal-body { padding: 0 22px 6px; overflow-y: auto; flex: 1; } .modal-foot { padding: 16px 22px 20px; flex: none; } /* القوايم المنسدلة */ .menu-wrap { position: relative; } .menu-panel { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 70; width: 250px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-md); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out), visibility var(--t); } .menu-panel.open { opacity: 1; visibility: visible; transform: none; } .menu-panel h4 { padding: 7px 10px 9px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted); font-weight: 700; } .menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font-size: 13.5px; font-weight: 600; text-align: start; cursor: pointer; text-decoration: none; transition: background var(--t) var(--ease), color var(--t) var(--ease); } .menu-item:hover { background: var(--surface-3); text-decoration: none; } .menu-item.danger { color: var(--danger); } .menu-item.danger:hover { background: var(--danger-soft); } .notif-item { padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 13px; } .notif-item:last-child { border-bottom: 0; } /* ══════════════════════════════════════════════════════════════════════════ 10) الإشعارات وهياكل التحميل ══════════════════════════════════════════════════════════════════════════ */ #toasts { position: fixed; inset-block-end: 20px; inset-inline-start: 20px; z-index: 200; display: flex; flex-direction: column; gap: 9px; max-width: calc(100vw - 40px); pointer-events: none; } .toast { display: flex; align-items: center; gap: 9px; padding: 12px 17px; background: var(--text); color: var(--bg); border-radius: var(--r); box-shadow: var(--sh-lg); font-size: 13.5px; font-weight: 600; cursor: pointer; pointer-events: auto; animation: toast-in var(--t-slow) var(--ease-out); } .toast.error { background: var(--danger); color: #fff; } .toast.success { background: var(--buy); color: var(--on-buy); } .toast.leaving { opacity: 0; transform: translateY(8px); transition: opacity 200ms, transform 200ms; } .skeleton { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%); background-size: 300% 100%; animation: shimmer 1.3s linear infinite; } .skeleton-line { height: 12px; margin: 7px 0; } .skeleton-row { height: 56px; margin-bottom: 10px; } .skeleton-card { height: 190px; border-radius: var(--r-lg); } .skeleton-game { height: 240px; border-radius: var(--r-lg); } /* ══════════════════════════════════════════════════════════════════════════ 11) صفحات الدخول/التأكيد + التذييل ══════════════════════════════════════════════════════════════════════════ */ .page-centered { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px 20px; background: radial-gradient(closest-side at 50% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%), var(--bg); } .auth-card { width: 100%; max-width: 430px; padding: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-lg); text-align: center; animation: zoom-in var(--t-slow) var(--ease-out); } .auth-brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; } .auth-title { font-size: 22px; margin-bottom: 6px; } .auth-lead { color: var(--muted); font-size: 14px; margin-bottom: 20px; } .auth-card .field { text-align: start; } .auth-foot { margin-top: 18px; font-size: 13px; color: var(--muted); } .verify-icon { width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; } .verify-icon-ok { background: var(--ok-soft); color: var(--ok); } .verify-icon-bad { background: var(--danger-soft); color: var(--danger); } .verify-email { font-weight: 700; direction: ltr; unicode-bidi: isolate; } .verify-notes { text-align: start; margin: 16px 0 0; padding-inline-start: 18px; color: var(--muted); font-size: 13px; } .verify-notes li { margin-bottom: 5px; } .site-footer { margin-top: 46px; padding: 26px 0; border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 13px; } .site-footer .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .build-id { padding: 3px 9px; border-radius: var(--r-pill); background: var(--pill); font-size: 11px; font-weight: 700; direction: ltr; } /* ── شريط أزرار التذييل (صورة + لينك، من لوحة التحكم) ─────────────────── */ /* ⚠️ الشريط كله بيتخفي بـ [hidden] من الجافاسكريبت لو مفيش أزرار مفعّلة. لازم display:none تكون أقوى من display:flex اللي تحت، وإلا الشريط الفاضي كان هيفضل واخد مساحة ورسم حد فاصل من غير أي محتوى. */ .footer-links[hidden] { display: none; } .footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; max-width: var(--wrap); margin: 0 auto 20px; padding: 0 20px 20px; border-bottom: 1px solid var(--border); } .footer-link { display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); } .footer-link:hover { border-color: var(--brand); box-shadow: var(--sh-sm); transform: translateY(-1px); text-decoration: none; } .footer-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ⚠️ الارتفاع مثبّت والعرض بيتحسب (width:auto) — عشان أي نسبة أبعاد يرفعها الأدمن تفضل مظبوطة من غير ما الصورة تتفرتك، ومن غير ما زرار واحد عريض يكسر الشريط. */ .footer-link img { height: 32px; width: auto; max-width: 150px; display: block; } /* زرار من غير صورة — بيتعرض كنص بالاسم اللي الأدمن كتبه */ .footer-link.is-text { color: var(--text-2); font-size: 12.5px; font-weight: 700; padding: 9px 14px; } .footer-link.is-text:hover { color: var(--brand); } /* ══════════════════════════════════════════════════════════════════════════ 12) الاستجابة ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 960px) { .header-search { max-width: none; } .cur-switch { display: none; } } @media (max-width: 780px) { :root { --header-h: 58px; } .header-inner { gap: 8px; } .logo-word { display: none; } .balance-chip .b-label { display: none; } .icon-btn .btn-text { display: none; } .icon-btn { padding: 0 11px; } .hero-inner { padding: 32px 20px 24px; } .hero-lead { font-size: 15px; } .game-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .game-cover-emoji { font-size: 34px; } .prod-grid { grid-template-columns: 1fr; } .panel { padding: 16px; border-radius: var(--r); } .wallet-amount { font-size: 33px; } /* النوافذ بتبقى ورقة من تحت على الموبايل */ .modal { align-items: flex-end; padding: 0; } .modal-box { max-width: none; max-height: 88vh; border-radius: var(--r-xl) var(--r-xl) 0 0; border-inline: 0; border-bottom: 0; transform: translateY(100%); } .modal.open .modal-box { transform: none; } .drawer { width: 100%; } #toasts { inset-inline: 12px; inset-block-end: 12px; max-width: none; } .toast { width: 100%; } } /* ⚠️ تحت 560px البحث بياخد سطر لوحده. الهيدر فيه اللوجو + البحث + 5 أزرار (رصيد، ثيم، سلة، تنبيهات، حساب). على 375px ده كان بيضغط خانة البحث لدرجة إن الـ placeholder نفسه بيتقطع ("ابحث عز")، وخانة بحث بعرض 60px مالهاش أي فايدة. سطر كامل بيديها عرض حقيقي بدل ما نصغّر كل حاجة لحد ما تبقى غير قابلة للاستخدام. */ @media (max-width: 560px) { /* height الثابت لازم يبقى auto هنا — سطرين جوّه ارتفاع سطر واحد بيتقصّوا. min-height بيحافظ على نفس الارتفاع المحجوز للـsticky تحته. */ .header-inner { flex-wrap: wrap; row-gap: 8px; height: auto; min-height: var(--header-h); padding-block: 9px; } .logo { order: 1; } .header-actions { order: 2; margin-inline-start: auto; } .header-search { order: 3; flex: 1 1 100%; max-width: none; } /* الهيدر بقى سطرين، فالارتفاع المحجوز تحته لازم يزيد — من غيره أول قسم في الصفحة بيتخبّى ورا الهيدر الـsticky. */ :root { --header-h: 104px; } } @media (max-width: 420px) { .prod-foot { flex-direction: column; align-items: stretch; } .prod-foot .qty { align-self: center; } .amount-preset { flex: 1; text-align: center; } /* الرقم فوق لوحده والزرار تحته بعرض كامل — أوضح من الاتنين متزاحمين */ .pay-number-box { flex-direction: column; align-items: stretch; } .pay-number-box .btn { width: 100%; } } /* ══════════════════════════════════════════════════════════════════════════ 13) زرار الرجوع، صفحة الدفع، وأكواد الطلبات (v3.1.0) ══════════════════════════════════════════════════════════════════════════ */ /* ── رأس الشاشة وزرار الرجوع ───────────────────────────────────────────── كل شاشة أعمق من الرئيسية ليها زرار رجوع ثابت المكان (فوق على اليمين في الواجهة العربية). ثبات المكان مقصود: العين بتتعلّم مكانه بعد شاشتين، وبيبقى أسرع من زرار المتصفح نفسه. */ .view-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .btn-back { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease); } .btn-back:hover { background: var(--pill); border-color: var(--brand-border); color: var(--text); text-decoration: none; } .btn-back:active { transform: scale(.97); } .btn-back-ico { font-size: 17px; line-height: 1; margin-top: -2px; } /* ── صفحة الدفع ─────────────────────────────────────────────────────────── */ .pay-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; margin-bottom: 18px; } .pay-hero h1 { font-size: 24px; margin: 10px 0 6px; } .pay-hero p { color: var(--muted); font-size: 14.5px; } .pay-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-soft); color: var(--brand); border-radius: var(--r-pill); padding: 4px 12px; font-size: 12.5px; font-weight: 700; } /* صندوق رقم التحويل — أهم عنصر في الصفحة كلها، فبياخد أكبر وزن بصري. */ .pay-number-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--bg); border: 1px solid var(--brand-border); border-radius: var(--r); padding: 16px; margin-bottom: 16px; } /* ⚠️ الرقم لازم يفضل **سطر واحد**. رقم تحويل متقطّع على سطرين ("010172599" تحت منه "87") العميل ممكن يقراه غلط ويبعت فلوس لرقم مش بتاعنا — ده أخطر غلط ممكن يحصل في الصفحة دي. عشان كده: nowrap + الرقم بياخد سطر لوحده والزرار ينزل تحته لما المساحة تضيق. */ .pay-number-box .grow { flex: 1 1 220px; min-width: 0; } .pay-number-label { font-size: 12.5px; color: var(--muted); margin-bottom: 3px; } .pay-number { font-size: clamp(22px, 6.5vw, 27px); font-weight: 800; letter-spacing: 1.5px; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; } .pay-steps { margin: 0; padding-inline-start: 20px; color: var(--text-2); } .pay-steps li { font-size: 14px; padding: 4px 0; } .pay-steps li::marker { color: var(--brand); font-weight: 700; } /* البطاقة اللي في المحفظة وبتودّي لصفحة الدفع */ .pay-teaser { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--pill); border: 1px solid var(--border); border-radius: var(--r); padding: 14px; } .pay-teaser .grow { flex: 1; min-width: 160px; } .pay-teaser-ico { width: 42px; height: 42px; flex: none; border-radius: var(--r); display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); font-size: 21px; } /* ── أكواد الطلب جوّه بطاقة الطلب ─────────────────────────────────────── الأكواد بتتفتح **في مكانها** جوّه الطلب مش في نافذة منفصلة: الطلب وأكوادها حاجة واحدة، وفتح نافذة عشان تنسخ كود بيقطع الخيط. */ .order-codes { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); animation: codes-in 220ms var(--ease-out) both; } .order-codes-head { font-size: 14px; font-weight: 700; margin-bottom: 9px; } @keyframes codes-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .order-codes { animation: none; } } /* زرار الرجوع في صفحة الدخول — فوق البطاقة نفسها */ .auth-back { align-self: flex-start; margin-bottom: 4px; } /* ══════════════════════════════════════════════════════════════════════════ شريط الإعلان (بيتحكم فيه الأدمن من إعدادات الموقع) ══════════════════════════════════════════════════════════════════════════ */ /* فوق الهيدر مش جوّه: الهيدر sticky، ولو الشريط جوّه كان هياخد مساحة من أول الشاشة طول ما العميل بينزّل. */ .announce-bar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 9px 44px 9px 16px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.5; text-align: center; position: relative; } .announce-bar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; white-space: nowrap; } /* زرار الإخفاء ملزوق في نهاية السطر مع اتجاه الصفحة (شمال في RTL) — من غير inset-inline-end كان هيحتاج قاعدة منفصلة لكل اتجاه. */ .announce-x { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: #fff; font-size: 15px; line-height: 1; cursor: pointer; padding: 6px 9px; border-radius: 6px; opacity: .8; } .announce-x:hover { opacity: 1; background: rgba(255, 255, 255, .16); } .announce-x:focus-visible { outline: 2px solid #fff; outline-offset: 1px; } @media (max-width: 520px) { .announce-bar { font-size: 13px; padding: 8px 40px 8px 12px; } } /* زرار تبديل الثيم — نفس مقاس أزرار الهيدر، والأيقونة بس من غير نص عشان الهيدر مايتزحمش على الموبايل. */ .theme-btn { padding-inline: 10px; } .theme-btn #themeIcon { font-size: 15px; line-height: 1; }