/* ============================================================
 * CodeSala — user-toggleable Light / Dark mode.
 * Light is the theme default. `html.cs-dark-mode` flips the global
 * chrome + content surfaces to a dark palette via the existing
 * CSS custom properties plus targeted surface overrides.
 * ============================================================ */

/* ---- Theme toggle button (injected into header-right by cs-modes.js) ---- */
.cs-theme-toggle{
	display:inline-flex;align-items:center;justify-content:center;
	width:42px;height:42px;margin-right:14px;border-radius:50%;
	border:1px solid rgba(241,145,125,.45);background:transparent;
	color:var(--cs-coral-deep,#e3705a);font-size:17px;cursor:pointer;
	transition:background .25s ease,color .25s ease,border-color .25s ease,transform .2s ease;
	line-height:1;flex:0 0 auto;
}
.cs-theme-toggle:hover{background:var(--cs-coral,#f1917d);color:#fff;transform:translateY(-1px);}
.cs-theme-toggle .cs-ico-sun{display:none;}
.cs-theme-toggle .cs-ico-moon{display:block;}
html.cs-dark-mode .cs-theme-toggle{border-color:rgba(241,145,125,.55);color:var(--cs-coral,#f1917d);}
html.cs-dark-mode .cs-theme-toggle .cs-ico-sun{display:block;}
html.cs-dark-mode .cs-theme-toggle .cs-ico-moon{display:none;}

/* ---- Dual logo: JS swaps the src; kill the white logo-pill in dark mode ---- */
html.cs-dark-mode .tp-header-logo,
html.cs-dark-mode .tp-header-logo a,
html.cs-dark-mode .tp-header-logo img,
html.cs-dark-mode .cs-oc-top img{
	background:transparent !important;box-shadow:none !important;border:0 !important;border-radius:0 !important;padding:0 !important;
}

/* ============================================================
 *  DARK MODE PALETTE
 * ============================================================ */
html.cs-dark-mode{
	--cs-ink:#f3eeec;
	--cs-coral-tint:#1d1614;
	--cs-shadow-sm:0 4px 16px rgba(0,0,0,.4);
	--cs-shadow-md:0 14px 40px rgba(0,0,0,.5);
	--cs-shadow-lg:0 24px 60px rgba(0,0,0,.6);
	color-scheme:dark;
}
html.cs-dark-mode,
html.cs-dark-mode body{
	background-color:#0c0a09 !important;
	color:#e7e1de !important;
}

/* Generic surfaces that the theme paints white/light */
html.cs-dark-mode .tp-header-area,
html.cs-dark-mode header,
html.cs-dark-mode .cs-header,
html.cs-dark-mode .header-sticky,
html.cs-dark-mode .footer-area,
html.cs-dark-mode footer,
html.cs-dark-mode .tp-footer-area,
html.cs-dark-mode section,
html.cs-dark-mode .container-fluid > .row,
html.cs-dark-mode [class*="-area"]{
	background-color:transparent;
}

/* Explicitly dark blocks */
html.cs-dark-mode .tp-header-area,
html.cs-dark-mode .header-sticky.sticky,
html.cs-dark-mode .cs-mega-menu,
html.cs-dark-mode .cs-mega-panel,
html.cs-dark-mode .dropdown-white-bg .sub-menu,
html.cs-dark-mode .cs-offcanvas,
html.cs-dark-mode .tp-main-menu ul ul{
	background-color:#141110 !important;
	border-color:#2a2320 !important;
}

/* Cards / panels / white boxes */
html.cs-dark-mode .cs-card,
html.cs-dark-mode .cs-feature,
html.cs-dark-mode .cs-box,
html.cs-dark-mode .tp-postbox-wrapper,
html.cs-dark-mode .wp-block-group,
html.cs-dark-mode .cs-tw,
html.cs-dark-mode .cs-tool-app .cs-tw,
html.cs-dark-mode .widget,
html.cs-dark-mode .cs-mega-cat,
html.cs-dark-mode input,
html.cs-dark-mode textarea,
html.cs-dark-mode select,
html.cs-dark-mode .cs-tw input,
html.cs-dark-mode .cs-tw textarea{
	background-color:#16110f !important;
	border-color:#2c2522 !important;
	color:#e7e1de !important;
}

/* Text colours */
html.cs-dark-mode h1,html.cs-dark-mode h2,html.cs-dark-mode h3,
html.cs-dark-mode h4,html.cs-dark-mode h5,html.cs-dark-mode h6,
html.cs-dark-mode p,html.cs-dark-mode li,html.cs-dark-mode span,
html.cs-dark-mode td,html.cs-dark-mode label,html.cs-dark-mode a{
	color:inherit;
}
html.cs-dark-mode .tp-main-menu > nav > ul > li > a,
html.cs-dark-mode .cs-header a{color:#e7e1de;}

/* Breadcrumb light-coral band → dark */
html.cs-dark-mode .cs-breadcrumb{background:#15100e !important;}
html.cs-dark-mode .cs-breadcrumb .cs-bc-links a{color:#cbbfb9;}

/* Coral accents stay coral (already via vars). Keep coral buttons readable. */
html.cs-dark-mode .cs-btn,
html.cs-dark-mode .cs-gradient-bg{color:#fff !important;}

/* Borders / dividers */
html.cs-dark-mode hr,
html.cs-dark-mode .border,
html.cs-dark-mode [style*="border"]{border-color:#2a2320 !important;}

/* Muted/secondary text */
html.cs-dark-mode .text-muted,
html.cs-dark-mode .cs-muted,
html.cs-dark-mode small{color:#a89f9a !important;}

/* ---- Tool pages: tool-first, user-friendly (works in light + dark) ---- */
body.single-tool .cs-tool-app{ min-height:320px; }
body.single-tool .cdx-hero-visual{ align-self:stretch; width:100%; }
body.single-tool .cs-tool-app .cs-tw{ font-size:15px; }
/* clear, tappable controls inside every tool */
body.single-tool .cs-tool-app button,
body.single-tool .cs-tool-app .cs-tw-btn{ min-height:42px; }

/* ============================================================
 *  DARK MODE — white-surface fixes (mega menu, dropdowns, cards,
 *  white buttons). These target the theme's REAL class names.
 * ============================================================ */

/* Mega menu / app menu + all dropdowns: white panels → dark, text light */
html.cs-dark-mode .cs-mega,
html.cs-dark-mode [class*="-mega"],
html.cs-dark-mode .cs-mega-panel,
html.cs-dark-mode .sub-menu,
html.cs-dark-mode .dropdown-menu,
html.cs-dark-mode .dropdown-white-bg .sub-menu,
html.cs-dark-mode .tp-submenu,
html.cs-dark-mode ul.submenu{
	background-color:#141110 !important;
	border-color:#2c2522 !important;
	color:#e7e1de !important;
	box-shadow:0 24px 60px rgba(0,0,0,.6) !important;
}
html.cs-dark-mode .cs-app-card,
html.cs-dark-mode .cs-mega-card,
html.cs-dark-mode .cs-mega .cs-card{
	background-color:#19130f !important;
	border-color:#2c2522 !important;
}
html.cs-dark-mode .cs-app-card:hover,
html.cs-dark-mode .cs-mega a:hover{ background-color:#231a16 !important; }
/* every text node inside menus/cards → light */
html.cs-dark-mode .cs-mega *,
html.cs-dark-mode [class*="-mega"] *,
html.cs-dark-mode .cs-app-card *,
html.cs-dark-mode .sub-menu a,
html.cs-dark-mode .dropdown-menu a{ color:#e7e1de !important; }
html.cs-dark-mode .cs-mega small,
html.cs-dark-mode .cs-app-card small,
html.cs-dark-mode .cs-app-card p,
html.cs-dark-mode .cs-mega .desc{ color:#a89f9a !important; }
/* icon chips: a touch lighter than card */
html.cs-dark-mode .cs-app-ic,
html.cs-dark-mode .cs-mega-cat i{ background-color:#2a1f1b !important; color:var(--cs-coral,#f1917d) !important; }

/* White buttons: keep light bg but force DARK label so it's readable */
html.cs-dark-mode .tp-btn-white,
html.cs-dark-mode [class*="btn-white"]{ color:#15110f !important; }
html.cs-dark-mode .tp-btn-white *,
html.cs-dark-mode [class*="btn-white"] *{ color:#15110f !important; }

/* Generic white-background utilities / theme blocks → dark surface */
html.cs-dark-mode .bg-white,
html.cs-dark-mode [class*="white-bg"],
html.cs-dark-mode .tp-bg-white,
html.cs-dark-mode .tp-portfolio-2-item,
html.cs-dark-mode .tp-portfolio-tag,
html.cs-dark-mode .tp-brand-customer,
html.cs-dark-mode .tp-hero-bottom-height,
html.cs-dark-mode .shop-slider-progress-bar{
	background-color:#16110f !important;
	border-color:#2c2522 !important;
}

/* Catch-all safety: white inline-styled boxes → dark (covers stray #fff) */
html.cs-dark-mode [style*="background:#fff"],
html.cs-dark-mode [style*="background: #fff"],
html.cs-dark-mode [style*="background-color:#fff"],
html.cs-dark-mode [style*="background-color: #fff"],
html.cs-dark-mode [style*="background:#ffffff"],
html.cs-dark-mode [style*="background-color:#ffffff"]{
	background-color:#16110f !important;
}

/* White square/circle "item" buttons (not the intentional white CTA) → dark */
html.cs-dark-mode .btn-item:not(.tp-btn-white),
html.cs-dark-mode .tp-btn-rounded:not(.tp-btn-white){
	background-color:#19130f !important;
	color:#e7e1de !important;
	border:1px solid #2c2522 !important;
}
/* White form containers (newsletter/search) → transparent; inputs already dark */
html.cs-dark-mode form:not([class*="btn"]){ background-color:transparent !important; }
/* Small white round links/icons → dark chip */
html.cs-dark-mode .tp-back-top,
html.cs-dark-mode .backtotop,
html.cs-dark-mode .cs-footer-social a,
html.cs-dark-mode .tp-social a,
html.cs-dark-mode [class*="social"] a{ background-color:#19130f !important; color:#e7e1de !important; border-color:#2c2522 !important; }
html.cs-dark-mode .cs-footer-social a:hover,
html.cs-dark-mode [class*="social"] a:hover{ background-color:var(--cs-coral,#f1917d) !important; color:#fff !important; }

/* Smooth transition when toggling */
html.cs-dark-mode body,html.cs-dark-mode body *{
	transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}