/* ==========================================================================
   CXM Academy: cookie banner and cookie settings (assets/js/consent.js, inc/consent.php)
   Ported from the cookie banner screen of the approved mockup (mockups/website.html):
   white card fixed at the bottom, three equal outline buttons, settings with switches.
   Uses the tokens of theme.css. Logical properties only, so it mirrors on Arabic sites.
   Generated into the theme by _build/build_theme.py from _build/src/assets/css/consent.css.
   ========================================================================== */

.cxm-consent{position:fixed;inset-inline:16px;inset-block-end:16px;z-index:200;box-sizing:border-box;max-width:760px;max-height:calc(100vh - 32px);overflow-y:auto;margin-inline:auto;background:var(--cxm-white);border:1px solid var(--cxm-line);border-radius:10px;box-shadow:0 12px 40px rgba(0,30,50,.18);padding:24px;color:var(--cxm-ink);font-family:var(--cxm-body)}
.cxm-consent[hidden]{display:none}
.cxm-consent:focus{outline:none}
.cxm-consent:focus-visible{outline:3px solid var(--cxm-gold);outline-offset:2px}
.cxm-consent h2{font:800 18px/1.25 var(--cxm-display);color:var(--cxm-navy);letter-spacing:-.01em;margin:0 0 6px}
.cxm-consent-text{font-size:14px;line-height:1.55;color:var(--cxm-muted);margin:0 0 16px}
.cxm-consent-text a{color:var(--cxm-blue)}

/* settings: hidden until "Choose" (or when opened from "Cookie settings") */
.cxm-consent-prefs{display:none;border-block-start:1px solid var(--cxm-line);margin:0 0 16px;padding-block-start:6px}
.cxm-consent.is-prefs .cxm-consent-prefs{display:block}
.cxm-consent-pref{display:flex;justify-content:space-between;gap:16px;align-items:center;padding-block:12px;border-block-end:1px solid var(--cxm-line)}
.cxm-consent-pref b{display:block;font:700 14px/1.3 var(--cxm-display);color:var(--cxm-navy)}
.cxm-consent-pref span{display:block;font-size:13px;line-height:1.45;color:var(--cxm-muted)}

.cxm-switch{position:relative;width:44px;height:26px;flex:none;margin:0}
.cxm-switch input{position:absolute;opacity:0;inset:0;margin:0;width:100%;height:100%;cursor:pointer;z-index:1}
.cxm-switch input:disabled{cursor:default}
.cxm-switch i{position:absolute;inset:0;background:var(--cxm-field);border-radius:999px;transition:background .15s}
.cxm-switch i::after{content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:var(--cxm-white);transition:transform .15s}
.cxm-switch input:checked + i{background:var(--cxm-blue)}
.cxm-switch input:checked + i::after{transform:translateX(18px)}
html[dir="rtl"] .cxm-switch input:checked + i::after{transform:translateX(-18px)}
.cxm-switch input:disabled + i{background:#7FA9CB;opacity:.7}
.cxm-switch input:focus-visible + i{outline:3px solid var(--cxm-gold);outline-offset:2px}

/* three buttons of equal weight: rejecting is as easy as accepting */
.cxm-consent-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cxm-consent .cxm-consent-btns .wp-element-button{display:block;width:100%;margin:0;cursor:pointer;background:var(--cxm-white);color:var(--cxm-blue);border:2px solid var(--cxm-blue);border-radius:6px;padding:12px 10px;font:700 14px/1.2 var(--cxm-display);text-align:center}
.cxm-consent .cxm-consent-btns .wp-element-button:hover{background:var(--cxm-soft);color:var(--cxm-navy);border-color:var(--cxm-navy)}
.cxm-consent .cxm-consent-btns .wp-element-button:focus-visible{outline:3px solid var(--cxm-gold);outline-offset:2px}

/* footer "Cookie settings" link sits with the legal links */
.cxm-footer ul.cxm-legal-links a[data-cxm-consent="open"]{cursor:pointer}

@media (max-width:640px){
  .cxm-consent{padding:18px;inset-inline:12px;inset-block-end:12px;max-height:calc(100vh - 24px)}
  .cxm-consent-btns{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .cxm-switch i,.cxm-switch i::after{transition:none}
}

@media print{
  .cxm-consent{display:none !important}
}