/*
 * contact.css
 * Styles specific to the contact.html page.
 * This file should be linked after global.css in your contact.html.
 */

/* ========================================= */
/* Contact Hero Section */
/* ========================================= */

.contact-hero-section {
    /* Tailwind already handles bg-blue-700, text-white, py-16, text-center, rounded-b-xl, shadow-lg */
    /* You can add a subtle background pattern or a more complex gradient here if desired */
    /* background: linear-gradient(to right, #1d4ed8, #2563eb); */
}

/* ========================================= */
/* Contact Information Cards */
/* ========================================= */

.contact-info-section {
    /* Tailwind handles bg-white, rounded-xl, shadow-lg, mx-auto, max-w-6xl, mt-8, p-8 */
}

.info-card {
    /* Tailwind handles bg-gray-50, p-6, rounded-lg, shadow-md, hover:shadow-xl, transition, duration-300, transform, hover:scale-105, flex, flex-col, items-center, text-center */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border for definition */
    /* Add animation for cards appearing on load */
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

/* Stagger animation for info cards */
.contact-info-section .info-card:nth-child(1) { animation-delay: 0.1s; }
.contact-info-section .info-card:nth-child(2) { animation-delay: 0.2s; }
.contact-info-section .info-card:nth-child(3) { animation-delay: 0.3s; }

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

.info-icon {
    /* Tailwind handles text-color, text-5xl, mb-4 */
    /* You can add custom styling for the icons here, e.g., a background circle */
    /* background-color: #e0f2fe; /* Light blue circle */
    /* border-radius: 50%; */
    /* padding: 1rem; */
}

.info-title {
    /* Tailwind handles text-2xl, font-semibold, text-gray-900, mb-3 */
}

.info-description {
    /* Tailwind handles text-gray-700, leading-relaxed */
}

/* ========================================= */
/* Contact Form Section */
/* ========================================= */

.contact-form-section {
    /* Tailwind handles bg-gray-100, rounded-xl, shadow-lg, mx-auto, max-w-6xl, mt-8, p-8 */
}

.contact-form-section .section-title {
    /* Specific styling for the title within this section if different from global .section-title */
}

.form-input,
.form-textarea {
    /* Tailwind handles block, w-full, px-4, py-2, border, rounded-lg, shadow-sm, focus styles, transition, duration-200 */
    /* Customizing placeholder color, consistent with login/signup forms */
    &::placeholder {
        color: #9ca3af; /* Tailwind's gray-400 */
        opacity: 1; /* Firefox default is lower opacity */
    }
    /* Add a subtle inset shadow for depth, consistent with other forms */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.form-input:focus,
.form-textarea:focus {
    /* Ensure focus ring is prominent and consistent */
    border-color: #3b82f6; /* Tailwind's blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); /* Custom ring color with transparency */
}

#contact-form-message {
    /* Styles for the message display area (success/error) */
    /* Tailwind classes handle text-center, text-sm, font-semibold, py-2, rounded-md, hidden */
    &.text-green-600 {
        background-color: #d1fae5; /* Tailwind's green-100 */
        border: 1px solid #34d399; /* Tailwind's green-400 */
    }
    &.text-red-600 {
        background-color: #fee2e2; /* Tailwind's red-100 */
        border: 1px solid #ef4444; /* Tailwind's red-500 */
    }
    &.text-blue-600 { /* For info messages */
        background-color: #dbeafe; /* Tailwind's blue-100 */
        border: 1px solid #60a5fa; /* Tailwind's blue-400 */
    }
}

.btn-submit {
    /* Tailwind classes handle w-full, flex, justify-center, py-3, px-4, rounded-lg, shadow-sm, text-lg, font-semibold, text-white, bg-blue-600, hover:bg-blue-700, focus styles, transition, transform, hover:scale-105 */
    /* Add a subtle gradient for a more premium feel, consistent with other buttons */
    background: linear-gradient(to right, #3b82f6, #2563eb); /* Tailwind blue-500 to blue-700 */
    border: none; /* Remove default border */
    position: relative;
    overflow: hidden; /* For hover effect */
}

.btn-submit:hover {
    background: linear-gradient(to right, #2563eb, #1d4ed8); /* Darker gradient on hover */
}

/* Optional: Add a ripple effect or subtle glow on hover/focus for buttons */
.btn-submit::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.4s ease-out;
}

.btn-submit:hover::before {
    width: 200%;
    height: 200%;
    opacity: 1;
}

/* ========================================= */
/* Google Map Section */
/* ========================================= */

.map-section {
    /* Tailwind handles bg-white, rounded-xl, shadow-lg, mx-auto, max-w-6xl, mt-8, p-8 */
}

.map-container {
    /* Tailwind handles bg-gray-200, rounded-lg, overflow-hidden, shadow-md, height */
    /* No custom styles needed unless you want to add a border or specific shadow */
}