/*
==============================================================================
LUVEX THEME v3.7 - BOOKING PAGE (Final Harmonious Redesign)
==============================================================================
Description: Final redesign based on user feedback. Reverted Calendar and
             FAQ sections to a consistent, high-contrast dark theme,
             restoring the preferred "tech-style" for the accordion.
Last Update: 2025-09-02
==============================================================================
*/

/* --- 1. Hero Section (No Changes) --- */
#hero-animation-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.booking-hero{display:flex;align-items:center;justify-content:center}.booking-hero .luvex-hero__container{position:relative;z-index:2;max-width:1200px;width:100%;text-align:left;display:block}.booking-hero__grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}.booking-hero__text-content .luvex-hero__title,.booking-hero__text-content .luvex-hero__subtitle,.booking-hero__text-content .luvex-hero__description{text-align:left;margin-left:0;margin-right:0}.booking-hero .luvex-hero__title{color:var(--luvex-white)}.booking-hero .luvex-hero__subtitle{color:var(--luvex-gray-300);max-width:550px}.booking-hero .luvex-hero__description{color:var(--luvex-gray-300);max-width:550px;line-height:1.7}.booking-hero__cta-container{margin-top:2rem;margin-bottom:2rem;justify-content:flex-start}.hero-scroll-button{padding:1rem 2.5rem;font-size:1.1rem;gap:.75rem}.hero-social-proof{margin-top:2.5rem;opacity:.8}.hero-social-proof p{color:var(--luvex-gray-300);font-size:var(--text-sm,.875rem);margin:0}.booking-hero__image-content{display:flex;justify-content:center;align-items:center;position:relative}.expert-image-wrapper{position:relative;max-width:400px;width:100%}.booking-hero__image{width:100%;height:100%;object-fit:cover;max-height:480px;border-radius:var(--radius-xl);border:2px solid rgba(109,213,237,.4);box-shadow:var(--shadow-lg);position:relative;z-index:2}

/* ==============================================================================
2. Calendar Section (DARK THEME)
==============================================================================
*/
.booking-calendar { 
    background: var(--luvex-dark-blue);
}
.booking-calendar__header { 
    text-align: center; 
    margin-bottom: 3rem; 
}
.booking-calendar__title { 
    color: var(--luvex-white); 
}
.booking-calendar__subtitle { 
    color: var(--luvex-gray-300); 
    max-width: 600px;
}
.google-calendar-wrapper--optimized { 
    border-radius: var(--radius-xl); 
    overflow: hidden; 
    margin: 0 auto; 
    max-width: 1000px; 
    border: 1px solid rgba(109, 213, 237, 0.1);
    box-shadow: var(--shadow-lg); 
}
.google-calendar-iframe { 
    display: block; 
    width: 100%; 
    height: 1100px;
    border: none; 
}

/* ==============================================================================
3. Universal Section Header & Benefits Section (DARK THEME)
==============================================================================
*/
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem auto;
}
.section-header__title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 600;
    margin-bottom: 1rem;
}
.section-header__subtitle {
    font-size: var(--text-lg);
    line-height: 1.7;
}

.booking-benefits {
    background-color: var(--luvex-dark-blue);
    padding-top: 8rem;
    padding-bottom: 8rem;
}
.booking-benefits .section-header__title,
.booking-benefits .section-header__subtitle {
    color: var(--luvex-white);
}
.benefits-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 2rem; 
}
.benefit-card { 
    background: var(--luvex-dark-blue-light); 
    border-radius: var(--radius-lg); 
    border: 1px solid rgba(109, 213, 237, 0.1); 
    padding: 2.5rem 2rem; 
    display: flex; 
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem; 
    transition: transform 0.3s ease, background-color 0.3s ease; 
}
.benefit-card:hover { 
    transform: translateY(-8px);
    background-color: var(--luvex-dark-blue-medium);
}
.benefit-card__icon { 
    flex-shrink: 0; 
    width: 60px; 
    height: 60px; 
    background: linear-gradient(135deg, var(--luvex-vibrant-blue), var(--luvex-special-cyan)); 
    color: var(--luvex-white); 
    border-radius: 12px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 2rem; 
    box-shadow: 0 4px 15px rgba(34, 211, 238, 0.2);
}
.benefit-card__title { 
    font-size: 1.25rem; 
    font-weight: 600; 
    color: var(--luvex-white); 
    margin-top: 0;
    margin-bottom: 0.5rem; 
}
.benefit-card__description { 
    color: var(--luvex-gray-300); 
    line-height: 1.6; 
    margin: 0; 
}

/* ==============================================================================
4. FAQ SECTION STYLES (DARK THEME - RESTORED)
==============================================================================
*/
.booking-faq {
    background-color: var(--luvex-dark-blue-dark);
}
.booking-faq .section-header__title {
    color: var(--luvex-white);
}
.booking-faq .section-header__subtitle {
    color: var(--luvex-gray-300);
}
/* The original .accordion--tech styles will now apply correctly on the dark background */


/* ==============================================================================
5. Alternative Contact Section (DARK THEME)
==============================================================================
*/
.booking-alternative { 
    text-align: center; 
    background: var(--luvex-dark-blue-dark); 
}
.booking-alternative__title { 
    color: var(--luvex-white); 
}
.booking-alternative__description { 
    color: var(--luvex-gray-300); 
}
.booking-alternative .btn--outline {
    border-color: rgba(109, 213, 237, 0.5);
    color: var(--luvex-bright-cyan);
}
.booking-alternative .btn--outline:hover {
    background-color: var(--luvex-bright-cyan);
    border-color: var(--luvex-bright-cyan);
    color: var(--luvex-dark-blue);
}

/* --- 6. Responsive Overrides --- */
@media (min-width: 992px) { .booking-hero__grid { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }
@media (max-width: 991px) {
    .booking-hero__image-content { order: -1; margin-bottom: 2rem; }
    .booking-hero__text-content .luvex-hero__title,
    .booking-hero__text-content .luvex-hero__subtitle,
    .booking-hero__text-content .luvex-hero__description,
    .hero-social-proof { text-align: center; max-width: 600px; margin-left: auto; margin-right: auto; }
    .booking-hero__cta-container { justify-content: center; }
}
@media (max-width: 768px) {
    .benefits-grid { grid-template-columns: 1fr; }
    .google-calendar-iframe { height: 950px; }
}