/* ───────────────────────────────────────────────────────────────────────────── Consent preference center (PDPL). Mawasem emerald #153725. FLICKER RULE — the whole reason this lives in a stylesheet loaded in : the banner is display:none by DEFAULT. The head gate script adds .mw-needs-consent to only when there is no valid decision, and the rule below reveals it. So a visitor who already decided NEVER sees a flash of the banner, and a visitor who hasn't sees it at first paint rather than after end-of-body JS runs. ───────────────────────────────────────────────────────────────────────────── */ :root { --mwc-green: #153725; --mwc-green-2: #1d4a32; --mwc-beige: #ebe6d3; --mwc-ink: #2c2c2c; --mwc-ink-soft: #6b6b6b; --mwc-border: #d4cfc5; --mwc-white: #fff; } #mwConsentBanner { display: none; } .mw-needs-consent #mwConsentBanner { display: block; } /* ── Banner (bottom sheet) ─────────────────────────────────────────────────── */ #mwConsentBanner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99998; direction: rtl; font-family: 'Cairo', sans-serif; animation: mwcUp .45s cubic-bezier(.22,1,.36,1); } @keyframes mwcUp { from { transform: translateY(100%); opacity: 0 } to { transform: translateY(0); opacity: 1 } } .mwc-card { margin: 0 auto; max-width: 640px; background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: 24px 24px 0 0; border-top: 3px solid var(--mwc-green); padding: 22px 22px calc(var(--mw-nav-h, 64px) + 18px); box-shadow: 0 -8px 40px rgba(21,55,37,.18); } .mwc-title { font-size: 1rem; font-weight: 800; color: var(--mwc-green); margin: 0 0 6px; display: flex; align-items: center; gap: 8px } .mwc-desc { font-size: .82rem; line-height: 1.85; color: #4a4a4a; margin: 0 0 16px } .mwc-desc a { color: var(--mwc-green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px } .mwc-actions { display: flex; gap: 10px; flex-wrap: wrap } .mwc-btn { flex: 1 1 auto; min-width: 120px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 13px; padding: 12px 18px; cursor: pointer; font-family: inherit; font-size: .87rem; font-weight: 800; border: 1.5px solid transparent; transition: transform .15s, box-shadow .2s, background .2s; } .mwc-btn:hover { transform: translateY(-1px) } .mwc-btn:disabled { opacity: .6; cursor: progress; transform: none } .mwc-btn--accept { background: var(--mwc-green); color: #fff; box-shadow: 0 4px 18px rgba(21,55,37,.24) } .mwc-btn--accept:hover { background: var(--mwc-green-2) } /* Reject must be as easy to find and press as Accept — consent has to be freely given. */ .mwc-btn--reject { background: var(--mwc-white); color: var(--mwc-green); border-color: var(--mwc-green) } .mwc-btn--reject:hover { background: var(--mwc-beige) } .mwc-btn--settings { background: transparent; color: var(--mwc-ink-soft); border-color: var(--mwc-border) } .mwc-btn--settings:hover { color: var(--mwc-green); border-color: var(--mwc-green) } /* ── Preference center (modal) ─────────────────────────────────────────────── */ #mwConsentModal { display: none; position: fixed; inset: 0; z-index: 99999; direction: rtl; font-family: 'Cairo', sans-serif } #mwConsentModal.is-open { display: flex; align-items: flex-end; justify-content: center } @media (min-width: 720px) { #mwConsentModal.is-open { align-items: center } } .mwc-overlay { position: absolute; inset: 0; background: rgba(20,42,27,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px) } .mwc-sheet { position: relative; width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto; background: var(--mwc-white); border-radius: 22px 22px 0 0; padding: 20px 20px calc(var(--mw-nav-h, 64px) + 16px); box-shadow: 0 -10px 50px rgba(0,0,0,.25); animation: mwcUp .35s cubic-bezier(.22,1,.36,1); } @media (min-width: 720px) { .mwc-sheet { border-radius: 20px; padding-bottom: 20px } } .mwc-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px } .mwc-sheet__head h2 { font-size: 1.05rem; font-weight: 800; color: var(--mwc-green); margin: 0 } .mwc-close { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--mwc-border); background: #f7f5ee; color: var(--mwc-ink-soft); cursor: pointer; font-size: 1rem; line-height: 1 } .mwc-close:hover { color: var(--mwc-green); border-color: var(--mwc-green) } .mwc-sheet__sub { font-size: .8rem; color: var(--mwc-ink-soft); line-height: 1.8; margin: 0 0 14px } .mwc-row { border: 1.5px solid var(--mwc-border); border-radius: 14px; padding: 14px; margin-bottom: 10px; background: #fbfaf6 } .mwc-row__top { display: flex; align-items: center; justify-content: space-between; gap: 12px } .mwc-row__name { font-weight: 800; font-size: .92rem; color: var(--mwc-ink); display: flex; align-items: center; gap: 7px } .mwc-row__name i { color: var(--mwc-green) } .mwc-row__desc { font-size: .78rem; color: var(--mwc-ink-soft); line-height: 1.8; margin: 7px 0 0 } .mwc-row__cookies { font-size: .68rem; color: #9ca3af; margin-top: 6px; direction: ltr; text-align: right; word-break: break-word } .mwc-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px } .mwc-chip { font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--mwc-beige); color: var(--mwc-green) } .mwc-locked { font-size: .68rem; font-weight: 800; color: var(--mwc-green); background: rgba(21,55,37,.1); border-radius: 999px; padding: 4px 10px; white-space: nowrap } /* Toggle */ .mwc-switch { position: relative; flex: 0 0 auto; width: 48px; height: 27px } .mwc-switch input { position: absolute; opacity: 0; width: 0; height: 0 } .mwc-slider { position: absolute; inset: 0; background: #cfcabd; border-radius: 999px; cursor: pointer; transition: background .22s } .mwc-slider::before { content: ''; position: absolute; width: 21px; height: 21px; top: 3px; right: 3px; background: #fff; border-radius: 50%; transition: transform .22s; box-shadow: 0 1px 4px rgba(0,0,0,.25) } .mwc-switch input:checked + .mwc-slider { background: var(--mwc-green) } .mwc-switch input:checked + .mwc-slider::before { transform: translateX(-21px) } .mwc-switch input:focus-visible + .mwc-slider { outline: 2px solid var(--mwc-green); outline-offset: 2px } .mwc-sheet__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px } .mwc-note { font-size: .72rem; color: #9ca3af; line-height: 1.8; margin-top: 12px } .mwc-note a { color: var(--mwc-green); font-weight: 700 } /* Footer entry point — how a visitor withdraws consent later. */ .mwc-manage { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none } .mwc-manage:hover { text-decoration: underline } @media (prefers-reduced-motion: reduce) { #mwConsentBanner, .mwc-sheet { animation: none } .mwc-btn, .mwc-slider, .mwc-slider::before { transition: none } }