/* ==========================================================================
   consent.css: look of the cookie consent banner (see consent.js)
   A white card fixed to the bottom of the screen, in Petna brand colours.
   Uses fixed colour values (not the page's variables) so it looks the same
   on every page that includes it.
   ========================================================================== */
.consent-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000;
  max-width: 720px; margin: 0 auto; padding: 18px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #ffffff; color: #1c2b3d; border: 1px solid #dbe3ee; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(24, 45, 71, 0.18);
  font: 15px/1.5 "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.consent-banner[hidden], .consent-actions[hidden] { display: none !important; }
/* "Close" button on the short notice shown when a choice can't be saved */
.consent-banner .consent-close { background: #244164; color: #ffffff; }
.consent-banner p { flex: 1 1 320px; margin: 0; }
.consent-banner a { color: #244164; font-weight: 600; }
.consent-actions { display: flex; gap: 10px; }
/* Both buttons equally prominent (same size and weight) on purpose. */
.consent-banner button {
  font: 600 15px "Mulish", system-ui, sans-serif; cursor: pointer;
  padding: 9px 18px; border-radius: 8px; border: 1px solid #244164;
}
.consent-banner button[data-choice="denied"] { background: #ffffff; color: #244164; }
.consent-banner button[data-choice="granted"] { background: #244164; color: #ffffff; }
.consent-banner button:focus-visible { outline: 3px solid #5c8cc4; outline-offset: 2px; }