/* 
   PREMIUM E-COMMERCE STYLES
   Minimal, Elegant, Performance-focused 
*/

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #F8FAFC; /* Slate 50 */
}

/* Typography Enhancements */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
}

/* Animations */
.hero-product {
    animation: float-premium 6s ease-in-out infinite;
    filter: drop-shadow(0 20px 30px rgba(15, 23, 42, 0.15));
}

@keyframes float-premium {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Scroll Reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #F1F5F9; 
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1; 
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94A3B8; 
}

/* Form Styles & Focus Rings */
input:focus, select:focus, button:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
    border-color: #2563EB;
}

input, select {
    transition: all 0.2s ease;
}

/* Custom Radio Card Selection */
.offer-radio:checked + div,
.delivery-radio:checked + div {
    border-color: #2563EB;
    background-color: #EFF6FF; /* blue-50 */
}

.offer-radio:checked + div .check-icon,
.delivery-radio:checked + div .check-icon {
    opacity: 1;
    transform: scale(1);
    color: #2563EB;
}

.check-icon {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* FAQ Accordion */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.faq-icon {
    transition: transform 0.4s ease;
}

/* Image Hover Zoom */
.hover-zoom-container {
    overflow: hidden;
}
.hover-zoom-container img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-zoom-container:hover img {
    transform: scale(1.05);
}

/* Premium Button Hover */
.btn-premium {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4);
}