/* A card in the bottom LEFT corner, not a full-width bar.
   Measured on a live client site 2026-09-04: the chat widget renders a 301x198px card
   20px from the right and 20px from the bottom, at z-index 99999999, and it keeps those
   same pixel dimensions on a 390px phone. A full-width bar along the bottom therefore runs
   straight underneath it. Sitting on the left with a bounded width clears it on any
   viewport wide enough to hold both, and the mobile rule below handles the rest. */
[data-consent-banner] {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 2147483000;
  width: calc(100% - 2.5rem); max-width: 26rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  padding: 1.15rem 1.25rem; background: #0b0b0b; color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.35); border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  font: 400 0.95rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
[data-consent-banner] p { margin: 0; max-width: 62ch; }
/* Underline is not decoration here. Client sites commonly reset `a { text-decoration: none }`,
   which left this link distinguished from the body text by 8% of white alone. Colour alone is
   not a sufficient distinction, so state the underline explicitly rather than inherit it. */
[data-consent-banner] a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
/* Both buttons share the row equally. Equal width is part of equal prominence: a wider
   "accept" is the same dark pattern as a brighter one. */
[data-consent-banner] div { display: flex; gap: 0.6rem; }
[data-consent-banner] div button { flex: 1 1 0; }

/* Equal prominence: accept and reject share one rule, nothing overrides accept afterwards.
   The ICO treats a visually louder "accept" as a dark pattern, so both buttons carry the same
   background, border, padding, font size and font weight. Only the words differ. */
[data-consent-banner] button {
  cursor: pointer; border: 1px solid rgba(255,255,255,0.35); border-radius: 4px;
  padding: 0.6rem 1.1rem; font: inherit; background: transparent; color: rgba(255,255,255,0.92);
}
[data-consent-banner] button:hover,
[data-consent-banner] button:focus-visible {
  border-color: rgba(255,255,255,0.6);
}
[data-consent-banner] button:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}
/* Narrow screens: the chat widget's card is 301x198px even on a 390px phone, so there is no
   room beside it. Sit the banner clear ABOVE it instead: its 20px bottom margin, plus its
   198px height, plus a 12px gap. Still bottom-anchored, never overlapping. */
@media (max-width: 620px) {
  [data-consent-banner] {
    left: 0.75rem; right: 0.75rem; bottom: 14.4rem;
    width: auto; max-width: none;
  }
}

/* Click-to-load embed placeholder (Google Maps and similar). Deliberate, not broken: a
   bordered panel with a short explanation and a button, styled to match the banner. */
[data-embed-placeholder] {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 0.75rem; min-height: 220px; padding: 1.5rem;
  background: #0b0b0b; color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.35); border-radius: 4px;
  font: 400 0.95rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
[data-embed-placeholder] p { margin: 0; max-width: 62ch; }
[data-embed-placeholder] button {
  cursor: pointer; border: 1px solid rgba(255,255,255,0.35); border-radius: 4px;
  padding: 0.6rem 1.1rem; font: inherit; font-weight: inherit; background: transparent;
  color: rgba(255,255,255,0.92);
}
[data-embed-placeholder] button:hover,
[data-embed-placeholder] button:focus-visible {
  border-color: rgba(255,255,255,0.6);
}
[data-embed-placeholder] button:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}