/* Canna Health Amsterdam — Cookie Consent
   Uses the theme's --cha-* design tokens with hard fallbacks. */

.cha-cc-root {
  --ccc-text: var(--cha-text, #1c1c1e);
  --ccc-muted: var(--cha-text-soft, #6e6e73);
  --ccc-green: var(--cha-green, #0A8A43);
  --ccc-green-soft: var(--cha-green-soft, #eef8f1);
  --ccc-card: var(--cha-card, #ffffff);
  --ccc-line: var(--cha-line, rgba(0, 0, 0, 0.06));
  --ccc-line-soft: var(--cha-line-soft, #f0f0f5);
  --ccc-dark: #111111;
  --ccc-radius: var(--cha-radius-lg, 22px);
  --ccc-radius-xl: var(--cha-radius-xl, 28px);
  --ccc-shadow: var(--cha-shadow-lg, 0 18px 45px rgba(0, 0, 0, 0.12));
  font-family: Inter, -apple-system, BlinkMacSystemFont, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ccc-text);
  -webkit-font-smoothing: antialiased;
}
.cha-cc-root *, .cha-cc-root *::before, .cha-cc-root *::after { box-sizing: border-box; }
.cha-cc-root button { font: inherit; cursor: pointer; }
.cha-cc-root a { color: var(--ccc-green); text-decoration: underline; text-underline-offset: 2px; }
.cha-cc-root a:hover { opacity: .8; }

/* ---------- First layer: banner card ---------- */
.cha-cc-banner {
  position: fixed;
  z-index: 999999;
  bottom: 20px;
  width: min(420px, calc(100vw - 32px));
  background: var(--ccc-card);
  border: 1px solid var(--ccc-line);
  border-radius: var(--ccc-radius);
  box-shadow: var(--ccc-shadow);
  padding: 22px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.cha-cc-banner.cha-cc-show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cha-cc-pos-left .cha-cc-banner { left: 20px; }
.cha-cc-pos-right .cha-cc-banner { right: 20px; }

.cha-cc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cha-cc-leaf {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ccc-green-soft);
  border-radius: 999px;
}
.cha-cc-leaf svg { width: 18px; height: 18px; display: block; }
.cha-cc-title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.cha-cc-text { margin: 0 0 6px; color: #4a4a4e; font-size: 13.5px; }
.cha-cc-links { font-size: 12.5px; color: var(--ccc-muted); margin: 0 0 16px; }
.cha-cc-links a { font-weight: 600; }

.cha-cc-btnrow { display: flex; gap: 10px; }
.cha-cc-btn {
  flex: 1 1 0;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.01em;
  border: 1.5px solid var(--ccc-dark);
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
  white-space: nowrap;
}
.cha-cc-btn:hover { transform: translateY(-1px); }
.cha-cc-btn:active { transform: translateY(0); }
.cha-cc-btn-dark { background: var(--ccc-dark); color: #fff; }
.cha-cc-btn-ghost { background: var(--ccc-card); color: var(--ccc-dark); }
.cha-cc-prefs-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: none;
  border: 0;
  color: var(--ccc-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cha-cc-prefs-link:hover { color: var(--ccc-text); }

/* ---------- Second layer: preferences modal ---------- */
.cha-cc-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  background: rgba(28, 28, 30, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity .25s ease;
}
.cha-cc-overlay.cha-cc-show { display: flex; }
.cha-cc-overlay.cha-cc-in { opacity: 1; }
.cha-cc-modal {
  width: min(580px, 100%);
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--ccc-card);
  border-radius: var(--ccc-radius-xl);
  box-shadow: var(--ccc-shadow);
  transform: translateY(10px) scale(.98);
  transition: transform .25s ease;
  overflow: hidden;
}
.cha-cc-overlay.cha-cc-in .cha-cc-modal { transform: translateY(0) scale(1); }

.cha-cc-modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 22px 24px 14px;
}
.cha-cc-modal-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin: 0; flex: 1; }
.cha-cc-close {
  width: 34px; height: 34px;
  border: 0; border-radius: 999px;
  background: var(--ccc-line-soft);
  color: var(--ccc-text);
  font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.cha-cc-close:hover { background: #e4e4ea; }
.cha-cc-modal-body { padding: 0 24px; overflow-y: auto; }
.cha-cc-modal-intro { font-size: 13px; color: var(--ccc-muted); margin: 0 0 14px; }

.cha-cc-cat {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--ccc-line-soft);
}
.cha-cc-cat-info { flex: 1; }
.cha-cc-cat-name { font-size: 14px; font-weight: 700; margin: 0 0 3px; }
.cha-cc-cat-desc { font-size: 12.5px; color: var(--ccc-muted); margin: 0; }
.cha-cc-always {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 700;
  color: var(--ccc-green);
  background: var(--ccc-green-soft);
  border-radius: 999px;
  padding: 5px 12px;
  margin-top: 2px;
}

/* iOS-style switch */
.cha-cc-switch {
  flex: 0 0 auto;
  position: relative;
  width: 46px; height: 28px;
  border: 0; border-radius: 999px;
  background: #d2d2d7;
  transition: background .2s ease;
  margin-top: 2px;
}
.cha-cc-switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  transition: transform .2s ease;
}
.cha-cc-switch[aria-checked="true"] { background: var(--ccc-green); }
.cha-cc-switch[aria-checked="true"]::after { transform: translateX(18px); }

.cha-cc-modal-foot { padding: 16px 24px 20px; border-top: 1px solid var(--ccc-line-soft); }
.cha-cc-modal-foot .cha-cc-btnrow { margin-bottom: 10px; }
.cha-cc-meta { font-size: 11.5px; color: var(--ccc-muted); margin: 0; text-align: center; }

/* ---------- Floating reopen button ---------- */
.cha-cc-float {
  position: fixed;
  z-index: 999998;
  bottom: 18px;
  width: 44px; height: 44px;
  border: 1px solid var(--ccc-line);
  border-radius: 999px;
  background: var(--ccc-card);
  box-shadow: var(--cha-shadow-md, 0 8px 30px rgba(0, 0, 0, 0.12));
  display: none;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
}
.cha-cc-float.cha-cc-show { display: flex; }
.cha-cc-float:hover { transform: scale(1.08); }
.cha-cc-float svg { width: 20px; height: 20px; }
.cha-cc-pos-left .cha-cc-float { left: 18px; }
.cha-cc-pos-right .cha-cc-float { right: 18px; }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .cha-cc-banner {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px;
    width: auto;
    padding: 18px;
  }
  .cha-cc-btnrow { flex-direction: column-reverse; }
  .cha-cc-modal-foot .cha-cc-btnrow { flex-direction: row; }
  .cha-cc-modal { max-height: 92vh; }
}

/* ---------- Accessibility ---------- */
.cha-cc-root :focus-visible {
  outline: 2px solid var(--ccc-green);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .cha-cc-banner, .cha-cc-overlay, .cha-cc-modal,
  .cha-cc-switch, .cha-cc-switch::after, .cha-cc-btn, .cha-cc-float { transition: none; }
}