/**
 * consent-manager.css
 *
 * Deliberately small and quiet — this is a utility layer sitting on top of
 * an existing site, not a separate branded surface, so it borrows the host
 * site's type stack via `inherit`/system fonts and only asserts a few CSS
 * variables for color. The values below are tuned to picturemosaics.com's
 * own palette, deliberately sourced from recurring site elements rather
 * than the homepage's dark hero (that surface is page-specific, not used
 * site-wide): the pale blue-gray from the bottom icon-strip section as the
 * card surface, dark navy nav/header text as the foreground, and the steel
 * blue that recurs in the promo bar, chat widget, and "Contact Us" button
 * outline as the accent. Adjust here if the site's palette changes.
 */

:root {
  --consent-bg: #eef3f7;
  --consent-fg: #16263a;
  --consent-muted: #64768a;
  --consent-accent: #2d6ca3;
  --consent-accent-fg: #ffffff;
  --consent-btn-bg: rgba(22, 38, 58, 0.07);
  --consent-border: rgba(22, 38, 58, 0.15);
  --consent-radius: 10px;
  --consent-shadow: 0 4px 20px rgba(22, 38, 58, 0.16);
  --consent-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------------- Banner: small, corner-anchored, not full-width ------- */

/* left/bottom account for two existing fixed-position widgets on this site
   that aren't moving: Weglot's language switcher (left: 35px, width: 107px
   -> occupies x 35-142px) and the chat bubble (bottom: 20px, height: 64px
   on the right -> occupies y 20-84px, but far enough right not to matter
   here). Shifting left past Weglot's right edge (142px) clears it without
   needing to change the vertical position — the chat bubble isn't in this
   horizontal band on any normal desktop width. See the mobile override
   below for why that same approach doesn't work at narrow widths. */
.consent-banner {
  position: fixed;
  left: 170px;
  bottom: 16px;
  z-index: 2147483000;
  max-width: 340px;
  width: calc(100% - 186px);
  background: var(--consent-bg);
  color: var(--consent-fg);
  border: 1px solid var(--consent-border);
  border-radius: var(--consent-radius);
  box-shadow: var(--consent-shadow);
  padding: 16px;
  font-family: var(--consent-font);
  font-size: 13px;
  line-height: 1.5;

  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

/* Used for the non-GDPR banner (single "OK" button, shorter text). Sized to
   its content rather than a guessed pixel value, so the one-line text sets
   the width naturally instead of wrapping or leaving excess space — see the
   nowrap rule on .consent-banner__text below. max-width is just a safety
   cap in case this text ever changes to something longer. Must stay above
   the "Small screens" media query in file order so that rule's
   max-width: none still wins on mobile (equal specificity — later in
   source order wins the cascade tie). */
.consent-banner--compact {
  width: max-content;
  max-width: 400px;
}

.consent-banner--compact .consent-banner__text {
  white-space: nowrap;
}

.consent-banner--compact .consent-banner__actions {
  justify-content: flex-end;
}

/* Close (X) — compact variant only. A small circular badge straddling the
   banner's top-right corner (half in, half out) rather than sitting inside
   the padded content area — same surface material as the banner itself
   (bg/border/shadow) so it reads as part of the same system, just floating
   on the corner. .consent-banner is already position: fixed, which is
   enough of a containing block for this to anchor to. */
.consent-banner__close {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--consent-bg);
  border: 1px solid var(--consent-border);
  box-shadow: var(--consent-shadow);
  padding: 0;
  cursor: pointer;
  color: var(--consent-muted);
}

/* Drawn as an SVG rather than a text glyph (e.g. ×) deliberately —
   font characters aren't reliably centered within their own line box (glyph
   design varies by font/character), which becomes visually obvious at
   larger sizes. An SVG's bounding box centers exactly via flexbox, with no
   font-metric ambiguity. */
.consent-banner__close svg {
  display: block;
  width: 12px;
  height: 12px;
}

.consent-banner__close:hover {
  color: var(--consent-fg);
}

.consent-banner__close:focus-visible {
  outline: 2px solid var(--consent-accent);
  outline-offset: 2px;
}

.consent-banner--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.consent-banner__text {
  margin: 0 0 12px;
}

.consent-banner__link {
  background: none;
  border: none;
  padding: 0;
  color: var(--consent-fg);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.consent-banner__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------------- Shared buttons ---------------------------------------- */

.consent-btn {
  font-family: var(--consent-font);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 120ms ease;
}

.consent-btn:hover {
  filter: brightness(1.08);
}

.consent-btn:focus-visible {
  outline: 2px solid var(--consent-accent);
  outline-offset: 2px;
}

/* Accept/reject/save intentionally share the same visual weight — several
   EU DPAs (e.g. CNIL) have found consent invalid where "accept" is styled
   more prominently than "reject". Both are accent-filled together; don't
   give just one of these an accent (or any other) treatment the other
   lacks — same rule applies to the modal's reject/save pair, since they
   share these classes. */
.consent-btn--primary,
.consent-btn--ghost {
  background: var(--consent-accent);
  color: var(--consent-accent-fg);
  border-color: var(--consent-accent);
}

/* The default focus ring uses the accent color, which would be invisible
   against these two buttons now that they're accent-filled themselves —
   swap to a contrasting ring just for them. */
.consent-btn--primary:focus-visible,
.consent-btn--ghost:focus-visible {
  outline-color: var(--consent-bg);
}

/* ---------------- Settings modal ---------------------------------------- */

.consent-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;

  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.consent-modal-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.consent-modal {
  background: var(--consent-bg);
  color: var(--consent-fg);
  border-radius: var(--consent-radius);
  border: 1px solid var(--consent-border);
  box-shadow: var(--consent-shadow);
  max-width: 440px;
  width: 100%;
  padding: 24px;
  font-family: var(--consent-font);
}

.consent-modal__title {
  margin: 0 0 6px;
  font-size: 17px;
}

.consent-modal__intro {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--consent-muted);
}

.consent-modal__rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.consent-modal__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--consent-border);
}

.consent-modal__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.consent-modal__row-label {
  font-size: 13px;
  font-weight: 600;
}

.consent-modal__row-desc {
  font-size: 12px;
  color: var(--consent-muted);
  margin-top: 2px;
}

.consent-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------------- Toggle switch ------------------------------------------ */

.consent-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}

.consent-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.consent-toggle__track {
  position: absolute;
  inset: 0;
  background: var(--consent-border);
  border-radius: 999px;
  transition: background 150ms ease;
}

.consent-toggle__track::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  background: var(--consent-fg);
  border-radius: 50%;
  transition: transform 150ms ease;
}

.consent-toggle input:checked + .consent-toggle__track {
  background: var(--consent-accent);
}

.consent-toggle input:checked + .consent-toggle__track::before {
  transform: translateX(16px);
}

.consent-toggle input:disabled + .consent-toggle__track {
  opacity: 0.5;
}

.consent-toggle input:focus-visible + .consent-toggle__track {
  outline: 2px solid var(--consent-accent);
  outline-offset: 2px;
}

/* ---------------- Reduced motion ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .consent-banner,
  .consent-modal-overlay,
  .consent-toggle__track,
  .consent-toggle__track::before {
    transition: none;
  }
}

/* ---------------- Small screens ------------------------------------------ */

/* UNVERIFIED WIDTH ESTIMATE — 300px is a best guess, not a measured value
   like the Weglot/chat-bubble geometry elsewhere in this file. Verify two
   things after deploying, on a real phone or the artifact preview: (1) do
   "Reject non-essential" and "Accept all" actually fit on one line at this
   width without wrapping, and (2) does the banner's right edge (left: 8px +
   this width) actually clear the chat bubble's left edge? These two
   constraints are close enough to genuinely conflict — adjust this number
   based on what you see, not on this comment.
   Narrower than full-width so it doesn't reach the chat bubble's space —
   on mobile the chat bubble is smaller than its desktop size (confirmed via
   Computed tab: right: 14px, bottom: 14px, 52x52px here, vs 64x64px at
   right/bottom: 20px on desktop) — same principle as the compact variant
   below, which also isn't full-width for this reason. Still overlaps
   Weglot's horizontal band (left: 35px, width: 107px) at this anchor, so
   bottom still needs to clear Weglot's height, not the chat bubble's — see
   the shared bottom: 56px below. */
@media (max-width: 480px) {
  .consent-banner {
    left: 8px;
    right: auto;
    bottom: 56px;
    width: 300px;
    max-width: none;
  }

  /* The compact variant's content (one short line, one button) is smaller
     than even the 300px above, so it still gets its own narrower,
     content-sized width rather than sharing the GDPR banner's fixed value.
     bottom: 56px isn't repeated here — it's already set by the shared base
     rule above, since both variants land in the same situation now
     (narrow enough to clear the chat bubble, still overlapping Weglot's
     horizontal band, so both only need to clear Weglot's height). */
  .consent-banner--compact {
    right: auto;
    width: max-content;
  }

  /* Undo the desktop-only nowrap sizing here — on a narrow phone the banner
     already goes edge-to-edge above, so let the text wrap normally instead
     of risking overflow if the one-line text doesn't fit. */
  .consent-banner--compact .consent-banner__text {
    white-space: normal;
  }

  /* Was 44px (the common accessibility minimum for touch targets) — shrunk
     ~15% to 37px per request, which is a reasonable touch target in
     practice but no longer meets that specific guideline; worth keeping in
     mind if this ever feels hard to tap reliably. Now that the banner
     above is content-sized rather than stretched to the screen edge,
     there's room for the same overhang used on desktop without it getting
     clipped. */
  .consent-banner__close {
    top: -15px;
    right: -15px;
    width: 37px;
    height: 37px;
  }

  .consent-banner__close svg {
    width: 19px;
    height: 19px;
  }
}