/* Custom CSS for Beneficial Mortgage Website */

/* Custom Tailwind CSS Configuration */
@layer base {
    html {
        scroll-behavior: smooth;
        height: auto;
        min-height: 100%;
    }
    
    body {
        font-family: 'Inter', sans-serif;
        min-height: 100%;
        height: auto;
        overflow-y: auto;
    }
}

@layer components {
    /* Custom Button Styles */
    .btn-primary {
        @apply bg-black text-white px-8 py-4 rounded-2xl font-semibold transition-all duration-500 transform;
        background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 
            0 10px 25px -5px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    .btn-primary:hover {
        transform: translateY(-4px) scale(1.05);
        box-shadow: 
            0 15px 35px -5px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(255, 255, 255, 0.2);
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    }
    
    .btn-primary:active {
        transform: translateY(-2px) scale(1.02);
    }
    
    .btn-secondary {
        @apply border-2 border-black text-black px-8 py-4 rounded-2xl font-semibold transition-all duration-500 transform;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        box-shadow: 
            0 8px 20px -4px rgba(0, 0, 0, 0.15),
            0 0 0 1px rgba(0, 0, 0, 0.1);
    }
    
    .btn-secondary:hover {
        @apply bg-black text-white;
        transform: translateY(-4px) scale(1.05);
        box-shadow: 
            0 12px 25px -4px rgba(0, 0, 0, 0.25),
            0 0 0 1px rgba(0, 0, 0, 0.2);
    }
    
    .btn-outline {
        @apply border-2 border-gray-300 text-gray-700 px-8 py-4 rounded-2xl font-semibold transition-all duration-500 transform;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(8px);
        box-shadow: 
            0 6px 16px -4px rgba(0, 0, 0, 0.1),
            0 0 0 1px rgba(0, 0, 0, 0.05);
    }
    
    .btn-outline:hover {
        @apply border-black text-black;
        transform: translateY(-3px) scale(1.03);
        box-shadow: 
            0 10px 20px -4px rgba(0, 0, 0, 0.15),
            0 0 0 1px rgba(0, 0, 0, 0.1);
    }
    
    /* Card Styles */
    .card {
        @apply bg-white/90 backdrop-blur-md rounded-3xl transition-all duration-500;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 
            0 20px 40px -12px rgba(0, 0, 0, 0.15),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    .card:hover {
        transform: translateY(-6px) scale(1.02);
        @apply bg-white/95;
        box-shadow: 
            0 25px 50px -12px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(255, 255, 255, 0.2);
    }
    
    .card-hover {
        @apply transform transition-all duration-500;
    }
    
    .card-hover:hover {
        transform: translateY(-8px) scale(1.03);
    }
    
    /* Enhanced Form Styles */
    .form-input {
        @apply w-full px-6 py-4 border rounded-2xl transition-all duration-300;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        border: 2px solid rgba(0, 0, 0, 0.1);
        box-shadow: 
            0 4px 12px -2px rgba(0, 0, 0, 0.05),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    .form-input:focus {
        @apply ring-2 ring-black border-black;
        background: rgba(255, 255, 255, 1);
        box-shadow: 
            0 8px 20px -4px rgba(0, 0, 0, 0.1),
            0 0 0 1px rgba(0, 0, 0, 0.2);
        transform: translateY(-2px);
    }
    
    .form-input:hover {
        border-color: rgba(0, 0, 0, 0.2);
        box-shadow: 
            0 6px 16px -4px rgba(0, 0, 0, 0.08),
            0 0 0 1px rgba(255, 255, 255, 0.15);
    }
    
    .form-label {
        @apply block text-sm font-medium text-gray-700 mb-2;
    }
    
    /* Section Styles */
    .section-padding {
        @apply py-16 md:py-20;
    }
    
    .container-padding {
        @apply px-4 sm:px-6 lg:px-8;
    }
    
    /* Gradient Text */
    .gradient-text {
        @apply bg-gradient-to-r from-black to-gray-700 bg-clip-text text-transparent;
    }
    
    /* Navigation Styles */
    .nav-link {
        @apply text-gray-700 hover:text-black transition-colors duration-200 font-medium;
    }
    
    .nav-link-active {
        @apply text-black font-medium;
    }
    
    /* Hero Section */
    .hero-gradient {
        background: linear-gradient(135deg, #000000 0%, #121212 30%, #1d1d1d 60%, #2a2a2a 80%, #404040 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        position: relative;
    }
    
    .hero-gradient::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.03) 100%);
        pointer-events: none;
    }
    
    /* Modern Card Enhancements */
    .card-modern {
        @apply bg-white/95 backdrop-blur-md rounded-3xl shadow-2xl hover:shadow-3xl transition-all duration-500;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 
            0 25px 50px -12px rgba(0, 0, 0, 0.25),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    .card-modern:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 
            0 32px 64px -12px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(255, 255, 255, 0.15);
    }
    
    /* Trust Indicators */
    .trust-card {
        @apply bg-white/90 backdrop-blur-sm p-8 rounded-3xl text-center transition-all duration-500;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 
            0 20px 40px -12px rgba(0, 0, 0, 0.15),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    .trust-card:hover {
        @apply bg-white/95;
        transform: translateY(-6px) scale(1.02);
        box-shadow: 
            0 25px 50px -12px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(255, 255, 255, 0.2);
    }
    
    /* Team Member Card */
    .team-card {
        @apply text-center p-6 rounded-3xl transition-all duration-500;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%);
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 
            0 15px 35px -12px rgba(0, 0, 0, 0.1),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    .team-card:hover {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 
            0 20px 40px -12px rgba(0, 0, 0, 0.15),
            0 0 0 1px rgba(255, 255, 255, 0.2);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 1) 100%);
    }
    
    .team-photo {
        @apply w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-4 transition-all duration-500;
        border: 4px solid rgba(255, 255, 255, 0.8);
        box-shadow: 
            0 10px 25px -5px rgba(0, 0, 0, 0.1),
            0 0 0 1px rgba(255, 255, 255, 0.2);
    }
    
    .team-photo:hover {
        transform: scale(1.05);
        border-color: rgba(255, 255, 255, 1);
        box-shadow: 
            0 15px 35px -5px rgba(0, 0, 0, 0.15),
            0 0 0 1px rgba(255, 255, 255, 0.3);
    }
    
    /* Calculator Widget */
    .calculator-widget {
        @apply bg-white/95 backdrop-blur-md rounded-3xl p-8 transition-all duration-500;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 
            0 25px 50px -12px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    .calculator-widget:hover {
        transform: translateY(-4px);
        box-shadow: 
            0 32px 64px -12px rgba(0, 0, 0, 0.25),
            0 0 0 1px rgba(255, 255, 255, 0.2);
    }
    
    /* Footer Styles */
    .footer-link {
        @apply text-gray-300 hover:text-white transition-colors duration-200;
    }
    
    /* Mobile Menu */
    .mobile-menu {
        @apply transform transition-transform duration-300 ease-in-out;
    }
    
    .mobile-menu.hidden {
        transform: translateY(-100%);
    }
    
    /* Loading States */
    .loading {
        @apply opacity-50 pointer-events-none;
    }
    
    /* Success States */
    .success {
        @apply bg-green-50 border-green-200 text-green-800;
    }
    
    .error {
        @apply bg-red-50 border-red-200 text-red-800;
    }
    
    /* Testimonial Styles */
    .testimonial-card {
        @apply bg-white/90 backdrop-blur-sm p-8 rounded-3xl transition-all duration-500;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 
            0 20px 40px -12px rgba(0, 0, 0, 0.15),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    .testimonial-card:hover {
        transform: translateY(-6px) scale(1.02);
        @apply bg-white/95;
        box-shadow: 
            0 25px 50px -12px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(255, 255, 255, 0.2);
    }
    
    .testimonial-quote {
        @apply text-gray-600 italic text-lg mb-4;
    }
    
    .testimonial-author {
        @apply font-semibold text-gray-900;
    }
    
    .testimonial-title {
        @apply text-sm text-gray-500;
    }
    
    /* Service Card */
    .service-card {
        @apply bg-white/90 backdrop-blur-sm p-8 rounded-3xl transition-all duration-500;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 
            0 20px 40px -12px rgba(0, 0, 0, 0.15),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    .service-card:hover {
        transform: translateY(-8px) scale(1.02);
        @apply bg-white/95;
        box-shadow: 
            0 25px 50px -12px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(255, 255, 255, 0.2);
    }
    
    .service-icon {
        @apply w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6 transition-all duration-500;
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 100%);
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1);
    }
    
    .service-card:hover .service-icon {
        transform: scale(1.1) rotate(5deg);
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.15) 100%);
        box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.15);
    }
    
    /* Blog Card */
    .blog-card {
        @apply bg-white/90 backdrop-blur-sm rounded-3xl overflow-hidden transition-all duration-500;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 
            0 20px 40px -12px rgba(0, 0, 0, 0.15),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    .blog-card:hover {
        transform: translateY(-8px) scale(1.02);
        @apply bg-white/95;
        box-shadow: 
            0 25px 50px -12px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(255, 255, 255, 0.2);
    }
    
    /* Enhanced Button Styles */
    .btn-modern {
        @apply px-8 py-4 rounded-2xl font-semibold transition-all duration-500 transform;
        background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 
            0 10px 25px -5px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    .btn-modern:hover {
        transform: translateY(-4px) scale(1.05);
        box-shadow: 
            0 15px 35px -5px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(255, 255, 255, 0.2);
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    }
    
    .btn-modern:active {
        transform: translateY(-2px) scale(1.02);
    }
    
    .blog-image {
        @apply w-full h-48 object-cover;
    }
    
    .blog-content {
        @apply p-6;
    }
    
    .blog-title {
        @apply text-xl font-bold text-gray-900 mb-2 hover:text-black transition-colors;
    }
    
    .blog-excerpt {
        @apply text-gray-600 mb-4;
    }
    
    .blog-meta {
        @apply text-sm text-gray-500;
    }
    
    /* Contact Form */
    .contact-form {
        @apply bg-white/90 backdrop-blur-md rounded-3xl shadow-2xl p-8 transition-all duration-500;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 
            0 25px 50px -12px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    .contact-form:hover {
        transform: translateY(-4px);
        box-shadow: 
            0 32px 64px -12px rgba(0, 0, 0, 0.25),
            0 0 0 1px rgba(255, 255, 255, 0.2);
    }
    
    .contact-info {
        @apply bg-gradient-to-br from-white/80 to-white/60 backdrop-blur-md rounded-3xl p-8 transition-all duration-500;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 
            0 20px 40px -12px rgba(0, 0, 0, 0.15),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    .contact-info:hover {
        transform: translateY(-4px);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
        box-shadow: 
            0 25px 50px -12px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(255, 255, 255, 0.2);
    }
    
    /* Stats Section */
    .stats-card {
        @apply text-center p-8 bg-white/90 backdrop-blur-sm rounded-3xl transition-all duration-500;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 
            0 15px 35px -12px rgba(0, 0, 0, 0.1),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    .stats-card:hover {
        transform: translateY(-6px) scale(1.02);
        @apply bg-white/95;
        box-shadow: 
            0 20px 40px -12px rgba(0, 0, 0, 0.15),
            0 0 0 1px rgba(255, 255, 255, 0.2);
    }
    
    .stats-number {
        @apply text-4xl font-bold text-black mb-2;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .stats-label {
        @apply text-gray-600 font-medium;
    }
    
    /* Process Steps */
    .process-step {
        @apply text-center p-6 transition-all duration-500;
    }
    
    .process-number {
        @apply w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6 text-xl font-bold transition-all duration-500;
        background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
        border: 2px solid rgba(255, 255, 255, 0.3);
        box-shadow: 
            0 10px 25px -5px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    .process-step:hover .process-number {
        transform: scale(1.1) rotate(5deg);
        box-shadow: 
            0 15px 35px -5px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(255, 255, 255, 0.2);
    }
    
    /* FAQ Styles */
    .faq-item {
        @apply border-b border-gray-200 py-6 transition-all duration-300;
        border-color: rgba(0, 0, 0, 0.1);
    }
    
    .faq-item:hover {
        border-color: rgba(0, 0, 0, 0.2);
        background: rgba(255, 255, 255, 0.5);
        border-radius: 12px;
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .faq-question {
        @apply text-lg font-semibold text-gray-900 mb-3 cursor-pointer transition-all duration-300;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    
    .faq-question:hover {
        @apply text-black;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transform: translateX(4px);
    }
    
    .faq-answer {
        @apply text-gray-600 leading-relaxed transition-all duration-300;
    }
    
    /* Scroll Animations */
    .scroll-fade-in {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .scroll-fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }
    
    .scroll-slide-left {
        opacity: 0;
        transform: translateX(-50px);
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .scroll-slide-left.visible {
        opacity: 1;
        transform: translateX(0);
    }
    
    .scroll-slide-right {
        opacity: 0;
        transform: translateX(50px);
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .scroll-slide-right.visible {
        opacity: 1;
        transform: translateX(0);
    }
    
    /* Animation Classes */
    .fade-in {
        animation: fadeIn 0.6s ease-in-out;
    }
    
    .slide-up {
        animation: slideUp 0.6s ease-out;
    }
    
    .scale-in {
        animation: scaleIn 0.4s ease-out;
    }
}

@layer utilities {
    /* Custom Utilities */
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
    
    .text-shadow-xl {
        text-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }
    
    .backdrop-blur-sm {
        backdrop-filter: blur(4px);
    }
    
    .backdrop-blur-md {
        backdrop-filter: blur(12px);
    }
    
    .backdrop-blur-lg {
        backdrop-filter: blur(16px);
    }
    
    .backdrop-blur-xl {
        backdrop-filter: blur(24px);
    }
    
    /* Modern Glassmorphism Utilities */
    .glass {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }
    
    .glass-dark {
        background: rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }
    
    /* Modern Shadow Utilities */
    .shadow-soft {
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    }
    
    .shadow-medium {
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.12);
    }
    
    .shadow-strong {
        box-shadow: 0 8px 35px rgba(0, 0, 0, 0.16);
    }
    
    /* Hover Effect Utilities */
    .hover-lift {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .hover-lift:hover {
        transform: translateY(-8px);
    }
    
    .hover-scale {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .hover-scale:hover {
        transform: scale(1.05);
    }
    
    .hover-lift-scale {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .hover-lift-scale:hover {
        transform: translateY(-8px) scale(1.05);
    }
}

/* Custom Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-gradient {
        background: linear-gradient(135deg, #000000 0%, #1a1a1a 30%, #2d2d2d 70%, #404040 100%);
    }
    
    .section-padding {
        @apply py-12;
    }
    
    .container-padding {
        @apply px-4;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .card, .calculator-widget {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}

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

/* Focus Styles for Accessibility */
.focus-visible:focus {
    outline: 2px solid #000000;
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .bg-blue-50 {
        background-color: #ffffff !important;
        border: 2px solid #000000 !important;
    }
    
    .text-gray-600 {
        color: #000000 !important;
    }
}

/* Dark Mode Support (if needed in future) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here */
}

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: #1a1a1a;
}

/* Selection Styles */
::selection {
    background-color: #000000;
    color: white;
}

::-moz-selection {
    background-color: #000000;
    color: white;
}

/* Premium Modern Enhancements */
.premium-card {
    @apply bg-gradient-to-br from-white/95 to-white/85 backdrop-blur-xl rounded-3xl transition-all duration-700;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.premium-card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 
        0 40px 80px -12px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Sophisticated Hover Effects */
.hover-glow {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-glow:hover {
    box-shadow: 
        0 0 20px rgba(0, 0, 0, 0.1),
        0 0 40px rgba(0, 0, 0, 0.05),
        0 0 60px rgba(0, 0, 0, 0.025);
}

/* Modern Loading States */
.loading-modern {
    @apply opacity-75 pointer-events-none;
    filter: blur(1px);
    transition: all 0.3s ease;
}

/* Enhanced Success/Error States */
.success-modern {
    @apply bg-gradient-to-r from-green-50 to-emerald-50 border-green-200 text-green-800;
    border: 2px solid rgba(34, 197, 94, 0.3);
    box-shadow: 
        0 4px 12px -2px rgba(34, 197, 94, 0.1),
        0 0 0 1px rgba(34, 197, 94, 0.1);
}

.error-modern {
    @apply bg-gradient-to-r from-red-50 to-pink-50 border-red-200 text-red-800;
    border: 2px solid rgba(239, 68, 68, 0.3);
    box-shadow: 
        0 4px 12px -2px rgba(239, 68, 68, 0.1),
        0 0 0 1px rgba(239, 68, 68, 0.1);
}

/* Micro-interactions */
.micro-bounce {
    transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.micro-bounce:hover {
    transform: scale(1.1);
}

.micro-bounce:active {
    transform: scale(0.95);
}

/* Premium Text Effects */
.text-premium {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #2d2d2d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Modern Border Gradients */
.border-gradient {
    position: relative;
    background: white;
    border-radius: 24px;
}

.border-gradient::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #404040 100%);
    border-radius: 26px;
    z-index: -1;
    opacity: 0.3;
}

/* Google Reviews Styles */
.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Smooth transitions for review cards */
#reviews-container > div {
    transition: all 0.3s ease;
}

/* Hover effects */
#reviews-container > div:hover {
    transform: translateY(-2px);
}

/* Loading animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Review card enhancements */
#reviews-container > div {
    border: 1px solid #f3f4f6;
}

#reviews-container > div:hover {
    border-color: #d1d5db;
}

/* Star rating colors */
.text-yellow-400 {
    color: #fbbf24;
}

/* Navigation button states */
#prev-reviews:disabled,
#next-reviews:disabled {
    background-color: #9ca3af !important;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #reviews-container {
        grid-template-columns: 1fr;
    }
    
    .line-clamp-4 {
        -webkit-line-clamp: 3;
    }
}