@charset "UTF-8";
/* This stylesheet is served as `text/css` with no charset parameter, so without
   this @charset the browser decodes it per the referencing document and a
   non-ASCII byte anywhere above a declaration can swallow that declaration.
   That is not hypothetical: an em-dash in a comment silently dropped
   `background` and `font-family` from the .acconsent-banner rule in production,
   which showed as a pale halo around the banner on a dark-footer site. The file
   is kept ASCII-only as well - belt and braces. */
/* amplifi.consent - front-end styles.
 * Theme-proof: scoped class names, forced font-family/sizes, no reliance on host theme.
 * Visual: dark, translucent (glassmorphic) surfaces with light text; restrained radii.
 */
:root {
  --acconsent-accent: #4db6ac;            /* only used for the (optional) checkbox tint; buttons/links are monochrome */
  --acconsent-surface: rgba(20, 24, 28, 0.82);
  --acconsent-surface-solid: #14181c;
  --acconsent-border: rgba(255, 255, 255, 0.14);
  --acconsent-text: #eef1f4;
  --acconsent-text-dim: #aeb6bf;
  --acconsent-radius: 6px;
  --acconsent-radius-lg: 10px;
  /* Monochrome control tokens - deliberately NOT tied to the accent, so the
   * consent UI reads neutral on ANY site regardless of the configured accent. */
  --acconsent-btn-fill: #f2f3f5;          /* light fill for primary buttons */
  --acconsent-btn-fill-text: #14181c;     /* dark text on the light fill */
  --acconsent-check: #9aa0a6;             /* neutral checkbox tint (white tick stays visible) */
  --acconsent-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Banner ---------- */
.acconsent-banner {
  position: fixed; left: 0; right: 0; z-index: 2147483000;
  display: flex; justify-content: center; padding: 16px;
  font-family: var(--acconsent-font) !important;
  box-sizing: border-box;
  /* The banner box is 16px larger than its card on every side. That frame used
     to be fully transparent, and the room reserved behind the banner is blank,
     so on a dark-footer site the frame rendered as a pale halo around the card
     - measured RGB ~246 against a black footer on asctmprd.
     A hit test does NOT catch this: elementFromPoint reports the banner as
     covering that area because the element is there; it simply was not
     painting. Only a pixel measurement finds it.
     Backdrop-blur alone does not fix it either - blurring a blank band just
     yields blurred blank. The frame therefore carries the same surface tint as
     the card, so it reads as one continuous control on any theme, light or
     dark, without sampling a page colour or painting an opaque band of our
     own. Blur is layered on top where supported, which softens the boundary
     against real content that scrolls behind it.
     KEEP THIS COMMENT ASCII-ONLY. This stylesheet is served as `text/css` with
     no charset, so a non-ASCII byte here is decoded as latin-1 and swallows the
     declarations that follow it: an em-dash in this very comment silently
     dropped `background` and `font-family` from this rule in production. */
  background: var(--acconsent-surface);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
}
.acconsent-pos-bottom { bottom: 0; }
.acconsent-pos-center { top: 0; bottom: 0; align-items: center; background: rgba(0,0,0,.55); }

.acconsent-banner-inner {
  background: var(--acconsent-surface); color: var(--acconsent-text);
  max-width: 720px; width: 100%;
  border-radius: var(--acconsent-radius-lg);
  box-shadow: 0 14px 44px rgba(0,0,0,.45);
  padding: 22px 24px; box-sizing: border-box;
  border: 1px solid var(--acconsent-border);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}
.acconsent-banner-title { font-size: 17px !important; font-weight: 700; margin: 0 0 8px; line-height: 1.3; color: var(--acconsent-text); }
.acconsent-banner-msg { font-size: 14px !important; line-height: 1.6; margin: 0 0 18px; color: var(--acconsent-text-dim); }
.acconsent-banner-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; }

/* ---------- Buttons ---------- */
/* !important on box-model/appearance properties: real WP themes and
   frameworks (Bootstrap, hello-elementor's reset.css, etc.) commonly reset
   `button`/`[type="button"]`/`[type="submit"]` element selectors. Those are
   the SAME specificity (0,1,0) as our single class selector, so whichever
   stylesheet loads later in the cascade wins on a tie - which is often the
   theme, since it usually enqueues after plugins. Observed in the wild on
   ascentialmls.com: hello-elementor's reset.css and Bootstrap both silently
   overrode .acconsent-fab's border-radius/width with no !important on either
   side. Force these here so real <button> elements can't be un-styled by a
   same-specificity theme/framework rule loaded later. */
.acconsent-btn {
  font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; cursor: pointer !important;
  border-radius: var(--acconsent-radius) !important; padding: 11px 18px !important; border: 1px solid transparent !important;
  font-family: var(--acconsent-font) !important; box-sizing: border-box !important; text-align: center !important;
  transition: filter .12s ease, background .12s ease, border-color .12s ease;
  -webkit-appearance: none !important; appearance: none !important;
}
.acconsent-btn-primary { background: var(--acconsent-btn-fill) !important; color: var(--acconsent-btn-fill-text) !important; }
.acconsent-btn-primary:hover { filter: brightness(0.94); }
.acconsent-btn-secondary { background: rgba(255,255,255,.10) !important; color: var(--acconsent-text) !important; border-color: var(--acconsent-border) !important; }
.acconsent-btn-secondary:hover { background: rgba(255,255,255,.16) !important; }
.acconsent-btn-link { background: transparent !important; color: var(--acconsent-text-dim) !important; padding: 11px 10px !important; text-decoration: underline; }
.acconsent-btn-link:hover { color: var(--acconsent-text); }
.acconsent-btn-outline { background: transparent !important; color: var(--acconsent-text) !important; border-color: var(--acconsent-border) !important; }
.acconsent-btn-outline:hover { background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.28) !important; }

/* ---------- Modal ---------- */
.acconsent-modal-overlay {
  position: fixed; inset: 0; z-index: 2147483001; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  font-family: var(--acconsent-font) !important;
}
.acconsent-modal {
  background: var(--acconsent-surface); color: var(--acconsent-text);
  max-width: 600px; width: 100%; max-height: 88vh; overflow-y: auto;
  border-radius: var(--acconsent-radius-lg);
  box-shadow: 0 18px 54px rgba(0,0,0,.5);
  padding: 26px; box-sizing: border-box; position: relative;
  border: 1px solid var(--acconsent-border);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}
.acconsent-modal-close {
  position: absolute !important; top: 14px !important; right: 14px !important;
  width: 32px !important; height: 32px !important; min-width: 32px !important;
  border: 1px solid var(--acconsent-border) !important; border-radius: var(--acconsent-radius) !important;
  background: rgba(255,255,255,.06) !important; color: var(--acconsent-text-dim) !important;
  font-size: 20px !important; line-height: 1 !important; cursor: pointer !important; padding: 0 !important;
  box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.acconsent-modal-close:hover { background: rgba(255,255,255,.14); color: var(--acconsent-text); }
.acconsent-modal-title { font-size: 19px !important; font-weight: 700; margin: 0 40px 8px 0; color: var(--acconsent-text); }
.acconsent-modal-msg { font-size: 13.5px !important; line-height: 1.6; color: var(--acconsent-text-dim); margin: 0 0 20px; }

.acconsent-cat-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.acconsent-cat {
  border: 1px solid var(--acconsent-border); border-radius: var(--acconsent-radius);
  padding: 14px 16px; background: rgba(255,255,255,.04);
}
.acconsent-cat-head { display: flex !important; align-items: center; }
.acconsent-cat-label { display: flex !important; align-items: center; gap: 14px; cursor: pointer; font-weight: 700; font-size: 14.5px !important; color: var(--acconsent-text); }
.acconsent-cat-toggle { width: 22px; height: 22px; accent-color: var(--acconsent-check); cursor: pointer; flex: 0 0 auto !important; margin: 0 14px 0 0 !important; }
.acconsent-cat-toggle:disabled { cursor: not-allowed; opacity: .55; }
.acconsent-cat-name { font-size: 14.5px !important; }
.acconsent-cat-desc { font-size: 13px !important; color: var(--acconsent-text-dim); margin: 8px 0 0 38px; line-height: 1.55; }
.acconsent-cat-cookies { margin: 10px 0 0 38px; }
.acconsent-cat-cookies summary { cursor: pointer; font-size: 12.5px !important; color: var(--acconsent-text-dim); text-decoration: underline; }
.acconsent-cat-cookies summary:hover { color: var(--acconsent-text); }
.acconsent-cookie-tbl { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px !important; }
.acconsent-cookie-tbl th, .acconsent-cookie-tbl td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--acconsent-border); color: var(--acconsent-text); }
.acconsent-cookie-tbl th { color: var(--acconsent-text-dim); font-weight: 600; }
.acconsent-modal-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* ---------- Toast ---------- */
.acconsent-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 2147483002; background: var(--acconsent-surface-solid); color: var(--acconsent-text);
  padding: 12px 20px; border-radius: var(--acconsent-radius);
  border: 1px solid var(--acconsent-border);
  font-size: 13.5px !important; font-weight: 600; box-shadow: 0 8px 28px rgba(0,0,0,.4);
  opacity: 0; transition: opacity .3s ease, transform .3s ease; max-width: 90vw;
  font-family: var(--acconsent-font) !important;
}
.acconsent-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Shortcode trigger ---------- */
.acconsent-manage-trigger {
  background: transparent !important; border: 1px solid currentColor !important; color: inherit !important;
  font-size: 13px !important; font-weight: 600 !important; padding: 8px 14px !important;
  border-radius: var(--acconsent-radius) !important; cursor: pointer !important;
  box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important;
  font-family: var(--acconsent-font) !important;
}
.acconsent-manage-trigger:hover { opacity: .8; }

/* ---------- Legal links ---------- */
.acconsent-legal-links { font-size: 12px !important; margin: 0 0 14px; line-height: 1.7; }
.acconsent-legal-links a { color: var(--acconsent-text); text-decoration: underline; }
.acconsent-legal-ref { color: var(--acconsent-text-dim); }

/* CCPA/CPRA one-click opt-out inside the banner/modal. Only rendered when the
   site sets optout_placement to 'banner' or 'both' - the DEFAULT placement is
   the page footer (CCR tit.11 Sec.7013(c)/Sec.7014(c) require these links "at either
   the header or footer of the business's internet homepage(s)", and Sec.7026(a)(4)
   says a cookie banner is not by itself an acceptable opt-out method). Do Not
   Sell and Limit-SPI can both render here, so give them a real gap instead of
   relying on a single whitespace character between the two <button> tags. */
.acconsent-optout-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.acconsent-optout-btn { font-size: 13px !important; }

/* ---------- Footer opt-out row (DEFAULT placement for the CCPA controls) ----------
   These are <button>s so a click can immediately effectuate the right, but in a
   footer they must READ as links sitting alongside the theme's own footer links.
   Sec.7003(c)'s "conspicuous" test is RELATIVE - "a font size and color that is at
   least the approximate size or color as other links next to it" - so every
   type property here INHERITS from the surrounding footer rather than imposing
   the widget's own palette. That means a dark footer and a light footer both
   come out right with no per-site CSS.

   Deliberately NOT !important-armoured the way the banner controls are: these
   live inside the theme's own markup and SHOULD lose to a theme's footer link
   styling, which is exactly what keeps them "similar in manner" to their
   neighbours. The one exception is the reset of the UA button chrome, which
   otherwise leaves an OS-native grey box in the middle of a footer link row. */
.acconsent-footer-optout {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 0.35em 1em;
}
.acconsent-optout-btn-footer {
  -webkit-appearance: none !important; appearance: none !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  margin: 0 !important; padding: 0 !important;
  font: inherit !important; font-size: inherit !important; line-height: inherit !important;
  color: inherit; text-align: left;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.acconsent-optout-btn-footer:hover,
.acconsent-optout-btn-footer:focus-visible { text-decoration: underline; opacity: 0.8; }
.acconsent-optout-btn-footer:focus-visible {
  outline: 2px solid currentColor; outline-offset: 2px;
}

/* The AUTO-rendered row only. wp_footer() usually fires AFTER the theme's own
   <footer> element, so this lands at the very bottom of the document rather
   than inside the theme's link row - it needs a little self-contained framing
   so it doesn't read as an orphaned strip. A shortcode placement gets NONE of
   this (no -auto class), because there the surrounding footer already supplies
   the layout and any padding we added would fight it.

   Because this row has NO adjacent links to inherit from (it is outside the
   theme's footer), `color: inherit` here resolves against <body> - which on a
   dark-footer theme can land dark-on-dark. currentColor is therefore forced to
   a contrast-safe value ONLY on the auto row; the shortcode variant keeps pure
   inheritance, which is what makes it "similar in manner" to its neighbours
   and is why the shortcode is the recommended placement. */
.acconsent-footer-optout-auto {
  display: flex; justify-content: center; flex-wrap: wrap;
  padding: 12px 16px;
  font-size: 0.8125rem;
  color: CanvasText;
  background: Canvas;
}
.acconsent-footer-optout-auto .acconsent-optout-btn-footer { color: CanvasText; }

/* Fallback reservation for the fixed banner (see syncBannerPadding() in
   consent.js). Used only when the trailing painted element cannot be extended.
   A real element rather than padding on <body>: padding lives inside the body
   box, so it is painted by the body background - which CSS also propagates to
   the canvas - and any attempt to recolour that band therefore recolours the
   whole page behind every transparent section. This element paints only itself,
   and it is deliberately TRANSPARENT: it shows the canvas exactly as the old
   body padding did, so it can never render as a wrong-coloured band. Height is
   set inline from JS (measured live).

   Armoured hard, because reserving this room is a legal requirement (CCPA
   Sec.7004(a)(4)(A) - the opt-out control must not be covered by the banner), and
   a single unqualified theme rule like `div{max-width:1200px}` or
   `body>div:last-child{display:none}` would otherwise silently delete it. */
.acconsent-banner-spacer {
  display: block !important;
  position: static !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box !important;
  flex: none !important;
  grid-area: auto !important;
  transform: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none;
  user-select: none;
}

/* Touch target: an inline text link is only ~20px tall, below the 44px WCAG
   2.5.5 / 2.5.8 target guidance. Pad the hit area vertically without changing
   the visual line height, so the control still reads as a text link. */
@media (pointer: coarse) {
  .acconsent-optout-btn-footer { padding: 12px 0 !important; }
}

/* ---------- Persistent floating preferences trigger (withdrawal path) ---------- */
.acconsent-fab {
  position: fixed !important; left: 16px !important; bottom: 16px !important; z-index: 2147482000 !important;
  width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 50% !important;
  border: 1px solid var(--acconsent-border) !important;
  background: var(--acconsent-surface-solid) !important; color: var(--acconsent-text) !important; line-height: 1 !important;
  cursor: pointer !important; box-shadow: 0 4px 16px rgba(0,0,0,.34) !important; padding: 0 !important;
  box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
/* Docking side, set via the "Floating button side" admin setting
   (fab_position: left | right - default left, unchanged). The PHP side
   always emits BOTH .acconsent-fab and a side modifier class
   (.acconsent-fab-left or .acconsent-fab-right); the -right modifier
   overrides the default left-docked position/coords, keeping the base
   .acconsent-fab rule as the left default so existing sites (no saved
   fab_position yet) render exactly as before. */
.acconsent-fab-right { left: auto !important; right: 16px !important; }
.acconsent-fab:hover { box-shadow: 0 6px 22px rgba(0,0,0,.46); }
.acconsent-cookie-icon { width: 22px; height: 22px; display: block; }

/* ---------- Legal document (shortcode) - renders on the page, inherits theme text ---------- */
.acconsent-legal-doc { max-width: 820px; margin: 0 auto; }
.acconsent-legal-title { margin: 0 0 4px; }
.acconsent-legal-meta { font-size: 13px !important; color: #6b7280; margin: 0 0 18px; }
.acconsent-legal-body { line-height: 1.7; }

@media (max-width: 520px) {
  .acconsent-banner-inner { padding: 18px; }
  .acconsent-modal { padding: 20px; }
  .acconsent-banner-btns { justify-content: stretch; }
  .acconsent-banner-btns .acconsent-btn { flex: 1 1 auto; text-align: center; }
  .acconsent-modal-btns { justify-content: stretch; }
  .acconsent-modal-btns .acconsent-btn { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .acconsent-toast, .acconsent-btn { transition: none; }
}

/* Print: the banner is screen chrome and the reserved band is screen-only
   scaffolding, so neither belongs in a printed page - together they were adding
   a blank strip and a floating card to every print/PDF. The FAB is the same
   class of thing. The footer opt-out row is real page content and stays. */
@media print {
  .acconsent-banner,
  .acconsent-banner-spacer,
  .acconsent-fab,
  .acconsent-modal-overlay { display: none !important; }
}