/* Custom Styles */
.nav-link {
    @apply text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200;
}

.filter-btn {
    @apply px-4 py-2 rounded-lg border transition-all duration-200;
}

.filter-btn.active {
    @apply bg-blue-600 text-white border-blue-600;
}

.property-card {
    @apply bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300;
}

.media-preview {
    @apply relative border rounded-lg overflow-hidden;
}

.media-preview video, .media-preview img {
    @apply w-full h-48 object-cover;
}

.media-preview .remove-btn {
    @apply absolute top-2 right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs;
}

/* Modal Gallery */
.gallery-item {
    @apply rounded-lg overflow-hidden;
}

.gallery-item img, .gallery-item video {
    @apply w-full h-64 object-cover;
}

/* Responsive Design */
@media (max-width: 768px) {
    .property-card {
        @apply mx-2;
    }
    
    .gallery-item img, .gallery-item video {
        @apply h-48;
    }
}

/* Animation for modals */
.modal-enter {
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading state */
.loading {
    @apply animate-pulse bg-gray-200 rounded-lg;
}

/* Property status */
.status-badge {
    @apply absolute top-4 left-4 px-3 py-1 rounded-full text-sm font-bold text-white z-10;
}

.status-sale {
    @apply bg-green-500;
}

.status-rent {
    @apply bg-blue-500;
}

/* Price tag */
.price-tag {
    @apply text-2xl font-bold text-blue-600;
}

/* Feature list */
.feature-list li {
    @apply flex items-center space-x-2 mb-2;
}

.feature-list i {
    @apply text-green-500;
}

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

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-blue-400 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-blue-500;
}