/* Theme default - cookie.css: cookie banner and its settings. */
.cookie {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  display: flex;
  justify-content: center;
}
.cookie[hidden] { display: none; }
.cookie-box {
  width: min(64rem, 100%);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-l);
  background:
    radial-gradient(30rem 12rem at 92% 130%, rgb(var(--steel-rgb) / 0.22), transparent 70%),
    rgb(var(--surface-rgb) / 0.94);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.cookie-text { flex: 1 1 22rem; }
.cookie-title { margin: 0 0 0.25rem; font-weight: 700; font-size: 1rem; }
.cookie-body { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
.cookie-body a { color: var(--cyan); }
.cookie-actions { display: flex; gap: 0.6rem; flex: 0 0 auto; margin-left: auto; }
.cookie-actions .btn { padding: 0.6rem 1.15rem; font-size: 0.9rem; border-radius: 999px; }
.cookie-actions { flex-wrap: wrap; }
.cookie-prefs {
  flex: 1 1 100%;
  display: grid;
  gap: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.cookie-prefs[hidden] { display: none; }
.cookie-opt { display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer; }
.cookie-opt input { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; accent-color: var(--cyan); }
.cookie-opt strong { display: block; font-size: 0.92rem; }
.cookie-opt small { display: block; font-size: 0.84rem; line-height: 1.5; color: var(--muted); }
.cookie-save { margin-left: 0; }
.foot-cookie { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot-cookie:hover { color: var(--cyan); }
.btn-ghost { border: 1px solid var(--line-strong); background: none; color: var(--muted); cursor: pointer; }
.btn-ghost:hover { color: var(--text); border-color: var(--cyan); }
.btn-primary {
  border: 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--bg-2);
  background: linear-gradient(100deg, var(--text), var(--primary) 55%, var(--primary-tint));
}
.btn-primary:hover { filter: brightness(1.08); }