/* ════════════════════════════════════════════════════════════════════ * LEXIUM — Cookie Consent banner styles * يستخدم نفس متغيّرات الألوان المعرّفة في style-ar.css / style-en.css. * أضف في : * ════════════════════════════════════════════════════════════════════ */ #lx-consent { --lxc-teal:#1B3D4F; --lxc-teal-dark:#0f2535; --lxc-gold:#A8873A; --lxc-gold-acc:#8B6A1F; --lxc-light:#EAF0F3; --lxc-border:#e0e8ec; --lxc-muted:#5a7a8a; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; /* أعلى من كل شيء تقريباً */ padding: 16px; display: flex; justify-content: center; pointer-events: none; font-family: 'Tajawal', system-ui, sans-serif; opacity: 0; transform: translateY(16px); transition: opacity .3s ease, transform .3s ease; } #lx-consent.lx-open { opacity: 1; transform: translateY(0); } #lx-consent .lx-consent-card { pointer-events: auto; width: 100%; max-width: 920px; background: #fff; border: 1px solid var(--lxc-border); border-top: 3px solid var(--lxc-gold); border-radius: 4px; box-shadow: 0 16px 48px rgba(15,37,53,.22); padding: 22px 24px; } #lx-consent .lx-consent-title { font-family: 'Scheherazade New', serif; font-size: 20px; font-weight: 600; color: var(--lxc-teal); margin: 0 0 8px; } #lx-consent .lx-consent-body { color: var(--lxc-muted); font-size: 13.5px; line-height: 1.85; margin: 0; } #lx-consent .lx-consent-link { color: var(--lxc-gold-acc); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } #lx-consent .lx-consent-link:hover { color: var(--lxc-teal); } #lx-consent .lx-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; justify-content: flex-end; } #lx-consent .lx-btn { font-family: 'Tajawal', sans-serif; font-size: 13px; font-weight: 700; padding: 11px 22px; border-radius: 3px; cursor: pointer; border: 1px solid transparent; transition: all .2s ease; white-space: nowrap; } #lx-consent .lx-btn-solid { background: var(--lxc-gold); color: var(--lxc-teal-dark); } #lx-consent .lx-btn-solid:hover { background:#c19f4f; } #lx-consent .lx-btn-outline{ background: transparent; color: var(--lxc-teal); border-color: var(--lxc-teal); } #lx-consent .lx-btn-outline:hover{ background: var(--lxc-teal); color:#fff; } #lx-consent .lx-btn-ghost { background: transparent; color: var(--lxc-muted); padding-inline: 12px; } #lx-consent .lx-btn-ghost:hover { color: var(--lxc-teal); text-decoration: underline; } #lx-consent .lx-btn:focus-visible, #lx-consent input:focus-visible { outline: 2px solid var(--lxc-gold); outline-offset: 3px; } /* ── لوحة التفضيلات ─────────────────────────────────────────────── */ #lx-consent .lx-consent-prefs { margin-top: 18px; border-top: 1px solid var(--lxc-border); padding-top: 16px; } #lx-consent .lx-prefs-title { font-size: 14px; font-weight: 700; color: var(--lxc-teal); margin: 0 0 12px; } #lx-consent .lx-prefs-row { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--lxc-light); } #lx-consent .lx-prefs-row:last-of-type { border-bottom: none; } #lx-consent .lx-prefs-txt { flex: 1; } #lx-consent .lx-prefs-name { display:block; font-size: 13.5px; font-weight: 700; color: var(--lxc-teal); } #lx-consent .lx-prefs-desc { display:block; font-size: 12.5px; line-height: 1.7; color: var(--lxc-muted); margin-top: 3px; } #lx-consent .lx-prefs-foot { margin-top: 16px; display:flex; justify-content: flex-end; } /* ── مفتاح التبديل (Switch) ─────────────────────────────────────── */ #lx-consent .lx-switch { position: relative; flex: 0 0 auto; display:inline-flex; align-items:center; gap:8px; } #lx-consent .lx-switch input { position:absolute; opacity:0; width:46px; height:26px; margin:0; cursor:pointer; } #lx-consent .lx-switch-track { width: 46px; height: 26px; border-radius: 999px; background: #c7d2d8; position: relative; transition: background .2s; } #lx-consent .lx-switch-track::after { content:''; position:absolute; top:3px; inset-inline-start:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition: inset-inline-start .2s; } #lx-consent .lx-switch input:checked + .lx-switch-track { background: var(--lxc-gold); } #lx-consent .lx-switch input:checked + .lx-switch-track::after { inset-inline-start: 23px; } #lx-consent .lx-switch-locked .lx-switch-track { background: var(--lxc-teal); opacity:.6; } #lx-consent .lx-switch-lockedtxt { font-size: 11px; color: var(--lxc-muted); white-space: nowrap; } /* ── الجوال ─────────────────────────────────────────────────────── */ @media (max-width: 640px) { #lx-consent { padding: 0; } #lx-consent .lx-consent-card { border-radius: 0; border-left: none; border-right: none; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); } #lx-consent .lx-consent-actions { flex-direction: column-reverse; } #lx-consent .lx-btn { width: 100%; } #lx-consent .lx-btn-ghost { order: 1; } } /* ── احترام تفضيل تقليل الحركة ───────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { #lx-consent, #lx-consent .lx-switch-track, #lx-consent .lx-switch-track::after { transition: none; } }