/**
 * privacy-consent.css
 * Override the custom properties below per client to match brand — nothing
 * else in this file should need to change site to site.
 */
:root {
  --pc-bg: #1c1c1e;
  --pc-text: #f2f2f2;
  --pc-muted: #b5b5b8;
  /* Brand red lightened for legibility on a near-black card — the exact
     brand red (#630000) fails contrast on this background. */
  --pc-link: var(--pc-text);
  --pc-manage-text: var(--pc-text);
  --pc-radius: 10px;
  --pc-btn-radius: 5px;
  --pc-border: rgba(255, 255, 255, 0.12);
  /* Site's own font stack: Lato for body copy, with safe fallbacks. */
  --pc-font: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* The site's actual button colors — same in both themes, since the
     site itself has no dark mode; only the accent (link/outline) color
     above adapts for contrast. */
  --pc-brand-bg: #ffffff;
  --pc-brand-hover: #ececec;
  --pc-brand-text: #1c1c1e;
  --pc-brand-border: #cacaca;
  --pc-deny-bg: #940000;
  --pc-deny-hover: #850000;
  --pc-deny-text: #ffffff;
}

/* Visitors whose system is set to light mode get a light card instead of
   a dark card sitting on a dark backdrop. */
@media (prefers-color-scheme: light) {
  :root {
    --pc-bg: #ffffff;
    --pc-text: #1c1c1e;
    --pc-muted: #6b6b6e;
    --pc-link: #630000;
    --pc-manage-text: #630000;
    --pc-border: rgba(0, 0, 0, 0.08);
  }
}

/* Dark backdrop behind the popup */
#privacy-consent-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2147483646;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}

#privacy-consent-overlay.pc-visible {
  opacity: 1;
  pointer-events: auto;
}

/* The popup card itself, centered on screen */
#privacy-consent-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2147483647;
  width: calc(100% - 40px);
  max-width: 480px;
  max-height: calc(100% - 40px);
  overflow-y: auto;
  background: var(--pc-bg);
  color: var(--pc-text);
  font-family: var(--pc-font);
  border-radius: var(--pc-radius);
  border: 1px solid var(--pc-border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

#privacy-consent-banner.pc-visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

#privacy-consent-banner .pc-btn-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--pc-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

#privacy-consent-banner .pc-btn-close:hover {
  color: var(--pc-text);
}

#privacy-consent-banner .pc-content {
  padding: 28px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#privacy-consent-banner .pc-text {
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--pc-text);
}

#privacy-consent-banner .pc-link {
  color: var(--pc-link);
  text-decoration: underline;
}

#privacy-consent-banner .pc-link:hover,
#privacy-consent-banner .pc-link:focus {
  font-weight: bold;
}

#privacy-consent-banner .pc-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#privacy-consent-banner .pc-btn {
  font-family: inherit;
  font-size: 17px;
  font-weight: 300;
  padding: 10px 20px;
  border-radius: var(--pc-btn-radius);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out;
}

#privacy-consent-banner .pc-btn:focus-visible {
  outline: 2px solid var(--pc-link);
  outline-offset: 2px;
}

/* Solid brand button — matches the site's real .button style. */
#privacy-consent-banner .pc-btn-accept,
#privacy-consent-banner .pc-btn-save {
  background: var(--pc-brand-bg);
  color: var(--pc-brand-text);
  border-color: var(--pc-brand-border);
}

#privacy-consent-banner .pc-btn-accept:hover,
#privacy-consent-banner .pc-btn-accept:focus,
#privacy-consent-banner .pc-btn-save:hover,
#privacy-consent-banner .pc-btn-save:focus {
  background: var(--pc-brand-hover);
}

/* Solid red button — matches the site's real .button style. */
#privacy-consent-banner .pc-btn-deny {
  background: var(--pc-deny-bg);
  border-color: var(--pc-deny-bg);
  color: var(--pc-deny-text);
}

#privacy-consent-banner .pc-btn-deny:hover,
#privacy-consent-banner .pc-btn-deny:focus {
  background: var(--pc-deny-hover);
  border-color: var(--pc-deny-hover);
}

#privacy-consent-banner .pc-btn-manage {
  background: transparent;
  color: var(--pc-manage-text);
  text-decoration: underline;
  padding-left: 4px;
  padding-right: 4px;
  margin-right: auto;
}

#privacy-consent-banner .pc-btn-manage:hover,
#privacy-consent-banner .pc-btn-manage:focus {
  font-weight: bold;
}

#privacy-consent-banner .pc-manage-panel {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#privacy-consent-banner .pc-manage-panel[hidden] {
  display: none;
}

#privacy-consent-banner .pc-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 300;
  color: var(--pc-text);
}

#privacy-consent-banner .pc-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--pc-link);
  cursor: pointer;
  flex-shrink: 0;
}

#privacy-consent-banner .pc-toggle span {
  line-height: 20px;
}

#privacy-consent-banner .pc-toggle input[type="checkbox"]:disabled {
  cursor: default;
  opacity: 0.7;
}

#privacy-consent-banner .pc-btn-save {
  align-self: flex-end;
}

@media (max-width: 480px) {
  #privacy-consent-banner {
    width: calc(100% - 24px);
  }
  #privacy-consent-banner .pc-content {
    padding: 26px 18px 16px;
  }
}