/**
 * Conversion-overlay recipes: exit_intent_modal / slide_in_offer / sticky_bottom_bar /
 * urgency_banner_variety / social_share_bar.
 * apb-rx-* tokens only; brand derives from --apb-rx-brand + scheme. Reduced-motion fallbacks inline.
 * Every card is FAIL-OPEN/NON-BLOCKING: rendered inline in normal flow (never position:fixed to the
 * viewport). exit_intent_modal / slide_in_offer use the shipped checkbox-toggle CSS-only dismiss idiom
 * (unchecked = visible, :checked ~ content = hidden) — same shape as apb-rx-cck cookie_consent.
 * Rendered by trait-apb-component-render-convert.php. No literals for brand/glow/tint.
 */

/* ---------- shared overlay buttons ---------- */
.apb-rx-cvbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font:inherit;font-weight:650;font-size:14.5px;cursor:pointer;border:0;border-radius:var(--apb-rx-radius-pill,999px);padding:12px 22px;transition:transform var(--apb-rx-t,.28s) var(--apb-rx-ease)}
.apb-rx-cvbtn--primary{color:var(--apb-rx-accent-contrast,#fff);background:var(--apb-rx-brand);box-shadow:0 8px 20px -8px var(--apb-rx-glow)}
.apb-rx-cvbtn--primary:hover{transform:translateY(-2px)}
.apb-rx-cvbtn--ghost{color:var(--apb-rx-ink);background:none;padding:12px 8px}
.apb-rx-cvbtn--flat{color:var(--apb-rx-ink);background:#fff;padding:7px 15px;font-size:13px;font-weight:700;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.apb-rx-cvbtn{transition:none}}

/* ---------- exit_intent_modal ---------- */
.apb-rx-eim{padding:clamp(30px,5vw,56px) 24px;background:var(--apb-rx-soft);border-radius:var(--apb-rx-radius,16px);display:flex;justify-content:center}
.apb-rx-eim-toggle{position:absolute;opacity:0;pointer-events:none}
.apb-rx-eim-card{position:relative;width:min(440px,100%);background:var(--apb-rx-surface,#fff);border:1px solid var(--apb-rx-line);border-radius:var(--apb-rx-radius,20px);padding:clamp(28px,4vw,38px);text-align:center;box-shadow:var(--apb-rx-shadow-2,0 30px 70px -24px rgba(11,13,18,.4));transition:transform var(--apb-rx-t-slow,.4s) var(--apb-rx-ease),opacity var(--apb-rx-t-slow,.4s) var(--apb-rx-ease)}
.apb-rx-eim-toggle:checked ~ .apb-rx-eim-card{transform:scale(.94);opacity:0;pointer-events:none;position:absolute}
.apb-rx-eim-close{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--apb-rx-muted);background:var(--apb-rx-soft)}
.apb-rx-eim-ic{width:60px;height:60px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;color:var(--apb-rx-accent-text,var(--apb-rx-brand));background:color-mix(in srgb,var(--apb-rx-brand) 10%,var(--apb-rx-surface,#fff));border:1px solid color-mix(in srgb,var(--apb-rx-brand) 22%,transparent)}
.apb-rx-eim-card h3{font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--apb-rx-ink);margin:0 0 8px}
.apb-rx-eim-card p{font-size:15px;line-height:1.6;color:var(--apb-rx-muted);margin:0 auto 12px;max-width:34ch}
.apb-rx-eim-code{display:inline-flex;align-items:center;gap:8px;font-family:ui-monospace,Menlo,monospace;font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--apb-rx-ink);background:var(--apb-rx-soft);border:1px dashed var(--apb-rx-line);border-radius:10px;padding:10px 16px;margin-bottom:20px}
.apb-rx-eim-card .apb-rx-cvbtn--primary{display:block;width:100%}
.apb-rx-eim-no{display:block;width:100%;margin-top:10px;font-size:13px;font-weight:600;color:var(--apb-rx-muted);cursor:pointer}
@media(prefers-reduced-motion:reduce){.apb-rx-eim-card{transition:none}}

/* ---------- slide_in_offer ---------- */
.apb-rx-sio{position:relative;min-height:280px;padding:clamp(32px,5vw,56px) 24px;background:var(--apb-rx-soft);border-radius:var(--apb-rx-radius,16px);overflow:hidden}
.apb-rx-sio-toggle{position:absolute;opacity:0;pointer-events:none}
.apb-rx-sio-copy{max-width:420px}
.apb-rx-sio-copy h3{font-size:18px;font-weight:750;color:var(--apb-rx-ink);margin:0 0 8px}
.apb-rx-sio-copy p{font-size:14.5px;line-height:1.6;color:var(--apb-rx-muted);margin:0}
.apb-rx-sio-card{position:absolute;right:20px;bottom:20px;width:min(300px,80%);background:var(--apb-rx-surface,#fff);border:1px solid var(--apb-rx-line);border-radius:var(--apb-rx-radius,16px);box-shadow:var(--apb-rx-shadow-2,0 22px 50px -18px rgba(11,13,18,.32));overflow:hidden;transition:transform var(--apb-rx-t-slow,.4s) var(--apb-rx-ease),opacity var(--apb-rx-t-slow,.4s) var(--apb-rx-ease)}
.apb-rx-sio-toggle:checked ~ .apb-rx-sio-card{transform:translateY(24px);opacity:0;pointer-events:none;position:absolute}
/* P8: when a REAL form is embedded, give the card room (wider, its body scrolls) — the compact thumb+CTA card is unchanged. */
.apb-rx-sio-card:has(.apb-rx-sio-formhost){width:min(400px,92%);max-height:min(80vh,560px);overflow-y:auto}
.apb-rx-sio-card:has(.apb-rx-sio-formhost) .apb-rx-sio-formhost{padding:16px 18px}
.apb-rx-sio-thumb{height:96px;background:linear-gradient(135deg,color-mix(in srgb,var(--apb-rx-brand) 18%,var(--apb-rx-ink)),var(--apb-rx-ink));position:relative}
.apb-rx-sio-thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 20% 0%,color-mix(in srgb,var(--apb-rx-brand) 40%,transparent),transparent 60%)}
.apb-rx-sio-close{position:absolute;top:8px;right:8px;z-index:1;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(8,10,15,.4)}
.apb-rx-sio-body{padding:16px}
.apb-rx-sio-body h4{font-size:15px;font-weight:750;color:var(--apb-rx-ink);margin:0 0 4px}
.apb-rx-sio-body p{font-size:13px;line-height:1.5;color:var(--apb-rx-muted);margin:0 0 12px}
.apb-rx-sio-body .apb-rx-cvbtn--primary{display:block;width:100%;font-size:14px;padding:11px}
@media(prefers-reduced-motion:reduce){.apb-rx-sio-card{transition:none}}

/* ---------- sticky_bottom_bar ---------- */
.apb-rx-sbb{position:relative;min-height:260px;padding:clamp(32px,5vw,52px) 24px 96px;background:var(--apb-rx-soft);border-radius:var(--apb-rx-radius,16px);overflow:hidden}
.apb-rx-sbb-copy{max-width:440px}
.apb-rx-sbb-copy h3{font-size:18px;font-weight:750;color:var(--apb-rx-ink);margin:0 0 8px}
.apb-rx-sbb-copy p{font-size:14.5px;line-height:1.6;color:var(--apb-rx-muted);margin:0}
.apb-rx-sbb-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:16px;padding:14px 22px;background:color-mix(in srgb,var(--apb-rx-surface,#fff) 88%,transparent);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-top:1px solid var(--apb-rx-line)}
.apb-rx-sbb-info{flex:1;min-width:0}
.apb-rx-sbb-t{font-size:14.5px;font-weight:700;color:var(--apb-rx-ink)}
.apb-rx-sbb-s{font-size:13px;color:var(--apb-rx-muted)}
.apb-rx-sbb-s b{color:var(--apb-rx-ink);font-weight:650}
.apb-rx-sbb .apb-rx-cvbtn--primary{box-shadow:0 8px 20px -8px var(--apb-rx-glow)}
@media(max-width:520px){.apb-rx-sbb .apb-rx-cvbtn--ghost{display:none}}

/* ---------- urgency_banner_variety ---------- */
.apb-rx-ubv{padding:0}
.apb-rx-ubv-bar{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:12px 20px;background:var(--apb-rx-ink);color:#fff}
.apb-rx-ubv-msg{font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:9px;color:#fff}
.apb-rx-ubv-msg svg{color:var(--apb-rx-accent-text,var(--apb-rx-brand))}
.apb-rx-ubv-msg b{color:#fff}
.apb-rx-ubv-timer{display:inline-flex;align-items:center;gap:5px}
.apb-rx-ubv-cell{min-width:30px;text-align:center;font-family:var(--apb-rx-font-display,var(--apb-rx-font));font-size:14px;font-weight:800;color:var(--apb-rx-accent-contrast,#fff);background:var(--apb-rx-brand);border-radius:6px;padding:3px 5px;font-variant-numeric:tabular-nums}
.apb-rx-ubv-cell i{font-style:normal;margin-left:3px;opacity:.75;font-size:10px}
.apb-rx-ubv-stock{font-family:var(--apb-rx-font-display,var(--apb-rx-font));font-size:15px;font-weight:800;color:var(--apb-rx-accent-contrast,#fff);background:var(--apb-rx-brand);border-radius:999px;padding:3px 11px}
.apb-rx-ubv--flash .apb-rx-ubv-bar{background:linear-gradient(135deg,var(--apb-rx-brand),var(--apb-rx-brand2,var(--apb-rx-brand)))}
.apb-rx-ubv--flash .apb-rx-ubv-msg svg{color:#fff}

/* ---------- social_share_bar ---------- */
.apb-rx-ssb{position:relative;padding:clamp(32px,5vw,52px) 24px;background:var(--apb-rx-soft);border-radius:var(--apb-rx-radius,16px);overflow:hidden}
.apb-rx-ssb-inner{max-width:520px;margin-left:64px}
.apb-rx-ssb-inner h3{font-size:20px;font-weight:750;letter-spacing:-.01em;color:var(--apb-rx-ink);margin:0 0 12px}
.apb-rx-ssb-inner p{font-size:15px;line-height:1.7;color:var(--apb-rx-muted);margin:0 0 12px}
.apb-rx-ssb-rail{position:absolute;left:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
.apb-rx-ssb-btn{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--apb-rx-ink);background:var(--apb-rx-surface,#fff);border:1px solid var(--apb-rx-line);box-shadow:var(--apb-rx-shadow-1,0 1px 2px rgba(11,13,18,.06));transition:transform var(--apb-rx-t,.28s) var(--apb-rx-ease),color var(--apb-rx-t,.28s) var(--apb-rx-ease)}
.apb-rx-ssb-btn:hover{transform:translateY(-2px);color:var(--apb-rx-accent-text,var(--apb-rx-brand))}
.apb-rx-ssb-btn .n{position:absolute;top:-6px;right:-6px;font-size:10px;font-weight:700;color:var(--apb-rx-muted);background:var(--apb-rx-soft);border:1px solid var(--apb-rx-line);border-radius:999px;padding:1px 5px}
.apb-rx-ssb-btn.saved{color:var(--apb-rx-accent-contrast,#fff);background:var(--apb-rx-brand);border-color:var(--apb-rx-accent-text,var(--apb-rx-brand))}
@media(max-width:560px){.apb-rx-ssb-rail{position:static;transform:none;flex-direction:row;margin-bottom:20px}.apb-rx-ssb-inner{margin-left:0}}
@media(prefers-reduced-motion:reduce){.apb-rx-ssb-btn{transition:none}}
