/* === LIGHT THEME OVERRIDES – PUT THIS IN assets/css/light-theme.css === */

/* ---- Force light backgrounds on ALL dark sections ---- */
.mainHeader,
.bannerSectionMain,
.bannerContentSection,
.overviewSection,
.amenitiesSection,
.floorPlanSection,
.gallerySection,
.priceSection,
.aboutSection,
.mapSection,
.virtualTourSection,
.footerContainer,
.quotePopupContent,
.headerNav,
.bannerOffer,
.quoteForm,
.price-card,
.floorPlanCard,
.tourColumn,
.map-dropdown,
.connectivity-item,
.faqSection {
    background: #ffffff !important;            /* white background */
    background-color: #ffffff !important;
    background-image: none !important;         /* remove gradients */
}

/* ---- Text colours – dark grey for readability ---- */
body,
.bannerIntroText,
.bannerSubtitleText,
.bannerPropertyDescription,
.overviewDescription,
.highlightsList li,
.price-label,
.price-value,
.connectivity-item .location,
.footerAdvertiser,
.footerProjectNumber,
.footerRegistration,
.footerDisclaimer,
.footerLinks p,
.aboutSectionDescription,
.quoteCheckboxWrapper,
.quoteSubTitle,
.floorPlanCard h3,
.map-dropdown-btn,
.bannerOffer .offerText,
.galleryLightboxCounter,
.amenitiesLightboxCounter {
    color: #212529 !important;                 /* dark gray text */
}

/* ---- Headings and titles (gold gradient becomes solid gold) ---- */
.bannerMainTitle,
.bannerPrice,
.price-title,
.quoteTitle,
.tourHeading,
.amenitiesTitle,
.galleryTitle,
.map-title,
.overviewTitle,
.highlightsTitle,
.floorPlanSectionTitle,
.aboutSection .floorPlanSectionTitle {
    background: #34568f !important;            /* gold solid */
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important; /* dark text on gold */
    color: #0a1828 !important;
}

/* ---- Cards and containers – light with subtle shadow ---- */
.price-card,
.floorPlanCard,
.tourColumn,
.quotePopupContent {
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}



/* ---- Input fields – light background ---- */
.quoteInput,
.quotePhoneInput,
.quoteSelect {
    background: #ffffff !important;
    color: #212529 !important;
    border-color: #ced4da !important;
}

/* ---- Footer and disclaimer text ---- */
.footerDisclaimer,
.footerAdvertiser,
.footerProjectNumber,
.footerRegistration {
    color: #495057 !important;
}

/* ---- Links in footer and privacy ---- */
.footerTerms,
.footerPrivacy,
.reraLink,
.readMoreLink {
    color: #34568f !important;
}

/* ---- Mobile bottom bar – light ---- */
.mobileBottomBar {
    background: #ffffff !important;
    border-top: 1px solid #dee2e6 !important;
}
.mobileBottomBar a {
    color: #212529 !important;
}
.mobileBottomBar .whatsappButton {
    background: #25D366 !important;
    color: #fff !important;
}

/* ---- Override any other dark gradient backgrounds ---- */
.headerContainer,
.bannerCarouselContainer,
.bannerImageSection,
.amenitiesImageContainer,
.galleryImageContainer,
.map-image-container,
.videoThumbnail,
.overviewImageSection {
    background: #ffffff !important;
}

/* ---- Keep the gold border on offer box ---- */
.bannerOffer {
    border-color: #34568f !important;
    background: rgba(52,152,219,0.1) !important;
}
/* ─── FIX FAQ SECTION FOR LIGHT THEME ─── */
.faqSection {
    background: #ffffff !important;             /* white background */
    padding: 60px 40px !important;
}

.faqSection summary {
    color: #212529 !important;                  /* dark text for questions */
    font-weight: 700;
}

.faqSection p {
    color: #495057 !important;                  /* medium-dark text for answers */
}

.faqSection details {
    border-bottom: 1px solid #dee2e6 !important; /* light grey border */
}
/* ─── FIX BANNER VIDEO OVERLAY FOR LIGHT THEME ─── */
.bannerVideoOverlay {
    background-color: rgba(255, 255, 255, 0.6) !important; /* soft white overlay */
    backdrop-filter: blur(1px) !important;                 /* subtle glass effect */
}

.bannerOverlayBtn {
    background: #34568f !important;              /* keep your gold brand color */
    color: #eaecee !important;                   /* dark text on the button */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    border: 2px solid #ffffff !important;        /* white border to stand out */
    padding: 12px 30px !important;
    font-size: 18px !important;
}
/* ═══════════════════════════════════════════════════
   💪 SUPER FORCE FIX – FAQ, ABOUT & BODY
   ═══════════════════════════════════════════════════ */

/* 1. Fix the entire page background */
html,
body {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* 2. FAQ Section – Override the inline style */
section.faqSection,
.faqSection {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* FAQ – Questions (summary) */
section.faqSection summary,
.faqSection summary {
    color: #1a1a1a !important;  /* pure dark for readability */
    font-weight: 700;
}

/* FAQ – Answers (paragraphs) */
section.faqSection p,
.faqSection p {
    color: #343a40 !important;  /* dark grey */
}

/* FAQ – Border lines */
section.faqSection details,
.faqSection details {
    border-bottom: 1px solid #dee2e6 !important;
}

/* 3. About Section – Force white background & dark text */
section.aboutSection,
.aboutSection {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* About section description text */
.aboutSectionDescription {
    color: #212529 !important;  /* dark grey/black */
    line-height: 1.8;
}

/* About section heading (if it still has gradient) */
.aboutSection .floorPlanSectionTitle {
    color: #0a1828 !important;  /* dark text on white */
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* ═══════════════════════════════════════════════════
   🚨 ULTIMATE FORCE FIX – FAQ & ABOUT TEXT (MAKE IT DARK)
   ═══════════════════════════════════════════════════ */

/* Force every single piece of text inside FAQ and About to be dark */
#faq,
#faq *,
.faqSection,
.faqSection *,
.aboutSection,
.aboutSection * {
    color: #212529 !important;   /* Dark grey text */
}

/* But make the FAQ Questions (summary) even darker and bold */
#faq summary,
.faqSection summary {
    color: #000000 !important;   /* Pure black for questions */
    font-weight: 700 !important;
}

/* FAQ Answers – slightly lighter but very readable */
#faq p,
.faqSection p {
    color: #343a40 !important;   /* Medium-dark grey */
}
/* Force FAQ background to white */
.faqSection {
    background: #ffffff !important;
    background-color: #ffffff !important;
}
/* ─── NAV LINKS FOR LIGHT HEADER ─── */
.headerNav .headerLink {
    color: #34568f !important;      /* BLACK default (visible on white) */
}

.headerNav .headerLink:hover {
    color: #34568f !important;      /* Blue on hover */
}
/* ---- Buttons – blue background with WHITE text ---- */
.overviewBrochureButton,
.price-get-details,
.floorPlanCta,
.amenitiesDownloadBtn,
.galleryDownloadBtn,
.map-cta,
.requestButton,
.quoteSubmit,
.floorPlanButton,
.sidedownloadBtn {
    background: #34568f !important;      /* Keep blue background */
    color: #ffffff !important;           /* ← WHITE text */
    border-color: #34568f !important;    /* Keep blue border */
}

/* ─── Hover effect ─── */
.overviewBrochureButton:hover,
.price-get-details:hover,
.floorPlanCta:hover,
.amenitiesDownloadBtn:hover,
.galleryDownloadBtn:hover,
.map-cta:hover,
.requestButton:hover,
.quoteSubmit:hover,
.floorPlanButton:hover,
.sidedownloadBtn:hover,
.bannerOverlayBtn:hover,
.popup-trigger:hover {
    background: #003366 !important;           /* Blue background on hover */
    color: #ffffff !important;                /* White text on hover */
    border-color: #003366 !important;
}
.connectivity-item .time {
    font-size: 14px;
    font-weight: 600;
    color: #34568f !important;
    background: rgba(229, 185, 115, .1);
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.floorPlanSectionTitle, .playButton {
    background: linear-gradient(135deg, #e5b973 0, #e5b973 50%, #e5b973 100%);
}
.aboutSection .floorPlanSectionTitle, .playButton {
    background: linear-gradient(135deg, #e4e4e4 0, #e40642 50%, #873f3f 100%);
}
/* ─── SWAP HERO BANNER: FORM LEFT, IMAGE RIGHT ─── */
@media (min-width: 1025px) {  /* Only on desktop */
    .bannerCarouselContainer {
        flex-direction: row;
    }
    
    .bannerImageSection {
        order: 2;  /* Image moves to the right */
        flex: 1;
    }
    
    .bannerContentSection {
        order: 1;  /* Form/Text moves to the left */
        flex: 0 0 30%;  /* Slightly wider to give the form more space */
    }
}
/* ─── HIDE "CALL" BUTTON ON DESKTOP ─── */
@media (min-width: 1025px) {
    .headerContactSection .headerContact {
        display: none !important;
    }
}