/* ============================================================
   ZOCODOVER.COM — CONSENT BANNER + PREFERENCES MODAL
   Styles the markup built by content/Consent.js
   Uses the same design tokens (--brand, --sky, --navy, --ink-*,
   --radius-*, --shadow-*, --font-*) defined in the site's main
   styles.css, so that file must be loaded on the same page.
   ============================================================ */
.cc{
  position: fixed; left:0; right:0; bottom:0; z-index: 300;
  background: var(--navy-deep); color: var(--ink-100);
  border-top: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 -14px 40px rgba(7,28,51,0.35);
  transform: translateY(110%);
  transition: transform 380ms var(--ease);
  padding: 20px 0;
}
.cc[data-open="true"]{ transform: translateY(0); }
.cc__in{
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display:flex; flex-wrap:wrap; gap: 18px 28px; align-items:center; justify-content:space-between;
}
.cc-lang{ display:flex; gap:6px; margin-bottom: 8px; }
.cc-lang button{
  font-family: var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.04em;
  padding: 3px 9px; border-radius: var(--radius-pill); border:1px solid rgba(255,255,255,0.25);
  background: transparent; color: var(--ink-300); cursor:pointer;
}
.cc-lang button[aria-pressed="true"]{ background: rgba(255,255,255,0.14); color: var(--white); border-color: rgba(255,255,255,0.4); }
.cc__title{ font-family: var(--font-display); font-weight:700; font-size:1.05rem; color: var(--white); margin: 0 0 4px 0; }
.cc__text{ font-size:.9rem; color: var(--ink-300); max-width: 62ch; margin:0; }
.cc__text a{ color: var(--sky-light); font-weight:600; text-decoration: underline; text-underline-offset:2px; }
.cc__acts{ display:flex; flex-wrap:wrap; gap:10px; flex-shrink:0; }

.cc-btn{
  font-family: var(--font-body); font-weight:700; font-size:.86rem;
  padding: 11px 20px; border-radius: var(--radius-pill); cursor:pointer;
  border: 1.5px solid rgba(255,255,255,0.3); background: transparent; color: var(--white);
  min-height:44px; white-space:nowrap;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cc-btn:hover{ background: rgba(255,255,255,0.1); transform: translateY(-1px); }
.cc-btn--prefs{ border-color: rgba(255,255,255,0.22); color: var(--ink-300); }
.cc-btn--accept{ background: linear-gradient(180deg, var(--sky-light), var(--sky)); border-color: transparent; color: var(--navy-deep); }
.cc-btn--accept:hover{ background: linear-gradient(180deg, var(--sky), var(--sky-dark)); }

/* Preferences modal */
.cc-modal{ position: fixed; inset:0; z-index: 310; display:flex; align-items:center; justify-content:center; padding: 20px; opacity:0; pointer-events:none; transition: opacity 260ms var(--ease); }
.cc-modal[data-open="true"]{ opacity:1; pointer-events:auto; }
.cc-modal__veil{ position:absolute; inset:0; background: rgba(7,28,51,0.6); backdrop-filter: blur(2px); }
.cc-modal__box{
  position:relative; z-index:1; background: var(--paper); border-radius: var(--radius-lg);
  max-width: 640px; width:100%; max-height: 86vh; overflow-y:auto;
  box-shadow: var(--shadow-lg); padding: 34px;
}
.cc-x{
  position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(11,44,77,0.15); background: var(--bg); color: var(--ink-900);
  font-size:1.3rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.cc-x:hover{ background: var(--brand-wash); }
.cc-modal__head h2{ font-size:1.4rem; margin-bottom:.3em; padding-right: 40px; }
.cc-modal__head p{ color: var(--ink-700); font-size:.94rem; margin-bottom: 1.4em; }
.cc-modal__body{ display:flex; flex-direction:column; gap: 18px; }
.cc-cat{ border: 1px solid rgba(11,44,77,0.1); border-radius: var(--radius-md); padding: 18px 20px; background: var(--bg); }
.cc-cat__top{ display:flex; align-items:center; justify-content:space-between; gap: 14px; margin-bottom: 8px; }
.cc-cat__top h3{ font-size:1rem; margin:0; }
.cc-cat p{ font-size:.88rem; color: var(--ink-700); margin: 0 0 8px 0; }
.cc-cat__names{ margin:0 !important; }
.cc-cat__names code{ font-size:.76rem; background: var(--brand-wash); color: var(--brand); padding: 2px 8px; border-radius: 4px; }
.cc-locked{ font-size:.76rem; font-weight:700; color: var(--sky-dark); background: var(--sky-pale); padding: 5px 12px; border-radius: var(--radius-pill); flex-shrink:0; }

/* Toggle switch */
.cc-sw-wrap{ flex-shrink:0; cursor:pointer; }
.cc-sw{ position:absolute; opacity:0; width:1px; height:1px; }
.cc-sw-ui{
  display:inline-block; width:44px; height:26px; border-radius: var(--radius-pill);
  background: var(--ink-300); position:relative; cursor:pointer; transition: background var(--dur) var(--ease);
}
.cc-sw-ui::before{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform var(--dur) var(--ease);
}
.cc-sw:checked + .cc-sw-ui{ background: var(--sky); }
.cc-sw:checked + .cc-sw-ui::before{ transform: translateX(18px); }
.cc-sw:focus-visible + .cc-sw-ui{ outline: 3px solid var(--sky-dark); outline-offset:2px; }
.cc-cat__top label{ cursor:pointer; }

.cc-modal__foot{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(11,44,77,0.1); }
.cc-modal__foot .cc-btn{ border-color: rgba(11,44,77,0.2); color: var(--ink-900); }
.cc-modal__foot .cc-btn--accept{ color: var(--navy-deep); }
.cc-modal__foot .cc-btn:hover{ background: var(--brand-wash); }

/* Footer "Cookie settings" reopen link */
.cc-reopen{
  background:none; border:none; padding:0; font: inherit; font-size: inherit;
  color: var(--ink-300); cursor:pointer; text-decoration:none;
}
.cc-reopen:hover{ color: var(--sky-light); }

@media (max-width: 720px){
  .cc__in{ flex-direction:column; align-items:stretch; }
  .cc__acts{ flex-direction:column; }
  .cc__acts .cc-btn{ width:100%; }
  .cc-modal__box{ padding: 26px 20px; }
}