/* Cognizio cookie consent banner.
   Standalone by design: some pages (the legacy transform.html Wix exports and
   cognizioconsulting.com/message_compliance.html) do not load site.css, and
   loading it there would restyle the whole page. Custom properties therefore
   carry fallbacks so this file works with or without site.css.
   Also provides .button styling, which otherwise only exists in site.css. */

:root { color-scheme: light; }

/* Minimal .button so the controls are usable on pages without site.css.
   site.css defines these too; identical values, so load order does not matter. */
.cookie-banner .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.68rem 1rem; border: 1px solid var(--line, #d9e1e8); border-radius: 6px; background: var(--white, #ffffff); color: var(--ink, #17212b); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.cookie-banner .button.primary { background: var(--blue, #1767b1); border-color: var(--blue, #1767b1); color: var(--white, #ffffff); }

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  display: flex;
  justify-content: flex-start;
}
.cookie-banner-inner {
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  border: 1px solid var(--line, #d9e1e8);
  border-radius: 8px;
  background: var(--white, #ffffff);
  padding: 1.4rem;
  box-shadow: 0 18px 55px rgba(23,33,43,0.09);
  animation: cookie-rise 180ms ease-out;
}
@keyframes cookie-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.cookie-banner h2 { margin: 0 0 0.6rem; font-size: 1.35rem; line-height: 1.2; }
.cookie-banner h2:focus { outline: none; }
.cookie-banner p { margin: 0 0 0.9rem; color: var(--muted, #566272); font-size: 0.95rem; }
.cookie-details-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0 0 0.6rem;
  border: 0;
  background: none;
  color: var(--blue, #1767b1);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-details { padding: 0 0 0.4rem; }
.cookie-categories { display: grid; gap: 0.7rem; margin: 0 0 0.8rem; }
.cookie-category {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line, #d9e1e8);
  border-radius: 6px;
  background: var(--paper, #f7f9fb);
  font-weight: 400;
}
.cookie-category input {
  width: auto;
  min-height: 0;
  margin: 0.25rem 0 0;
  accent-color: var(--blue, #1767b1);
}
.cookie-category input:disabled { cursor: not-allowed; }
.cookie-category strong { display: block; font-weight: 800; }
.cookie-category-note { display: block; color: var(--muted, #566272); font-size: 0.88rem; }
.cookie-details-link { margin: 0 0 0.6rem; font-size: 0.88rem; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cookie-actions .button { flex: 1 1 auto; }
/* .button sets display:inline-flex, which outranks the UA [hidden] rule, so hidden
   buttons would still render. Re-hide them with a more specific selector. */
.cookie-actions .button[hidden], .cookie-details-toggle[hidden] { display: none; }
.cookie-banner :focus-visible { outline: 2px solid var(--blue, #1767b1); outline-offset: 2px; }

@media (max-width: 900px) {
  .cookie-banner { padding: 0; }
  .cookie-banner-inner { max-width: none; border-radius: 8px 8px 0 0; border-bottom: 0; }
  .cookie-actions .button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner-inner { animation: none; }
}
