/* Contact Page Specific Styles */

/* Additional custom styles that can't be handled by Tailwind classes */
.contact-form-container {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-info-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.contact-info-icon {
    margin-right: 0.75rem;
    color: #3b82f6;
}

.business-hours {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 1rem;
}

.business-hours h4 {
    color: #1e293b;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.business-hours ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.business-hours li {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    color: #64748b;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .contact-form-container {
        padding: 0 1rem;
    }

    .contact-info-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }

    .contact-info-icon {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}

/* FAQ section styling */
.faq-item {
    @apply tw-border-b tw-border-gray-200 tw-pb-4 tw-mb-4;
}

.faq-item:last-child {
    @apply tw-border-b-0 tw-pb-0 tw-mb-0;
}

/* Contact info icons */
.contact-icon {
    @apply tw-transition-colors tw-duration-200;
}

.contact-icon:hover {
    @apply tw-transform tw-scale-110;
}

/* Message animations */
.message-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form button loading state */
.btn-loading {
    @apply tw-relative tw-overflow-hidden;
}

.btn-loading::after {
    content: '';
    @apply tw-absolute tw-inset-0 tw-bg-white tw-opacity-20 tw-animate-pulse;
}

/* Contact page specific responsive design */
@media (max-width: 640px) {
    .contact-header h1 {
        @apply tw-text-2xl;
    }

    .contact-header p {
        @apply tw-text-base;
    }

    .contact-section h2 {
        @apply tw-text-xl;
    }
}

/* Accessibility improvements */
.contact-form label {
    @apply tw-font-medium tw-text-gray-700;
}

.contact-form input:required,
.contact-form textarea:required,
.contact-form select:required {
    @apply tw-border-l-4 tw-border-l-blue-500;
}

/* Focus indicators for better accessibility */
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form select:focus-visible {
    @apply tw-outline-none tw-ring-2 tw-ring-blue-500 tw-ring-offset-2;
}

/* Contact method cards accessibility */
.contact-method-card:focus-within {
    @apply tw-ring-2 tw-ring-blue-500 tw-ring-offset-2;
}

/* Social media links accessibility */
.social-link:focus {
    @apply tw-outline-none tw-ring-2 tw-ring-blue-500 tw-ring-offset-2 tw-rounded;
}