/* ============================================================
   glassmorphism.css — Glassmorphism Effect + @supports Fallback
   Singheswar Hospital Website
   ============================================================ */

/* ── Fallback for browsers without backdrop-filter ── */
.glass {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(3, 105, 161, 0.25);
  box-shadow: 0 2px 12px rgba(3, 105, 161, 0.1);
}

[data-theme="dark"] .glass {
  background: rgba(2, 49, 69, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* ── Full Glassmorphism for supporting browsers ── */
@supports (backdrop-filter: blur(1px)) {
  .glass {
    background: rgba(240, 249, 255, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(3, 105, 161, 0.2);
    box-shadow: 0 4px 24px rgba(3, 105, 161, 0.08);
  }

  [data-theme="dark"] .glass {
    background: rgba(2, 49, 69, 0.50);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(125, 211, 252, 0.12);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  }
}