.gold-gradient-text {
    background: linear-gradient(135deg, #F3E5AB 0%, #C5A059 50%, #997A38 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gold-gradient-bg {
    background: linear-gradient(135deg, #E5C585 0%, #C5A059 50%, #997A38 100%);
}
.charcoal-gradient-bg {
    background: linear-gradient(180deg, #0B0C10 0%, #16181D 100%);
}
.glass-card {
    background: rgba(22, 24, 29, 0.9);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(197, 160, 89, 0.25);
}
.glass-card:hover {
    border-color: rgba(197, 160, 89, 0.7);
    box-shadow: 0 12px 35px -10px rgba(197, 160, 89, 0.35);
}
/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0B0C10;
}
::-webkit-scrollbar-thumb {
    background: #C5A059;
    border-radius: 4px;
}
/* ================================================
   ELITEVERTEX PREMIUM WHITE + METALLIC GOLD THEME
   Visual-only theme layer — functionality preserved
   ================================================ */
:root {
    --ev-white: #FFFFFF;
    --ev-ivory: #FBFAF7;
    --ev-cream: #F5F2EA;
    --ev-gold: #B08A3E;
    --ev-gold-light: #D8BD78;
    --ev-gold-dark: #8A6A2F;
    --ev-ink: #1F1D19;
    --ev-muted: #5F5B52;
    --ev-border: rgba(176, 138, 62, 0.28);
}

html, body {
    background: var(--ev-white) !important;
    color: var(--ev-ink) !important;
}

/* Replace the dark Tailwind theme surfaces with premium white/ivory. */
.bg-charcoalBlack, .bg-charcoalBlack\/95, .bg-charcoalBlack\/90,
.bg-charcoalBlack\/80, .bg-charcoalBlack\/70, .bg-charcoalBlack\/60,
.bg-charcoalBlack\/50, .bg-charcoalBlack\/40, .bg-charcoalBlack\/30,
.bg-charcoalBlack\/20, .bg-charcoalBlack\/10 {
    background-color: var(--ev-white) !important;
}

.bg-elevatedCard, .bg-elevatedCard\/95, .bg-elevatedCard\/90,
.bg-elevatedCard\/80, .bg-elevatedCard\/70, .bg-elevatedCard\/60,
.bg-elevatedCard\/50, .bg-elevatedCard\/40, .bg-elevatedCard\/30,
.bg-elevatedCard\/20, .bg-elevatedCard\/10 {
    background-color: var(--ev-ivory) !important;
}

/* Explicit dark hex backgrounds used in header/footer. */
.bg-\[\#060709\] {
    background-color: var(--ev-ink) !important;
}

/* Typography: dark ink replaces white/gray text for readability on white. */
.text-white { color: #FFFFFF !important; }
.text-gray-100, .text-gray-200, .text-gray-300 { color: #3F3B34 !important; }
.text-gray-400 { color: var(--ev-muted) !important; }
.text-gray-500 { color: #777166 !important; }

/* Keep gold branding strong and metallic. */
.text-richGold { color: var(--ev-gold) !important; }
.border-richGold\/20 { border-color: rgba(176,138,62,.20) !important; }
.border-richGold\/25 { border-color: rgba(176,138,62,.25) !important; }
.border-richGold\/30 { border-color: rgba(176,138,62,.30) !important; }
.border-richGold\/40 { border-color: rgba(176,138,62,.40) !important; }
.border-richGold\/50 { border-color: rgba(176,138,62,.50) !important; }
.border-gray-700, .border-gray-800 { border-color: #DDD8CC !important; }

/* Gold-gradient buttons remain metallic; dark text on gold stays intentional. */
.text-charcoalBlack { color: #211E18 !important; }
.gold-gradient-bg {
    background: linear-gradient(135deg, #F0DEAA 0%, #C5A059 48%, #98742F 100%) !important;
}
.gold-gradient-text {
    background: linear-gradient(135deg, #8A6A2F 0%, #B08A3E 48%, #D1AE62 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* White cards with subtle gold edging instead of dark glass. */
.glass-card {
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(14px);
    border: 1px solid rgba(176,138,62,.28) !important;
    box-shadow: 0 14px 40px rgba(49,42,29,.08);
}
.glass-card:hover {
    border-color: rgba(176,138,62,.65) !important;
    box-shadow: 0 18px 45px rgba(49,42,29,.13), 0 8px 22px rgba(176,138,62,.10) !important;
}

/* Hero image overlay becomes light, keeping Dubai visible without darkening the page. */
#hero .bg-gradient-to-r {
    background-image: linear-gradient(to right, rgba(255,255,255,.96), rgba(255,255,255,.88), rgba(255,255,255,.40)) !important;
}

/* Forms: crisp white inputs with gold focus states. */
input.bg-charcoalBlack, select.bg-charcoalBlack, textarea.bg-charcoalBlack {
    background-color: #FFFFFF !important;
    color: var(--ev-ink) !important;
    border-color: #D8D2C6 !important;
}
input::placeholder, textarea::placeholder { color: #918A7D !important; }
select option { background: #FFFFFF; color: var(--ev-ink); }

/* Subtle ivory section contrast. */
#authorities, #calculator, #contact {
    background-color: var(--ev-ivory) !important;
}
#services, #about {
    background-color: var(--ev-white) !important;
}

/* Footer remains premium dark for contrast, while all main content is white/gold. */
footer.bg-\[\#060709\] {
    background: linear-gradient(180deg, #27231C 0%, #171511 100%) !important;
    color: #D8D2C6 !important;
}
footer .text-white { color: #FFFFFF !important; }
footer .text-gray-400, footer .text-gray-500 { color: #C7C0B2 !important; }
footer .bg-elevatedCard { background-color: rgba(255,255,255,.07) !important; }
footer .border-gray-800 { border-color: rgba(255,255,255,.15) !important; }

/* Scrollbar follows the new palette. */
::-webkit-scrollbar-track { background: #F3F0E8 !important; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#D8BD78,#A77E32) !important; }

/* Modal backdrop stays intentionally dark for focus. */
#service-modal { background-color: rgba(31,29,25,.72) !important; }

/* Utility used by gradients/hover states that otherwise expect a dark theme. */
.hover\:text-richGold:hover { color: var(--ev-gold) !important; }
.hover\:bg-richGold:hover { background-color: var(--ev-gold) !important; }