/* css/contact.css */

/* Contact Hero Section */
.contact-hero-section {
    /* background-color: #ad5207; from .bg-brand-primary in HTML */
    /* padding-top/bottom from global section style */
    text-align: center;
    border-bottom-left-radius: 0.5rem; /* Visual detail */
    border-bottom-right-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    margin-bottom: 3rem; /* From global section spacing */
    color: white; /* Default text color for this section */
}
.contact-hero-section .content-container {
    /* Default global container styles apply for max-width and horizontal padding */
}
.contact-hero-section h1 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 800;
    color: white; /* Explicitly white */
    margin-bottom: 1.5rem;
}
.contact-hero-section p.intro-text {
    font-size: 1.125rem;
    line-height: 1.75rem;
    max-width: 48rem; /* Constrain intro paragraph width */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
}
.contact-form-wrapper { /* Wrapper for the white form box */
    background-color: white;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    max-width: 42rem; /* Max width of the form itself */
    margin-left: auto;
    margin-right: auto;
}
/* Form elements use global .form-input, .form-label, .form-group, .btn-primary */
.contact-form-wrapper form label.form-label {
    text-align: left; /* Align labels to the left within the form */
    color: #374151; /* Darker text for labels on white background */
}
.contact-form-wrapper .btn-primary {
    /* Specific button styles if different from global, e.g., if it were not brand color */
}

/* International Telephone Input Customization */
.contact-form-wrapper .iti {
    width: 100% !important;
    display: block !important;
}

.contact-form-wrapper .iti__flag-container {
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    border-right: none;
    border-radius: 0.375rem 0 0 0.375rem;
}

.contact-form-wrapper .iti__selected-flag {
    background-color: #f9fafb;
    border: none;
    padding: 0 8px;
    height: 100%;
    display: flex;
    align-items: center;
}

.contact-form-wrapper .iti__selected-flag:hover {
    background-color: #f3f4f6;
}

.contact-form-wrapper .iti__country-list {
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

.contact-form-wrapper .iti__country-list .iti__country {
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.contact-form-wrapper .iti__country-list .iti__country:hover {
    background-color: #f3f4f6;
}

.contact-form-wrapper .iti__country-list .iti__country.iti__highlight {
    background-color: #c2c2c2;
    color: white;
}

.contact-form-wrapper .iti__country-name {
    font-size: 0.875rem;
    color: #374151;
}

.contact-form-wrapper .iti__dial-code {
    font-size: 0.875rem;
    color: #6b7280;
}

.contact-form-wrapper .iti__selected-dial-code {
    font-size: 0.875rem;
    color: #374151;
    margin-left: 4px;
}

.contact-form-wrapper .iti input[type="tel"] {
    border-radius: 0 0.375rem 0.375rem 0;
    border-left: none;
    padding-left: 12px;
}

.contact-form-wrapper .iti input[type="tel"]:focus {
    outline: none;
    ring: 2px;
    ring-color: #ad5207;
    ring-opacity: 0.5;
    border-color: #ad5207;
}

/* Ensure the dropdown doesn't get cut off */
.contact-form-wrapper .form-group {
    position: relative;
    z-index: 1;
}

.contact-form-wrapper .form-group:has(.iti) {
    z-index: 10;
}

/* Responsive adjustments for mobile */
@media (max-width: 640px) {
    .contact-form-wrapper .iti__country-list {
        max-height: 150px;
    }
    
    .contact-form-wrapper .iti__selected-flag {
        padding: 0 6px;
    }
    
    .contact-form-wrapper .iti__country-name {
        font-size: 0.8rem;
    }
    
    .contact-form-wrapper .iti__dial-code {
        font-size: 0.8rem;
    }
}

/* Contact Info & Opening Hours Section */
.contact-info-hours-section {
    /* Vertical padding from global section style */
}
.contact-info-hours-section .content-container {
    /* Default global container styles apply */
}
.contact-info-hours-section .grid-container-contact-details {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem;
    text-align: center;
}
.contact-info-hours-section .grid-container-contact-details > div h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: #ad5207; /* text-brand-primary */
    margin-bottom: 1rem;
}
.contact-info-hours-section .grid-container-contact-details > div p {
    /* color: #374151; from global .text-gray-700 class in HTML */
}

/* Image Section (Map and Office) */
.image-map-section {
    /* Vertical padding from global section style */
}
.image-map-section .content-container {
    /* Default global container styles apply */
}
.image-map-section .grid-container-map-office {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem;
}
.image-map-section .image-wrapper {
    background-color: #E5E7EB; /* bg-gray-200 for placeholder */
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    overflow: hidden; /* To contain the image within rounded corners */
}
.image-map-section .image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block; /* Remove any default bottom spacing for images */
}

@media (min-width: 768px) { /* md */
    .contact-info-hours-section .grid-container-contact-details {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        text-align: left;
    }
     .image-map-section .grid-container-map-office {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) { /* lg */
    .contact-hero-section h1 {
        font-size: 3rem;
        line-height: 1;
    }
}