/* ============================================================
   NeuAnalytics 2026, Glassmorphism Design System
   Three tiers per Brand Guide v3.0 Section 09
   ============================================================ */

/* ---- Tier 1: Glass Light (Default) ---- */
/* 80% of glassmorphic surfaces, content cards, feature panels, info containers */
.glass {
  background: var(--glass-light-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border-subtle);
  border-radius: var(--border-radius-md);
  box-shadow: var(--glass-shadow);
}

.glass:hover {
  background: var(--glass-medium-bg);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

/* ---- Tier 2: Glass Strong ---- */
/* Elevated cards, active states, interactive elements */
.glass-strong {
  background: var(--glass-medium-bg);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: var(--glass-border-visible);
  border-radius: var(--border-radius-md);
  box-shadow: var(--glass-shadow);
}

.glass-strong:hover {
  background: var(--glass-strong-bg);
  border-color: rgba(255, 255, 255, 0.20);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* ---- Tier 3: Glass Dark ---- */
/* Navigation bars, modal overlays, high-legibility contexts */
.glass-dark {
  background: var(--glass-dark-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border-subtle);
  border-radius: var(--border-radius-md);
  box-shadow: var(--glass-shadow);
}

/* ---- Interaction States ---- */
.glass--active,
.glass:focus-within {
  background: var(--glass-strong-bg);
  border-color: rgba(255, 255, 255, 0.20);
}

.glass--disabled {
  background: rgba(255, 255, 255, 0.02);
  pointer-events: none;
}

.glass--disabled > * {
  opacity: 0.5;
}

/* ---- Glass Card Component ---- */
.glass-card {
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}

.glass-card--sm {
  padding: var(--space-6);
}

.glass-card--lg {
  padding: var(--space-12);
}

/* Glass card with accent border top */
.glass-card--accent-blue {
  border-top: 2px solid var(--neu-blue);
}

.glass-card--accent-teal {
  border-top: 2px solid var(--signal-teal);
}

.glass-card--accent-amber {
  border-top: 2px solid var(--warm-amber);
}

/* Glass card with gradient accent */
.glass-card--gradient-blue::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-primary);
}

.glass-card--gradient-tech::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-tech);
}

/* ---- Glass Panel (larger sections) ---- */
.glass-panel {
  padding: var(--space-12) var(--space-10);
  border-radius: var(--border-radius-lg);
  max-width: 90vw;
}

/* ---- Glass overlay for images/video ---- */
.glass-overlay {
  position: relative;
}

.glass-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 26, 46, 0.3) 0%,
    rgba(11, 26, 46, 0.7) 100%
  );
  border-radius: inherit;
  pointer-events: none;
}

/* ---- Glass input fields ---- */
.glass-input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--border-radius-sm);
  padding: var(--space-3) var(--space-4);
  color: var(--input-text);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  width: 100%;
  transition: all var(--transition-base);
}

.glass-input::placeholder {
  color: var(--input-placeholder);
}

.glass-input:focus {
  outline: 2px solid var(--neu-blue);
  outline-offset: 2px;
  border-color: var(--neu-blue);
  background: var(--glass-medium-bg);
}

/* ---- Glass divider ---- */
.glass-divider {
  height: 1px;
  background: var(--border-default);
  margin: var(--space-8) 0;
}

/* ---- Cookie Consent Banner ---- */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.cookie-consent__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  flex-wrap: wrap;
}
.cookie-consent__text {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, #94A3B8);
  margin: 0;
  flex: 1;
  min-width: 280px;
}
.cookie-consent__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-shrink: 0;
}
.cookie-consent__link {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-consent__link:hover {
  color: var(--text-secondary);
}
/* Policy links sitting inside the banner sentence rather than the actions row:
   inherit the paragraph's text-sm so they don't render a step smaller than the
   copy they're part of. */
.cookie-consent__link--inline {
  font-size: inherit;
}

@media (max-width: 640px) {
  .cookie-consent__inner {
    flex-direction: column;
    text-align: center;
  }
  .cookie-consent__text {
    min-width: auto;
  }
}

/* Opt-out confirmation banner */
.cookie-consent__text--confirmation {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

.cookie-consent__check {
  color: var(--neu-green, #00c853);
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--weight-bold, 700);
}

/* ---- Light theme glass adjustments ---- */
[data-theme="light"] .glass {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .glass:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
}

[data-theme="light"] .glass-strong {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .glass-overlay::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(11, 26, 46, 0.6) 100%
  );
}


/* ============================================================
   Cookie Consent, GPC opt-out confirmation banner
   ============================================================ */
.cookie-consent__text--confirmation {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}
.cookie-consent__check {
  color: var(--neu-green, #00c853);
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--weight-bold, 700);
}


/* ============================================================
   Cookie Consent, ALWAYS DARK
   The banner uses dark glass styling in both light and dark mode
   so contrast and brand stay consistent. Lock every child element
   to its dark-mode appearance regardless of [data-theme].
   ============================================================ */

/* Lock the banner panel to dark in light mode */
[data-theme="light"] .cookie-consent {
  background: rgba(11, 26, 46, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #FFFFFF;
}

/* Body text stays light */
[data-theme="light"] .cookie-consent__text {
  color: #E2E8F0;
}

/* Cookie Policy link stays light/accented */
[data-theme="light"] .cookie-consent__link {
  color: #94A3B8;
}
[data-theme="light"] .cookie-consent__link:hover {
  color: #FFFFFF;
}

/* Equal-weight outline buttons stay light-on-dark */
[data-theme="light"] .cookie-consent .btn--outline {
  background-color: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.40);
}
[data-theme="light"] .cookie-consent .btn--outline:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.60);
  color: #FFFFFF;
}

/* GPC opt-out confirmation banner, same dark treatment */
[data-theme="light"] .cookie-consent__text--confirmation {
  color: #E2E8F0;
}
[data-theme="light"] .cookie-consent__check {
  color: #4ADE80;
}