/* ==========================================================================
   Define IT Solution — cookie-consent.css

   A consent bar, not a modal. It does not cover the page, does not trap
   focus and does not block scrolling, because nothing here is urgent: no
   non-essential storage is written until somebody chooses. A wall that
   holds the site hostage over cookies that have not been set yet would be
   both hostile and untrue.

   Accept and Reject are given equal visual weight on purpose. Both POPIA and
   GDPR expect refusing to be as easy as agreeing, and a greyed-out "Reject"
   beside a bright "Accept" is the pattern regulators single out.
   ========================================================================== */

.cc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8000;            /* under the splash (9999), over everything else */
  display: none;
  background: rgba(6, 10, 18, 0.96);
  border-top: 1px solid var(--line-invert, rgba(140, 180, 225, 0.18));
  box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.45);
  transform: translateY(100%);
  transition: transform 420ms var(--ease-out-premium, cubic-bezier(.16, 1, .3, 1));
}
.cc.is-present { display: block; }
.cc.is-open { transform: translateY(0); }

/* Backdrop blur is progressive: where it is unsupported the panel is already
   opaque enough to read against. */
@supports (backdrop-filter: blur(6px)) {
  .cc { background: rgba(6, 10, 18, 0.82); backdrop-filter: blur(10px); }
}

.cc__inner {
  max-width: var(--container, 1240px);
  margin-inline: auto;
  padding: clamp(16px, 2.4vw, 22px) clamp(18px, 4vw, 40px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.cc__copy { flex: 1 1 auto; min-width: 0; }

.cc__title {
  margin: 0 0 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--define-cyan, #00CAFD);
}

.cc__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted, #B4BED0);
  max-width: 68ch;
}
.cc__text a { color: #EAF6FF; text-decoration: underline; text-underline-offset: 2px; }
.cc__text a:hover { color: var(--define-cyan, #00CAFD); }

.cc__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

.cc__btn {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  padding: 11px 20px;
  border-radius: var(--r-pill, 999px);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 200ms var(--ease, ease), border-color 200ms var(--ease, ease),
              color 200ms var(--ease, ease);
}
/* Equal weight. Same size, same shape, same contrast class — the only
   difference is fill versus outline. */
.cc__btn--accept {
  background: var(--define-gradient, linear-gradient(90deg, #00CAFD, #1E6DF5));
  color: #04070C;
}
.cc__btn--accept:hover { filter: brightness(1.08); }
.cc__btn--reject {
  background: transparent;
  border-color: rgba(180, 210, 240, 0.4);
  color: #E6F1FB;
}
.cc__btn--reject:hover { border-color: var(--define-cyan, #00CAFD); color: #fff; }
.cc__btn:focus-visible {
  outline: 2px solid var(--define-cyan, #00CAFD);
  outline-offset: 3px;
}

/* Footer entry point, styled to sit with the legal links beside it. */
.cc-prefs {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.cc-prefs:hover { color: var(--define-cyan, #00CAFD); text-decoration: underline; }
.cc-prefs:focus-visible { outline: 2px solid var(--define-cyan, #00CAFD); outline-offset: 2px; }

@media (max-width: 860px) {
  .cc__inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .cc__actions { justify-content: stretch; }
  .cc__btn { flex: 1 1 0; text-align: center; padding: 13px 16px; }
  .cc__text { font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cc { transition: none; }
}