/*
  Viiision cookie consent banner and preferences panel.
  All selectors are prefixed with .vcc- to avoid collisions with site styles.
  Colors and fonts mirror the viiision.com design tokens.
*/
.vcc-root {
  --vcc-navy: #0b1f3a;
  --vcc-navy-soft: rgba(11, 31, 58, 0.72);
  --vcc-line: rgba(11, 31, 58, 0.18);
  --vcc-cream: #f5f0e8;
  --vcc-gold: #b8922a;
  --vcc-white: #ffffff;
  --vcc-ok: #2e6b4f;
  font-family: Figtree, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--vcc-navy);
  font-size: 15px;
  line-height: 1.55;
}
.vcc-root *, .vcc-root *::before, .vcc-root *::after { box-sizing: border-box; }
.vcc-root [hidden] { display: none !important; }

/* ---------- First-layer banner ---------- */
.vcc-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  max-width: 1120px;
  margin: 0 auto;
  background: var(--vcc-white);
  border: 1px solid var(--vcc-line);
  border-top: 3px solid var(--vcc-gold);
  box-shadow: 0 12px 40px rgba(11, 31, 58, 0.18);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 28px;
  align-items: center;
}
.vcc-banner__title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 6px;
}
.vcc-banner__text { margin: 0; color: var(--vcc-navy-soft); max-width: 68ch; }
.vcc-banner__text a, .vcc-modal a { color: var(--vcc-navy); text-decoration: underline; text-underline-offset: 2px; }
.vcc-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; }

/* ---------- Buttons ----------
   Accept and Reject share one style on purpose: equal prominence is required. */
.vcc-btn {
  appearance: none;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 99px;
  cursor: pointer;
  border: 1.5px solid var(--vcc-navy);
  background: var(--vcc-navy);
  color: var(--vcc-white);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.vcc-btn:hover { background: #142f55; }
.vcc-btn--ghost { background: transparent; color: var(--vcc-navy); }
.vcc-btn--ghost:hover { background: var(--vcc-cream); }
.vcc-btn:focus-visible, .vcc-switch input:focus-visible + .vcc-switch__track, .vcc-close:focus-visible, .vcc-details summary:focus-visible {
  outline: 3px solid var(--vcc-gold);
  outline-offset: 2px;
}

/* ---------- Status notices (GPC, opt-out confirmation) ---------- */
.vcc-notice {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: var(--vcc-cream);
  border-left: 3px solid var(--vcc-ok);
  font-size: 14px;
  color: var(--vcc-navy);
}

/* ---------- Preferences panel ---------- */
.vcc-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(9, 17, 30, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.vcc-modal {
  background: var(--vcc-white);
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--vcc-gold);
  box-shadow: 0 20px 60px rgba(9, 17, 30, 0.35);
}
.vcc-modal__head { padding: 22px 24px 8px; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.vcc-modal__title { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 24px; line-height: 1.2; margin: 0; }
.vcc-close {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 44px; height: 44px; margin: -8px -10px 0 0;
  font-size: 26px; line-height: 1; color: var(--vcc-navy);
}
.vcc-modal__body { padding: 4px 24px 8px; overflow-y: auto; }
.vcc-modal__intro { margin: 0 0 8px; color: var(--vcc-navy-soft); }
.vcc-cat { border-top: 1px solid var(--vcc-line); padding: 16px 0; }
.vcc-cat__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.vcc-cat__name { font-weight: 600; font-size: 16px; margin: 0; }
.vcc-cat__desc { margin: 6px 0 0; color: var(--vcc-navy-soft); font-size: 14px; }
.vcc-cat__always { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--vcc-navy-soft); white-space: nowrap; }
.vcc-modal__foot {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--vcc-line);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
}

/* Toggle switch */
.vcc-switch { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
.vcc-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vcc-switch__track {
  width: 46px; height: 26px; border-radius: 99px;
  background: rgba(11, 31, 58, 0.25); position: relative; transition: background 0.15s;
}
.vcc-switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--vcc-white); transition: transform 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.vcc-switch input:checked + .vcc-switch__track { background: var(--vcc-navy); }
.vcc-switch input:checked + .vcc-switch__track::after { transform: translateX(20px); }
.vcc-switch input:disabled + .vcc-switch__track { opacity: 0.5; cursor: not-allowed; }
.vcc-switch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Cookie list */
.vcc-details { margin-top: 10px; font-size: 13px; }
.vcc-details summary { cursor: pointer; font-weight: 600; color: var(--vcc-navy); }
.vcc-table-wrap { overflow-x: auto; margin-top: 8px; }
.vcc-table { width: 100%; border-collapse: collapse; min-width: 460px; }
.vcc-table th, .vcc-table td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--vcc-line); }
.vcc-table th { font-weight: 600; background: var(--vcc-cream); }

/* ---------- Toast ---------- */
.vcc-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 1002; background: var(--vcc-navy); color: var(--vcc-white);
  padding: 12px 18px; font-size: 14px; max-width: calc(100vw - 32px);
  box-shadow: 0 8px 24px rgba(9, 17, 30, 0.3);
}

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  .vcc-banner { grid-template-columns: 1fr; left: 0; right: 0; bottom: 0; padding: 18px 16px; }
  .vcc-banner__actions { justify-content: stretch; }
  .vcc-banner__actions .vcc-btn { flex: 1 1 calc(50% - 5px); }
  .vcc-banner__actions .vcc-btn--ghost { flex-basis: 100%; order: 3; }
  .vcc-overlay { padding: 0; align-items: flex-end; }
  .vcc-modal { max-height: 92vh; }
  .vcc-modal__foot .vcc-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .vcc-root *, .vcc-root *::after { transition: none !important; }
}