/* ============================================
   💧 Liquid Glass — Water Droplet Aesthetic
   Refraction, caustic highlights, wet surface
   ============================================ */

/* ══════════════════════════════════════════════
   GLASS LAYERS — Base
   ══════════════════════════════════════════════ */

.glass-1 {
  background: var(--glass-bg-1);
  backdrop-filter: var(--glass-blur-1);
  -webkit-backdrop-filter: var(--glass-blur-1);
  border: 1px solid var(--glass-border-1);
  box-shadow: var(--glass-shadow-sm);
}

.glass-2 {
  background: var(--glass-bg-2);
  backdrop-filter: var(--glass-blur-2);
  -webkit-backdrop-filter: var(--glass-blur-2);
  border: 1px solid var(--glass-border-2);
  box-shadow: var(--glass-shadow);
}

.glass-3 {
  background: var(--glass-bg-3);
  backdrop-filter: var(--glass-blur-3);
  -webkit-backdrop-filter: var(--glass-blur-3);
  border: 1px solid var(--glass-border-3);
  box-shadow: var(--glass-shadow);
}

.glass-4 {
  background: var(--glass-bg-4);
  backdrop-filter: var(--glass-blur-4);
  -webkit-backdrop-filter: var(--glass-blur-4);
  border: 1px solid var(--glass-border-4);
  box-shadow: var(--glass-shadow-lg);
}

/* ══════════════════════════════════════════════
   💧 LIQUID GLASS CARD — Water Droplet Effect
   ══════════════════════════════════════════════ */
.glass-card {
  background: var(--glass-bg-2);
  backdrop-filter: var(--glass-blur-2);
  -webkit-backdrop-filter: var(--glass-blur-2);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);

  /* Water droplet shadow — softer, multi-layer */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.12),
    0 12px 36px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 var(--liquid-highlight-top, rgba(255, 255, 255, 0.12)),
    inset 0 -1px 0 var(--liquid-highlight-bottom, rgba(255, 255, 255, 0.03));
}

/* Caustic refraction highlight — top edge, like light through water */
.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--liquid-caustic, rgba(255, 255, 255, 0.25)) 20%,
    var(--liquid-caustic-bright, rgba(255, 255, 255, 0.4)) 50%,
    var(--liquid-caustic, rgba(255, 255, 255, 0.25)) 80%,
    transparent 100%
  );
  border-radius: var(--radius-full);
  pointer-events: none;
  z-index: 3;
}


.glass-card:hover {
  background: var(--glass-bg-3);
  border-color: var(--glass-border-3);
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 20px 48px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 var(--liquid-highlight-top, rgba(255, 255, 255, 0.15)),
    inset 0 -1px 0 var(--liquid-highlight-bottom, rgba(255, 255, 255, 0.04));
}

/* ══════════════════════════════════════════════
   💧 LIQUID GLASS CARD STATIC
   ══════════════════════════════════════════════ */
.glass-card-static {
  background: var(--glass-bg-2);
  backdrop-filter: var(--glass-blur-2);
  -webkit-backdrop-filter: var(--glass-blur-2);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;

  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.12),
    0 12px 36px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 var(--liquid-highlight-top, rgba(255, 255, 255, 0.12)),
    inset 0 -1px 0 var(--liquid-highlight-bottom, rgba(255, 255, 255, 0.03));
}

/* Caustic highlight */
.glass-card-static::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--liquid-caustic, rgba(255, 255, 255, 0.2)) 20%,
    var(--liquid-caustic-bright, rgba(255, 255, 255, 0.35)) 50%,
    var(--liquid-caustic, rgba(255, 255, 255, 0.2)) 80%,
    transparent 100%
  );
  border-radius: var(--radius-full);
  pointer-events: none;
  z-index: 3;
}


/* ══════════════════════════════════════════════
   💧 GLASS PILL — Small liquid bead
   ══════════════════════════════════════════════ */
.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 3px var(--space-sm);
  background: var(--glass-bg-2);
  backdrop-filter: var(--glass-blur-1);
  -webkit-backdrop-filter: var(--glass-blur-1);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--radius-full);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  transition: all var(--duration-normal) var(--ease-out);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 var(--liquid-highlight-top, rgba(255, 255, 255, 0.10));
}

.glass-pill:hover {
  background: var(--glass-bg-3);
  border-color: var(--glass-border-3);
  color: var(--text-primary);
}

/* ══════════════════════════════════════════════
   💧 GLASS INPUT — Liquid pool
   ══════════════════════════════════════════════ */
.glass-input {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: var(--glass-bg-1);
  backdrop-filter: var(--glass-blur-1);
  -webkit-backdrop-filter: var(--glass-blur-1);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--fs-small);
  transition: all var(--duration-normal) var(--ease-out);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 var(--liquid-highlight-top, rgba(255, 255, 255, 0.05));
}

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

.glass-input:focus {
  background: var(--glass-bg-2);
  border-color: var(--accent-blue);
  box-shadow:
    0 0 0 3px rgba(10, 132, 255, 0.15),
    0 0 20px rgba(10, 132, 255, 0.08),
    inset 0 1px 0 var(--liquid-highlight-top, rgba(255, 255, 255, 0.08));
}

/* ── Glass Textarea ── */
.glass-textarea {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: var(--glass-bg-1);
  backdrop-filter: var(--glass-blur-1);
  -webkit-backdrop-filter: var(--glass-blur-1);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--fs-small);
  resize: vertical;
  min-height: 120px;
  transition: all var(--duration-normal) var(--ease-out);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 var(--liquid-highlight-top, rgba(255, 255, 255, 0.05));
}

.glass-textarea::placeholder {
  color: var(--text-muted);
}

.glass-textarea:focus {
  background: var(--glass-bg-2);
  border-color: var(--accent-blue);
  box-shadow:
    0 0 0 3px rgba(10, 132, 255, 0.15),
    0 0 20px rgba(10, 132, 255, 0.08),
    inset 0 1px 0 var(--liquid-highlight-top, rgba(255, 255, 255, 0.08));
}

/* ══════════════════════════════════════════════
   💧 GLOW EFFECT — Wet edge glow
   ══════════════════════════════════════════════ */
.glass-glow {
  position: relative;
}

.glass-glow::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--gradient-primary);
  z-index: -1;
  opacity: 0;
  filter: blur(15px);
  transition: opacity var(--duration-normal) var(--ease-out);
}

.glass-glow:hover::after {
  opacity: 0.35;
}

/* ══════════════════════════════════════════════
   💧 LIGHT THEME — Liquid droplet overrides
   ══════════════════════════════════════════════ */
[data-theme="light"] {
  --liquid-highlight-top: rgba(255, 255, 255, 0.8);
  --liquid-highlight-bottom: rgba(255, 255, 255, 0.3);
  --liquid-caustic: rgba(255, 255, 255, 0.7);
  --liquid-caustic-bright: rgba(255, 255, 255, 0.95);
  --liquid-surface-top: rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .glass-card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 12px 36px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .glass-card:hover {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.03),
    0 8px 24px rgba(0, 0, 0, 0.06),
    0 20px 48px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .glass-card-static {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 12px 36px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .glass-pill {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .glass-input,
[data-theme="light"] .glass-textarea {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .glass-input:focus,
[data-theme="light"] .glass-textarea:focus {
  box-shadow:
    0 0 0 3px rgba(0, 102, 255, 0.12),
    0 0 15px rgba(0, 102, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}