/* Custom CSS for Perfect Water Static Website */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom gradient backgrounds */
.gradient-bg {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

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

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* WhatsApp button pulse animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.whatsapp-fab:hover {
    animation: pulse 2s infinite;
}

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

.form-textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-vertical;
}

.form-select {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white;
}

/* Button styles */
.btn-primary {
    @apply bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors font-semibold;
}

.btn-secondary {
    @apply border-2 border-blue-600 text-blue-600 px-6 py-3 rounded-lg hover:bg-blue-600 hover:text-white transition-colors font-semibold;
}

.btn-success {
    @apply bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition-colors font-semibold;
}

/* Card hover effects */
.card-hover {
    @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

/* Loading spinner */
.spinner {
    border: 3px solid #f3f4f6;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile responsive utilities */
@media (max-width: 640px) {
    .mobile-padding {
        @apply px-4;
    }
    
    .mobile-text-center {
        @apply text-center;
    }
    
    .mobile-hidden {
        @apply hidden;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-block {
        display: block !important;
    }
}

/* Accessibility improvements */
.skip-link {
    @apply absolute left-0 top-0 bg-blue-600 text-white p-2 rounded transform -translate-y-full opacity-0 focus:translate-y-0 focus:opacity-100 transition-all;
}

/* Focus styles for better accessibility */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .text-gray-600 {
        @apply text-gray-800;
    }
    
    .text-gray-500 {
        @apply text-gray-700;
    }
    
    .bg-gray-50 {
        @apply bg-gray-100;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

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

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Error and success states */
.error {
    @apply border-red-500 bg-red-50;
}

.success {
    @apply border-green-500 bg-green-50;
}

.error-text {
    @apply text-red-600 text-sm mt-1;
}

.success-text {
    @apply text-green-600 text-sm mt-1;
}

/* Service area styling */
.service-area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* Testimonial card styling */
.testimonial-card {
    @apply bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300;
}

/* Hero section background pattern */
.hero-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23dbeafe' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='m0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}

/* Contact form enhancements */
.contact-form {
    @apply bg-white rounded-xl shadow-lg p-8;
}

.form-group {
    @apply mb-6;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

/* Service cards grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Responsive typography */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem !important;
    }
    
    h2 {
        font-size: 2rem !important;
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
}

/* Loading states */
.loading {
    @apply opacity-50 pointer-events-none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid #f3f4f6;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Cookie notice styling (for future use) */
.cookie-notice {
    @apply fixed bottom-0 left-0 right-0 bg-gray-900 text-white p-4 z-50 transform translate-y-full transition-transform duration-300;
}

.cookie-notice.show {
    @apply translate-y-0;
}

/* Map container styling */
.map-container {
    @apply w-full h-64 md:h-96 rounded-lg overflow-hidden shadow-lg;
}

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