/**
 * Copyright (c) Opendpp UAB.
 * SPDX-License-Identifier: LicenseRef-OpenDPP-Proprietary
 */
/*
 * First-party cookie-consent banner. The DOM is built by public/js/consent.js from the config block
 * src/views/consent.ts emits; this sheet is linked by the same helper, so it ships only on pages that
 * carry an optional script. Self-contained on purpose: every colour/radius/shadow reads the Direction-B
 * token when the marketing or passport stylesheet is present and falls back to the same value when it
 * is not (conformity / summary pages define none of them). No dark variant — neither host stylesheet
 * has one, so a dark card on a light page would read as broken.
 */

.oc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; padding: 0 1rem 1rem; pointer-events: none; }
.oc[hidden] { display: none; }
.oc-card {
  pointer-events: auto;
  max-width: 760px;
  margin: 0 auto;
  background: var(--white, #ffffff);
  color: var(--ink, #0f172a);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-md, 18px);
  box-shadow: var(--shadow-lg, 0 12px 24px rgba(15, 23, 42, 0.06), 0 24px 60px rgba(15, 23, 42, 0.10));
  padding: 1.1rem 1.25rem;
  font-size: 0.92rem;
  line-height: 1.5;
}
.oc-title { margin: 0 0 0.35rem; font-size: 1.02rem; font-weight: 700; }
.oc-title:focus { outline: none; }
.oc-body { margin: 0 0 0.85rem; color: var(--slate, #475569); }
.oc-body a { color: var(--blue, #3b82f6); }
.oc-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.oc-actions[hidden] { display: none; }
.oc-btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--slate-300, #cbd5e1);
  background: var(--white, #ffffff);
  color: var(--ink, #0f172a);
  cursor: pointer;
}
.oc-btn:hover { background: var(--slate-50, #f8fafc); }
/* Emerald-700, deliberately NOT the brand --emerald (#10b981): white on that is 2.6:1 and fails WCAG
 * AA, and the buttons a visitor must be able to read to accept or refuse are the worst place on the
 * site to fail it. A tenant's --accent-primary still wins on a branded page, the same contract every
 * other button there has. Hover LIGHTENS (the surface is already dark) and stays above 4.5:1. */
.oc-primary { background: var(--accent-primary, #047857); border-color: transparent; color: #ffffff; }
.oc-primary:hover { filter: brightness(1.08); background: var(--accent-primary, #047857); }
.oc-ghost { border-color: transparent; color: var(--slate, #475569); }
.oc-prefs { margin: 0.9rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--slate-200, #e2e8f0); }
.oc-prefs[hidden] { display: none; }
.oc-row { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0 0 0.7rem; cursor: pointer; }
.oc-row input { margin: 0.25rem 0 0; width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--accent-primary, var(--emerald, #10b981)); }
.oc-row input:disabled { cursor: not-allowed; }
.oc-row span { font-weight: 600; }
.oc-row small { display: block; color: var(--slate, #475569); font-size: 0.82rem; font-weight: 400; }
.oc-btn:focus-visible, .oc-row input:focus-visible, .oc-body a:focus-visible { outline: 3px solid var(--blue, #3b82f6); outline-offset: 2px; }

/* The footer "Cookie settings" re-open control (renderLegalLinks) is a <button> so it needs no inline
 * handler; reset it to read like its sibling links in both footers. */
button[data-consent-open] { font: inherit; background: none; border: 0; padding: 0; margin: 0; color: inherit; cursor: pointer; text-align: left; }
.foot-col button[data-consent-open] { display: block; color: var(--slate, #475569); font-size: 14.5px; margin-bottom: 11px; }
.foot-col button[data-consent-open]:hover { color: var(--emerald, #10b981); }
.pp-footer button[data-consent-open]:hover { text-decoration: underline; }
button[data-consent-open]:focus-visible { outline: 3px solid var(--blue, #3b82f6); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .oc-card { animation: oc-in 0.25s ease-out; }
  @keyframes oc-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (max-width: 520px) {
  .oc { padding: 0 0.5rem 0.5rem; }
  .oc-btn { flex: 1 1 auto; text-align: center; }
}
@media print { .oc { display: none !important; } }