/* ==========================================================================
   WP LEFT DARK MODE - FRONTEND STYLESHEET
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FLOATING BUTTON CORE STYLES (FIXED ON LEFT SIDE)
   -------------------------------------------------------------------------- */
.wp-left-dark-mode-button {
	position: fixed !important;
	z-index: 999999 !important;
	width: var(--wp-dm-btn-size, 52px) !important;
	height: var(--wp-dm-btn-size, 52px) !important;
	border-radius: var(--wp-dm-btn-radius, 50%) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	user-select: none !important;
	outline: none !important;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
	            box-shadow 0.3s ease,
	            background-color 0.3s ease,
	            border-color 0.3s ease !important;
	background-color: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: #1e293b;
	overflow: hidden;
	box-sizing: border-box !important;
}

/* Glassmorphism Effect */
.wp-left-dark-mode-button.wp-dm-glass {
	background: rgba(255, 255, 255, 0.65) !important;
	backdrop-filter: blur(14px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(14px) saturate(180%) !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* Shadow Styling */
.wp-left-dark-mode-button.wp-dm-shadow {
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08) !important;
}

/* Hover & Focus State */
.wp-left-dark-mode-button:hover,
.wp-left-dark-mode-button:focus-visible {
	transform: scale(1.1) !important;
}

.wp-left-dark-mode-button.wp-dm-pos-center-left:hover,
.wp-left-dark-mode-button.wp-dm-pos-center-left:focus-visible {
	transform: translateY(-50%) scale(1.1) !important;
}

.wp-left-dark-mode-button:focus-visible {
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.4) !important;
}

/* --------------------------------------------------------------------------
   2. LEFT SIDE POSITIONS
   -------------------------------------------------------------------------- */
/* Top Left */
.wp-left-dark-mode-button.wp-dm-pos-top-left {
	top: calc(20px + var(--wp-dm-btn-offset-y, 0px)) !important;
	left: var(--wp-dm-btn-offset-x, 20px) !important;
}

/* Center Left (Default - Similar to WhatsApp Chat Button) */
.wp-left-dark-mode-button.wp-dm-pos-center-left {
	top: calc(50% + var(--wp-dm-btn-offset-y, 0px)) !important;
	left: var(--wp-dm-btn-offset-x, 20px) !important;
	transform: translateY(-50%);
}

/* Bottom Left */
.wp-left-dark-mode-button.wp-dm-pos-bottom-left {
	bottom: calc(20px + var(--wp-dm-btn-offset-y, 0px)) !important;
	left: var(--wp-dm-btn-offset-x, 20px) !important;
}

/* --------------------------------------------------------------------------
   3. ICON SWITCHING ANIMATION & RIPPLE
   -------------------------------------------------------------------------- */
.wp-left-dark-mode-button .wp-dm-icon {
	width: calc(var(--wp-dm-btn-size, 52px) * 0.48) !important;
	height: calc(var(--wp-dm-btn-size, 52px) * 0.48) !important;
	position: absolute !important;
	transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
	            opacity 0.4s ease,
	            color 0.3s ease !important;
}

.wp-left-dark-mode-button .wp-dm-icon-sun {
	opacity: 1;
	transform: rotate(0deg) scale(1);
	color: var(--wp-dm-icon-color, #f59e0b);
}

.wp-left-dark-mode-button .wp-dm-icon-moon {
	opacity: 0;
	transform: rotate(-90deg) scale(0.5);
	color: #64748b;
}

/* Active Dark State Button Changes */
html.wp-left-dark-mode-active .wp-left-dark-mode-button {
	background-color: rgba(30, 41, 59, 0.85);
	border-color: rgba(255, 255, 255, 0.12);
	color: #f8fafc;
}

html.wp-left-dark-mode-active .wp-left-dark-mode-button.wp-dm-glass {
	background: rgba(18, 24, 38, 0.75) !important;
	border-color: rgba(255, 255, 255, 0.15) !important;
}

html.wp-left-dark-mode-active .wp-left-dark-mode-button .wp-dm-icon-sun {
	opacity: 0;
	transform: rotate(90deg) scale(0.5);
}

html.wp-left-dark-mode-active .wp-left-dark-mode-button .wp-dm-icon-moon {
	opacity: 1;
	transform: rotate(0deg) scale(1);
	color: var(--wp-dm-icon-color, #fbbf24);
}

/* Ripple Click Animation */
.wp-dm-ripple-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
	border-radius: inherit;
}

.wp-dm-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(245, 158, 11, 0.35);
	transform: scale(0);
	animation: wp-dm-ripple-anim 0.6s ease-out;
	pointer-events: none;
}

@keyframes wp-dm-ripple-anim {
	to {
		transform: scale(3.5);
		opacity: 0;
	}
}

/* --------------------------------------------------------------------------
   4. THEME DARK MODE ENGINE (ELEMENTOR / GUTENBERG / WOOCOMMERCE FRIENDLY)
   -------------------------------------------------------------------------- */
html.wp-left-dark-mode-active,
html.wp-left-dark-mode-active body {
	background-color: var(--wp-dm-dark-bg, #121826) !important;
	color: var(--wp-dm-dark-text, #f8fafc) !important;
}

/* Text elements */
html.wp-left-dark-mode-active h1,
html.wp-left-dark-mode-active h2,
html.wp-left-dark-mode-active h3,
html.wp-left-dark-mode-active h4,
html.wp-left-dark-mode-active h5,
html.wp-left-dark-mode-active h6,
html.wp-left-dark-mode-active p,
html.wp-left-dark-mode-active span,
html.wp-left-dark-mode-active li,
html.wp-left-dark-mode-active label {
	color: var(--wp-dm-dark-text, #f8fafc);
}

html.wp-left-dark-mode-active a {
	color: #60a5fa;
}

/* Containers, Cards, Sections */
html.wp-left-dark-mode-active header,
html.wp-left-dark-mode-active footer,
html.wp-left-dark-mode-active sidebar,
html.wp-left-dark-mode-active article,
html.wp-left-dark-mode-active section,
html.wp-left-dark-mode-active .card,
html.wp-left-dark-mode-active .panel,
html.wp-left-dark-mode-active .site-header,
html.wp-left-dark-mode-active .site-footer,
html.wp-left-dark-mode-active .entry-content,
html.wp-left-dark-mode-active .wp-block-group,
html.wp-left-dark-mode-active .elementor-section,
html.wp-left-dark-mode-active .elementor-container,
html.wp-left-dark-mode-active .woocommerce-card,
html.wp-left-dark-mode-active .woocommerce-product {
	background-color: var(--wp-dm-dark-bg, #121826);
	border-color: var(--wp-dm-dark-border, #334155);
}

/* Form Inputs */
html.wp-left-dark-mode-active input[type="text"],
html.wp-left-dark-mode-active input[type="email"],
html.wp-left-dark-mode-active input[type="password"],
html.wp-left-dark-mode-active input[type="search"],
html.wp-left-dark-mode-active input[type="number"],
html.wp-left-dark-mode-active textarea,
html.wp-left-dark-mode-active select {
	background-color: var(--wp-dm-dark-input, #0f172a) !important;
	color: var(--wp-dm-dark-text, #f8fafc) !important;
	border-color: var(--wp-dm-dark-border, #334155) !important;
}

/* Tables */
html.wp-left-dark-mode-active table,
html.wp-left-dark-mode-active th,
html.wp-left-dark-mode-active td {
	background-color: var(--wp-dm-dark-card, #1e293b);
	border-color: var(--wp-dm-dark-border, #334155);
	color: var(--wp-dm-dark-text, #f8fafc);
}

/* WooCommerce Compatibility */
html.wp-left-dark-mode-active .woocommerce ul.products li.product,
html.wp-left-dark-mode-active .woocommerce div.product {
	background: var(--wp-dm-dark-card, #1e293b);
}

/* Image & Video Exclusions - Preserves Original Colors */
html.wp-left-dark-mode-active img,
html.wp-left-dark-mode-active video,
html.wp-left-dark-mode-active iframe,
html.wp-left-dark-mode-active svg:not(.wp-dm-icon),
html.wp-left-dark-mode-active .no-dark {
	filter: none !important;
}

/* --------------------------------------------------------------------------
   5. MOBILE RESPONSIVENESS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.wp-left-dark-mode-button.wp-dm-pos-center-left {
		left: max(12px, env(safe-area-inset-left)) !important;
	}
	.wp-left-dark-mode-button.wp-dm-pos-top-left {
		top: max(16px, env(safe-area-inset-top)) !important;
		left: max(12px, env(safe-area-inset-left)) !important;
	}
	.wp-left-dark-mode-button.wp-dm-pos-bottom-left {
		bottom: max(16px, env(safe-area-inset-bottom)) !important;
		left: max(12px, env(safe-area-inset-left)) !important;
	}
}