/* Glassmorphism Theme - Clean Gradient Background with Glass Effects */

/* Apply subtle gradient background to all pages except account page */
body:not(.account-page):not(:has(.hero[style*="background"])) {
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%) !important;
    background-attachment: fixed !important;
}

/* Override for collection pages but NOT account page */
body:not(.account-page) {
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
    background-attachment: fixed;
}

/* Account page keeps its own background image - don't override */
body.account-page {
    /* Let inline styles in account.html handle the background */
}

/* Glassmorphism for all collection header content */
.collection-header {
    background: transparent !important;
}

.collection-header-content {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 0 60px rgba(255, 255, 255, 0.05) !important;
}

/* Glassmorphism for product items on collection pages */
.product-item {
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 0 60px rgba(255, 255, 255, 0.05) !important;
}

.product-item:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), inset 0 0 80px rgba(255, 255, 255, 0.1) !important;
}

/* Text colors for glassmorphism theme */
.collection-title,
.product-name {
    color: #000000 !important;
}

.collection-description,
.breadcrumb {
    color: #333333 !important;
}

.breadcrumb a {
    color: #000000 !important;
}

.breadcrumb a:hover {
    color: #666666 !important;
}

.product-price {
    color: #000000 !important;
}

/* Image placeholders */
.image-placeholder {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2)) !important;
    color: #666666 !important;
}

/* Gallery background */
.collection-gallery {
    background: transparent !important;
}

/* Back button glassmorphism */
.back-to-collections {
    background: transparent !important;
}

.back-btn {
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: #000000 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), inset 0 0 40px rgba(255, 255, 255, 0.05) !important;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), inset 0 0 60px rgba(255, 255, 255, 0.1) !important;
}

/* Vote page and other pages glassmorphism */
.page-section,
.vote-container,
.creators-container,
.profile-container {
    background: transparent !important;
}

/* Cards and containers */
.vote-card,
.creator-card,
.profile-card,
.form-container {
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 0 60px rgba(255, 255, 255, 0.05) !important;
}

.vote-card:hover,
.creator-card:hover,
.profile-card:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), inset 0 0 80px rgba(255, 255, 255, 0.1) !important;
}

/* Text colors for cards */
.vote-card h3,
.creator-card h3,
.profile-card h3,
.form-container h2,
.page-section h2 {
    color: #000000 !important;
}

.vote-card p,
.creator-card p,
.profile-card p,
.form-container p {
    color: #333333 !important;
}

/* Account page glassmorphism - keep existing styles for account page */
.auth-form {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 0 60px rgba(255, 255, 255, 0.05) !important;
}

.auth-form h2,
.auth-form label {
    color: #ffffff !important;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

.auth-form input::placeholder,
.auth-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Tab buttons */
.tab-button {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

.tab-button.active {
    background: rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}