/* ═══════════════════════════════════════════════════════
   ICONIC REALTY — LUXURY MONOCHROME THEME
   Replaces warm brown/gold palette with premium Black-Grey-White
   ═══════════════════════════════════════════════════════ */

/* ─── MONTSERRAT GOOGLE FONT ─── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

/* ─── GLOBAL TYPOGRAPHY — Montserrat only ─── */
body,
nav, header, main, section, article, aside, footer,
h1, h2, h3, h4, h5, h6,
p, a, span, button, label, li, td, th, caption,
div, blockquote, strong, em, small, b, u,
input, textarea, select, option {
    font-family: 'Montserrat', sans-serif !important;
}

/* Default weight: Light 300 */
body {
    font-weight: 300;
}

/* Heading weights */
h1, h2 { font-weight: 600; }
h3, h4 { font-weight: 600; }
h5, h6 { font-weight: 400; }

:root {
    --primary-black: #000000;
    --charcoal:      #1A1A1A;
    --dark-grey:     #2B2B2B;
    --medium-grey:   #4A4A4A;
    --light-grey:    #BDBDBD;
    --white:         #FFFFFF;
}

/* ─── BODY ─── */
body {
    background-color: var(--charcoal) !important;
    color: var(--white) !important;
}

/* ═══════════════════════════════════════════════════════
   BACKGROUND OVERRIDES
   ═══════════════════════════════════════════════════════ */

/* Cream / warm-white sections → charcoal */
.bg-\[\#fbf8f1\]  { background-color: var(--charcoal)   !important; }
.bg-\[\#faf9f6\]  { background-color: var(--charcoal)   !important; }
.bg-\[\#fdf8f0\]  { background-color: var(--dark-grey)  !important; }
.bg-\[\#f5ece0\]  { background-color: var(--dark-grey)  !important; }
.bg-\[\#f5f0e8\]  { background-color: var(--dark-grey)  !important; }

/* Dark brown sections → pure black */
.bg-\[\#3a2118\]  { background-color: var(--primary-black) !important; }
.bg-\[\#3b241a\]  { background-color: var(--primary-black) !important; }
.bg-\[\#4a2a1c\]  { background-color: var(--primary-black) !important; }
.bg-\[\#211815\]  { background-color: var(--primary-black) !important; }

/* White card / component backgrounds → dark grey */
.bg-white         { background-color: var(--dark-grey)  !important; }

/* Gold/amber primary-button backgrounds → white */
.bg-\[\#c6a15b\]  { background-color: var(--white)      !important; }
.bg-\[\#c9a66b\]  { background-color: var(--white)      !important; }

/* Opacity/backdrop variants */
.bg-\[\#c6a15b\]\/10  { background-color: rgba(255,255,255,0.08) !important; }
.bg-\[\#c6a15b\]\/20  { background-color: rgba(255,255,255,0.12) !important; }
.bg-\[\#3a2118\]\/5   { background-color: rgba(0,0,0,0.05)       !important; }
.bg-white\/5          { background-color: rgba(255,255,255,0.05)  !important; }

/* ═══════════════════════════════════════════════════════
   TEXT COLOR OVERRIDES
   ═══════════════════════════════════════════════════════ */

/* Dark brown text (was on cream bg, now on dark bg) → white */
.text-\[\#3a2118\]  { color: var(--white)      !important; }
.text-\[\#3b241a\]  { color: var(--white)      !important; }
.text-\[\#211815\]  { color: var(--white)      !important; }
.text-\[\#3c302c\]  { color: var(--white)      !important; }
.text-\[\#3f332f\]  { color: var(--light-grey) !important; }

/* Body / muted text → light grey */
.text-\[\#655953\]  { color: var(--light-grey) !important; }
.text-\[\#9b7654\]  { color: var(--light-grey) !important; }
.text-\[\#6b5249\]  { color: var(--light-grey) !important; }

/* Gold/amber text → light grey accent */
.text-\[\#c6a15b\]  { color: var(--light-grey) !important; }
.text-\[\#c9a66b\]  { color: var(--light-grey) !important; }

/* Cream text (was on dark bg) → white */
.text-\[\#f5e6d3\]  { color: var(--white)      !important; }
.text-\[\#d8c6bb\]  { color: var(--light-grey) !important; }

/* ═══════════════════════════════════════════════════════
   BORDER COLOR OVERRIDES
   ═══════════════════════════════════════════════════════ */

.border-\[\#c6a15b\]       { border-color: var(--medium-grey) !important; }
.border-\[\#c6a15b\]\/20   { border-color: rgba(74,74,74,0.5) !important; }
.border-\[\#c6a15b\]\/25   { border-color: rgba(74,74,74,0.5) !important; }
.border-\[\#c6a15b\]\/30   { border-color: rgba(74,74,74,0.5) !important; }
.border-\[\#c6a15b\]\/40   { border-color: rgba(74,74,74,0.6) !important; }
.border-\[\#6f4d3f\]       { border-color: var(--dark-grey)   !important; }
.border-\[\#ded4c9\]       { border-color: var(--dark-grey)   !important; }
.border-\[\#e6ded4\]       { border-color: var(--dark-grey)   !important; }
.border-\[\#e3d6ca\]       { border-color: var(--dark-grey)   !important; }
.border-\[\#e5dfd3\]       { border-color: var(--dark-grey)   !important; }
.border-\[\#e8ddd7\]       { border-color: var(--dark-grey)   !important; }
.border-\[\#d6c4b7\]       { border-color: var(--medium-grey) !important; }
.border-\[\#e8ddd4\]       { border-color: var(--dark-grey)   !important; }

/* ═══════════════════════════════════════════════════════
   HOVER STATE OVERRIDES
   ═══════════════════════════════════════════════════════ */

/* Hover backgrounds */
.hover\:bg-\[\#c6a15b\]:hover  { background-color: var(--medium-grey)    !important; color: var(--white) !important; }
.hover\:bg-\[\#b48f4c\]:hover  { background-color: var(--medium-grey)    !important; }
.hover\:bg-\[\#b18b49\]:hover  { background-color: var(--medium-grey)    !important; }
.hover\:bg-\[\#3a2118\]:hover  { background-color: var(--white)          !important; color: var(--primary-black) !important; }
.hover\:bg-\[\#351d13\]:hover  { background-color: var(--dark-grey)      !important; }
.hover\:bg-white:hover         { background-color: var(--white)          !important; }

/* Hover text */
.hover\:text-\[\#c6a15b\]:hover    { color: var(--white)      !important; }
.hover\:text-\[\#5A3825\]:hover    { color: var(--light-grey) !important; }
.hover\:text-\[\#3a2118\]:hover    { color: var(--white)      !important; }
.hover\:text-\[\#f5e6d3\]:hover    { color: var(--white)      !important; }
.hover\:text-white:hover           { color: var(--white)      !important; }

/* Hover borders */
.hover\:border-\[\#c6a15b\]:hover  { border-color: var(--light-grey)   !important; }
.hover\:border-\[\#3a2118\]:hover  { border-color: var(--medium-grey)  !important; }
.hover\:border-\[\#gold\]:hover    { border-color: var(--light-grey)   !important; }

/* ═══════════════════════════════════════════════════════
   GRADIENT OVERRIDES
   ═══════════════════════════════════════════════════════ */
.from-\[\#3a2118\]   { --tw-gradient-from: #000000 var(--tw-gradient-from-position) !important; }
.from-\[\#1a0e09\]   { --tw-gradient-from: #000000 var(--tw-gradient-from-position) !important; }
.via-\[\#1a0e09\]    { --tw-gradient-via: rgba(0,0,0,0.5) var(--tw-gradient-via-position) !important; }
.from-transparent    { --tw-gradient-from: transparent var(--tw-gradient-from-position) !important; }

/* ═══════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════ */
nav.fixed {
    background-color: rgba(0,0,0,0.96) !important;
    border-bottom-color: var(--dark-grey) !important;
    backdrop-filter: blur(12px) !important;
}
nav.fixed .text-\[\#3c302c\],
nav.fixed .text-\[\#3f332f\] {
    color: var(--white) !important;
}

/* ═══════════════════════════════════════════════════════
   BUTTONS — PRIMARY (was gold → white bg / black text)
   ═══════════════════════════════════════════════════════ */
.rounded-full.bg-\[\#c6a15b\],
a.bg-\[\#c6a15b\],
button.bg-\[\#c6a15b\] {
    background-color: var(--white) !important;
    color: var(--primary-black) !important;
}
.rounded-full.bg-\[\#c6a15b\]:hover,
a.bg-\[\#c6a15b\]:hover,
button.bg-\[\#c6a15b\]:hover {
    background-color: var(--light-grey) !important;
    color: var(--primary-black) !important;
}

/* Submit / CTA buttons */
button[type="submit"].bg-\[\#c6a15b\] {
    background-color: var(--white) !important;
    color: var(--primary-black) !important;
}
button[type="submit"].bg-\[\#c6a15b\]:hover {
    background-color: var(--light-grey) !important;
}

/* ═══════════════════════════════════════════════════════
   SHADOW OVERRIDES
   ═══════════════════════════════════════════════════════ */
.shadow-\[\#4a2a1c\]\/10 { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4) !important; }
.shadow-\[\#3d2419\]\/10 { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3) !important; }
.shadow-\[\#3d2419\]\/15 { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.4) !important; }
.shadow-\[\#3a2118\]\/8  { box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; }
.shadow-\[\#3a2118\]\/10 { box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important; }
.shadow-\[\#3a2118\]\/12 { box-shadow: 0 4px 8px rgba(0,0,0,0.4) !important; }
.shadow-\[\#3a2118\]\/14 { box-shadow: 0 6px 10px rgba(0,0,0,0.4) !important; }
.shadow-\[\#3a2118\]\/15 { box-shadow: 0 6px 10px rgba(0,0,0,0.45) !important; }
.shadow-\[\#3a2118\]\/18 { box-shadow: 0 8px 12px rgba(0,0,0,0.5) !important; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5) !important; }
.shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4) !important; }
.shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5) !important; }

/* ═══════════════════════════════════════════════════════
   FORMS — Dark inputs, white text, grey borders
   ═══════════════════════════════════════════════════════ */
input[type="text"],
input[type="tel"],
input[type="email"],
textarea,
select {
    background-color: var(--charcoal) !important;
    color: var(--white) !important;
    border-color: var(--medium-grey) !important;
}
input::placeholder,
textarea::placeholder {
    color: var(--medium-grey) !important;
    opacity: 1 !important;
}
input:focus,
textarea:focus,
select:focus {
    border-color: var(--light-grey) !important;
    box-shadow: 0 0 0 1px var(--dark-grey) !important;
    outline: none !important;
}
select option {
    background-color: var(--dark-grey) !important;
    color: var(--white) !important;
}

/* ═══════════════════════════════════════════════════════
   CARD COMPONENTS
   ═══════════════════════════════════════════════════════ */
.amenity-card {
    background: rgba(43,43,43,0.95) !important;
    border-color: rgba(74,74,74,0.4) !important;
}
.amenity-card:hover {
    border-color: var(--light-grey) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4) !important;
}
.gallery-card {
    background: var(--dark-grey) !important;
    border-color: var(--dark-grey) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
}
.plan-card {
    background: var(--dark-grey) !important;
    border-color: var(--dark-grey) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
}
.loc-item {
    background: var(--dark-grey) !important;
    border-color: rgba(74,74,74,0.3) !important;
}
.loc-item:hover {
    border-color: var(--light-grey) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.3) !important;
}
.counter-box {
    background: var(--primary-black) !important;
}
.interest-card {
    background: var(--dark-grey) !important;
    border-color: rgba(74,74,74,0.3) !important;
}
.interest-card:hover {
    border-color: var(--light-grey) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.3) !important;
}

/* Mission/Vision/Award/Process cards */
.mission-card,
.vision-card,
.award-card,
.testimonial-card {
    background: var(--dark-grey) !important;
    border-color: var(--dark-grey) !important;
}

/* ═══════════════════════════════════════════════════════
   TIMELINE
   ═══════════════════════════════════════════════════════ */
.timeline-dot {
    background-color: var(--light-grey) !important;
    border-color: var(--charcoal) !important;
}

/* ═══════════════════════════════════════════════════════
   SECTION INLINE GRADIENT BACKGROUNDS
   (applied via inline style attr — handled by body rule)
   ═══════════════════════════════════════════════════════ */
section[style*="#fdf8f0"],
section[style*="#f0e8d8"],
section[style*="fdf8f0"] {
    background: linear-gradient(135deg, var(--charcoal), var(--dark-grey)) !important;
}

/* ═══════════════════════════════════════════════════════
   LIGHTBOX — keep dark
   ═══════════════════════════════════════════════════════ */
#lightbox {
    background: rgba(0,0,0,0.95) !important;
}
#lb-prev, #lb-next {
    background: rgba(74,74,74,0.4) !important;
}
#lb-prev:hover, #lb-next:hover {
    background: rgba(189,189,189,0.4) !important;
}

/* ═══════════════════════════════════════════════════════
   DIVIDERS / SEPARATORS
   ═══════════════════════════════════════════════════════ */
.h-\[1px\].bg-\[\#c6a15b\]   { background-color: var(--medium-grey)  !important; }
.w-\[1px\].bg-\[\#c6a15b\]   { background-color: var(--medium-grey)  !important; }

/* ═══════════════════════════════════════════════════════
   PROCESS / STAT NUMBERS
   ═══════════════════════════════════════════════════════ */
.process-number.text-\[\#c6a15b\]\/20 { color: rgba(189,189,189,0.15) !important; }

/* Rounded gradient icon backgrounds */
.rounded-full.bg-\[\#c6a15b\].flex {
    background: linear-gradient(135deg, var(--medium-grey), var(--dark-grey)) !important;
}

/* ═══════════════════════════════════════════════════════
   BACKDROP / BLUR LAYERS (hero sections keep overlay)
   ═══════════════════════════════════════════════════════ */
.bg-white\/5.backdrop-blur-sm { background-color: rgba(255,255,255,0.04) !important; }

/* ═══════════════════════════════════════════════════════
   MAP IFRAME BORDER
   ═══════════════════════════════════════════════════════ */
.rounded-\[28px\].overflow-hidden.shadow-xl.border { border-color: var(--dark-grey) !important; }

/* ═══════════════════════════════════════════════════════
   CTA BANNER (dark rounded section)
   ═══════════════════════════════════════════════════════ */
.rounded-\[40px\].bg-\[\#3a2118\],
.rounded-\[50px\].bg-\[\#3a2118\] {
    background-color: var(--primary-black) !important;
}

/* ═══════════════════════════════════════════════════════
   FORM OUTER CARD (white card with form inside)
   ═══════════════════════════════════════════════════════ */
.rounded-\[40px\].border.border-\[\#c6a15b\]\/20.bg-white {
    background-color: var(--dark-grey) !important;
    border-color: rgba(74,74,74,0.5) !important;
}

/* ═══════════════════════════════════════════════════════
   GRADIENT SEPARATOR LINE
   ═══════════════════════════════════════════════════════ */
.bg-gradient-to-r.from-transparent.via-\[\#c6a15b\]\/30.to-transparent {
    background: linear-gradient(to right, transparent, rgba(74,74,74,0.4), transparent) !important;
}

/* ═══════════════════════════════════════════════════════
   BENEFIT CARDS in Invest page
   ═══════════════════════════════════════════════════════ */
.rounded-\[28px\].border.border-\[\#c6a15b\]\/20.bg-white {
    background-color: var(--dark-grey) !important;
    border-color: rgba(74,74,74,0.4) !important;
}

/* ═══════════════════════════════════════════════════════
   COMING SOON / INTEREST CARDS
   ═══════════════════════════════════════════════════════ */
.rounded-\[40px\].border.border-\[\#e3d6ca\].bg-white {
    background-color: var(--dark-grey) !important;
    border-color: var(--dark-grey) !important;
}

/* ═══════════════════════════════════════════════════════
   AMENITY ICON CIRCLES
   ═══════════════════════════════════════════════════════ */
.amenity-icon {
    background: linear-gradient(135deg, var(--medium-grey), var(--dark-grey)) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}
.loc-dot {
    background: linear-gradient(135deg, var(--medium-grey), var(--dark-grey)) !important;
}

/* ═══════════════════════════════════════════════════════
   PLAN CARD BORDER TOP
   ═══════════════════════════════════════════════════════ */
.border-t.border-\[\#e3d6ca\] { border-color: var(--medium-grey) !important; }

/* ═══════════════════════════════════════════════════════
   STAT / METRIC icons in About page
   ═══════════════════════════════════════════════════════ */
.rounded-full.bg-\[\#c6a15b\]\/10 {
    background-color: rgba(189,189,189,0.1) !important;
}
.rounded-full.bg-\[\#c6a15b\]\/20 {
    background-color: rgba(189,189,189,0.12) !important;
}

/* ═══════════════════════════════════════════════════════
   FOOTER CIRCLE
   ═══════════════════════════════════════════════════════ */
.footer-circle {
    border-color: var(--dark-grey) !important;
}

/* ═══════════════════════════════════════════════════════
   OVERLAY BACKDROP
   ═══════════════════════════════════════════════════════ */
#luxOverlay {
    background: rgba(0,0,0,0.7) !important;
}