@extends('dashboard.layout')

@section('title', 'Profile Settings - Invo Security')
@section('page-title', 'Profile Settings')
@section('page-subtitle', 'Update your personal and professional information')

@section('content')
<div class="animate-fade-in">
    <!-- Success/Error Messages -->
    @if(session('success'))
    <div class="mb-6 glass rounded-xl border-l-4 border-green-500 p-4 animate-slide-down">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-500/20 to-emerald-600/20 flex items-center justify-center">
                    <i class="fas fa-check-circle text-green-500"></i>
                </div>
                <div>
                    <p class="font-semibold text-gray-900 dark:text-white">Success!</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">{{ session('success') }}</p>
                </div>
            </div>
            <button onclick="this.parentElement.parentElement.remove()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>
    @endif
    
    @if($errors->any())
    <div class="mb-6 glass rounded-xl border-l-4 border-red-500 p-4 animate-slide-down">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-red-500/20 to-rose-600/20 flex items-center justify-center">
                <i class="fas fa-exclamation-triangle text-red-500"></i>
            </div>
            <div>
                <p class="font-semibold text-gray-900 dark:text-white mb-1">Please fix the following errors:</p>
                <ul class="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                    @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    @endif

    <form method="POST" action="{{ route('dashboard.profile.update') }}" enctype="multipart/form-data" class="space-y-6">
        @csrf
        @method('PUT')
        
        <!-- Main Content Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Left Column - Profile Image -->
            <div class="lg:col-span-1">
                <div class="glass rounded-xl p-6 hover-lift">
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-600/20 to-primary-700/20 flex items-center justify-center">
                            <i class="fas fa-camera text-primary-600"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-900 dark:text-white">Profile Photo</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Upload your profile image</p>
                        </div>
                    </div>
                    
                    <!-- Current Profile Image -->
                    <div class="mb-6 flex justify-center group relative">
                        <div class="relative">
                            <img id="profileImagePreview" 
                                 src="{{ auth()->user()->image }}" 
                                 alt="Profile Image" 
                                 class="w-32 h-32 rounded-2xl object-cover border-4 border-white dark:border-gray-800 shadow-xl group-hover:scale-105 transition-transform duration-300">
                            <div class="absolute inset-0 bg-gradient-to-br from-primary-600/10 to-primary-700/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                            <div class="absolute -bottom-2 -right-2 w-10 h-10 bg-gradient-to-br from-primary-600 to-primary-700 rounded-full flex items-center justify-center border-4 border-white dark:border-gray-800 shadow-lg">
                                <i class="fas fa-pen text-white text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Image Upload -->
                    <div class="space-y-3">
                        <label for="image" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                            Upload New Photo
                        </label>
                        <div class="relative">
                            <input type="file" 
                                   id="image" 
                                   name="image" 
                                   accept="image/*"
                                   class="block w-full text-sm text-gray-500 dark:text-gray-400
                                          file:mr-4 file:py-3 file:px-4 
                                          file:rounded-xl file:border-0 
                                          file:text-sm file:font-semibold 
                                          file:bg-gradient-to-r file:from-primary-600/10 file:to-primary-700/10
                                          file:text-primary-700 dark:file:text-primary-300 
                                          hover:file:from-primary-600/20 hover:file:to-primary-700/20
                                          cursor-pointer
                                          bg-white/50 dark:bg-gray-800/50
                                          border border-gray-200 dark:border-gray-700
                                          rounded-xl
                                          transition-all duration-300">
                        </div>
                        @error('image')
                        <p class="text-sm text-red-600 dark:text-red-400 flex items-center gap-2 mt-2">
                            <i class="fas fa-exclamation-circle text-xs"></i>
                            {{ $message }}
                        </p>
                        @enderror
                        
                        <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                            <i class="fas fa-info-circle text-primary-600"></i>
                            <span>JPG, PNG, GIF • Max 5MB</span>
                        </div>
                    </div>
                </div>
                
                <!-- Account Info -->
                <div class="glass rounded-xl p-6 mt-6 hover-lift">
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500/20 to-blue-600/20 flex items-center justify-center">
                            <i class="fas fa-shield-alt text-blue-500"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-900 dark:text-white">Account Info</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Your security details</p>
                        </div>
                    </div>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">User ID</label>
                            <div class="px-3 py-2 bg-gray-50 dark:bg-gray-800 rounded-lg text-sm font-medium text-gray-900 dark:text-white">
                                {{ auth()->user()->id }}
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Account Type</label>
                            <div class="px-3 py-2 bg-gradient-to-r from-primary-600/10 to-primary-700/10 rounded-lg text-sm font-medium text-primary-700 dark:text-primary-300">
                                {{ ucfirst(auth()->user()->role) }}
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Member Since</label>
                            <div class="px-3 py-2 bg-gray-50 dark:bg-gray-800 rounded-lg text-sm font-medium text-gray-900 dark:text-white">
                                {{ auth()->user()->created_at->format('M d, Y') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Right Column - Profile Details -->
            <div class="lg:col-span-2">
                <div class="glass rounded-xl p-6 hover-lift">
                    <div class="flex items-center gap-3 mb-8">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-600/20 flex items-center justify-center">
                            <i class="fas fa-user-cog text-purple-500"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-900 dark:text-white">Personal Information</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Update your personal details</p>
                        </div>
                    </div>
                    
                    <div class="space-y-6">
                        <!-- Name -->
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
                                <i class="fas fa-user text-primary-600"></i>
                                Full Name
                            </label>
                            <div class="relative">
                                <input type="text" 
                                       id="name" 
                                       name="name" 
                                       value="{{ old('name', auth()->user()->name) }}" 
                                       class="w-full px-4 py-3 pl-12 
                                              border border-gray-200 dark:border-gray-700 
                                              rounded-xl 
                                              bg-white/50 dark:bg-gray-800/50
                                              text-gray-900 dark:text-white
                                              placeholder-gray-500 dark:placeholder-gray-400
                                              focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
                                              transition-all duration-300">
                                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                    <i class="fas fa-user text-gray-400"></i>
                                </div>
                            </div>
                            @error('name')
                            <p class="text-sm text-red-600 dark:text-red-400 flex items-center gap-2 mt-2">
                                <i class="fas fa-exclamation-circle text-xs"></i>
                                {{ $message }}
                            </p>
                            @enderror
                        </div>
                        
                        <!-- Email -->
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
                                <i class="fas fa-envelope text-primary-600"></i>
                                Email Address
                            </label>
                            <div class="relative">
                                <input type="email" 
                                       id="email" 
                                       name="email" 
                                       value="{{ old('email', auth()->user()->email) }}" 
                                       class="w-full px-4 py-3 pl-12 
                                              border border-gray-200 dark:border-gray-700 
                                              rounded-xl 
                                              bg-white/50 dark:bg-gray-800/50
                                              text-gray-900 dark:text-white
                                              placeholder-gray-500 dark:placeholder-gray-400
                                              focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
                                              transition-all duration-300">
                                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                    <i class="fas fa-envelope text-gray-400"></i>
                                </div>
                            </div>
                            @error('email')
                            <p class="text-sm text-red-600 dark:text-red-400 flex items-center gap-2 mt-2">
                                <i class="fas fa-exclamation-circle text-xs"></i>
                                {{ $message }}
                            </p>
                            @enderror
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Phone -->
                            <div>
                                <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
                                    <i class="fas fa-phone text-primary-600"></i>
                                    Phone Number
                                </label>
                                <div class="relative">
                                    <input type="text" 
                                           id="phone" 
                                           name="phone" 
                                           value="{{ old('phone', auth()->user()->phone) }}" 
                                           class="w-full px-4 py-3 pl-12 
                                                  border border-gray-200 dark:border-gray-700 
                                                  rounded-xl 
                                                  bg-white/50 dark:bg-gray-800/50
                                                  text-gray-900 dark:text-white
                                                  placeholder-gray-500 dark:placeholder-gray-400
                                                  focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
                                                  transition-all duration-300">
                                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                        <i class="fas fa-phone text-gray-400"></i>
                                    </div>
                                </div>
                                @error('phone')
                                <p class="text-sm text-red-600 dark:text-red-400 flex items-center gap-2 mt-2">
                                    <i class="fas fa-exclamation-circle text-xs"></i>
                                    {{ $message }}
                                </p>
                                @enderror
                            </div>
                            
                            <!-- Job Title -->
                            <div>
                                <label for="job_title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
                                    <i class="fas fa-briefcase text-primary-600"></i>
                                    Job Title
                                </label>
                                <div class="relative">
                                    <input type="text" 
                                           id="job_title" 
                                           name="job_title" 
                                           value="{{ old('job_title', auth()->user()->job_title) }}" 
                                           class="w-full px-4 py-3 pl-12 
                                                  border border-gray-200 dark:border-gray-700 
                                                  rounded-xl 
                                                  bg-white/50 dark:bg-gray-800/50
                                                  text-gray-900 dark:text-white
                                                  placeholder-gray-500 dark:placeholder-gray-400
                                                  focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
                                                  transition-all duration-300">
                                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                        <i class="fas fa-briefcase text-gray-400"></i>
                                    </div>
                                </div>
                                @error('job_title')
                                <p class="text-sm text-red-600 dark:text-red-400 flex items-center gap-2 mt-2">
                                    <i class="fas fa-exclamation-circle text-xs"></i>
                                    {{ $message }}
                                </p>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Company -->
                            <div>
                                <label for="company" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
                                    <i class="fas fa-building text-primary-600"></i>
                                    Company
                                </label>
                                <div class="relative">
                                    <input type="text" 
                                           id="company" 
                                           name="company" 
                                           value="{{ old('company', auth()->user()->company) }}" 
                                           class="w-full px-4 py-3 pl-12 
                                                  border border-gray-200 dark:border-gray-700 
                                                  rounded-xl 
                                                  bg-white/50 dark:bg-gray-800/50
                                                  text-gray-900 dark:text-white
                                                  placeholder-gray-500 dark:placeholder-gray-400
                                                  focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
                                                  transition-all duration-300">
                                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                        <i class="fas fa-building text-gray-400"></i>
                                    </div>
                                </div>
                                @error('company')
                                <p class="text-sm text-red-600 dark:text-red-400 flex items-center gap-2 mt-2">
                                    <i class="fas fa-exclamation-circle text-xs"></i>
                                    {{ $message }}
                                </p>
                                @enderror
                            </div>
                            
                            <!-- Company Type -->
                            <div>
                                <label for="company_type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
                                    <i class="fas fa-chart-bar text-primary-600"></i>
                                    Company Type
                                </label>
                                <div class="relative">
                                    <select id="company_type" 
                                            name="company_type" 
                                            class="w-full px-4 py-3 pl-12 
                                                   border border-gray-200 dark:border-gray-700 
                                                   rounded-xl 
                                                   bg-white/50 dark:bg-gray-800/50
                                                   text-gray-900 dark:text-white
                                                   focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
                                                   appearance-none
                                                   transition-all duration-300">
                                        <option value="">Select Company Type</option>
                                        <option value="Startup" {{ old('company_type', auth()->user()->company_type) == 'Startup' ? 'selected' : '' }}>Startup</option>
                                        <option value="Small Business" {{ old('company_type', auth()->user()->company_type) == 'Small Business' ? 'selected' : '' }}>Small Business</option>
                                        <option value="Medium Business" {{ old('company_type', auth()->user()->company_type) == 'Medium Business' ? 'selected' : '' }}>Medium Business</option>
                                        <option value="Large Corporation" {{ old('company_type', auth()->user()->company_type) == 'Large Corporation' ? 'selected' : '' }}>Large Corporation</option>
                                        <option value="Non-Profit" {{ old('company_type', auth()->user()->company_type) == 'Non-Profit' ? 'selected' : '' }}>Non-Profit</option>
                                        <option value="Government" {{ old('company_type', auth()->user()->company_type) == 'Government' ? 'selected' : '' }}>Government</option>
                                        <option value="Other" {{ old('company_type', auth()->user()->company_type) == 'Other' ? 'selected' : '' }}>Other</option>
                                    </select>
                                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                        <i class="fas fa-chart-bar text-gray-400"></i>
                                    </div>
                                    <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
                                        <i class="fas fa-chevron-down text-gray-400"></i>
                                    </div>
                                </div>
                                @error('company_type')
                                <p class="text-sm text-red-600 dark:text-red-400 flex items-center gap-2 mt-2">
                                    <i class="fas fa-exclamation-circle text-xs"></i>
                                    {{ $message }}
                                </p>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                        <div class="text-sm text-gray-500 dark:text-gray-400">
                            <i class="fas fa-info-circle text-primary-600 mr-1"></i>
                            Last updated: {{ auth()->user()->updated_at->diffForHumans() }}
                        </div>
                        
                        <div class="flex items-center gap-3">
                            <button type="button" 
                                    onclick="window.history.back()"
                                    class="px-6 py-3 
                                           border border-gray-300 dark:border-gray-600
                                           text-gray-700 dark:text-gray-300 
                                           rounded-xl
                                           bg-white dark:bg-gray-800
                                           hover:bg-gray-50 dark:hover:bg-gray-700
                                           focus:outline-none focus:ring-2 focus:ring-gray-500
                                           transition-all duration-300
                                           font-medium flex items-center gap-2">
                                <i class="fas fa-arrow-left"></i>
                                Cancel
                            </button>
                            <button type="submit" 
                                    class="px-6 py-3 
                                           bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800
                                           text-white 
                                           rounded-xl
                                           shadow-lg hover:shadow-xl
                                           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800
                                           transition-all duration-300
                                           font-semibold
                                           flex items-center gap-2">
                                <i class="fas fa-save"></i>
                                Save Changes
                            </button>
                        </div>
                    </div>
                </div>
                
                
            </div>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const imageInput = document.getElementById('image');
        const imagePreview = document.getElementById('profileImagePreview');
        
        // Image Preview functionality
        imageInput.addEventListener('change', function() {
            const file = this.files[0];
            
            if (file) {
                // Check file size (5MB limit)
                if (file.size > 5 * 1024 * 1024) {
                    showToast('File size must be less than 5MB', 'error');
                    this.value = '';
                    return;
                }
                
                // Check file type
                const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
                if (!validTypes.includes(file.type)) {
                    showToast('Please select a valid image file (JPG, PNG, GIF)', 'error');
                    this.value = '';
                    return;
                }
                
                const reader = new FileReader();
                
                reader.addEventListener('load', function() {
                    imagePreview.setAttribute('src', reader.result);
                    
                    // Add animation effect
                    imagePreview.style.transform = 'scale(1.05) rotate(2deg)';
                    setTimeout(() => {
                        imagePreview.style.transform = 'scale(1) rotate(0deg)';
                    }, 300);
                });
                
                reader.readAsDataURL(file);
            }
        });
        
        // Add hover effect to profile image
        const profileImageContainer = imagePreview.parentElement.parentElement;
        profileImageContainer.addEventListener('mouseenter', function() {
            const editIcon = this.querySelector('.fa-pen');
            editIcon.style.transform = 'rotate(15deg)';
            this.style.transform = 'translateY(-4px)';
        });
        
        profileImageContainer.addEventListener('mouseleave', function() {
            const editIcon = this.querySelector('.fa-pen');
            editIcon.style.transform = 'rotate(0deg)';
            this.style.transform = 'translateY(0)';
        });
        
        // Form validation
        const form = document.querySelector('form');
        form.addEventListener('submit', function(e) {
            let isValid = true;
            const requiredFields = ['name', 'email'];
            
            requiredFields.forEach(fieldId => {
                const field = document.getElementById(fieldId);
                if (!field.value.trim()) {
                    isValid = false;
                    field.classList.add('border-red-500');
                    
                    // Show error message
                    let errorDiv = field.parentElement.nextElementSibling;
                    if (!errorDiv || !errorDiv.classList.contains('text-red-600')) {
                        errorDiv = document.createElement('p');
                        errorDiv.className = 'text-sm text-red-600 dark:text-red-400 flex items-center gap-2 mt-2';
                        errorDiv.innerHTML = '<i class="fas fa-exclamation-circle text-xs"></i>This field is required';
                        field.parentElement.parentElement.appendChild(errorDiv);
                    }
                }
            });
            
            if (!isValid) {
                e.preventDefault();
                showToast('Please fill in all required fields', 'error');
            }
        });
        
        // Remove error on input
        document.querySelectorAll('input, select').forEach(field => {
            field.addEventListener('input', function() {
                this.classList.remove('border-red-500');
                const errorDiv = this.parentElement.parentElement.querySelector('.text-red-600');
                if (errorDiv) {
                    errorDiv.remove();
                }
            });
        });
        
        function showToast(message, type = 'info') {
            const container = document.getElementById('toast-container') || createToastContainer();
            const toast = document.createElement('div');
            
            const icons = {
                success: 'fa-check-circle',
                error: 'fa-exclamation-circle',
                info: 'fa-info-circle'
            };
            
            const colors = {
                success: 'from-green-500 to-emerald-600',
                error: 'from-red-500 to-rose-600',
                info: 'from-primary-600 to-primary-700'
            };
            
            toast.className = `glass rounded-xl p-4 max-w-sm animate-slide-in border-l-4 ${colors[type]}`;
            toast.innerHTML = `
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br ${colors[type]} flex items-center justify-center">
                        <i class="fas ${icons[type]} text-white"></i>
                    </div>
                    <div class="flex-1">
                        <p class="text-sm font-medium text-gray-900 dark:text-white">${message}</p>
                    </div>
                    <button onclick="this.parentElement.parentElement.remove()" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            `;
            
            container.appendChild(toast);
            
            setTimeout(() => {
                toast.style.opacity = '0';
                toast.style.transform = 'translateX(100%)';
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }
        
        function createToastContainer() {
            const container = document.createElement('div');
            container.id = 'toast-container';
            container.className = 'fixed top-4 right-4 z-50 space-y-2';
            document.body.appendChild(container);
            return container;
        }
    });
</script>

<style>
    select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 1rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .dark select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    }
    
    /* Custom file input styling */
    input[type="file"]::-webkit-file-upload-button {
        border: none;
        background: linear-gradient(135deg, #b98927 0%, #f5b437 100%);
        color: white;
        border-radius: 0.75rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    input[type="file"]::-webkit-file-upload-button:hover {
        background: linear-gradient(135deg, #946e20 0%, #d99c1e 100%);
    }
    
    /* Smooth transitions */
    input, select, button, .glass {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Focus styles */
    input:focus, select:focus {
        box-shadow: 0 0 0 3px rgba(185, 137, 39, 0.1);
    }
    
    /* Hover effects */
    .hover-lift:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(185, 137, 39, 0.15);
    }
</style>
@endsection