/* Hyvä-compatible ApplyCoupon styles using Tailwind CSS utilities */

/* Custom animations for modal */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal backdrop */
.mt-coupon-modal-backdrop {
    animation: fadeIn 0.3s ease-out;
}

/* Modal content */
.mt-coupon-modal-content {
    animation: slideIn 0.3s ease-out;
}

/* Success state colors */
.mt-coupon-success {
    @apply bg-green-50 border-green-200 text-green-800;
}

.mt-coupon-success-icon {
    @apply bg-green-100 text-green-600;
}

/* Error state colors */
.mt-coupon-error {
    @apply bg-red-50 border-red-200 text-red-800;
}

.mt-coupon-error-icon {
    @apply bg-red-100 text-red-600;
}

/* Button hover effects */
.mt-coupon-btn-primary {
    @apply bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500;
    transition: background-color 0.2s ease-in-out;
}

.mt-coupon-btn-secondary {
    @apply bg-white hover:bg-gray-50 focus:ring-indigo-500;
    transition: background-color 0.2s ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .mt-coupon-modal-content {
        @apply mx-4 my-8;
    }
}

/* Dark mode support (if Hyvä theme supports it) */
@media (prefers-color-scheme: dark) {
    .mt-coupon-modal-content {
        @apply bg-gray-800 text-white;
    }
    
    .mt-coupon-btn-secondary {
        @apply bg-gray-700 hover:bg-gray-600 text-white;
    }
}

/* Focus states for accessibility */
.mt-coupon-btn-primary:focus,
.mt-coupon-btn-secondary:focus {
    @apply outline-none ring-2 ring-offset-2;
}

/* Smooth transitions for all interactive elements */
.mt-coupon-transition {
    transition: all 0.2s ease-in-out;
}

/* Custom scrollbar for modal content if needed */
.mt-coupon-modal-scroll {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
}

.mt-coupon-modal-scroll::-webkit-scrollbar {
    width: 6px;
}

.mt-coupon-modal-scroll::-webkit-scrollbar-track {
    background: #f7fafc;
}

.mt-coupon-modal-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.mt-coupon-modal-scroll::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}