/* ════════════════════════════════════════════════════════════════════════════
   COPY of packages/ui/src/consent.css — do not edit this file directly.
   ══════════════════════════════════════════════════════════════════════════
   The React apps and this theme run in different worlds: WordPress cannot
   import from a pnpm workspace, so the one stylesheet has to exist twice. It
   is copied verbatim rather than rewritten against this theme's own tokens,
   because a rewrite drifts silently while a copy can be checked. From the
   repository root, this should print nothing:

     diff packages/ui/src/consent.css <(tail -n +19 infrastructure/docker/wordpress-theme/edunauts/assets/css/cookie-consent.css)

   (+19 skips this header — adjust the number if it ever grows.)

   The copy needs no mapping onto --navy/--gold: every variable it reads falls
   back to the brand value when the host app defines nothing, which is exactly
   the situation here.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   @edunauts/ui — cookie consent styles
   ═══════════════════════════════════════════════════════════════════════════
   A separate file from components.css, and deliberately self-contained.

   Only enid-web imports the full design system; eno-web and eno-admin have
   their own Tailwind themes and would inherit a hundred redefined custom
   properties along with it. The banner has to look like Edunauts in all three
   (and the WordPress theme, which imports this file's rules in its own
   stylesheet), so everything it needs is declared here as `--euc-*` variables
   that *prefer* the host's design tokens and fall back to the brand values
   when there are none. Nothing here depends on .eui-btn or tokens.css.

   Import it from an app's globals.css:  @import '@edunauts/ui/src/consent.css';
   enid-web gets it via ./styles.css, which imports this file last.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --euc-paper: var(--eds-paper, #ffffff);
  --euc-sunken: var(--eds-sunken, #f1f4f8);
  --euc-line: var(--border-color, #e3e8ef);
  --euc-heading: var(--text-heading, #0b2545);
  --euc-text: var(--text-primary, #1e2a3a);
  --euc-muted-text: var(--text-secondary, #4a5a6d);
  --euc-faint-text: var(--text-muted, #74839a);
  --euc-accent: var(--accent-primary, #001f3f);
  --euc-accent-hover: var(--accent-secondary, #1d2f5d);
  --euc-on-accent: #ffffff;
  --euc-gold: var(--color-brand-gold, #f2c94c);
  --euc-info-bg: var(--status-info-bg, #e9f2fc);
  --euc-info-line: var(--status-info-line, #bcd7f2);
  --euc-info-text: var(--status-info-text, #14508c);
  --euc-radius: var(--radius-md, 8px);
  --euc-radius-lg: var(--radius-lg, 10px);
  --euc-shadow: var(
    --shadow-lg,
    0 2px 4px rgba(11, 37, 69, 0.06),
    0 12px 28px rgba(11, 37, 69, 0.1)
  );
  --euc-mono: var(
    --font-mono,
    ui-monospace,
    'SF Mono',
    'Cascadia Mono',
    Menlo,
    Consolas,
    monospace
  );
  --euc-speed: var(--transition-fast, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
}

/* Both selectors on purpose: enid-web toggles `html.dark`, the shared tokens
   file uses `[data-theme='dark']`, and the WordPress theme uses neither. Where
   the host defines its own dark tokens these `var()`s pick them up; where it
   does not, the literals keep the banner legible instead of leaving white
   panels glowing on a dark page. */
html.dark,
[data-theme='dark'] {
  --euc-paper: var(--eds-paper, #121a29);
  --euc-sunken: var(--eds-sunken, #1a2434);
  --euc-line: var(--border-color, #26324a);
  --euc-heading: var(--text-heading, #eaf1fb);
  --euc-text: var(--text-primary, #dbe5f2);
  --euc-muted-text: var(--text-secondary, #a8b8cd);
  --euc-faint-text: var(--text-muted, #7d8ea6);
  --euc-accent: var(--accent-primary, #7fb2ff);
  --euc-accent-hover: var(--accent-secondary, #a9c8ff);
  --euc-on-accent: #07101f;
  --euc-info-bg: var(--status-info-bg, rgba(20, 80, 140, 0.2));
  --euc-info-line: var(--status-info-line, rgba(143, 194, 255, 0.3));
  --euc-info-text: var(--status-info-text, #8fc2ff);
  --euc-shadow: var(--shadow-lg, 0 4px 10px rgba(0, 0, 0, 0.5), 0 18px 40px rgba(0, 0, 0, 0.42));
}

/* ── The banner ──────────────────────────────────────────────────────────
   A full-width bar across the bottom of the window on the brand navy
   (#001F3F), flat: no gradient and no rule along the top edge. The gold
   belongs to the "Cho phép" button alone, so the one warm thing on the bar
   is the thing to press.

   Contrast follows the house rule both ways round: navy surface takes white
   text, gold button takes navy text.

   It slides up from the bottom edge when it appears and back down when
   answered (.is-leaving, set by the script, which removes the bar once the
   slide has finished).

   While the bar is up, `<html>` carries `data-consent-banner` and
   `--eui-consent-banner-height`, so a page with its own fixed furniture can
   lift it clear rather than be covered.
   ─────────────────────────────────────────────────────────────────────── */
.eui-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Under the modal layer (9998/9999) so a dialog opened from the banner
     covers it rather than fighting it, above ordinary page furniture. */
  z-index: 9997;
  background-color: #001f3f;
  box-shadow: 0 -8px 28px rgba(0, 12, 28, 0.28);
  font-family: var(--font-sans, 'SVN-Gilroy', -apple-system, 'Segoe UI', sans-serif);
  animation: eui-consent-rise 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
/* On the way out: accelerating, so it visibly starts moving at once and
   picks up speed as it leaves — a steeper ease-in sat still for most of its
   time and then vanished, which reads as a cut rather than a slide.
   `forwards` keeps it gone for the frame between the slide ending and the
   script taking the node out. */
.eui-consent-banner.is-leaving {
  animation: eui-consent-drop 0.4s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}
.eui-consent-banner-inner {
  max-width: var(--euc-page-max, 1320px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 24px;
}
/* No plate behind it. A badge made the mark look like a status chip; on the
   navy the glyph carries itself, and gold is the right colour for the one
   element that is there to catch the eye. */
.eui-consent-mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f2c94c;
}
.eui-consent-copy {
  flex: 1;
  /* Kept off the gold corner at every width, so white text always has navy
     under it. */
  max-width: 820px;
  min-width: 0;
}
.eui-consent-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.eui-consent-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(226, 235, 247, 0.86);
}
.eui-consent-banner .eui-consent-link,
.eui-consent-banner .eui-consent-linkbtn {
  color: #f2c94c;
  font-size: 12.5px;
}
.eui-consent-banner .eui-consent-link:hover,
.eui-consent-banner .eui-consent-linkbtn:hover {
  color: #f7dc8a;
}
.eui-consent-banner .eui-consent-link:focus-visible,
.eui-consent-banner .eui-consent-linkbtn:focus-visible {
  outline-color: #f2c94c;
}
.eui-consent-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────────────────────────────
   Its own set rather than .eui-btn, so the banner looks the same in the two
   apps that never adopted the component library.

   Two buttons only, and they are the two answers: refuse and allow. Equal
   height, equal minimum width, equal weight, side by side. Making refusal the
   harder click is the most-cited dark pattern in enforcement decisions, and
   the shape of that rule belongs in the stylesheet, where it cannot quietly
   drift. Anything that is not an answer — customising by category, reading
   the policy — is a text link in the copy, not a third button muddying the
   row.
   ─────────────────────────────────────────────────────────────────────── */
.eui-consent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 22px;
  min-width: 132px;
  border-radius: var(--euc-radius);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--euc-speed),
    border-color var(--euc-speed),
    color var(--euc-speed);
}
.eui-consent-btn:focus-visible {
  outline: 2px solid var(--euc-accent);
  outline-offset: 2px;
}
.eui-consent-banner .eui-consent-btn:focus-visible {
  outline-color: #f2c94c;
}
/* The base pair is for a light surface — the settings dialog. The bar
   overrides both below, because the same button on a navy gradient needs the
   opposite treatment and inheriting one set into the other is what made the
   dialog's buttons read as a muddy slate on white. */
.eui-consent-btn-primary {
  background-color: var(--euc-accent);
  border-color: var(--euc-accent);
  color: var(--euc-on-accent);
}
.eui-consent-btn-primary:hover {
  background-color: var(--euc-accent-hover);
  border-color: var(--euc-accent-hover);
}
.eui-consent-btn-outline {
  background-color: transparent;
  border-color: var(--euc-line);
  color: var(--euc-text);
}
.eui-consent-btn-outline:hover {
  border-color: var(--euc-accent);
  color: var(--euc-accent);
}

/* On the bar: gold fill with navy text — the house contrast rule, and the
   second brand colour doing real work rather than decorating an edge. */
.eui-consent-banner .eui-consent-btn-primary {
  background-color: #f2c94c;
  border-color: #f2c94c;
  color: #001f3f;
}
.eui-consent-banner .eui-consent-btn-primary:hover {
  background-color: #f7dc8a;
  border-color: #f7dc8a;
}
/* Same silhouette, white on navy. The fill is a translucent navy rather than
   nothing: this button sits where the gradient has already warmed towards
   gold, and white on that would be the one low-contrast element on the bar.
   The tint travels with the button wherever the row wraps to. */
.eui-consent-banner .eui-consent-btn-outline {
  background-color: rgba(0, 20, 43, 0.62);
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}
.eui-consent-banner .eui-consent-btn-outline:hover {
  border-color: #ffffff;
  background-color: rgba(0, 20, 43, 0.82);
}

.eui-consent-link {
  color: var(--euc-accent);
  font-weight: 600;
  text-decoration: none;
}
.eui-consent-link:hover {
  /* Colour only, never an underline — house rule across every Edunauts
     surface, and it also keeps the line from reflowing on hover. */
  color: var(--euc-accent-hover);
  text-decoration: none;
}
.eui-consent-linkbtn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--euc-accent);
  cursor: pointer;
}
.eui-consent-linkbtn:hover {
  color: var(--euc-accent-hover);
}
.eui-consent-link:focus-visible,
.eui-consent-linkbtn:focus-visible {
  outline: 2px solid var(--euc-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Below a small laptop the copy and the buttons stop sharing a line
   comfortably. The pair drops below the text and stays together, right
   aligned — wrapping them one at a time is what produced the staggered row
   in the first version. */
@media (max-width: 960px) {
  .eui-consent-banner-inner {
    flex-wrap: wrap;
    gap: 14px 18px;
  }
  .eui-consent-copy {
    max-width: none;
  }
  .eui-consent-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 560px) {
  .eui-consent-banner-inner {
    padding: 16px;
    gap: 12px;
  }
  /* Two equal halves rather than a stack: they are a pair of answers, and a
     phone has room for both at this width. */
  .eui-consent-actions .eui-consent-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 12px;
  }
  .eui-consent-mark {
    display: none;
  }
}

@keyframes eui-consent-rise {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes eui-consent-drop {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* ── The settings dialog ─────────────────────────────────────────────── */
.eui-consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background-color: rgba(3, 12, 26, 0.55);
  backdrop-filter: blur(3px);
}
.eui-consent-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: min(680px, 92vw);
  max-height: min(84vh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--euc-paper);
  border: 1px solid var(--euc-line);
  border-radius: var(--euc-radius-lg);
  box-shadow: var(--euc-shadow);
  font-family: var(--font-sans, 'SVN-Gilroy', -apple-system, 'Segoe UI', sans-serif);
}
.eui-consent-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--euc-line);
  flex-shrink: 0;
}
.eui-consent-dialog-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--euc-heading);
}
.eui-consent-dialog-close {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--euc-radius);
  background: none;
  color: var(--euc-faint-text);
  cursor: pointer;
}
.eui-consent-dialog-close:hover {
  background-color: var(--euc-sunken);
  color: var(--euc-text);
}
.eui-consent-dialog-close:focus-visible {
  outline: 2px solid var(--euc-accent);
  outline-offset: 2px;
}
.eui-consent-dialog-body {
  padding: 18px;
  overflow-y: auto;
}
.eui-consent-dialog-intro {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--euc-muted-text);
}
.eui-consent-signal {
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--euc-info-text);
  background-color: var(--euc-info-bg);
  border: 1px solid var(--euc-info-line);
  border-radius: var(--euc-radius);
}
.eui-consent-groups {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eui-consent-group {
  border: 1px solid var(--euc-line);
  border-radius: var(--euc-radius);
  padding: 12px 14px;
}
.eui-consent-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.eui-consent-group-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--euc-text);
  cursor: pointer;
}
.eui-consent-group-desc {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--euc-muted-text);
}
.eui-consent-locked {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--euc-faint-text);
  background-color: var(--euc-sunken);
  border-radius: 999px;
  padding: 4px 10px;
}

.eui-consent-details {
  margin-top: 10px;
}
.eui-consent-details > summary {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--euc-accent);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.eui-consent-details > summary::-webkit-details-marker {
  display: none;
}
.eui-consent-details > summary::before {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--euc-speed);
}
.eui-consent-details[open] > summary::before {
  transform: rotate(45deg);
}
.eui-consent-details > summary:focus-visible {
  outline: 2px solid var(--euc-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.eui-consent-empty {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--euc-faint-text);
}
.eui-consent-table-wrap {
  margin-top: 8px;
  overflow-x: auto;
}
.eui-consent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.eui-consent-table th,
.eui-consent-table td {
  text-align: left;
  vertical-align: top;
  padding: 7px 10px;
  border-bottom: 1px solid var(--euc-line);
  color: var(--euc-muted-text);
  font-weight: 400;
}
.eui-consent-table thead th {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--euc-faint-text);
  background-color: var(--euc-sunken);
  white-space: nowrap;
}
.eui-consent-table tbody th code {
  font-family: var(--euc-mono);
  font-size: 11px;
  color: var(--euc-text);
  word-break: break-all;
}
.eui-consent-provider {
  display: block;
  font-size: 10px;
  color: var(--euc-faint-text);
  margin-top: 2px;
}
.eui-consent-meta {
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--euc-faint-text);
}
.eui-consent-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid var(--euc-line);
  background-color: var(--euc-sunken);
  flex-shrink: 0;
}
.eui-consent-dialog-buttons {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
  .eui-consent-banner,
  .eui-consent-banner.is-leaving {
    animation: none;
  }
}