/**
 * Blue Arctic — CookieConsent Style Overrides
 * Targets: CookieConsent v3 (vanilla-cookieconsent)
 *
 * Design intent:
 *   - Premium black/white enterprise palette
 *   - No pill-shaped buttons (sharp corners, consistent with site --r-md)
 *   - Inter font, Blue Arctic spacing, border, and typography tokens
 *   - Restrained, premium look — no heavy shadows or neon glows
 */

/* ── Token overrides ───────────────────────────────────────────────────────── */
#cc-main {
  /* Font */
  --cc-font-family: 'Inter', system-ui, -apple-system, sans-serif;

  /* Backgrounds */
  --cc-bg:                           #0b0b0c;
  --cc-overlay-bg:                   rgba(0, 0, 0, 0.72);
  --cc-footer-bg:                    #16181c;
  --cc-cookie-category-block-bg:     #16181c;
  --cc-cookie-category-block-border: 1px solid #2a2d33;
  --cc-cookie-category-block-hover-bg:     #1e2025;
  --cc-cookie-category-block-hover-border: 1px solid rgba(255, 255, 255, 0.25);
  --cc-cookie-category-expanded-block-bg:       #16181c;
  --cc-cookie-category-expanded-block-hover-bg: #1e2025;
  --cc-webkit-scrollbar-bg:          #2a2d33;
  --cc-webkit-scrollbar-hover-bg:    rgba(255, 255, 255, 0.40);

  /* Text */
  --cc-primary-color:    #FFFFFF;
  --cc-secondary-color:  rgba(255, 255, 255, 0.65);
  --cc-footer-color:     rgba(255, 255, 255, 0.55);

  /* Borders */
  --cc-separator-border-color: #2a2d33;
  --cc-footer-border-color:    #2a2d33;
  --cc-section-category-border: 1px solid #2a2d33;

  /* Border radius — square, no pills */
  --cc-modal-border-radius: 8px;    /* --r-lg */
  --cc-btn-border-radius:   4px;    /* --r */

  /* Primary button — white background, black text */
  --cc-btn-primary-bg:                #ffffff;
  --cc-btn-primary-color:             #000000;
  --cc-btn-primary-border-color:      #ffffff;
  --cc-btn-primary-hover-bg:          #e5e5e5;
  --cc-btn-primary-hover-color:       #000000;
  --cc-btn-primary-hover-border-color:#e5e5e5;

  /* Secondary button — ghost on dark */
  --cc-btn-secondary-bg:                 transparent;
  --cc-btn-secondary-color:              rgba(255, 255, 255, 0.80);
  --cc-btn-secondary-border-color:       rgba(255, 255, 255, 0.25);
  --cc-btn-secondary-hover-bg:           rgba(255, 255, 255, 0.08);
  --cc-btn-secondary-hover-color:        #FFFFFF;
  --cc-btn-secondary-hover-border-color: rgba(255, 255, 255, 0.50);

  /* Toggle — on state uses white, off uses dark */
  --cc-toggle-on-bg:              #ffffff;
  --cc-toggle-off-bg:             #2a2d33;
  --cc-toggle-on-knob-bg:         #0b0b0c;
  --cc-toggle-off-knob-bg:        #0b0b0c;
  --cc-toggle-enabled-icon-color: #0b0b0c;
  --cc-toggle-disabled-icon-color: rgba(255, 255, 255, 0.40);
  --cc-toggle-readonly-bg:        #16181c;
  --cc-toggle-readonly-knob-bg:   rgba(255, 255, 255, 0.50);
  --cc-toggle-readonly-knob-icon-color: #FFFFFF;

  /* Preferences modal toggle radius — keep it rectangular */
  --cc-pm-toggle-border-radius: 4px;

  /* Link colour */
  --cc-link-color: rgba(255, 255, 255, 0.85);

  /* Z-index — above sticky nav (300) */
  --cc-z-index: 2147483647;
}

/* ── Consent modal (banner) ───────────────────────────────────────────────── */
#cc-main .cm {
  border: 1px solid #2a2d33;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
  max-width: 252px;
}

/* Tighten the text block top padding */
#cc-main .cm__texts {
  padding-top: 0.7rem;
}

/* Reduce horizontal padding on title and desc */
#cc-main .cm__title,
#cc-main .cm__desc {
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

#cc-main .cm__title {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: #FFFFFF;
}

#cc-main .cm__desc {
  font-size: 0.75rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
  padding-bottom: 0.65rem;
}

/* Tighten button area padding */
#cc-main .cm__btns {
  padding: 0.6rem 0.85rem;
}

/* Footer links inside consent modal */
#cc-main .cm__links a,
#cc-main .cm__footer a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.7rem;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.30);
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
#cc-main .cm__links a:hover,
#cc-main .cm__footer a:hover {
  color: #FFFFFF;
}

/* Footer row padding */
#cc-main .cm__footer {
  padding: 0.3rem 0 0.35rem;
}
#cc-main .cm__links {
  padding: 0 0.85rem;
}

/* Button sizing — compact */
#cc-main .cm__btn {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 12px;
  min-height: 30px;
  border-width: 1px;
  border-style: solid;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* ── Preferences modal ────────────────────────────────────────────────────── */
#cc-main .pm {
  border: 1px solid #2a2d33;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.65);
}

#cc-main .pm__title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

#cc-main .pm__section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #FFFFFF;
}

#cc-main .pm__section-desc {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.65;
}

#cc-main .pm__btn {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 9px 18px;
  border-width: 1px;
  border-style: solid;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Close button */
#cc-main .pm__close-btn {
  color: rgba(255, 255, 255, 0.50);
  border: 1px solid transparent;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}
#cc-main .pm__close-btn:hover {
  color: #FFFFFF;
  background: #2a2d33;
  border-color: #2a2d33;
}

/* Header separator */
#cc-main .pm__header {
  border-bottom: 1px solid #2a2d33;
}

/* Footer separator */
#cc-main .pm__footer {
  border-top: 1px solid #2a2d33;
}

/* ── Section blocks (expandable categories) ──────────────────────────────── */
#cc-main .pm__section--expandable .pm__section-title-wrapper {
  border-radius: 4px;
}

/* Cookie table */
#cc-main .pm__table th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
#cc-main .pm__table td {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.65);
  border-top: 1px solid #2a2d33;
}

/* Badge (service count) */
#cc-main .pm__badge {
  background: #2a2d33;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 3px;
  padding: 2px 6px;
}

/* ── Scrollbar (webkit) ──────────────────────────────────────────────────── */
#cc-main ::-webkit-scrollbar {
  width: 6px;
}
#cc-main ::-webkit-scrollbar-track {
  background: transparent;
}
#cc-main ::-webkit-scrollbar-thumb {
  background: #2a2d33;
  border-radius: 3px;
}
#cc-main ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.40);
}

/* ── Readonly toggle label ───────────────────────────────────────────────── */
#cc-main .pm__section--toggle .pm__section-title {
  font-size: 0.875rem;
}

/* Arrow icon */
#cc-main .pm__section-arrow svg {
  stroke: rgba(255, 255, 255, 0.40);
  transition: stroke 0.15s ease;
}
#cc-main .pm__section--expandable .pm__section-title-wrapper:hover .pm__section-arrow svg {
  stroke: rgba(255, 255, 255, 0.65);
}

/* ── Mobile tweaks ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #cc-main .cm {
    max-width: 100%;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
  }
  #cc-main .cm__btn {
    font-size: 0.75rem;
    padding: 6px 12px;
  }
}