/* assets/styles/glassmorphism.css */

/* 
  Glassmorphism Utility Class 
  Used for: Navbar, Modal, Cards
*/
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* Specific Component Overrides */
.glass-bar {
    /* Stronger blur for bars */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.glass-card {
    /* Softer border for cards */
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

/* Main Content Container (Glass Plate) */
.glass-container {
    background: var(--glass-container-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    /* Thinner border */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    border-radius: 16px;

    /* Layout */
    margin: 0 var(--space-md);
    padding: var(--space-lg);
    width: 100%;
    /* max-width is handled by .shop-container usually, but we enforce it here too just in case */
    max-width: 900px;
}

@media (max-width: 768px) {
    .glass-container {
        width: calc(100% - 20px);
        /* 10px margin on each side */
        margin: 0 10px;
        padding: var(--space-md);
    }
}