/* Custom specific styles not covered by Tailwind config */

/* Hide scrollbar for emoji picker but allow scrolling */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Plant Card Animations */
.plant-card {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.plant-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.dark .plant-card:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

/* Water button ripple/wave effect on click */
.btn-water {
    position: relative;
    overflow: hidden;
}

.btn-water::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }
    100% {
        transform: scale(40, 40);
        opacity: 0;
    }
}

.btn-water.clicked::after {
    animation: ripple 0.6s ease-out;
}

/* Modal Transitions */
.modal-show {
    opacity: 1 !important;
}

.modal-show > div {
    transform: scale(1) !important;
    opacity: 1 !important;
}