/* ==========================================================================
   GGAM & Associates LLP — Contact Dedicated Stylesheet (contact.css)
   Chamber cards, map containers, emergency notice desk, and booking inputs.
   ========================================================================== */

/* Chamber Highlight Card */
.contact-hub-card {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease;
}

.contact-hub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.1);
    border-color: #3B82F6;
}

/* Chamber Switcher Tabs */
.chamber-tab-btn {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    cursor: pointer;
}

.chamber-tab-btn.active {
    background-color: #2563EB;
    color: #FFFFFF;
    border-color: #2563EB;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.25);
}

.chamber-tab-btn:not(.active):hover {
    background-color: #F1F5F9;
    color: #0F172A;
    border-color: #CBD5E1;
}

/* Meeting Mode Quick Selector Pills */
.mode-pill-btn {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    user-select: none;
}

.mode-pill-btn.active {
    background-color: #EFF6FF;
    color: #1D4ED8;
    border-color: #3B82F6;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.mode-pill-btn:not(.active):hover {
    background-color: #F8FAFC;
    border-color: #CBD5E1;
}

/* Consultation Form Input States */
.consultation-input {
    transition: all 0.2s ease;
}

.consultation-input:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    outline: none;
}

/* Emergency Notice Alert Ribbon */
.urgent-notice-box {
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%);
    border-left: 4px solid #EF4444;
}

/* FAQ Accordion Styling */
.contact-faq-item {
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.contact-faq-item.is-open {
    border-color: #93C5FD;
    background-color: #FFFFFF;
}

.contact-faq-item.is-open .faq-icon {
    transform: rotate(180deg);
    color: #2563EB;
}

.contact-faq-item .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    opacity: 0;
}

.contact-faq-item.is-open .faq-answer {
    max-height: 500px;
    opacity: 1;
}