/* Custom Animations and Utilities */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* Base custom styles to ensure smoothness */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Animations that are hard to do with just pure Tailwind classes */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

/* Staggered animation delays for grid items */
.stagger-1 { animation-delay: 50ms; }
.stagger-2 { animation-delay: 100ms; }
.stagger-3 { animation-delay: 150ms; }
.stagger-4 { animation-delay: 200ms; }

/* Custom Checkbox Style for Product Selection */
.checkout-checkbox {
    appearance: none;
    background-color: transparent;
    margin: 0;
    font: inherit;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #cbd5e1; /* slate-300 */
    border-radius: 0.375rem; /* rounded-md */
    display: grid;
    place-content: center;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.checkout-checkbox::before {
    content: "";
    width: 0.85em;
    height: 0.85em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: center;
    transition: 120ms transform ease-in-out;
    background-color: white;
}

.checkout-checkbox:checked {
    background-color: #25D366; /* WhatsApp Green */
    border-color: #25D366;
}

.checkout-checkbox:checked::before {
    transform: scale(1);
}

.checkout-checkbox:focus {
    outline: max(2px, 0.15em) solid rgba(37, 211, 102, 0.5);
    outline-offset: max(2px, 0.15em);
}

/* Image object fit utilities to ensure consistent sizing */
.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}