/* Analytics consent prompt and the "Privacy choices" link button (behaviour: /assets/consent.js).
   src/build.mjs links this file on every public page. It has to sit on four different designs, so it is
   neutral on purpose: the page's own font (inherit), white card, navy text and buttons, nothing else.
   Every rule is scoped to ep- classes, and the prompt resets the page rules it could inherit (headings,
   paragraphs, buttons), so no design changes it and it changes no design. Light only, like every page. */

.ep-cp, .ep-cp *, .ep-cp *::before, .ep-cp *::after { box-sizing: border-box; }

.ep-cp {
  position: fixed; z-index: 2147483000; left: 20px; bottom: 20px;
  width: min(392px, calc(100vw - 40px)); margin: 0; padding: 0; border: 0;
  pointer-events: none; /* only the card takes clicks, so nothing is blocked while it slides away */
  color-scheme: light;
  font-family: inherit; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.5;
  letter-spacing: normal; text-transform: none; text-align: left; color: #0F1B33;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.ep-cp[hidden] { display: none !important; }

.ep-cp__card {
  position: relative; pointer-events: auto;
  margin: 0; padding: 16px 18px 18px;
  background: #FFFFFF; color: #0F1B33;
  border: 1px solid #D3DAE6; border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 24, 64, .06), 0 10px 32px rgba(0, 24, 64, .16);
}
.ep-cp--closable .ep-cp__title { padding-right: 32px; }

.ep-cp .ep-cp__title {
  margin: 0 0 6px; padding-top: 0; padding-bottom: 0; padding-left: 0; border: 0; background: none;
  font-family: inherit; font-size: 15px; font-style: normal; font-weight: 600; line-height: 1.35;
  letter-spacing: normal; text-transform: none; text-wrap: wrap; color: #003282;
}
/* The heading takes focus when "Privacy choices" opens the panel, so screen readers start there. It is not a
   control, so it shows no focus ring (the page's own :focus-visible rule would draw one). */
.ep-cp .ep-cp__title:focus, .ep-cp .ep-cp__title:focus-visible { outline: none; }

.ep-cp .ep-cp__state,
.ep-cp .ep-cp__text {
  margin: 0; padding: 0; max-width: none;
  font-family: inherit; font-size: 14px; font-style: normal; line-height: 1.5;
  letter-spacing: normal; text-transform: none; text-wrap: pretty;
}
.ep-cp .ep-cp__state { margin-bottom: 6px; font-weight: 600; color: #0F1B33; }
.ep-cp .ep-cp__text { font-weight: 400; color: #33405C; }
.ep-cp .ep-cp__text a {
  color: #003282; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 2px; white-space: nowrap; background: none;
}
.ep-cp .ep-cp__text a:hover { text-decoration-thickness: 2px; }
.ep-cp [hidden] { display: none !important; }

/* Accept and Decline: the same size, the same style, side by side. Neither is preselected. */
.ep-cp .ep-cp__actions { display: flex; gap: 10px; margin: 14px 0 0; padding: 0; }
.ep-cp .ep-cp__btn {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 0; min-width: 0; width: auto; min-height: 40px; margin: 0; padding: 8px 14px;
  font-family: inherit; font-size: 14px; font-style: normal; font-weight: 600; line-height: 1.2;
  letter-spacing: normal; text-transform: none; text-align: center; text-decoration: none;
  color: #FFFFFF; background: #003282; border: 1px solid #003282; border-radius: 4px; box-shadow: none;
  cursor: pointer; touch-action: manipulation;
}
.ep-cp .ep-cp__btn:hover { background: #00256A; border-color: #00256A; }
.ep-cp .ep-cp__btn:active { background: #001D52; border-color: #001D52; }

.ep-cp .ep-cp__close {
  -webkit-appearance: none; appearance: none;
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #33405C; background: none; border: 0; border-radius: 4px; box-shadow: none; cursor: pointer;
}
.ep-cp .ep-cp__close:hover { color: #003282; background: #EEF2F8; }
.ep-cp .ep-cp__close svg { display: block; width: 16px; height: 16px; }

.ep-cp .ep-cp__btn:focus-visible,
.ep-cp .ep-cp__close:focus-visible,
.ep-cp .ep-cp__text a:focus-visible { outline: 2px solid #003282; outline-offset: 2px; }

/* Slides out of the way while a form's submit button or the field being typed in is under it. */
.ep-cp--tucked .ep-cp__card { transform: translateY(calc(100% + 40px)); visibility: hidden; }

.ep-cp-spacer { display: block; width: 100%; margin: 0; padding: 0; border: 0; pointer-events: none; }

.ep-vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Wider screens: bottom right. The product pages and /privacy keep their calls to action, key figures and
   the contents list on the left of the first screen; the right holds illustrations, or text that scrolls.
   The root chooser has its footer links on the right, so it asks for data-ep-prompt="center" on <html>
   (src/templates/root.mjs): centred from 1024px, between the copyright line and those links, and bottom
   left below that. */
@media (min-width: 900px) {
  .ep-cp { left: auto; right: 20px; }
  [data-ep-prompt="center"] .ep-cp { left: 20px; right: auto; }
}
@media (min-width: 1024px) {
  [data-ep-prompt="center"] .ep-cp { left: calc(50% - 196px); }
}

/* Phones: across the bottom, with a little air on each side; larger touch targets. */
@media (max-width: 600px) {
  .ep-cp { left: 8px; right: 8px; bottom: 8px; width: auto; }
  .ep-cp__card { padding: 14px 14px 14px; }
  .ep-cp .ep-cp__btn { min-height: 44px; }
}

@media (prefers-reduced-motion: no-preference) {
  .ep-cp__card { animation: ep-cp-in .24s cubic-bezier(.23, 1, .32, 1); transition: transform .24s cubic-bezier(.23, 1, .32, 1), visibility 0s linear 0s; }
  .ep-cp--tucked .ep-cp__card { transition: transform .2s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .2s; }
  @keyframes ep-cp-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* "Privacy choices" in the footers: a button that looks like the links next to it. Each design sets its
   own size and colour for it next to its footer links (easyink.css, the root and v3 page rules in
   src/templates/root.mjs and src/templates/privacy-ui.mjs, site.css). */
.ep-linkbtn {
  -webkit-appearance: none; appearance: none; display: inline; margin: 0; padding: 0;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit;
  text-align: inherit; text-decoration: underline; background: none; border: 0; border-radius: 0;
  box-shadow: none; cursor: pointer;
}