/* consent-kit 2.1.0 — the banner's style.
 *
 * Deliberately neutral: the colours come from CSS variables, so every site tunes it to its own
 * appearance without touching this file. On a site copied pixel by pixel, a banner that clashes is
 * more noticeable than one that is missing.
 *
 * To set per site:
 *   :root { --ck-primary: #29a9e0; --ck-primary-text: #fff; }
 *
 * Sizes in px and not in rem, on purpose: rem is measured against the host site's font, and there
 * are widespread themes (the whole Casper/Ghost family) that set `html { font-size: 62.5% }` so
 * they can write 1.5rem instead of 15px. On those sites every rem would be 10px and the panel would
 * shrink by 37.5% without anyone asking. A banner must be the same size everywhere: it is not the
 * site's content, it is an interface resting on top of it.
 *
 * The media queries stay in `em` because there the unit is measured against the browser's default
 * font and not the site's root: they were already immune, and they follow anyone who has enlarged
 * their type.
 */

:root {
  --ck-backdrop: rgba(15, 23, 42, .55);
  --ck-surface: #fff;
  --ck-text: #1f2937;
  --ck-text-muted: #4b5563;
  --ck-border: #e5e7eb;
  /* The panel's own outline, distinct from --ck-border, which separates the categories inside it.
     A banner sits on a page whose colour it does not know, so the default has to hold against a
     white page (4.8:1) and a near-black one (3.7:1), clearing the 3:1 that WCAG 1.4.11 asks for the
     boundary of a user interface component. Override it per site if the page is neither. */
  --ck-panel-border: #6b7280;
  --ck-primary: #2563eb;
  --ck-primary-text: #fff;
  --ck-radius: 10px;
}

.ck-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* above third-party widgets, which sit high of their own accord */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: var(--ck-backdrop);
}

@media (min-width: 40em) {
  .ck-pos-modal { align-items: center; }
}

/* The non-modal variants neither dim nor swallow clicks: `inset` is released where it matters and
   the backdrop turns transparent, so the page stays readable and usable. */
.ck-pos-bottom,
.ck-pos-top,
.ck-pos-corner {
  background: none;
  pointer-events: none; /* the container lets clicks through… */
}

.ck-pos-bottom .ck-box,
.ck-pos-top .ck-box,
.ck-pos-corner .ck-box {
  pointer-events: auto; /* …the panel does not, or it would not be clickable */
  /* The outline is what tells the visitor where the page ends and the banner begins. The shadow
     below cannot do it: on a dark page it is black on black, and on a light one it is too soft to
     read on a phone. Only the non-modal variants need it — the modal one dims the page instead. */
  border: 1px solid var(--ck-panel-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
}

.ck-pos-bottom { inset: auto 0 0 0; align-items: flex-end; }
.ck-pos-top { inset: 0 0 auto 0; align-items: flex-start; }

/* On an iPhone the bottom of the panel ends up under Safari's floating toolbar. env() is 0 where
   there is no inset, so nothing moves on a desktop. */
.ck-pos-bottom .ck-box { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

.ck-pos-bottom .ck-box,
.ck-pos-top .ck-box { max-width: 832px; }

.ck-pos-corner { inset: auto 0 0 auto; justify-content: flex-end; align-items: flex-end; }
.ck-pos-corner .ck-box { max-width: 384px; }

/* Below 40em the corner makes no sense: the screen is narrow already, and the panel becomes a bar. */
@media (max-width: 40em) {
  .ck-pos-corner { inset: auto 0 0 0; justify-content: center; }
  .ck-pos-corner .ck-box { max-width: none; }

  /* Edge to edge, square corners. A floating card with faint edges reads as a block of text inside
     the article; a bar that touches both sides reads as chrome, which is what it is. */
  .ck-pos-bottom,
  .ck-pos-top,
  .ck-pos-corner { padding: 0; }

  .ck-pos-bottom .ck-box,
  .ck-pos-top .ck-box,
  .ck-pos-corner .ck-box { border-radius: 0; border-left: 0; border-right: 0; }

  /* Only the edge facing the page carries the line: the opposite one is off-screen. */
  .ck-pos-bottom .ck-box,
  .ck-pos-corner .ck-box { border-bottom: 0; }
  .ck-pos-top .ck-box { border-top: 0; }
}

.ck-box {
  /* The outline must not add to the width, and the host page cannot be assumed to set this. */
  box-sizing: border-box;
  width: 100%;
  max-width: 544px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 24px;
  border-radius: var(--ck-radius);
  background: var(--ck-surface);
  color: var(--ck-text);
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

.ck-box h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
.ck-text { margin: 0 0 12px; color: var(--ck-text-muted); }
.ck-link { display: inline-block; margin-bottom: 12px; color: var(--ck-primary); }

.ck-details { margin: 8px 0 16px; border-top: 1px solid var(--ck-border); }
.ck-category { display: flex; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--ck-border); }
.ck-category input { margin-top: 4px; width: 17px; height: 17px; flex: none; }
.ck-category label { display: block; cursor: pointer; }
.ck-category input:disabled + label { cursor: default; }
.ck-category label span { display: block; margin-top: 2px; color: var(--ck-text-muted); font-size: .9em; }
.ck-category label em { color: var(--ck-text-muted); font-size: .85em; font-style: normal; }

.ck-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.ck-btn {
  flex: 1 1 auto;
  min-width: 128px;
  min-height: 44px; /* a comfortable target on a phone, where the banner is read crouching */
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: calc(var(--ck-radius) - 4px);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Accept and Reject share one style: if refusing cost more effort than accepting, the consent
   would not be free, and it is the most frequent objection to home-made banners. */
.ck-btn-primary { background: var(--ck-primary); color: var(--ck-primary-text); }
.ck-btn-primary:hover { filter: brightness(1.08); }
.ck-btn-tertiary { background: transparent; color: var(--ck-text); border-color: var(--ck-border); }
.ck-btn-tertiary:hover { background: #f9fafb; }
.ck-btn:focus-visible { outline: 3px solid var(--ck-primary); outline-offset: 2px; }

/* A placeholder in place of a blocked iframe: without one there would be a mute hole in the page
   and nobody would know a map had been there. */
.ck-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 192px;
  padding: 24px;
  border: 1px dashed var(--ck-border);
  border-radius: var(--ck-radius);
  background: #f9fafb;
  color: var(--ck-text-muted);
  text-align: center;
}

.ck-placeholder p { margin: 0; }
.ck-placeholder .ck-btn { flex: 0 0 auto; }

@media (prefers-color-scheme: dark) {
  :root {
    --ck-surface: #111827;
    --ck-text: #f3f4f6;
    --ck-text-muted: #9ca3af;
    --ck-border: #374151;
  }
  .ck-btn-tertiary:hover { background: #1f2937; }
  .ck-placeholder { background: #0b1220; }
}

@media (prefers-reduced-motion: no-preference) {
  .ck-box { animation: ck-enter .18s ease-out; }
  @keyframes ck-enter { from { transform: translateY(8px); opacity: 0; } }
}