/* --- LiquidGlass.css --- */

/* BASIS LAGEN */
.glass-filter, .glass-overlay, .glass-specular {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}

.glass-filter {
  z-index: 1;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  filter: url(#glass-distortion) saturate(120%) brightness(1.15);
}

.glass-overlay { z-index: 2; background: var(--bg-color, rgba(255, 255, 255, 0.25)); }

.glass-specular {
  z-index: 3; box-shadow: inset 1px 1px 1px var(--highlight, rgba(255, 255, 255, 0.75));
}

.glass-content {
  position: relative; z-index: 4;
  height: 100%; width: 100%;
  display: flex; justify-content: center; align-items: center;
  /* HIER DE FIX VOOR WITTE TEKST */
  color: #ffffff !important; 
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* COMPONENTEN */
.glass-nav {
  --bg-color: rgba(255, 255, 255, 0.25);
  --highlight: rgba(255, 255, 255, 0.75);
  position: relative; width: 100%; overflow: hidden;
}

.glass-icon {
  --bg-color: rgba(255, 255, 255, 0.25);
  --highlight: rgba(255, 255, 255, 0.75);
  position: relative; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; transition: transform 0.2s;
}
.glass-icon:hover { transform: scale(1.1); }

.glass-card, .glass-window {
  --bg-color: rgba(255, 255, 255, 0.25);
  --highlight: rgba(255, 255, 255, 0.75);
  position: relative; border-radius: 20px; overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

/* Settings Grid (Liquid Icons) */
.glass-icons-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 24px; padding: 20px; width: 100%; box-sizing: border-box;
}
.glass-icons-grid .glass-icon { width: 100%; height: 80px; cursor: pointer; }
.glass-icons-grid .glass-content { flex-direction: column; }
.glass-icons-grid i { font-size: 28px; margin-bottom: 8px; color: #ffffff; }
.glass-icons-grid span { font-size: 10px; font-weight: bold; text-transform: uppercase; }

/* DARK MODE */
body.dark-mode .glass-nav, body.dark-mode .glass-icon, body.dark-mode .glass-card, body.dark-mode .glass-window {
  --bg-color: rgba(0, 0, 0, 0.35);
  --highlight: rgba(255, 255, 255, 0.15);
}