/* CC Brain & Body Wellness Contact Us Custom Styles */

/* Neural Network Background Animation */
.neural-network-bg {
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(203, 162, 125, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(242, 236, 228, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(203, 162, 125, 0.05) 0%, transparent 50%);
    background-size: 300px 300px, 400px 400px, 200px 200px;
    animation: float 20s ease-in-out infinite;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Contact Us Specific Styles */
.contact-us-main {
    line-height: 1.6;
}

/* Contact Hero Section */
.contact-hero-section {
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
}

/* Contact CTA Cards */
.contact-hero-section a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-hero-section a:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(39, 39, 39, 0.15);
}

/* Contact Form Styling */
.contact-form-section form input,
.contact-form-section form select,
.contact-form-section form textarea {
    transition: all 0.3s ease;
}

.contact-form-section form input:focus,
.contact-form-section form select:focus,
.contact-form-section form textarea:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(203, 162, 125, 0.15);
}

/* Form Button Animation */
.contact-form-section button[type="submit"] {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(203, 162, 125, 0.4);
}

.contact-form-section button[type="submit"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    transition: left 0.3s ease;
}

.contact-form-section button[type="submit"]:hover::before {
    left: 0;
}

/* Contact Information Cards */
.contact-form-section .bg-white,
.contact-form-section .contact-info-card {
    transition: all 0.3s ease;
}

.contact-form-section .bg-white:hover,
.contact-form-section .contact-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* Emergency Contact Section */
.contact-form-section .emergency-contact {
    border-left: 4px solid #CBA27D;
    transition: all 0.3s ease;
}

.contact-form-section .emergency-contact:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 25px rgba(203, 162, 125, 0.15);
}

/* Form Validation States */
.border-red-500 {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Success/Error Messages */
#form-messages .bg-green-100,
#form-messages .bg-red-100 {
    animation: slideDown 0.3s ease-out;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .contact-hero-section h1 {
        font-size: 2.5rem;
    }
    
    .contact-hero-section .grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .contact-form-section .grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Print Styles */
@media print {
    .contact-hero-section {
        background: white !important;
        color: black !important;
    }
    
    .neural-network-bg {
        display: none !important;
    }
    
    .contact-form-section form {
        border: 2px solid #ddd;
        page-break-inside: avoid;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .contact-form-section form input,
    .contact-form-section form select,
    .contact-form-section form textarea {
        border: 2px solid currentColor !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .neural-network-bg,
    .contact-hero-section {
        animation: none !important;
    }
    
    .contact-hero-section a:hover,
    .contact-form-section .bg-white:hover,
    .contact-form-section .contact-info-card:hover {
        transform: none !important;
    }
}

/* Focus States for Accessibility */
.contact-form-section form input:focus,
.contact-form-section form select:focus,
.contact-form-section form textarea:focus,
.contact-form-section button:focus {
    outline: 3px solid #CBA27D;
    outline-offset: 2px;
}

/* Loading Animation for Form Submission */
.contact-form-section button[type="submit"]:disabled {
    background: #CBA27D;
    opacity: 0.7;
    cursor: not-allowed;
}

.contact-form-section button[type="submit"]:disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Enhanced Typography */
.contact-hero-section h1,
.contact-form-section h2,
.contact-form-section h3 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Smooth Transitions */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}