/* Custom CSS for Apartmani Bozinovic */

/* Variables */
:root {
    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary-color: #10b981;
    --accent-color: #f59e0b;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --bg-light: #f9fafb;
    --bg-white: #ffffff;
    --border-color: #e5e7eb;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Base styles */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
}

/* Navigation */
.nav-link {
    @apply px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50 transition-all duration-200;
}

.nav-link.active {
    @apply text-blue-600 bg-blue-50;
}

.mobile-nav-link {
    @apply text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors;
}

/* Buttons */
.btn-primary {
    @apply inline-block px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors duration-200 shadow-lg hover:shadow-xl transform hover:scale-105;
}

.btn-secondary {
    @apply inline-block px-8 py-3 bg-white text-blue-600 font-semibold rounded-lg border-2 border-blue-600 hover:bg-blue-600 hover:text-white transition-all duration-200;
}

.btn-primary-small {
    @apply px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 transition-colors duration-200;
}

/* Hero section animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.animate-fade-in-delay {
    animation: fadeIn 1s ease-out 0.3s both;
}

.animate-fade-in-delay-2 {
    animation: fadeIn 1s ease-out 0.6s both;
}

/* Cards */
.apartment-card, .room-card {
    @apply transition-all duration-300 hover:shadow-xl hover:scale-105;
}

/* Social icons */
.social-icon {
    @apply w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-600 hover:bg-blue-600 hover:text-white transition-all duration-200;
}

.social-icon.facebook:hover {
    @apply bg-blue-600;
}

.social-icon.instagram:hover {
    @apply bg-pink-600;
}

.social-icon.twitter:hover {
    @apply bg-blue-400;
}

/* Form inputs */
.form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200;
}

.form-input:focus {
    @apply outline-none ring-2 ring-blue-500 border-blue-500;
}

/* Map container */
.map-container {
    @apply rounded-lg overflow-hidden shadow-lg;
}

.map-container iframe {
    @apply w-full h-full;
}

/* Modal */
#apartment-modal {
    @apply transition-all duration-300;
}

#apartment-modal.hidden {
    @apply opacity-0 pointer-events-none;
}

#apartment-modal:not(.hidden) {
    @apply opacity-100;
}

/* Slider styles */
.apartment-slider {
    @apply relative overflow-hidden rounded-t-lg;
}

.slider-container {
    @apply relative w-full h-full;
}

.slider-track {
    @apply flex transition-transform duration-500 ease-in-out;
}

.slider-slide {
    @apply w-full flex-shrink-0;
}

.slider-nav {
    @apply absolute top-1/2 transform -translate-y-1/2 bg-white/80 hover:bg-white text-gray-700 w-10 h-10 rounded-full flex items-center justify-center transition-all duration-200;
}

.slider-nav.prev {
    @apply left-4;
}

.slider-nav.next {
    @apply right-4;
}

.slider-dots {
    @apply absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2;
}

.slider-dot {
    @apply w-3 h-3 bg-white/60 rounded-full transition-all duration-200;
}

.slider-dot.active {
    @apply bg-blue-600 w-6;
}

/* Responsive design */
@media (max-width: 768px) {
    .btn-primary, .btn-secondary {
        @apply px-6 py-2 text-sm;
    }
    
    .map-container iframe {
        @apply h-64;
    }
    
    .hero-text h1 {
        @apply text-3xl;
    }
    
    .hero-text p {
        @apply text-lg;
    }
}

@media (max-width: 640px) {
    .btn-primary, .btn-secondary {
        @apply px-4 py-2 text-xs;
    }
    
    .hero-text h1 {
        @apply text-2xl;
    }
    
    .hero-text p {
        @apply text-base;
    }
    
    .grid > * {
        @apply col-span-1;
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    @apply w-2;
}

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

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

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

/* Loading animation */
.loading {
    @apply inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin;
}

/* Success message */
.success-message {
    @apply bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg;
}

.error-message {
    @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg;
}

/* Utility classes */
.text-gradient {
    @apply bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent;
}

.bg-gradient-primary {
    @apply bg-gradient-to-r from-blue-600 to-blue-700;
}

.shadow-custom {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.transition-fast {
    @apply transition-all duration-150 ease-in-out;
}

.transition-slow {
    @apply transition-all duration-500 ease-in-out;
}

/* Print styles */
@media print {
    nav, footer, .social-icon, .btn-primary, .btn-secondary {
        display: none;
    }
    
    body {
        @apply text-black;
    }
    
    .bg-white, .bg-gray-50 {
        background: white !important;
    }
}