/* Glassmorphism utilities */

.glass {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(13, 110, 253, 0.10);
}

.glass-strong {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(13, 110, 253, 0.14);
}

.glass-tint {
    background: linear-gradient(135deg, rgba(13,110,253,0.08), rgba(32,168,216,0.06));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(13,110,253,0.14);
    border-radius: 16px;
}

.glass-dark {
    background: rgba(8, 32, 64, 0.55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    color: #f4f8ff;
}

/* Apply to specific components */
.glass-navbar {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border-bottom: 1px solid rgba(13,110,253, 0.12);
    box-shadow: 0 4px 20px rgba(13, 110, 253, 0.06);
}

.glass-offcanvas {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

@media (max-width: 991.98px) {
    .glass-navbar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

.glass-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(13, 110, 253, 0.10);
    padding: 1.6rem;
}

.glass-hero-overlay {
    background: linear-gradient(135deg, rgba(13,110,253,.85), rgba(32,168,216,.65));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.glass-cta-band {
    background: linear-gradient(135deg, rgba(13,110,253,0.12), rgba(32,168,216,0.10));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(13,110,253,0.18);
    border-radius: 22px;
}

/* Decorative blob backgrounds */
.bg-blobs { position: relative; isolation: isolate; }
.bg-blobs::before, .bg-blobs::after {
    content: ''; position: absolute; z-index: -1;
    border-radius: 50%;
    filter: blur(40px);
    opacity: .55;
}
.bg-blobs::before {
    width: 280px; height: 280px;
    background: radial-gradient(circle at 30% 30%, #20a8d8, transparent 70%);
    top: -80px; left: -100px;
}
.bg-blobs::after {
    width: 320px; height: 320px;
    background: radial-gradient(circle at 70% 70%, #0d6efd, transparent 70%);
    bottom: -120px; right: -120px;
    opacity: .35;
}

/* Glass for dropdown */
.dropdown-menu.glass {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Glass tag/chip */
.chip-glass {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(13,110,253,0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: .85rem; font-weight: 500;
    color: var(--ifd-primary-dark);
}

/* Backdrop fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .glass, .glass-card, .glass-strong { background: rgba(255,255,255,0.92); }
    .glass-navbar { background: rgba(255,255,255,0.97); }
    .glass-offcanvas { background: #ffffff; }
    .glass-dark { background: rgba(8,32,64,0.92); }
}