:root {
  --bg: #ffffff;
  --surface: #f7f7f7;
  --text: #111111;

  --accent: #6E0387;
  --accent-rgb: 110, 3, 135;
  --border: rgba(0,0,0,0.08);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-speed: 500ms;
}


body.dark-mode {
  --bg: #0a0a0a;
  --surface: #1a1a1a;
  --text: #ffffff;
  --accent: #ffffff;
  --accent-rgb: 255, 255, 255;
  --border: rgba(255,255,255,0.1);
  --shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.8);
}

/* Base Body Transition */
body {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    transition: background-color 350ms var(--transition-timing), 
                color 350ms var(--transition-timing),
                filter var(--transition-speed) var(--transition-timing) !important;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Depth Logic for Dark Mode */
body.dark-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% -20%, rgba(var(--accent-rgb), 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.5s ease;
    opacity: 1;
}

body.light-mode::before {
    opacity: 0;
}

/* Phase 1 & 3: Atmosphere Effects */
body.mode-transitioning {
    filter: blur(2px) brightness(0.95) !important;
    pointer-events: none;
}

/* Global Transition Propagation */
body *, body *::before, body *::after {
    transition-property: background-color, color, border-color, box-shadow, filter, backdrop-filter;
    transition-duration: 350ms;
    transition-timing-function: var(--transition-timing);
}

/* Sticky Header Glassmorphism */
.dark-mode #header.is-fixed,
.dark-mode .header-wrap.is-fixed {
    background-color: rgba(15, 15, 15, 0.8) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border-bottom: 1px solid var(--border) !important;
}

/* Specific UI Overrides for Dark Mode */
.dark-mode #header, 
.dark-mode .header-boxed,
.dark-mode .footer_background,
.dark-mode #main-content,
.dark-mode .widget,
.dark-mode article,
.dark-mode .entry-content {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* Elementor sections - use body background, not forced dark */
.dark-mode .elementor-section {
    background-color: transparent !important;
    color: var(--text) !important;
}

/* Elementor containers and columns - transparent to inherit from section */
.dark-mode .elementor-section > .elementor-container,
.dark-mode .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap,
.dark-mode .elementor-column {
    background-color: transparent !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* Page title - transparent background */
.dark-mode .page-title-wrap,
.dark-mode .page-title-wrap *,
.dark-mode .page-title,
.dark-mode .page-title *,
.dark-mode .page-title h1,
.dark-mode .page-title-wrap h1,
.dark-mode .page-title-wrap .elementor-heading-title,
.dark-mode .page-title .elementor-heading-title,
.dark-mode .page-title-wrap .elementor-widget-heading,
.dark-mode .page-title-wrap .elementor-widget-container {
    background-color: transparent !important;
    background: transparent !important;
    color: #ffffff !important;
}

/* Override any Elementor inline background styles */
.dark-mode .elementor-section[style*="background"],
.dark-mode .elementor-column[style*="background"],
.dark-mode .elementor-widget-wrap[style*="background"] {
    background-color: var(--bg) !important;
    background-image: none !important;
}

/* Override specific Elementor element IDs with white backgrounds */
.dark-mode .elementor-element-635722b,
.dark-mode .elementor-element-c61bbe2,
.dark-mode [class*="elementor-element"][style*="background-color:#FFFFFF"],
.dark-mode [class*="elementor-element"][style*="background-color: #FFFFFF"],
.dark-mode [class*="elementor-element"][style*="background-color:#FFF"],
.dark-mode [class*="elementor-element"][style*="background-color: #FFF"] {
    background-color: var(--bg) !important;
}

/* Top Bar Visibility & Social Icons */
.dark-mode .themesflat-top,
.dark-mode .top-bar,
.dark-mode #top-bar {
    background-color: #000000 !important; /* Force pure black background */
    border-bottom: 1px solid var(--border) !important;
}

.dark-mode .themesflat-top *,
.dark-mode .themesflat-top i,
.dark-mode .themesflat-top span,
.dark-mode .themesflat-top a,
.dark-mode .themesflat-top p,
.dark-mode .themesflat-socials li a i,
.dark-mode .themesflat-socials li a {
    color: #ffffff !important;
    background-color: transparent !important; /* Remove any pink backgrounds on social circles */
    border-color: transparent !important;
}

/* Submenus Glassmorphism */
.dark-mode #mainnav ul.sub-menu {
    background-color: rgba(26, 26, 26, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
}

.dark-mode #mainnav ul.sub-menu li a {
    color: var(--text) !important;
}

.dark-mode #mainnav ul.sub-menu li a:hover {
    background-color: rgba(var(--accent-rgb), 0.1) !important;
    color: var(--accent) !important;
}

.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6,
.dark-mode .entry-title a, .dark-mode .widget-title, .dark-mode .page-title,
.dark-mode .elementor-heading-title {
    color: #ffffff !important; /* Pure white for headings */
    background-color: transparent !important; /* Remove any background from headings */
}

.dark-mode p, .dark-mode span, .dark-mode li, .dark-mode div:not(.theme-toggle-btn) {
    color: var(--text);
}

/* Accent Color Mapping - Global Reset to White */
.dark-mode a:not(.tf-btn):not(.elementor-button), 
.dark-mode .accent-color,
.dark-mode i,
.dark-mode .button:hover,
.dark-mode input[type="submit"]:hover,
.dark-mode .social-item i,
.dark-mode .socials-inline a i {
    color: #ffffff !important; /* Nuclear option for removing pink from icons/links */
}

.dark-mode .main-nav > ul > li > a {
    color: #ffffff !important; /* Ensure menu items are white */
}

.dark-mode .themesflat-btn,
.dark-mode .button,
.dark-mode .tf-btn,
.dark-mode input[type="submit"],
.dark-mode .elementor-button {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: 0 4px 14px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Button text and spans inside buttons - force black text */
.dark-mode .themesflat-btn,
.dark-mode .themesflat-btn *,
.dark-mode .button,
.dark-mode .button *,
.dark-mode .tf-btn,
.dark-mode .tf-btn *,
.dark-mode .elementor-button,
.dark-mode .elementor-button *,
.dark-mode .elementor-button span,
.dark-mode .elementor-button-text,
.dark-mode .elementor-button a {
    color: #000000 !important;
}

/* Extra specificity for button links and text */
.dark-mode a.button,
.dark-mode a.tf-btn,
.dark-mode a.themesflat-btn,
.dark-mode a.elementor-button,
.dark-mode .elementor-button-link {
    color: #000000 !important;
}

.dark-mode .button span,
.dark-mode .tf-btn span,
.dark-mode .themesflat-btn span,
.dark-mode .elementor-button span,
.dark-mode .elementor-button-content-wrapper,
.dark-mode .elementor-button-text {
    color: #000000 !important;
}

/* Surface & Card Overrides */
.dark-mode .card,
.dark-mode .item,
.dark-mode .testimonial,
.dark-mode .service-box,
.dark-mode .flat-contact-form {
    background-color: var(--surface) !important;
    backdrop-filter: blur(5px);
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
}

/* Explicitly remove backgrounds from heading widgets */
.dark-mode .elementor-widget-heading .elementor-widget-container,
.dark-mode .elementor-widget-heading {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Borders - Apply only to specific elements that need them */
.dark-mode .card,
.dark-mode .widget,
.dark-mode .service-box,
.dark-mode .testimonial,
.dark-mode input,
.dark-mode textarea,
.dark-mode select,
.dark-mode table,
.dark-mode table td,
.dark-mode table th {
    border-color: var(--border) !important;
}

/* Explicitly remove borders from blog posts and content areas */
.dark-mode article,
.dark-mode article *,
.dark-mode .hentry,
.dark-mode .hentry *,
.dark-mode .entry-content,
.dark-mode .entry-content *,
.dark-mode .post,
.dark-mode .blog-post,
.dark-mode .article-inner,
.dark-mode .post-inner,
.dark-mode .article-wrap,
.dark-mode .blog-article,
.dark-mode .main-post {
    border: none !important;
}

/* Toggle Button Styling */
.theme-toggle-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ffffff; /* Default solid white */
    border: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.4s var(--transition-timing);
    padding: 0;
    overflow: hidden;
}

.dark-mode .theme-toggle-btn {
    background: #1a1a1a !important; /* Brighter surface in dark mode */
    border-color: rgba(255,255,255,0.2) !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.5) !important;
}

.theme-toggle-btn:hover {
    transform: scale(1.1) rotate(12deg);
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
}

.theme-toggle-btn svg {
    width: 28px;
    height: 28px;
    fill: #111111; /* Dark icon for light mode */
    transition: all 0.5s var(--transition-timing);
}

.dark-mode .theme-toggle-btn svg {
    fill: #ffffff !important; /* Bright icon for dark mode */
}



/* Micro-interaction for toggle */
.theme-toggle-btn:active {
    transform: scale(0.9);
}

.dark-mode .theme-toggle-btn .sun-icon {
    transform: translateY(100px);
    opacity: 0;
}

.dark-mode .theme-toggle-btn .moon-icon {
    transform: translateY(0);
    opacity: 1;
}

.light-mode .theme-toggle-btn .sun-icon {
    transform: translateY(0);
    opacity: 1;
}

.light-mode .theme-toggle-btn .moon-icon {
    transform: translateY(-100px);
    opacity: 0;
}

/* Micro-interactions: brighten during transition */
body.mode-transitioning .themesflat-btn,
body.mode-transitioning .button,
body.mode-transitioning i,
body.mode-transitioning svg {
    filter: brightness(1.2) !important;
}

/* Card elevation updates */
.dark-mode .card,
.dark-mode .service-box {
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
}

/* Specific theme elements - Forcing White for Header & Contacts */
.dark-mode .header-wrap,
.dark-mode .main-nav > ul > li > a,
.dark-mode .show-search a,
.dark-mode .flat-information li,
.dark-mode .flat-information li i,
.dark-mode .flat-information li span,
.dark-mode .infor-topbar span,
.dark-mode .content-right span,
.dark-mode .content-right p,
.dark-mode .flat-contact-form span,
.dark-mode .flat-contact-form p,
.dark-mode .header-ct-right a,
.dark-mode .header-ct-right i,
.dark-mode .header-ct-right span,
.dark-mode .header-ct-right div,
.dark-mode .header-contact a,
.dark-mode .header-contact span,
.dark-mode .header-contact i,
.dark-mode .info-content,
.dark-mode .info-content span,
.dark-mode .info-content .title,
.dark-mode .info-text,
.dark-mode .header-infor-phone,
.dark-mode .themesflat-socials li a i,
.dark-mode #header a:not(.tf-btn),
.dark-mode #header .header-ct-right * {
    color: #ffffff !important;
}

/* Specific fix for the phone icon which was showing too dark */
.dark-mode .header-ct-right i,
.dark-mode .info-content i {
    color: #ffffff !important;
}

/* Force white for any elementor icon that might be pink */
.dark-mode .elementor-icon i,
.dark-mode .elementor-view-stacked .elementor-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Icon Box and Image Box - ensure proper visibility */
.dark-mode .elementor-icon-box-wrapper,
.dark-mode .elementor-image-box-wrapper {
    background-color: transparent !important;
}

.dark-mode .elementor-icon-box-icon,
.dark-mode .elementor-icon-box-icon i,
.dark-mode .elementor-icon-box-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.dark-mode .elementor-icon-box-title,
.dark-mode .elementor-icon-box-title a,
.dark-mode .elementor-image-box-title,
.dark-mode .elementor-image-box-title a {
    color: #ffffff !important;
}

.dark-mode .elementor-icon-box-description,
.dark-mode .elementor-image-box-description {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Fix for white background sections containing dark text */
.dark-mode .elementor-section.elementor-section-boxed > .elementor-container,
.dark-mode .elementor-widget-wrap {
    background-color: transparent !important;
}

/* Force dark backgrounds on sections that have light backgrounds */
.dark-mode .elementor-section[data-settings*="background"],
.dark-mode .elementor-column[data-settings*="background"] {
    background-color: var(--bg) !important;
}

/* Ensure all content in sections is visible */
.dark-mode .elementor-section *:not(.tf-btn):not(.button):not(.elementor-button) {
    color: inherit;
}

.dark-mode .elementor-section h1,
.dark-mode .elementor-section h2,
.dark-mode .elementor-section h3,
.dark-mode .elementor-section h4,
.dark-mode .elementor-section h5,
.dark-mode .elementor-section h6,
.dark-mode .elementor-section .elementor-heading-title {
    color: #ffffff !important;
}

.dark-mode .elementor-section p,
.dark-mode .elementor-section span:not(.elementor-button-text),
.dark-mode .elementor-section div:not(.tf-btn):not(.button):not(.elementor-button) {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Force high visibility for all body text in sections */
.dark-mode .elementor-section p,
.dark-mode .elementor-section span:not(.elementor-button-text):not(.button *):not(.tf-btn *):not(.themesflat-btn *),
.dark-mode .elementor-section li,
.dark-mode .elementor-section div:not(.theme-toggle-btn):not(.tf-btn):not(.button):not(.elementor-button) {
    color: var(--text); /* Remove !important here to allow accent overrides */
}

/* Ensure strong visibility for paragraphs specifically */
.dark-mode p {
    color: rgba(229, 229, 229, 0.9) !important;
}

.dark-mode .elementor-widget-text-editor {
    color: var(--text) !important;
}


/* Ripple Animation */
@keyframes ripple {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(15); opacity: 0; }
}

/* Ensure background transitions are smooth globally */
html, body {
    scroll-behavior: smooth;
}

/* Accent Glow Utility */
.accent-glow {
    filter: drop-shadow(0 0 15px var(--accent)) brightness(1.1);
    transition: filter 0.5s ease-out !important;
}

/* Mobile Navigation */
.dark-mode #mainnav-mobi {
    background-color: #0f0f0f !important;
    border-top: 1px solid var(--border) !important;
}

.dark-mode #mainnav-mobi ul li {
    border-bottom: 1px solid var(--border) !important;
}

.dark-mode #mainnav-mobi ul li a {
    color: var(--text) !important;
}

.dark-mode #mainnav-mobi ul li.current-menu-item > a {
    color: var(--accent) !important;
}

/* Logo Refinement */
.dark-mode .logo img {
    filter: brightness(1.2) contrast(1.1);
}

/* Scrollbar Refinement */
.dark-mode::-webkit-scrollbar {
    width: 10px;
}

.dark-mode::-webkit-scrollbar-track {
    background: #0f0f0f;
}

.dark-mode::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 5px;
}

.dark-mode::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* Global Hide Top Bar on Mobile & Tablet */
@media only screen and (max-width: 1199px) {
    .themesflat-top,
    header .themesflat-top,
    .header .themesflat-top,
    #header .themesflat-top,
    .top-bar,
    #top-bar,
    .header-top,
    .topbar {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }
}

/* Final override for any Elementor compiled CSS with white backgrounds */
.dark-mode [class*="elementor-element-"]:not(.page-title):not(.page-title-wrap *) {
    background-color: var(--bg) !important;
}

/* Exclude page title area from dark backgrounds */
.dark-mode .page-title-wrap [class*="elementor-element-"],
.dark-mode .page-title [class*="elementor-element-"] {
    background-color: transparent !important;
    background: none !important;
}

/* Ensure text visibility in all Elementor elements */
.dark-mode [class*="elementor-element-"] * {
    color: inherit;
}

.dark-mode [class*="elementor-element-"] h1,
.dark-mode [class*="elementor-element-"] h2,
.dark-mode [class*="elementor-element-"] h3,
.dark-mode [class*="elementor-element-"] h4,
.dark-mode [class*="elementor-element-"] .elementor-heading-title {
    color: #ffffff !important;
}

.dark-mode [class*="elementor-element-"] p,
.dark-mode [class*="elementor-element-"] span:not(.elementor-button-text),
.dark-mode [class*="elementor-element-"] .elementor-icon-box-description {
    color: rgba(255, 255, 255, 0.9) !important;
}

.dark-mode [class*="elementor-element-"] i,
.dark-mode [class*="elementor-element-"] svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Remove dark backgrounds from content sections that should be transparent/light */
.dark-mode .elementor-section.elementor-section-content-middle,
.dark-mode .elementor-section:has(img),
.dark-mode .elementor-column:has(img) {
    background-color: transparent !important;
}

/* Specific fix for sections with images - make them transparent */
.dark-mode .elementor-widget-image,
.dark-mode .elementor-widget-image + .elementor-column,
.dark-mode .elementor-column .elementor-widget-image ~ * {
    background-color: transparent !important;
}