/* Cookie consent theme — maps vanilla-cookieconsent v3 CSS variables to the
   Loops LP design tokens so the banner blends with the rest of the page
   (Inter font, blue-600 primary, rounded-full CTAs matching the hero pill,
   gray-50 category cards). Loaded from every page that includes the consent
   banner; lives next to lp-tracking.js so both stay in sync. */
#cc-main {
  --cc-font-family: "Inter", system-ui, sans-serif;
  --cc-bg: #ffffff;
  --cc-primary-color: #111827;          /* gray-900 */
  --cc-secondary-color: #6b7280;        /* gray-500 */
  --cc-link-color: #2563eb;             /* blue-600 */
  --cc-btn-primary-bg: #2563eb;
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-border-color: #2563eb;
  --cc-btn-primary-hover-bg: #1d4ed8;   /* blue-700 */
  --cc-btn-primary-hover-color: #ffffff;
  --cc-btn-primary-hover-border-color: #1d4ed8;
  --cc-btn-secondary-bg: #f3f4f6;       /* gray-100 */
  --cc-btn-secondary-color: #111827;
  --cc-btn-secondary-border-color: #e5e7eb;
  --cc-btn-secondary-hover-bg: #e5e7eb; /* gray-200 */
  --cc-btn-secondary-hover-color: #111827;
  --cc-btn-secondary-hover-border-color: #d1d5db;
  /* Pill buttons to match the hero LP CTAs (Try it now / Try it for free are
     rounded-full). v3 unfortunately uses --cc-btn-border-radius on a handful
     of non-button selectors too (.pm__section--toggle, .pm__section-desc-wrapper,
     .pm__section-title) which would turn the preferences modal section blocks
     into ovals — we explicitly reset those below. */
  --cc-btn-border-radius: 9999px;
  --cc-modal-border-radius: 16px;
  --cc-modal-transition-duration: 0.25s;
  --cc-toggle-on-bg: #2563eb;
  --cc-toggle-on-knob-bg: #ffffff;
  --cc-toggle-off-bg: #d1d5db;          /* gray-300 */
  --cc-toggle-off-knob-bg: #ffffff;
  --cc-toggle-readonly-bg: #e5e7eb;
  --cc-toggle-readonly-knob-bg: #ffffff;
  --cc-cookie-category-block-bg: #f9fafb;       /* gray-50 */
  --cc-cookie-category-block-border: #e5e7eb;
  --cc-cookie-category-block-hover-bg: #f3f4f6;
  --cc-cookie-category-block-hover-border: #d1d5db;
  --cc-cookie-category-expanded-block-bg: #ffffff;
  --cc-cookie-category-expanded-block-hover-bg: #f9fafb;
  --cc-section-category-border: #e5e7eb;
  --cc-separator-border-color: #e5e7eb;
  --cc-footer-bg: #f9fafb;
  --cc-footer-color: #6b7280;
  --cc-footer-border-color: #e5e7eb;
  --cc-overlay-bg: rgba(17, 24, 39, 0.4);
  --cc-z-index: 2147483646;
}

/* Softer shadow than the v3 default to match the LP's restrained aesthetic. */
#cc-main .cm,
#cc-main .pm {
  box-shadow:
    0 10px 30px -10px rgba(17, 24, 39, 0.18),
    0 2px 6px -2px rgba(17, 24, 39, 0.06);
}

/* Counter the pill leak: v3 applies var(--cc-btn-border-radius) to these
   non-button containers, which makes the preferences modal section blocks
   render as ovals when buttons are pills. Force a moderate radius back.

   Specificity note: v3's selector for the description wrapper is
   `#cc-main .pm__section--toggle .pm__section-desc-wrapper` (2 classes), so
   our override must include the same chain to outrank it. The other two
   selectors v3 ships at 1-class specificity, where ours wins by load order. */
#cc-main .pm__section--toggle,
#cc-main .pm__section-title {
  border-radius: 12px;
}
#cc-main .pm__section--toggle .pm__section-desc-wrapper {
  /* Bottom corners 12px to match the parent toggle; top corners square so
     the wrapper fuses visually with the title block above. */
  border-radius: 0 0 12px 12px;
}

/* Non-toggleable sections (intro "How we use cookies" and outro "Questions?")
   ship with a 1px border + the pill radius leak, which makes them look like
   stadium-shaped cards floating inside the modal. Strip the border, neutralize
   the radius, and pull the padding back to side-flush — they become plain
   informational paragraphs aligned with the modal title. */
#cc-main .pm__section:not(.pm__section--toggle) {
  border: none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}