@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom scrollbar styles */

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}


/* Modern category scrollbar */

.category-scrollbar::-webkit-scrollbar {
    height: 6px;
}

.category-scrollbar::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.category-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgb(59 130 246 / 0.4), rgb(37 99 235 / 0.4));
    border-radius: 10px;
    transition: background 0.3s ease;
}

.category-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, rgb(59 130 246 / 0.6), rgb(37 99 235 / 0.6));
}

.dark .category-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgb(59 130 246 / 0.5), rgb(37 99 235 / 0.5));
}

.dark .category-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, rgb(59 130 246 / 0.7), rgb(37 99 235 / 0.7));
}


/* Firefox scrollbar */

.category-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgb(59 130 246 / 0.4) transparent;
}

.dark .category-scrollbar {
    scrollbar-color: rgb(59 130 246 / 0.5) transparent;
}


/* Modern preset scrollbar - subtle and elegant */

.preset-scrollbar::-webkit-scrollbar {
    height: 4px;
}

.preset-scrollbar::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.preset-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 10px;
    transition: background 0.2s ease;
}

.preset-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

.dark .preset-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.2);
}

.dark .preset-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.4);
}


/* Firefox preset scrollbar */

.preset-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

.dark .preset-scrollbar {
    scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
}


/* Drag and drop animations */

@keyframes drag-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    }
}

.dragging-item {
    animation: drag-pulse 1.5s ease-in-out infinite;
}


/* Smooth reorder transition */

.reorder-transition {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Grabbing cursor styles */

[draggable="true"] {
    cursor: grab;
    touch-action: none;
}

[draggable="true"]:active {
    cursor: grabbing;
}


/* Drop zone glow effect */

@keyframes drop-zone-glow {
    0%,
    100% {
        opacity: 0.8;
        transform: scaleX(0.95);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

.drop-zone-active {
    animation: drop-zone-glow 0.8s ease-in-out infinite;
}


/* Safe area support for Android/iOS notches */

@supports (padding: max(0px)) {
    .safe-area-top {
        padding-top: max(1rem, env(safe-area-inset-top));
    }
    .safe-area-bottom {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
    .pt-safe {
        padding-top: max(1rem, env(safe-area-inset-top));
    }
    .pb-safe {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}


/* Fallback for browsers without safe-area support */

@supports not (padding: max(0px)) {
    .safe-area-top {
        padding-top: 1rem;
    }
    .safe-area-bottom {
        padding-bottom: 1rem;
    }
    .pt-safe {
        padding-top: 1rem;
    }
    .pb-safe {
        padding-bottom: 1rem;
    }
}


/* Shimmer animation for loading states */

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.animate-shimmer {
    animation: shimmer 1.5s ease-in-out infinite;
    background-size: 200% 100%;
}


/* Bounce in animation */

@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(20px);
    }
    50% {
        opacity: 1;
        transform: scale(1.05) translateY(-5px);
    }
    70% {
        transform: scale(0.95) translateY(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-bounce-in {
    animation: bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}


/* ===================================
   MODAL ANIMATIONS - Consistent styling
   =================================== */

/* Modal fade in - for backdrop */
@keyframes modal-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-modal-fade-in {
    animation: modal-fade-in 0.2s ease-out forwards;
}

/* Modal scale in - for centered modals */
@keyframes modal-scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-modal-scale-in {
    animation: modal-scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Modal slide up - for bottom sheet modals */
@keyframes modal-slide-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-modal-slide-up {
    animation: modal-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* General fade in animation */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* Fade in with upward movement */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.3s ease-out forwards;
}

/* Slide down animation for banners */
@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-down {
    animation: slide-down 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}