/* ============================================================
   ASK AUNTY MIMI — GLASSMORPHISM EXTRAS
   Frosted white glass utility classes and component variants
   ============================================================ */

/* ── GLASS UTILITY CLASSES ─────────────────────────────── */

/* Base glass card */
.glass-card {
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-radius: 20px;
}

/* Stronger glass */
.glass-card-strong {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  border-radius: 20px;
}

/* Tinted glass — purple */
.glass-purple {
  background: rgba(124, 58, 237, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(124, 58, 237, 0.15);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.08);
}

/* Tinted glass — teal */
.glass-teal {
  background: rgba(6, 182, 212, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(6, 182, 212, 0.2);
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.08);
}

/* Tinted glass — success/green */
.glass-green {
  background: rgba(16, 185, 129, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(16, 185, 129, 0.2);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.08);
}

/* ── GLASS NAVIGATION VARIANTS ─────────────────────────── */
.glass-nav {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}

/* ── GLASS BADGE / PILL ────────────────────────────────── */
.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  color: #4B5563;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.glass-pill-purple {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.2);
  color: #7C3AED;
}

.glass-pill-teal {
  background: rgba(6, 182, 212, 0.08);
  border-color: rgba(6, 182, 212, 0.25);
  color: #0284C7;
}

.glass-pill-green {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: #059669;
}

/* ── GLASS BUTTON ──────────────────────────────────────── */
.btn-glass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(124, 58, 237, 0.25);
  color: #7C3AED;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* ── GLASS INPUT ───────────────────────────────────────── */
.input-glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  color: #111827;
  width: 100%;
  transition: all 0.2s ease;
  outline: none;
}

.input-glass::placeholder { color: #9CA3AF; }

.input-glass:focus {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}

/* ── GLASS MODAL / PANEL ───────────────────────────────── */
.glass-panel {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.10),
    0 4px 16px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* ── GLASS CHAT HEADER ENHANCED ────────────────────────── */
.webchat-header {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(15px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04) !important;
}

/* ── GLASS CHAT PREVIEW CARD (hero) ────────────────────── */
.chat-preview-card {
  background: rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(124, 58, 237, 0.12) !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.09),
    0 4px 16px rgba(124, 58, 237, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* ── GLASS STAT CARD ───────────────────────────────────── */
.hero-stats {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* ── GLASS HERO BADGE ──────────────────────────────────── */
.hero-badge {
  background: rgba(255, 255, 255, 0.80) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.08) !important;
}

/* ── GLASS TRUST RIBBON ────────────────────────────────── */
.trust-ribbon {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ── GLASS SECTION-LABEL ───────────────────────────────── */
.section-label {
  background: rgba(255, 255, 255, 0.80) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ── GLASS SHIELD CARD ─────────────────────────────────── */
.shield-card {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* ── STAGGER CHILD ANIMATION ───────────────────────────── */
/* Used by aos-init.js for grid children */
.stagger-child {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease var(--stagger-delay, 0ms),
    transform 0.6s ease var(--stagger-delay, 0ms);
}

.stagger-child.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── FALLBACK: no backdrop-filter support ──────────────── */
@supports not (backdrop-filter: blur(1px)) {
  .glass-card,
  .glass-card-strong,
  .glass-nav,
  .webchat-header,
  .chat-preview-card,
  .hero-stats,
  .hero-badge {
    background: rgba(255, 255, 255, 0.98) !important;
  }
}

/* ── REDUCED MOTION ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .stagger-child {
    transition: none;
    opacity: 1;
    transform: none;
  }
}