/* style.css */
body {
    background-color: #f8fafc;
    background-image: 
        radial-gradient(at 40% 20%, hsla(220,100%,94%,1) 0px, transparent 50%),
        radial-gradient(at 80% 0%, hsla(189,100%,96%,1) 0px, transparent 50%),
        radial-gradient(at 0% 50%, hsla(280,100%,98%,1) 0px, transparent 50%);
    background-attachment: fixed;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent; 
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}

/* Glassmorphism panels */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05);
}

/* Image selection hover effects */
.image-option {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}
.image-option:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -10px rgba(59, 130, 246, 0.3);
}
.image-option.selected {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
    transform: scale(0.98);
}

/* Checkmark animation */
.checkmark {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease-out;
}
.image-option.selected .checkmark {
    opacity: 1;
    transform: scale(1);
}

/* Fade transitions for wizard steps */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    transform: translateY(10px);
}

/* Result Card specific styles to ensure good JPG export */
#result-card {
    background: white; /* solid background for export */
}