/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap');

/* Custom animations and styles */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes fadeInLeft {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Base styles */
body {
    font-family: 'Poppins', sans-serif;
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
}

/* Custom color variables */
:root {
    --luxury-gold: #C6A87D;
    --luxury-dark: #1A1A1A;
    --luxury-cream: #F5F5F2;
}

/* Hero animations */
.hero-badge {
    animation: fadeInDown 1s ease-out forwards;
    opacity: 0;
}

.hero-title {
    animation: fadeInLeft 1s ease-out 0.3s forwards;
    opacity: 0;
}

.hero-text {
    animation: fadeInLeft 1s ease-out 0.6s forwards;
    opacity: 0;
}

.hero-buttons {
    animation: fadeInLeft 1s ease-out 0.9s forwards;
    opacity: 0;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll line animation */
.scroll-line {
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0% {
        transform: scaleY(0);
        transform-origin: top;
        opacity: 1;
    }
    50% {
        transform: scaleY(1);
        transform-origin: top;
        opacity: 1;
    }
    51% {
        transform: scaleY(1);
        transform-origin: bottom;
        opacity: 1;
    }
    100% {
        transform: scaleY(0);
        transform-origin: bottom;
        opacity: 0;
    }
}

/* Enhance button transitions */
.group:hover .transform {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Text selection color */
::selection {
    background: var(--luxury-gold);
    color: var(--luxury-dark);
}

/* Product card hover effects */
.product-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Custom button styles */
.btn-luxury {
    background-color: var(--luxury-gold);
    color: var(--luxury-dark);
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    font-weight: 500;
}

.btn-luxury:hover {
    background-color: var(--luxury-dark);
    color: var(--luxury-gold);
}

/* Cart animations */
#cartSidebar {
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}

.cart-item-enter {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scrollbar styling for cart */
#cartItems::-webkit-scrollbar {
    width: 4px;
}

#cartItems::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#cartItems::-webkit-scrollbar-thumb {
    background: #C6A87D;
    border-radius: 2px;
}

#cartItems::-webkit-scrollbar-thumb:hover {
    background: #b39161;
}

/* Checkout form animations */
#checkoutForm {
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}

/* Form input focus styles */
.focus\:ring-2:focus {
    box-shadow: 0 0 0 2px rgba(198, 168, 125, 0.2);
}

/* Error state for form inputs */
.input-error {
    border-color: #EF4444;
}

.input-error:focus {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}