/**
 * Glassmorphism effects for KUSD Theme
 */

/* Base glassmorphism effect */
.glass {
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Glass card variant */
.card.glass {
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Glass header variant */
.site-header.glass {
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Glass footer variant */
.site-footer.glass {
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Glass button variant */
.btn.glass {
    background: rgba(0, 255, 65, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 255, 65, 0.3);
    color: var(--color-text-primary);
}

.btn.glass:hover {
    background: rgba(0, 255, 65, 0.3);
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.5);
}

/* Glass form elements */
input.glass,
textarea.glass,
select.glass {
    background: rgba(30, 30, 30, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
}

/* Glass navigation menu */
.main-navigation.glass ul {
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Glass sidebar */
.widget-area.glass {
    background: rgba(18, 18, 18, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Glass modal */
.modal-content.glass {
    background: rgba(18, 18, 18, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

/* Glass tooltip */
.tooltip.glass {
    background: rgba(18, 18, 18, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Glass dropdown menu */
.dropdown-menu.glass {
    background: rgba(18, 18, 18, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Glass table */
table.glass {
    background: rgba(18, 18, 18, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

table.glass th {
    background: rgba(30, 30, 30, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

table.glass td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Glass progress bar */
.progress-bar.glass {
    background: rgba(18, 18, 18, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-bar.glass .progress {
    background: rgba(0, 255, 65, 0.7);
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .glass,
    .card.glass,
    .site-header.glass,
    .site-footer.glass,
    .btn.glass,
    input.glass,
    textarea.glass,
    select.glass,
    .main-navigation.glass ul,
    .widget-area.glass,
    .modal-content.glass,
    .tooltip.glass,
    .dropdown-menu.glass,
    table.glass,
    .progress-bar.glass {
        background: rgba(18, 18, 18, 0.9);
    }
}