/* ═══════════════════════════════════════════════════════════════
   GLASS SURFACE — Vanilla CSS Port
   Original: @react-bits/GlassSurface
   ─────────────────────────────────────────────────────────────
   Usage (works in Chrome/Edge with SVG backdrop-filter):
     <div class="glass-surface gs-btn">Content</div>

   For use as a button:
     <button class="glass-surface gs-btn">Click me</button>
     <a      class="glass-surface gs-btn" href="#">Click me</a>

   Width / height are set with CSS vars or inline styles:
     style="--gs-w:300px; --gs-h:80px; --gs-radius:20px"
   ═══════════════════════════════════════════════════════════════ */

/* ── Custom Properties ── */
.glass-surface {
  --gs-w:       auto;
  --gs-h:       auto;
  --gs-radius:  20px;
  --gs-frost:   0;        /* backgroundOpacity  */
  --gs-sat:     1;        /* saturation          */
  --gs-blur:    11;       /* blur (px)           */
  --gs-filter-id: url(#gs-filter-global);
}

/* ── Base Structure ── */
.glass-surface {
  position:   relative;
  display:    inline-flex;
  align-items:    center;
  justify-content: center;
  width:      var(--gs-w);
  height:     var(--gs-h);
  border-radius: var(--gs-radius);
  overflow:   hidden;
  transition: opacity 0.26s ease-out;

  /* Fallback background (always visible) */
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.2),
    0 2px 16px 0 rgba(31, 38, 135, 0.1),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.1);

  text-decoration: none;
  cursor: pointer;
}

/* ── Content wrapper ── */
.glass-surface__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: inherit;
  width: 100%;
  height: 100%;

  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  gap: 8px;
  transition: color var(--ease-normal, 0.3s ease);
}

/* ── SVG filter element (hidden) ── */
.glass-surface__filter {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: -1;
  overflow: visible;
}

/* ── SVG-powered version (Chrome/Edge only) ── */
@supports (backdrop-filter: url(#test)) {
  .glass-surface {
    background: light-dark(
      hsl(0 0% 100% / var(--gs-frost, 0)),
      hsl(0 0% 0%   / var(--gs-frost, 0))
    );
    backdrop-filter: var(--gs-filter-id) saturate(var(--gs-sat, 1));
    box-shadow:
      0 0 2px 1px
        light-dark(
          color-mix(in oklch, black, transparent 85%),
          color-mix(in oklch, white, transparent 65%)
        ) inset,
      0 0 10px 4px
        light-dark(
          color-mix(in oklch, black, transparent 90%),
          color-mix(in oklch, white, transparent 85%)
        ) inset,
      0px 4px 16px rgba(17, 17, 26, 0.05),
      0px 8px 24px rgba(17, 17, 26, 0.05),
      0px 16px 56px rgba(17, 17, 26, 0.05),
      0px 4px 16px rgba(17, 17, 26, 0.05) inset,
      0px 8px 24px rgba(17, 17, 26, 0.05) inset,
      0px 16px 56px rgba(17, 17, 26, 0.05) inset;
  }
}

/* ── Focus ── */
.glass-surface:focus-visible {
  outline: 2px solid #7B2FFF;
  outline-offset: 2px;
}

/* ── Hover ── */
.glass-surface:hover {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 12px 40px var(--gs-glow-1, rgba(123, 47, 255, 0.25)),
    0 2px 16px var(--gs-glow-2, rgba(0, 212, 255, 0.1)),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

/* ── Dark mode fallback ── */
@media (prefers-color-scheme: dark) {
  .glass-surface {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.07);
  }
}

/* ── No backdrop-filter support ── */
@supports not (backdrop-filter: blur(10px)) {
  .glass-surface {
    background: rgba(255, 255, 255, 0.32);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
  }

  .glass-surface::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border-radius: inherit;
    z-index: -1;
  }
}

/* ─────────────────────────────────
   SIZE PRESETS  (optional helpers)
   ───────────────────────────────── */
.gs-btn {
  --gs-w: auto;
  --gs-h: auto;
  --gs-radius: 50px;
}

.gs-card {
  --gs-radius: var(--radius-lg, 24px);
  --gs-frost: 0.08; /* Slightly more opaque for cards */
  padding: 0; 
  display: flex !important;
  width: 100%;
}

.gs-tag {
  --gs-radius: 50px;
  --gs-frost: 0.08;
  cursor: default;
}

.gs-tag:hover {
  transform: none !important;
}

.gs-tag:hover .glass-surface__content {
  color: #ffffff !important;
}

.gs-tag .glass-surface__content {
  padding: 8px 18px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.gs-sm  { padding: 10px 24px; }
.gs-lg  { padding: 18px 44px; font-size: 0.9rem; }

/* ─────────────────────────────────
   COLOUR TINT OVERLAYS & GLOWS
   ───────────────────────────────── */
.gs-purple .glass-surface__content { text-shadow: 0 0 12px rgba(123,47,255,0.6); }
.gs-cyan   .glass-surface__content { text-shadow: 0 0 12px rgba(0,212,255,0.6); }
.gs-pink   .glass-surface__content { text-shadow: 0 0 12px rgba(224,64,251,0.6); }

/* Semantic Variants */
.gs-primary { --gs-glow-1: rgba(123, 47, 255, 0.3); --gs-glow-2: rgba(224, 64, 251, 0.15); }
.gs-primary .glass-surface__content { text-shadow: 0 0 12px rgba(123,47,255,0.6); }
.gs-tag.gs-primary::before { 
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: rgba(123, 47, 255, 0.15);
}
.gs-tag.gs-primary { --gs-glow-1: rgba(123, 47, 255, 0.3); --gs-glow-2: rgba(224, 64, 251, 0.1); }
.gs-primary:hover .glass-surface__content { color: var(--purple-light, #9B59B6); }

.gs-secondary { --gs-glow-1: rgba(255, 255, 255, 0.15); --gs-glow-2: rgba(107, 114, 128, 0.1); }
.gs-secondary .glass-surface__content { text-shadow: 0 0 12px rgba(255,255,255,0.2); }
.gs-tag.gs-secondary::before { 
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: rgba(255, 255, 255, 0.08);
}
.gs-tag.gs-secondary { --gs-glow-1: rgba(255, 255, 255, 0.15); --gs-glow-2: rgba(107, 114, 128, 0.05); }
.gs-secondary:hover .glass-surface__content { color: #f3f4f6; }

.gs-success { --gs-glow-1: rgba(16, 185, 129, 0.3); --gs-glow-2: rgba(16, 185, 129, 0.15); }
.gs-success .glass-surface__content { text-shadow: 0 0 12px rgba(16,185,129,0.6); }
.gs-tag.gs-success::before { 
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: rgba(16, 185, 129, 0.15);
}
.gs-tag.gs-success { --gs-glow-1: rgba(16, 185, 129, 0.3); --gs-glow-2: rgba(16, 185, 129, 0.1); }
.gs-success:hover .glass-surface__content { color: var(--success, #10B981); }

.gs-danger { --gs-glow-1: rgba(239, 68, 68, 0.3); --gs-glow-2: rgba(239, 68, 68, 0.15); }
.gs-danger .glass-surface__content { text-shadow: 0 0 12px rgba(239,68,68,0.6); }
.gs-tag.gs-danger::before { 
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: rgba(239, 68, 68, 0.15);
}
.gs-tag.gs-danger { --gs-glow-1: rgba(239, 68, 68, 0.3); --gs-glow-2: rgba(239, 68, 68, 0.1); }
.gs-danger:hover .glass-surface__content { color: var(--danger, #EF4444); }

.gs-warning { --gs-glow-1: rgba(245, 158, 11, 0.3); --gs-glow-2: rgba(245, 158, 11, 0.15); }
.gs-warning .glass-surface__content { text-shadow: 0 0 12px rgba(245,158,11,0.6); }
.gs-tag.gs-warning::before { 
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: rgba(245, 158, 11, 0.15);
}
.gs-tag.gs-warning { --gs-glow-1: rgba(245, 158, 11, 0.3); --gs-glow-2: rgba(245, 158, 11, 0.1); }
.gs-warning:hover .glass-surface__content { color: var(--warning, #F59E0B); }

.gs-info { --gs-glow-1: rgba(14, 165, 233, 0.3); --gs-glow-2: rgba(14, 165, 233, 0.15); }
.gs-info .glass-surface__content { text-shadow: 0 0 12px rgba(14,165,233,0.6); }
.gs-tag.gs-info::before { 
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: rgba(14, 165, 233, 0.15);
}
.gs-tag.gs-info { --gs-glow-1: rgba(14, 165, 233, 0.3); --gs-glow-2: rgba(14, 165, 233, 0.1); }
.gs-info:hover .glass-surface__content { color: var(--info, #0EA5E9); }

/* ─────────────────────────────────
   GLOBAL SVG FILTER (injected once
   by glass-surface.js)
   ───────────────────────────────── */
#gs-filter-container {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  overflow: hidden;
}
