/* 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;
}
.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 §7013(c)/§7014(c) require these links "at either
   the header or footer of the business's internet homepage(s)", and §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.
   §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; }

/* 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; }
}