/* PCM Public Popup Styles */
#pcm-consent-popup {
position: fixed;
z-index: 999999;
display: none;
}
.pcm-overlay {
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.pcm-overlay-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
/* Phase 4: --pcm-overlay-backdrop is set by the Pro effects layer; the
fallback below is the free default, so an install without Pro renders
exactly as before. */
-webkit-backdrop-filter: var(--pcm-overlay-backdrop, blur(3px));
backdrop-filter: var(--pcm-overlay-backdrop, blur(3px));
}
.pcm-overlay .pcm-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 600px;
width: 90%;
}
.pcm-quiet {
max-width: 400px;
}
.pcm-pos-bottom-right {
bottom: 20px;
right: 20px;
}
.pcm-pos-bottom-left {
bottom: 20px;
left: 20px;
}
.pcm-pos-center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Phase 4: the --pcm-radius / --pcm-border-w / --pcm-border-color /
--pcm-backdrop custom properties are set by the Pro effects layer; every
fallback here is the free default, so with no Pro installed nothing about
these four declarations changes what is drawn.
box-sizing IS a real (small) behaviour change, and only in one place, so
read this before acting on a "the banner got smaller" report:
- Most themes already ship a global `* { box-sizing: border-box }` and
.pcm-modal previously declared nothing, so on those sites this line is a
no-op. It only bites on themes with no global reset.
- Quiet mode is unaffected either way: .pcm-modal is width:auto there and
the max-width lives on the padding-less wrapper, so box-sizing has
nothing to act on.
- Overlay mode IS affected: `.pcm-overlay .pcm-modal` sets width:90%;
max-width:600px, so the outer width goes from min(90vw, 600px) + 48px of
padding down to min(90vw, 600px) - up to 48px narrower than before.
- Overlay on mobile (width:95%; max-width:none) is the reason to keep it:
it fixes a real horizontal overflow, where 95vw + 48px was wider than the
viewport. It also stops a Pro border from widening the box further. */
.pcm-modal {
box-sizing: border-box;
background: var(--pcm-bg, #fff);
color: var(--pcm-text, #333);
font-family: var(--pcm-font-family, inherit);
padding: 24px;
border-radius: var(--pcm-radius, 12px);
border: var(--pcm-border-w, 0) solid var(--pcm-border-color, transparent);
-webkit-backdrop-filter: var(--pcm-backdrop, none);
backdrop-filter: var(--pcm-backdrop, none);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
position: relative;
}
.pcm-text {
font-size: var(--pcm-text-size, 15px);
line-height: 1.6;
margin-bottom: 16px;
}
.pcm-link {
color: var(--pcm-link, #0073aa);
text-decoration: underline;
display: inline-block;
margin-bottom: 16px;
font-size: var(--pcm-link-size, 15px);
}
.pcm-link:hover {
text-decoration: none;
}
.pcm-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
/* v4.4.11: align buttons with the START of the reading direction so they
line up under the message text - left in LTR (English), right in RTL
(Hebrew/Arabic). Previously flex-end pushed them to the right on LTR
sites, which looked misaligned against the left-aligned copy and made
wrapped rows ragged. flex-start follows `direction`, so it is correct
in both. */
justify-content: flex-start;
}
/* v5.0.15: banner and click-to-load buttons are scoped to a parent on purpose.
A theme reset of the form
[type="button"], [type="submit"], button { background: transparent; ... }
matches our buttons through [type="button"], which has EXACTLY the same
specificity as .pcm-btn - (0,1,0) both. A tie is broken by load order, and a
theme stylesheet that happens to load after ours then repaints every button
in the banner. Seen live on landau-yuval.co.il: the Agree button rendered
transparent with the theme's pink border instead of the admin's colours,
while the banner around it was styled correctly. The admin preview looked
right the whole time, because the theme's reset is not loaded there.
Adding the parent takes us to (1,1,0) and (0,2,0), which no plain element or
attribute reset can reach, without resorting to !important - so an admin who
wants to restyle the buttons deliberately still can. */
#pcm-consent-popup .pcm-btn {
background: var(--pcm-btn-bg, #0073aa);
color: var(--pcm-btn-text, #fff);
/* Phase 4: a 0-width transparent border is visually identical to
`border: none` and still overrides a theme's button border. Pro sets
these vars to draw a real outline. */
border: var(--pcm-btn-border-w, 0) solid var(--pcm-btn-border-color, transparent);
padding: 10px 20px;
border-radius: var(--pcm-btn-radius, 6px);
font-size: var(--pcm-btn-size, 14px);
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
#pcm-consent-popup .pcm-btn:hover {
opacity: 0.9;
transform: translateY(-2px);
}
/* v5.0.6 (a11y / WCAG 2.4.7): explicit keyboard focus indicator for the
primary choice buttons. The buttons are admin-recolorable, so a single
solid outline could vanish against a same-colour background. A white ring
wrapped in a dark halo stays visible over any button colour, light or dark.
:focus-visible keeps mouse clicks ring-free while always showing it for
keyboard/AT users. */
#pcm-consent-popup .pcm-btn:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 2px;
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.55);
}
/* v5.0.6 (a11y): the JS moves focus to the dialog/region container on open so
the banner is announced. That focus is programmatic, so suppress the UA
outline on the CONTAINER only - child controls keep their focus rings. */
#pcm-consent-popup:focus {
outline: none;
}
#pcm-consent-popup .pcm-btn-accept {
background: var(--pcm-accept-bg, var(--pcm-btn-bg, #28a745));
color: var(--pcm-accept-text, var(--pcm-btn-text, #fff));
}
#pcm-consent-popup .pcm-btn-essential {
background: var(--pcm-essential-bg, var(--pcm-btn-bg, #ffc107));
color: var(--pcm-essential-text, var(--pcm-btn-text, #000));
}
#pcm-consent-popup .pcm-btn-decline {
background: var(--pcm-decline-bg, var(--pcm-btn-bg, #dc3545));
color: var(--pcm-decline-text, var(--pcm-btn-text, #fff));
}
@keyframes pcmFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pcmSlideUp {
from {
transform: translate(-50%, 20px);
opacity: 0;
}
to {
transform: translate(-50%, -50%);
opacity: 1;
}
}
#pcm-consent-popup {
animation: pcmFadeIn 0.3s ease-out;
}
.pcm-overlay .pcm-modal {
animation: pcmSlideUp 0.3s ease-out;
}
@media (max-width: 600px) {
.pcm-overlay .pcm-modal {
width: 95%;
max-width: none;
}
.pcm-quiet {
left: 10px !important;
right: 10px !important;
max-width: none !important;
}
/* v5.0.5: the center position keeps its translate(-50%,-50%) transform,
so the left:10px override above shoved the box half its own width off
the LEFT edge of the screen (seen live on a client site). On phones,
dock the centered box to the bottom instead - full width, no shift. */
.pcm-quiet.pcm-pos-center {
top: auto !important;
bottom: 16px !important;
transform: none !important;
}
/* v5.0.5 capped the card to the viewport here, for phones only. v5.0.14
moved those rules out of this media query so every width gets them; a
short laptop window had the same clipped-paragraph bug. Nothing is
needed here any more - keeping a second copy would only let the two
drift apart. */
.pcm-actions {
flex-direction: column;
}
.pcm-btn {
width: 100%;
}
}
/* =============================================================================
* v3.1.0-alpha2: Click-to-load placeholders for blocked iframes (YouTube,
* Vimeo, Maps, Twitter/X, Instagram, Facebook, etc.). Loaded on every page
* regardless of consent state so the visitor always has a labeled affordance.
* =========================================================================*/
.pcm-ctl-wrap {
position: relative;
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
border-radius: 10px;
overflow: hidden;
color: #f8fafc;
width: 100%;
min-height: 240px;
display: flex;
align-items: center;
justify-content: center;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
/* v4.4.9: direction inherited (was hardcoded rtl). The card content is
centered, so this is cosmetic, but it keeps English sites consistent. */
}
.pcm-ctl-wrap iframe {
display: none;
}
.pcm-ctl-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 24px 28px;
max-width: 90%;
text-align: center;
}
.pcm-ctl-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-position: center;
background-size: 28px 28px;
}
/* Per-vendor accent colors. SVG-as-data-URL icons keep CSS self-contained. */
.pcm-ctl-youtube .pcm-ctl-icon { background-color: #ff0000; background-image: url("data:image/svg+xml;utf8,"); }
.pcm-ctl-vimeo .pcm-ctl-icon { background-color: #1ab7ea; background-image: url("data:image/svg+xml;utf8,"); }
.pcm-ctl-maps .pcm-ctl-icon { background-color: #4285f4; background-image: url("data:image/svg+xml;utf8,"); }
.pcm-ctl-twitter .pcm-ctl-icon { background-color: #000000; background-image: url("data:image/svg+xml;utf8,"); }
.pcm-ctl-instagram .pcm-ctl-icon{ background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background-image: url("data:image/svg+xml;utf8,"); }
.pcm-ctl-facebook .pcm-ctl-icon { background-color: #1877f2; background-image: url("data:image/svg+xml;utf8,"); }
.pcm-ctl-wistia .pcm-ctl-icon, .pcm-ctl-soundcloud .pcm-ctl-icon {
background-color: #94a3b8;
background-image: url("data:image/svg+xml;utf8,");
}
.pcm-ctl-msg {
display: flex;
flex-direction: column;
gap: 4px;
line-height: 1.4;
}
.pcm-ctl-msg strong {
font-size: 17px;
font-weight: 600;
}
.pcm-ctl-msg span {
font-size: 13px;
opacity: 0.8;
}
.pcm-ctl-wrap .pcm-ctl-btn {
background: #f8fafc;
color: #0f172a;
border: none;
padding: 10px 24px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
min-height: 40px;
}
.pcm-ctl-wrap .pcm-ctl-btn:hover {
background: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.pcm-ctl-wrap .pcm-ctl-btn:active {
transform: translateY(0);
}
.pcm-ctl-wrap .pcm-ctl-btn:focus-visible {
outline: 2px solid #f8fafc;
outline-offset: 3px;
}
@media (max-width: 600px) {
.pcm-ctl-wrap { min-height: 180px; }
.pcm-ctl-icon { width: 44px; height: 44px; background-size: 22px 22px; }
.pcm-ctl-msg strong { font-size: 15px; }
}
/* When the popup itself is visible, leave space for the page underneath. */
@media (prefers-reduced-motion: reduce) {
.pcm-ctl-btn { transition: none; }
}
/* =============================================================================
* v3.1.0-alpha3: Category-toggles panel (the "Customize" expander).
*
* Hidden by default. Becomes visible when .pcm-categories.pcm-open is set
* by pcm-public.js, with a smooth slide-down animation.
* =========================================================================*/
#pcm-consent-popup .pcm-btn-customize {
background: transparent !important;
color: var(--pcm-link, #0073aa) !important;
border: 1px solid currentColor !important;
font-weight: 500 !important;
}
#pcm-consent-popup .pcm-btn-customize:hover { opacity: 0.85; }
.pcm-categories {
display: none;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(0,0,0,0.08);
/* v4.4.9: direction/text-align are inherited from the popup (which the
PHP sets to rtl only on RTL locales via .pcm-rtl). Hardcoding rtl here
broke the category panel on English (LTR) sites - the default for
wp.org - leaving it right-aligned with a reversed toggle animation. */
max-height: 60vh;
overflow-y: auto;
}
.pcm-categories.pcm-open {
display: block;
animation: pcmCategoriesIn 0.25s ease-out;
}
/* v5.0.14: cap the banner to the viewport at EVERY width, not just on phones.
With Customize expanded the card grows past a short window, and because the
quiet banner is anchored to the bottom, the overflow pushes its TOP off the
screen: the consent paragraph gets clipped and the visitor reads a sentence
that starts mid-air. Measured on a 1024x768 desktop window: the card came out
762px tall with its top at -14px.
The same rules existed since 5.0.5 but only inside @media (max-width: 600px),
so every laptop with a short window was left out. The categories list is
released to its full height here on purpose - one scroll inside the card
reads better than a scroll within a scroll. */
.pcm-quiet .pcm-modal,
.pcm-overlay .pcm-modal {
max-height: calc(100vh - 32px);
max-height: calc(100dvh - 32px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.pcm-categories.pcm-open {
max-height: 999px;
}
@keyframes pcmCategoriesIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.pcm-cat-title {
margin: 0 0 12px 0;
font-size: 16px;
font-weight: 600;
color: var(--pcm-text, #333);
}
.pcm-cat-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
cursor: pointer;
}
.pcm-cat-row:last-of-type { border-bottom: none; }
.pcm-cat-row.pcm-cat-required { cursor: default; }
.pcm-cat-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.pcm-cat-info strong {
font-size: 14px;
font-weight: 600;
color: var(--pcm-text, #333);
line-height: 1.3;
}
.pcm-cat-info span {
font-size: 12px;
color: rgba(0,0,0,0.6);
line-height: 1.45;
}
/* Toggle switch (CSS-only). v4.4.9: LTR by default (knob starts left,
slides right when checked); RTL geometry is applied via .pcm-rtl below.
Previously the knob was hardcoded to the RTL geometry, which rendered
backwards on English (LTR) sites. */
.pcm-cat-toggle {
position: relative;
width: 42px;
height: 24px;
flex-shrink: 0;
align-self: center;
}
.pcm-cat-cb {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
z-index: 1;
}
.pcm-cat-cb:disabled { cursor: not-allowed; }
.pcm-slider {
position: absolute;
inset: 0;
background: #cbd5e1;
border-radius: 24px;
transition: background 0.2s ease;
}
.pcm-slider::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.pcm-cat-cb:checked + .pcm-slider {
background: var(--pcm-btn-bg, #0073aa);
}
.pcm-cat-cb:checked + .pcm-slider::before {
transform: translateX(18px); /* LTR: slide RIGHT */
}
/* RTL locales: knob starts right and slides left. Scoped to .pcm-rtl,
which the PHP adds to #pcm-consent-popup when is_rtl(). */
.pcm-rtl .pcm-slider::before {
left: auto;
right: 3px;
}
.pcm-rtl .pcm-cat-cb:checked + .pcm-slider::before {
transform: translateX(-18px); /* RTL: slide LEFT */
}
.pcm-cat-cb:focus-visible + .pcm-slider {
outline: 2px solid var(--pcm-btn-bg, #0073aa);
outline-offset: 3px;
}
.pcm-cat-cb:disabled + .pcm-slider {
opacity: 0.6;
background: #94a3b8;
}
.pcm-cat-actions {
margin-top: 16px;
display: flex;
justify-content: stretch;
}
#pcm-consent-popup .pcm-btn-save-choices {
flex: 1;
background: var(--pcm-btn-bg, #0073aa);
color: var(--pcm-btn-text, #fff);
}
@media (max-width: 600px) {
.pcm-categories { max-height: 50vh; }
.pcm-cat-row { padding: 10px 0; gap: 10px; }
.pcm-cat-info strong { font-size: 13px; }
.pcm-cat-info span { font-size: 11px; }
}
/* =============================================================================
* v3.1.0-alpha3: Floating Privacy Pill - persistent re-entry to consent UI.
* Required by Tikun 13 + GDPR (right to withdraw at any time).
*
* Shown only AFTER initial consent (i.e., the popup is hidden but the user
* may want to come back). Position configurable; default bottom-left.
* =========================================================================*/
/*
* v4.0.1 hotfix: !important on every visual property of the pill.
* Themes (Astra, OceanWP, GeneratePress, Hello Elementor, many builders)
* apply blanket `button { ... }` styles that override our defaults:
* - width: auto → pill stretches to text content (becomes an oval)
* - border-radius: 6px → loses its circle shape
* - background: gradient → loses its dark legible bg
* - padding: 12px 24px → bursts the 44×44 box
* - font-family, line-height, text-transform → render artefacts
* The pill must be perfectly round at exactly 44×44 in every theme; we cannot
* rely on cascade order alone. !important is intentional and scoped to this
* one ID - it does NOT leak into the popup or any other plugin styles.
*/
#pcm-privacy-pill {
position: fixed !important;
z-index: 999998 !important;
background: rgba(15, 23, 42, 0.92) !important;
background-image: none !important;
color: #f8fafc !important;
border: none !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 50% !important;
display: none;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease !important;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
font-size: 0 !important; /* kill any inherited line-height that would push the SVG */
line-height: 1 !important;
text-transform: none !important;
text-decoration: none !important;
text-shadow: none !important;
letter-spacing: normal !important;
box-sizing: border-box !important;
direction: rtl;
appearance: none !important;
-webkit-appearance: none !important;
outline: none;
opacity: 1 !important;
transform: none;
overflow: hidden !important;
}
#pcm-privacy-pill.pcm-pill-visible { display: flex !important; }
#pcm-privacy-pill:hover {
transform: scale(1.08) !important;
background: rgba(15, 23, 42, 1) !important;
}
#pcm-privacy-pill:focus-visible {
outline: 2px solid #f8fafc !important;
outline-offset: 3px !important;
}
#pcm-privacy-pill svg {
width: 22px !important;
height: 22px !important;
display: block !important;
fill: currentColor !important;
stroke: currentColor !important;
}
/* Positions. JS adds the appropriate class. */
#pcm-privacy-pill.pcm-pill-bl { bottom: 16px !important; left: 16px !important; top: auto !important; right: auto !important; }
#pcm-privacy-pill.pcm-pill-br { bottom: 16px !important; right: 16px !important; top: auto !important; left: auto !important; }
#pcm-privacy-pill.pcm-pill-tl { top: 16px !important; left: 16px !important; bottom: auto !important; right: auto !important; }
#pcm-privacy-pill.pcm-pill-tr { top: 16px !important; right: 16px !important; bottom: auto !important; left: auto !important; }
@media (max-width: 600px) {
#pcm-privacy-pill.pcm-pill-bl { bottom: 12px !important; left: 12px !important; }
#pcm-privacy-pill.pcm-pill-br { bottom: 12px !important; right: 12px !important; }
#pcm-privacy-pill.pcm-pill-tl { top: 12px !important; left: 12px !important; }
#pcm-privacy-pill.pcm-pill-tr { top: 12px !important; right: 12px !important; }
}
/* =============================================================================
* v4.0.0-alpha4: Footer text-link fallback for when the floating pill is
* disabled. Renders as a small, unobtrusive inline link that visitors can
* find by scrolling to the bottom of the page. Preserves the legal
* right-to-withdraw without the visible floating button.
*
* The link is always visible - it's a static text element, not a UI overlay.
* It positions itself at the very bottom of the page via fixed positioning
* but with very low z-index so it doesn't conflict with theme footers.
* =========================================================================*/
#pcm-privacy-link.pcm-privacy-link {
position: fixed;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 99990; /* below modals but above content */
background: rgba(15, 23, 42, 0.75);
color: #f8fafc;
padding: 4px 14px;
border-radius: 4px;
font-size: 11px;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
text-decoration: none;
line-height: 1.4;
/* v4.4.9: direction inherited from the page (was hardcoded rtl). */
opacity: 0.7;
transition: opacity 0.2s ease, background 0.2s ease;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
#pcm-privacy-link.pcm-privacy-link:hover,
#pcm-privacy-link.pcm-privacy-link:focus-visible {
opacity: 1;
background: rgba(15, 23, 42, 0.95);
color: #f8fafc;
text-decoration: none;
outline: none;
}
#pcm-privacy-link.pcm-privacy-link:focus-visible {
outline: 2px solid #f8fafc;
outline-offset: 2px;
}
@media (max-width: 600px) {
#pcm-privacy-link.pcm-privacy-link { bottom: 4px; font-size: 10px; padding: 3px 10px; }
}
/* =============================================================================
* a11y / WCAG 2.3.3 (Animation from Interactions): honour prefers-reduced-motion
* across the WHOLE banner, not just the click-to-load button.
*
* Deliberately placed LAST in the file. Several of the rules being neutralised
* below (the privacy pill, the categories panel) are declared later in source
* order than the older reduced-motion block near .pcm-ctl-btn, and some of them
* already use !important. Same-specificity ties are won by whichever rule comes
* last, so this block has to sit at the end to reliably beat them.
*
* Goal is "no motion", NOT "no visible state". Opacity end-states, background
* changes, focus rings and the category toggle's checked position are all left
* intact - only the movement and the timed ramps are removed.
*
* IMPORTANT - the pcmSlideUp / transform interaction:
* `.pcm-overlay .pcm-modal` carries a STATIC `transform: translate(-50%, -50%)`
* (top of this file) which is what actually centers the modal. pcmSlideUp only
* animates FROM translate(-50%, 20px) TO translate(-50%, -50%) - its final
* keyframe is identical to the static transform. So `animation: none` simply
* leaves the element at its static transform, which is the correct centered
* resting position. We deliberately do NOT redeclare `transform` here: doing so
* would risk fighting the mobile `.pcm-quiet.pcm-pos-center { transform: none }`
* override and could push the box off-screen.
*
* The JS side matters too: pcm-public.js fadeIn()/fadeOut() write an INLINE
* `style.transition`, which no stylesheet can override. Those helpers check
* prefersReducedMotion() themselves and skip the transition entirely.
* ========================================================================== */
@media (prefers-reduced-motion: reduce) {
/* Banner container fade-in and the overlay modal's slide-up. */
#pcm-consent-popup { animation: none !important; }
.pcm-overlay .pcm-modal { animation: none !important; }
/* "Customize" categories panel slide-down. It still appears (display:block
from .pcm-open) - it just appears without travelling. */
.pcm-categories.pcm-open { animation: none !important; }
/* Choice buttons: no timed ramp, no hover lift. The :hover opacity change
is kept - it is the state feedback, and it is not motion. */
.pcm-btn { transition: none !important; }
.pcm-btn:hover { transform: none !important; }
/* Click-to-load placeholder button (was the only rule covered before). */
.pcm-ctl-btn { transition: none !important; }
.pcm-ctl-btn:hover,
.pcm-ctl-btn:active { transform: none !important; }
/* Floating privacy pill. Base rules use !important, so these must too. */
#pcm-privacy-pill { transition: none !important; }
#pcm-privacy-pill:hover { transform: none !important; }
/* Category toggle knob: kill the slide, KEEP the checked transform - that
transform is the on/off position of the knob, i.e. real state, not decor. */
.pcm-slider,
.pcm-slider::before { transition: none !important; }
/* Footer text-link fallback. */
#pcm-privacy-link.pcm-privacy-link { transition: none !important; }
}