/* Modern UI - Glassmorphism & Motion */

:root {
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: blur(12px);
    --primary-glow: 0 0 20px rgba(0, 76, 218, 0.4);
}

/* Glassmorphism Utilities */
.glass-panel {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Navbar */
.navbar {
    background-color: rgba(24, 24, 27, 0.8) !important; /* Semi-transparent base */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
}

/* Pricing Cards */
.pricing-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.pricing-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

.pricing-card.selected {
    background: linear-gradient(145deg, rgba(0, 76, 218, 0.15) 0%, rgba(0, 76, 218, 0.05) 100%) !important;
    border-color: rgba(0, 76, 218, 0.3) !important;
    box-shadow: var(--primary-glow), inset 0 0 0 1px rgba(0, 76, 218, 0.2) !important;
}

/* Generator UI Panels */
.sidebar, .left-panel, .right-panel {
    background: #18181b !important; /* Ensure dark base */
}

/* Refine Sidebar & Panels if they were using flat colors */
.left-panel, .right-panel {
    background: radial-gradient(circle at top right, #1f1f23 0%, #18181b 100%) !important;
}

/* Buttons */
.blue-button, .create-btn, .ai-generate-btn, .swal2-confirm {
    background: linear-gradient(135deg, #004cda 0%, #003bb0 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 76, 218, 0.3);
    transition: all 0.3s ease;
}

.blue-button:hover, .create-btn:hover, .ai-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 76, 218, 0.5);
    filter: brightness(1.1);
}

/* Inputs & Textareas */
input, textarea, .model-selector, .dropdown-select {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px);
}

input:focus, textarea:focus {
    border-color: rgba(0, 76, 218, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(0, 76, 218, 0.2);
}

/* Animations */
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.model-card {
    animation: fadeInScale 0.5s ease-out backwards;
}

.model-card:nth-child(1) { animation-delay: 0.1s; }
.model-card:nth-child(2) { animation-delay: 0.2s; }
.model-card:nth-child(3) { animation-delay: 0.3s; }