@import "tailwindcss";

@layer base {
    :root {
        --background-overlay: rgba(0, 0, 0, 0.5);
        --modal-bg: #e5eaee;
        --color-one: #1d439a;
        --color-two: #444;
        --color-three: #d9534f;
        --color-four: #000000;
        --border-color: #ddd;
        --close-btn-hover: #ff4444;
        --box-shadow: rgba(0, 0, 0, 0.2);
    }

    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    input:focus {
        outline: none;
        border-color: #111827;
    }
}

@layer components {

    /* --- ANIMATIONS --- */
    @keyframes subtlePulse {
        0% {
            transform: scale(1);
            opacity: 0.8;
        }

        50% {
            transform: scale(1.1);
            opacity: 1;
        }

        100% {
            transform: scale(1);
            opacity: 0.8;
        }
    }

    @keyframes progress-animation {
        from {
            background-position: 1rem 0;
        }

        to {
            background-position: 0 0;
        }
    }

    .hotspot-pulse {
        animation: subtlePulse 2s infinite ease-in-out;
    }

    /* --- COMMON UI --- */
    .tag-pill {
        @apply px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-wider bg-gray-100 text-gray-600 transition-all hover:bg-black hover:text-white;
    }

    .card-height-fix {
        @apply flex flex-col h-full;
    }

    .card-content-fill {
        @apply flex-grow;
    }

    /* --- HEADER & NAVIGATION --- */
    .nav-link-underline {
        @apply relative;
    }

    .nav-link-underline::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 1px;
        background-color: currentColor;
        transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nav-link-underline:hover::after {
        @apply w-full;
    }

    .dropdown-animate {
        @apply invisible opacity-0 translate-y-[15px] shadow-2xl;
        transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .group:hover .dropdown-animate {
        @apply translate-y-0 opacity-100 visible;
    }

    #sidebar,
    #cart-drawer {
        transition: all 800ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    #overlay,
    #search-overlay {
        transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* --- CART & UPSUELS --- */
    .cart-progress-bar {
        @apply bg-gray-200 rounded-full h-[6px] relative overflow-hidden;
    }

    .cart-progress-fill {
        @apply bg-[#1a2228] h-full rounded-full relative w-[85%] transition-[width] duration-1000 ease-out;
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-size: 1rem 1rem;
        animation: progress-animation 1s linear infinite;
    }

    .upsell-dots {
        @apply flex justify-center gap-2 mt-[15px];
    }

    .upsell-dot {
        @apply w-[10px] h-[10px] rounded-full border border-[#c4c4c4] cursor-pointer transition-all duration-300;
    }

    .upsell-dot.active {
        @apply bg-[#1a2228] border-[#1a2228];
    }

    /* --- MODALS --- */
    .under-dev-modal-section .ud-modal {
        @apply fixed inset-0 bg-black/50 z-[999999999] opacity-0 invisible transition-opacity duration-[250ms] ease-out pointer-events-none;
        display: none;
    }

    .under-dev-modal-section .ud-modal.show {
        @apply block opacity-100 visible pointer-events-auto cursor-pointer;
    }

    .under-dev-modal-section .ud-modal-content {
        @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-[60%] scale-95 bg-[#e5eaee] p-5 rounded-xl max-w-[75%] w-[90%] shadow-2xl opacity-0 transition-all duration-[250ms] ease-out;
    }

    .under-dev-modal-section .ud-modal.show .ud-modal-content {
        @apply -translate-y-1/2 scale-100 opacity-100;
    }

    /* --- PRODUCT LISTING & FILTERS --- */
    .filter-collapse {
        @apply transition-all duration-300 ease-out overflow-hidden max-h-[500px];
    }

    .filter-collapse.collapsed {
        @apply max-h-0 opacity-0;
    }

    .product-overlay {
        @apply transition-all duration-300 ease-in-out opacity-0 translate-y-[10px] group-hover:opacity-100 group-hover:translate-y-0 shadow-lg;
    }

    .product-card:hover .product-overlay {
        @apply opacity-100 translate-y-0;
    }

    .sort-dropdown {
        @apply transition-all duration-200 ease-in-out opacity-0 invisible translate-y-2;
    }

    .sort-dropdown.active {
        @apply opacity-100 visible translate-y-0 shadow-xl;
    }

    /* --- PRODUCT DETAILS (PDP) --- */
    .pdp-main-bottle {
        filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
    }

    .pdp-thumb {
        @apply border transition-all;
    }

    /* --- CHECKOUT & FORMS --- */
    .checkout-container {
        @apply max-w-[1200px] mx-auto;
    }

    .form-block {
        @apply border border-[#c4c4c4] p-[30px] rounded-[2px] bg-white mb-[30px];
    }

    .input-group label {
        @apply block text-[13px] font-bold text-black mb-[8px];
    }

    .input-group input,
    .input-group select,
    .input-group textarea {
        @apply w-full h-[48px] border border-[#c4c4c4] rounded-[10px] px-[15px] text-[14px] outline-none transition-all focus:border-black;
    }

    .input-group textarea {
        @apply h-[100px] pt-[15px];
    }

    .radio-group {
        @apply flex items-center gap-[15px] p-[15px] border border-[#c4c4c4] rounded-[10px] cursor-pointer hover:border-black transition-all mb-[10px];
    }

    /* --- ACCOUNT & DASHBOARD --- */
    .sidebar-item {
        @apply flex items-center gap-[12px] p-[15px_20px] text-[14px] font-medium text-[#555] border-b border-[#f1f1f1] transition-all cursor-pointer hover:text-black hover:bg-[#f9f9f9];
    }

    .sidebar-item.active {
        @apply text-black font-bold bg-[#f3f4f6] border-r-[3px] border-black;
    }

    .dashboard-card {
        @apply border border-[#c4c4c4] p-[25px] rounded-[2px] bg-white flex flex-col gap-[10px] transition-all hover:-translate-y-[5px];
    }

    /* --- FORM GROUPS (Legacy Support) --- */
    .form-group label {
        @apply block text-[13px] font-bold text-black mb-[8px];
    }

    .form-group input {
        @apply w-full h-[48px] border border-[#c4c4c4] rounded-[10px] px-[15px] text-[14px] outline-none transition-all focus:border-black;
    }

    .section-content {
        @apply hidden;
    }

    .section-content.active {
        @apply block;
    }

    /* --- MODALS --- */
    .modal-overlay {
        @apply fixed inset-0 bg-black/50 backdrop-blur-[4px] hidden items-center justify-center z-[9999] p-[20px];
    }

    .modal-overlay.active {
        @apply flex;
    }

    .modal-content {
        @apply bg-white w-full max-w-[600px] max-h-[90vh] overflow-y-auto rounded-[4px] relative p-[30px] shadow-2xl;
    }

    .modal-confirm {
        @apply max-w-[400px] text-center;
    }

    /* --- ANIMATIONS --- */
    .floating {
        animation: floating-anim 4s ease-in-out infinite;
    }

    .bottle-float {
        animation: float-404 6s ease-in-out infinite;
    }

    /* --- TOAST NOTIFICATIONS --- */
    #toast-container {
        @apply space-y-[10px] perspective-[1000px];
    }

    .toast-item {
        @apply relative opacity-0 translate-x-full;
        transition: all 500ms cubic-bezier(0.16, 1, 0.3, 1);
        transform-origin: center right;
    }

    /* Active state for interactive buttons */
    .wishlist-btn.active {
        @apply bg-red-50 text-red-500 border-red-100;
    }

    .compare-btn.active {
        @apply bg-blue-50 text-blue-500 border-blue-100;
    }
}

@keyframes floating-anim {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes float-404 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@layer utilities {
    .error-404-bg {
        background: radial-gradient(circle at center, #1a2228 0%, #0b1013 100%);
    }

    .text-glow {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    }
}

@layer components {

    .wishlist-container,
    .cart-container,
    .contact-container,
    .about-container,
    .compare-container,
    .collections-container,
    .register-container,
    .auth-container {
        @apply max-w-[1200px] mx-auto;
    }

    .collection-card {
        @apply transition-all duration-300 ease-in-out cursor-pointer hover:-translate-y-[5px];
    }

    .collection-image-wrapper {
        @apply aspect-[16/10] overflow-hidden rounded-lg mb-5;
    }

    .collection-image-wrapper img {
        @apply w-full h-full object-cover transition-transform duration-500 ease-in-out;
    }

    .collection-card:hover img {
        @apply scale-105 shadow-xl;
    }

    .item-count-btn {
        @apply inline-flex items-center justify-center bg-[#111827] text-white text-[12px] font-extrabold px-5 py-3 rounded-full pointer-events-none tracking-wider uppercase;
    }

    .quantity-stepper {
        @apply inline-flex items-center border border-[#c4c4c4] rounded bg-white overflow-hidden;
    }

    .quantity-stepper button {
        @apply w-[35px] h-[35px] flex items-center justify-center text-sm text-[#111827] transition-all hover:bg-gray-100;
    }

    .quantity-stepper input {
        @apply w-[40px] h-[35px] text-center text-[13px] font-semibold border-x border-[#c4c4c4] outline-none;
    }

    /* --- TESTIMONIALS SLIDER --- */
    .testimonialsSwiper .swiper-wrapper {
        @apply flex items-stretch;
    }

    .testimonialsSwiper .swiper-slide {
        @apply !h-auto flex;
    }
}

@layer utilities {
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar,
    .custom-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .custom-scrollbar::-webkit-scrollbar {
        width: 4px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #c4c4c4;
        border-radius: 10px;
    }
}

.feature-banner {
    background-image: url('../images/home/multiple-bottles-banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}