/* ==========================================================================
   Forbidden Finance — Glass / Glassmorphism Styles
   Backdrop-filter cards, navigation bar, and overlay effects
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base Glass Card
   -------------------------------------------------------------------------- */

.glass-card {
  background: var(--color-glass-fill);
  border: var(--glass-border-width) solid var(--color-glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

/* --------------------------------------------------------------------------
   2. Card Size Variants
   -------------------------------------------------------------------------- */

/* Large — more padding and larger radius */
.glass-card--lg {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

/* Small — tighter padding and smaller radius */
.glass-card--sm {
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
}

/* Elevated — slightly more opaque for prominence */
.glass-card--elevated {
  background: var(--color-glass-fill);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .glass-card--elevated {
  background: rgba(229, 57, 53, 0.12);
}

[data-theme="light"] .glass-card--elevated {
  background: rgba(26, 26, 26, 0.10);
}

/* --------------------------------------------------------------------------
   3. Glass Navigation Bar
   -------------------------------------------------------------------------- */

.glass-nav {
  background: var(--color-glass-fill);
  border-bottom: var(--glass-border-width) solid var(--color-glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

/* When header is scrolled, increase glass opacity for readability */
.header--scrolled .glass-nav {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .header--scrolled .glass-nav {
  background: rgba(10, 10, 10, 0.85);
}

[data-theme="light"] .header--scrolled .glass-nav {
  background: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   4. Glass Overlay — Mobile Menu
   -------------------------------------------------------------------------- */

.glass-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-normal),
    visibility var(--transition-normal);
}

.glass-overlay--visible {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   5. Fallbacks
   -------------------------------------------------------------------------- */

/* Fallback when backdrop-filter is not supported */
@supports not (backdrop-filter: blur(1px)) {
  .glass-card {
    background: var(--color-surface);
    border-color: var(--color-divider);
  }

  .glass-card--elevated {
    background: var(--color-elevated);
  }

  .glass-nav {
    background: var(--color-surface);
    border-bottom-color: var(--color-divider);
  }

  [data-theme="dark"] .glass-nav {
    background: rgba(10, 10, 10, 0.95);
  }

  [data-theme="light"] .glass-nav {
    background: rgba(255, 255, 255, 0.95);
  }

  .glass-overlay {
    background: rgba(0, 0, 0, 0.8);
  }
}

/* Reduced motion: remove blur for performance */
@media (prefers-reduced-motion: reduce) {
  .glass-card,
  .glass-nav,
  .glass-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .glass-card {
    background: var(--color-surface);
  }

  .glass-nav {
    background: var(--color-surface);
  }
}