/* assets/css/style.css */

:root {
    /* Brand Theme: Premium Mint Hydration */
    --brand-mango: #0EA5E9;       /* Vibrant Sky Blue */
    --brand-sunset: #0369A1;      /* Deep Slate Blue */
    --brand-amber: #38BDF8;       /* Bright Cyan Accent */
    --brand-light: #F0F9FF;       /* Crisp Ice Light Background */
    --brand-peach: #E0F2FE;       /* Soft Light Ice Blue */
    --rich-charcoal: #0F172A;     /* Slate Dark Text */
    
    /* Green brand theme colors kept in sync with Tailwind colors defined in header */
    --brand-green: #0D9488;       /* Teal-600 */
    --brand-darkgreen: #115E59;   /* Teal-800 */
    --brand-lightgreen: #CCFBF1;  /* Teal-100 */
    --brand-emerald: #06B6D4;     /* Cyan-500 */
    --brand-cream: #F8FAFC;       /* Slate-50 */
    
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-premium: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Styles */
body {
    overflow-x: hidden;
    position: relative;
    background-color: var(--brand-cream);
    color: var(--rich-charcoal);
    font-family: 'Inter', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* Elegant Dot Grid Background */
.grid-bg {
    position: absolute;
    inset: 0;
    z-index: -10;
    background-image: radial-gradient(rgba(13, 148, 136, 0.05) 1.2px, transparent 1.2px);
    background-size: 28px 28px;
    pointer-events: none;
}

/* Custom Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(0.5deg); }
}

@keyframes pulse-slow {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.08); }
}

.animate-float {
    animation: float 7s ease-in-out infinite;
}

.animate-pulse-slow {
    animation: pulse-slow 10s ease-in-out infinite;
}

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

/* Premium Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.08);
    border-radius: 99px;
    border: 2px solid var(--brand-cream);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-green);
}

/* Stripe-like Glass Card System */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 
        0 10px 30px -10px rgba(15, 23, 42, 0.04),
        0 1px 3px rgba(15, 23, 42, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: var(--transition-premium);
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(13, 148, 136, 0.2);
    transform: translateY(-4px);
    box-shadow: 
        0 20px 40px -15px rgba(15, 23, 42, 0.08),
        0 1px 3px rgba(15, 23, 42, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Dark Glass Cards */
.dark-glass-card {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 20px 45px -15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: var(--transition-premium);
}

.dark-glass-card:hover {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(6, 182, 212, 0.3);
    transform: translateY(-2px);
    box-shadow: 
        0 30px 60px -20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Premium Inputs */
.custom-input {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(15, 23, 42, 0.08);
    transition: var(--transition-premium);
    box-shadow: inset 0 1.5px 2px rgba(15, 23, 42, 0.01);
}

.custom-input:focus {
    background: #ffffff;
    border-color: var(--brand-green);
    box-shadow: 
        0 0 0 4px rgba(13, 148, 136, 0.1),
        inset 0 1.5px 2px rgba(15, 23, 42, 0.01);
    outline: none;
}

/* Category Pill Custom */
.category-pill {
    transition: var(--transition-premium);
}

.category-pill:hover {
    transform: scale(1.02);
}

/* Product Card Custom */
.product-card {
    transition: var(--transition-premium);
}

.product-card:hover {
    transform: translateY(-6px);
}

/* Gradient text utility */
.text-gradient {
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-darkgreen) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Image zoom on hover */
.img-zoom {
    transition: transform 0.6s var(--ease-premium);
}
.img-zoom:hover {
    transform: scale(1.04);
}

/* Hero Carousel Styling */
.hero-carousel-container {
    position: relative;
    width: 100%;
    border-radius: 2.5rem;
    overflow: hidden;
    border: 1px solid rgb(30, 41, 59); /* border-slate-800 */
    box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.04), 0 0 1px 1px rgba(15, 23, 42, 0.02); /* shadow-premium */
}

.carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
    .carousel-slide {
        flex-direction: row;
    }
}

.carousel-slide.active {
    position: relative;
    opacity: 1;
    z-index: 10;
    pointer-events: auto;
}

/* Dots indicators */
.carousel-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 30;
}

.carousel-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot.active {
    background-color: #06B6D4; /* brand-emerald */
    width: 1.5rem;
    border-color: #06B6D4;
}