/*
  CheapSubs – Global Glass Kit
  Reusable utilities for translucent / glass panels.

  Design goals:
  - Use existing site tokens (the `--glass-*` vars in `style.css`)
  - Border radius is consistently 24px
  - Provide graceful fallbacks when advanced masking isn't supported
*/

:root {
  /* Public knobs */
  --cs-glass-radius: 24px;
  --cs-glass-blur: var(--glass-backdrop-blur, 12px);
  --cs-glass-shadow: var(--glass-shadow, 0 8px 32px 0 rgba(0, 0, 0, 0.3));

  /* Surfaces */
  --cs-glass-surface: var(--glass-surface, rgba(255, 255, 255, 0.03));
  --cs-glass-surface-hover: var(--glass-surface-hover, rgba(255, 255, 255, 0.08));

  /* Borders */
  --cs-glass-border: var(--glass-border, rgba(255, 255, 255, 0.08));
  --cs-glass-border-top: rgba(255, 255, 255, 0.14);
  --cs-glass-border-bottom: rgba(255, 255, 255, 0.06);

  /* Accent */
  --cs-glass-accent: var(--glass-accent, #38bdf8);

  /* Glow border (configurable per element) */
  --cs-glow-1: rgb(34, 197, 94);  /* green */
  --cs-glow-2: rgb(250, 204, 21); /* yellow */
  --cs-glow-size: 15px;
  --cs-glow-border-alpha: 0.55;
}

/* Basic glass panel */
.cs-glass {
  background: var(--cs-glass-surface);
  backdrop-filter: blur(var(--cs-glass-blur));
  -webkit-backdrop-filter: blur(var(--cs-glass-blur));
  border: 1px solid var(--cs-glass-border);
  border-radius: var(--cs-glass-radius);
  box-shadow: var(--cs-glass-shadow);
}

.cs-glass--hover:hover {
  background: var(--cs-glass-surface-hover);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Glass panel with gradient border (mask technique with fallback) */
.cs-glass-border {
  position: relative;
  border-radius: var(--cs-glass-radius);
  background: var(--cs-glass-surface);
  backdrop-filter: blur(var(--cs-glass-blur));
  -webkit-backdrop-filter: blur(var(--cs-glass-blur));
  box-shadow: var(--cs-glass-shadow);
  border: 1px solid var(--cs-glass-border); /* fallback */
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .cs-glass-border {
    border: 1px solid transparent;
  }

  .cs-glass-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, var(--cs-glass-border-top), var(--cs-glass-border-bottom));

    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;

    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;

    pointer-events: none;
  }
}

/* =========================================================
   Glass + subtle glow border (same glass, customizable colors)
   Usage:
     class="cs-glass-border cs-glass--glow"
     (optional) style="--cs-glow-1: rgba(...); --cs-glow-2: rgba(...);"
   ========================================================= */
.cs-glass--glow {
  /* Outer glow + keep existing glass shadow */
  box-shadow:
    var(--cs-glass-shadow),
    0 0 var(--cs-glow-size) rgba(0, 0, 0, 0.15),
    0 0 calc(var(--cs-glow-size) * 1.05) color-mix(in srgb, var(--cs-glow-1) 55%, transparent),
    0 0 calc(var(--cs-glow-size) * 0.85) color-mix(in srgb, var(--cs-glow-2) 45%, transparent);

  /* Fallback border if masking isn't supported */
  border-color: color-mix(in srgb, var(--cs-glow-1) var(--cs-glow-border-alpha), var(--cs-glass-border));
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .cs-glass-border.cs-glass--glow::before {
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--cs-glow-1) var(--cs-glow-border-alpha), transparent),
      color-mix(in srgb, var(--cs-glow-2) var(--cs-glow-border-alpha), transparent)
    );
  }
}

/* Quick presets (optional) */
.cs-glow-green { --cs-glow-1: rgba(34, 197, 94, 0.60); --cs-glow-2: rgba(34, 197, 94, 0.22); }
.cs-glow-yellow { --cs-glow-1: rgba(250, 204, 21, 0.60); --cs-glow-2: rgba(250, 204, 21, 0.22); }
.cs-glow-green-yellow { --cs-glow-1: rgba(34, 197, 94, 0.55); --cs-glow-2: rgba(250, 204, 21, 0.55); }

/* Inner glass surface (for small blocks inside cards) */
.cs-glass-surface {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--cs-glass-radius);
  backdrop-filter: blur(calc(var(--cs-glass-blur) * 0.75));
  -webkit-backdrop-filter: blur(calc(var(--cs-glass-blur) * 0.75));
}

/* Layout helpers */
.cs-flex-between {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

/* A generic “code pill / row” component inspired by your snippet */
.cs-glass-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--cs-glass-radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--glass-text-primary, #f1f5f9);
}

.cs-glass-code kbd {
  background: transparent;
  padding: 0;
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: 2px;
}

.cs-copy-btn {
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--glass-text-primary, #f1f5f9);
  line-height: 0;
}

.cs-copy-btn svg {
  width: 22px;
  height: 22px;
}