/* Gradient Definitions for Screenshot Beautifier - Elegant Collection */

/* Aurora Gradient */
.gradient-aurora {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-aurora-preview {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Sunset Gradient */
.gradient-sunset {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.gradient-sunset-preview {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

/* Ocean Gradient */
.gradient-ocean {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.gradient-ocean-preview {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

/* Forest Gradient */
.gradient-forest {
    background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
}

.gradient-forest-preview {
    background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
}

/* Lavender Gradient */
.gradient-lavender {
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
}

.gradient-lavender-preview {
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
}

/* Peach Gradient */
.gradient-peach {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.gradient-peach-preview {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

/* Midnight Gradient */
.gradient-midnight {
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
}

.gradient-midnight-preview {
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
}

/* Rose Gradient */
.gradient-rose {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.gradient-rose-preview {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

/* Mint Gradient */
.gradient-mint {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}

.gradient-mint-preview {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}

/* Gold Gradient */
.gradient-gold {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 50%, #ff9a9e 100%);
}

.gradient-gold-preview {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 50%, #ff9a9e 100%);
}

/* Cosmic Gradient */
.gradient-cosmic {
    background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
}

.gradient-cosmic-preview {
    background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
}

/* Elegant Gradient */
.gradient-elegant {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.gradient-elegant-preview {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/* NEW GRADIENTS - Professional, Elegant, and Modern */

/* Obsidian Gradient - Dark */
.gradient-obsidian {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
}

.gradient-obsidian-preview {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
}

/* Velvet Gradient - Dark */
.gradient-velvet {
    background: linear-gradient(135deg, #1e1e2e 0%, #2d1b69 70%, #4c1d95 100%);
}

.gradient-velvet-preview {
    background: linear-gradient(135deg, #1e1e2e 0%, #2d1b69 70%, #4c1d95 100%);
}

/* Midnight Blue Gradient - Dark */
.gradient-midnight_blue {
    background: linear-gradient(135deg, #0f1419 0%, #1e293b 60%, #334155 100%);
}

.gradient-midnight_blue-preview {
    background: linear-gradient(135deg, #0f1419 0%, #1e293b 60%, #334155 100%);
}

/* Charcoal Gradient - Dark */
.gradient-charcoal {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #404040 100%);
}

.gradient-charcoal-preview {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #404040 100%);
}

/* Deep Purple Gradient - Dark */
.gradient-deep_purple {
    background: linear-gradient(135deg, #1a0b2e 0%, #2d1b69 60%, #4c1d95 100%);
}

.gradient-deep_purple-preview {
    background: linear-gradient(135deg, #1a0b2e 0%, #2d1b69 60%, #4c1d95 100%);
}

/* Platinum Gradient - Light Professional */
.gradient-platinum {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
}

.gradient-platinum-preview {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
}

/* Sage Gradient - Light Professional */
.gradient-sage {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #bbf7d0 100%);
}

.gradient-sage-preview {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #bbf7d0 100%);
}

/* Azure Gradient - Light Professional */
.gradient-azure {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
}

.gradient-azure-preview {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
}

/* Coral Gradient - Light Professional */
.gradient-coral {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 50%, #fca5a5 100%);
}

.gradient-coral-preview {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 50%, #fca5a5 100%);
}

/* Amber Gradient - Light Professional */
.gradient-amber {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
}

.gradient-amber-preview {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
}

/* Slate Gradient - Light Professional */
.gradient-slate {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
}

.gradient-slate-preview {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
}

/* Emerald Gradient - Light Professional */
.gradient-emerald {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%);
}

.gradient-emerald-preview {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%);
}

/* Canvas Gradient Styles - Used for canvas rendering */
.canvas-gradient-aurora {
    --gradient-start: #667eea;
    --gradient-end: #764ba2;
}

.canvas-gradient-sunset {
    --gradient-start: #fa709a;
    --gradient-end: #fee140;
}

.canvas-gradient-ocean {
    --gradient-start: #a8edea;
    --gradient-end: #fed6e3;
}

.canvas-gradient-forest {
    --gradient-start: #56ab2f;
    --gradient-end: #a8e6cf;
}

.canvas-gradient-lavender {
    --gradient-start: #e0c3fc;
    --gradient-end: #8ec5fc;
}

.canvas-gradient-peach {
    --gradient-start: #ffecd2;
    --gradient-end: #fcb69f;
}

.canvas-gradient-midnight {
    --gradient-start: #2c3e50;
    --gradient-end: #3498db;
}

.canvas-gradient-rose {
    --gradient-start: #ff9a9e;
    --gradient-end: #fecfef;
}

.canvas-gradient-mint {
    --gradient-start: #84fab0;
    --gradient-end: #8fd3f4;
}

.canvas-gradient-gold {
    --gradient-start: #ffecd2;
    --gradient-mid: #fcb69f;
    --gradient-end: #ff9a9e;
}

.canvas-gradient-cosmic {
    --gradient-start: #ff6b6b;
    --gradient-mid: #4ecdc4;
    --gradient-end: #45b7d1;
}

.canvas-gradient-elegant {
    --gradient-start: #f093fb;
    --gradient-end: #f5576c;
}

/* NEW Canvas Gradient Variables */
.canvas-gradient-obsidian {
    --gradient-start: #0f0f23;
    --gradient-mid: #1a1a2e;
    --gradient-end: #16213e;
}

.canvas-gradient-velvet {
    --gradient-start: #1e1e2e;
    --gradient-mid: #2d1b69;
    --gradient-end: #4c1d95;
}

.canvas-gradient-midnight_blue {
    --gradient-start: #0f1419;
    --gradient-mid: #1e293b;
    --gradient-end: #334155;
}

.canvas-gradient-charcoal {
    --gradient-start: #1a1a1a;
    --gradient-mid: #2d2d2d;
    --gradient-end: #404040;
}

.canvas-gradient-deep_purple {
    --gradient-start: #1a0b2e;
    --gradient-mid: #2d1b69;
    --gradient-end: #4c1d95;
}

.canvas-gradient-platinum {
    --gradient-start: #f8fafc;
    --gradient-mid: #e2e8f0;
    --gradient-end: #cbd5e1;
}

.canvas-gradient-sage {
    --gradient-start: #f0fdf4;
    --gradient-mid: #dcfce7;
    --gradient-end: #bbf7d0;
}

.canvas-gradient-azure {
    --gradient-start: #eff6ff;
    --gradient-mid: #dbeafe;
    --gradient-end: #bfdbfe;
}

.canvas-gradient-coral {
    --gradient-start: #fef2f2;
    --gradient-mid: #fecaca;
    --gradient-end: #fca5a5;
}

.canvas-gradient-amber {
    --gradient-start: #fffbeb;
    --gradient-mid: #fef3c7;
    --gradient-end: #fde68a;
}

.canvas-gradient-slate {
    --gradient-start: #f8fafc;
    --gradient-mid: #f1f5f9;
    --gradient-end: #e2e8f0;
}

.canvas-gradient-emerald {
    --gradient-start: #ecfdf5;
    --gradient-mid: #d1fae5;
    --gradient-end: #a7f3d0;
}

/* Enhanced styling for gradient options */
.gradient-option {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.gradient-option:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.gradient-option.active {
    transform: scale(1.1);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 8px 25px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.9);
}

.gradient-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gradient-option:hover::before {
    opacity: 1;
}

/* Animation for gradient transitions */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.gradient-animated {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

/* Gradient options container */
.gradient-options {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
    justify-content: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 900px;
    margin: 0 auto;
}

/* Responsive design for gradient options */
@media (max-width: 768px) {
    .gradient-option {
        width: 50px;
        height: 50px;
        border-radius: 10px;
    }
    
    .gradient-options {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 8px;
        padding: 15px;
        max-width: 400px;
    }
}

@media (max-width: 480px) {
    .gradient-option {
        width: 40px;
        height: 40px;
        border-radius: 8px;
    }
    
    .gradient-options {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(6, 1fr);
        gap: 6px;
        padding: 12px;
        max-width: 300px;
    }
}