/* Custom CSS for Customizer Page */

:root {
    --color-accent-gold: #D4AF37;
    --color-accent-gold-light: #E5C158;
}

/* Texture Type Selector */
.texture-type-option {
    transition: all 0.3s ease;
    cursor: pointer;
}

.texture-type-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.texture-type-option:active {
    transform: translateY(0);
}

/* Buttons */
.btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-accent-gold text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none;
    background: linear-gradient(135deg, #D4AF37 0%, #E5C158 100%);
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #C19A2B 0%, #D4AF37 100%);
}

.btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-white text-gray-900 font-semibold rounded-lg border-2 border-gray-300 hover:border-accent-gold hover:text-accent-gold transition-all duration-300;
}

/* Spinner */
.spinner {
    @apply w-12 h-12 border-4 border-white border-t-transparent rounded-full;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Image Container */
#original-image-container,
#result-container {
    position: relative;
}

#original-image,
#result-image {
    display: block;
    margin: 0 auto;
}

/* Upload Area */
input[type="file"] {
    cursor: pointer;
}

/* Drag and Drop */
.drag-over {
    @apply border-accent-gold bg-accent-gold/5;
}

/* Responsive */
@media (max-width: 640px) {
    #original-image,
    #result-image {
        max-height: 60vh;
    }
}

/* Fade in animation */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Image Modal */
#image-modal {
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease-in;
}

#image-modal img {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

#image-modal button {
    backdrop-filter: blur(10px);
}

/* Image hover buttons */
.group:hover .opacity-0 {
    animation: fadeIn 0.2s ease-in forwards;
}