/**
 * Modern Everbrew - Dark Mode Toggle Widget Styles
 *
 * Estilos para o widget Elementor de Dark Mode Toggle
 * Múltiplos estilos de botão: Classic, Modern, Minimal, Pill, iOS, Checkbox, Icon Switch
 *
 * @package ModernEverbrew
 * @since 2.1.0
 */

/* ==========================================================================
   Base Toggle Styles
   ========================================================================== */

.elementor-dark-mode-toggle-wrapper {
	display: inline-block;
}

.dark-mode-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: inherit;
	line-height: 1;
	min-width: 35px;
	min-height: 35px;
}

.dark-mode-toggle:focus {
	outline: 2px solid var(--theme-primary, #99C33F);
	outline-offset: 2px;
}

.dark-mode-toggle:active {
	transform: scale(0.95);
}

/* Ícones base - posicionamento centralizado padrão */
.dark-mode-toggle .icon-sun,
.dark-mode-toggle .icon-moon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.dark-mode-toggle .icon-sun i,
.dark-mode-toggle .icon-sun svg,
.dark-mode-toggle .icon-moon i,
.dark-mode-toggle .icon-moon svg {
	display: block;
}

/* ==========================================================================
   Classic Toggle Style
   ========================================================================== */

.dark-mode-toggle--classic .icon-sun,
.dark-mode-toggle--classic .icon-moon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.dark-mode-toggle--classic .icon-sun {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

.dark-mode-toggle--classic .icon-moon {
	opacity: 0;
	transform: rotate(-90deg) scale(0);
}

body[data-theme="dark"] .dark-mode-toggle--classic .icon-sun,
body.dark-mode .dark-mode-toggle--classic .icon-sun {
	opacity: 0;
	transform: rotate(90deg) scale(0);
}

body[data-theme="dark"] .dark-mode-toggle--classic .icon-moon,
body.dark-mode .dark-mode-toggle--classic .icon-moon {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

/* ==========================================================================
   Minimal Toggle Style
   ========================================================================== */

.dark-mode-toggle--minimal {
	background: transparent !important;
	border: none !important;
}

.dark-mode-toggle--minimal:hover {
	background: var(--theme-overlay-light, rgba(0, 0, 0, 0.05)) !important;
}

.dark-mode-toggle--minimal .icon-sun,
.dark-mode-toggle--minimal .icon-moon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.dark-mode-toggle--minimal .icon-sun {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

.dark-mode-toggle--minimal .icon-moon {
	opacity: 0;
	transform: rotate(180deg) scale(0);
}

body[data-theme="dark"] .dark-mode-toggle--minimal .icon-sun,
body.dark-mode .dark-mode-toggle--minimal .icon-sun {
	opacity: 0;
	transform: rotate(-180deg) scale(0);
}

body[data-theme="dark"] .dark-mode-toggle--minimal .icon-moon,
body.dark-mode .dark-mode-toggle--minimal .icon-moon {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

/* ==========================================================================
   Pill Toggle Style
   ========================================================================== */

.dark-mode-toggle--pill {
	border-radius: 100px !important;
}

.dark-mode-toggle--pill .icon-sun,
.dark-mode-toggle--pill .icon-moon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.dark-mode-toggle--pill .icon-sun {
	opacity: 1;
	transform: translateX(0);
}

.dark-mode-toggle--pill .icon-moon {
	opacity: 0;
	transform: translateX(-10px);
}

body[data-theme="dark"] .dark-mode-toggle--pill .icon-sun,
body.dark-mode .dark-mode-toggle--pill .icon-sun {
	opacity: 0;
	transform: translateX(10px);
}

body[data-theme="dark"] .dark-mode-toggle--pill .icon-moon,
body.dark-mode .dark-mode-toggle--pill .icon-moon {
	opacity: 1;
	transform: translateX(0);
}

/* ==========================================================================
   Switch Base Styles (All Switch Types)
   ========================================================================== */

.dark-mode-switch-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.dark-mode-switch-input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

.dark-mode-switch-slider {
	position: absolute;
	inset: 0;
	cursor: pointer;
	transition: 0.4s;
}

/* ==========================================================================
   iOS Style Toggle (Switch)
   ========================================================================== */

.dark-mode-toggle--ios {
	width: 60px;
	height: 34px;
	padding: 0 !important;
}

.dark-mode-toggle--ios .dark-mode-switch-slider {
	background-color: #ccc;
	border-radius: 34px;
}

.dark-mode-toggle--ios .dark-mode-switch-slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	background-color: white;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: 0.4s;
}

.dark-mode-toggle--ios .dark-mode-switch-input:checked + .dark-mode-switch-slider {
	background-color: var(--theme-primary, #99C33F);
}

.dark-mode-toggle--ios .dark-mode-switch-input:focus + .dark-mode-switch-slider {
	box-shadow: 0 0 1px var(--theme-primary, #99C33F);
}

.dark-mode-toggle--ios .dark-mode-switch-input:checked + .dark-mode-switch-slider:before {
	transform: translate(26px, -50%);
}

/* Dark mode state */
body[data-theme="dark"] .dark-mode-toggle--ios .dark-mode-switch-input:not(:checked) + .dark-mode-switch-slider,
body.dark-mode .dark-mode-toggle--ios .dark-mode-switch-input:not(:checked) + .dark-mode-switch-slider {
	background-color: var(--theme-primary, #99C33F);
}

body[data-theme="dark"] .dark-mode-toggle--ios .dark-mode-switch-input:not(:checked) + .dark-mode-switch-slider:before,
body.dark-mode .dark-mode-toggle--ios .dark-mode-switch-input:not(:checked) + .dark-mode-switch-slider:before {
	transform: translate(26px, -50%);
}

/* ==========================================================================
   Modern Toggle Style (Flat Switch)
   ========================================================================== */

.dark-mode-toggle--modern {
	width: 70px;
	height: 32px;
	padding: 0 !important;
}

.dark-mode-toggle--modern .dark-mode-switch-slider {
	background-color: var(--theme-border, #ddd);
	border-radius: 16px;
}

.dark-mode-toggle--modern .dark-mode-switch-slider:before {
	position: absolute;
	content: "";
	height: 24px;
	width: 24px;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	background-color: white;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: 0.4s;
}

.dark-mode-toggle--modern .dark-mode-switch-input:checked + .dark-mode-switch-slider {
	background-color: var(--theme-primary, #99C33F);
}

.dark-mode-toggle--modern .dark-mode-switch-input:checked + .dark-mode-switch-slider:before {
	transform: translate(38px, -50%);
}

/* Dark mode state */
body[data-theme="dark"] .dark-mode-toggle--modern .dark-mode-switch-input:not(:checked) + .dark-mode-switch-slider,
body.dark-mode .dark-mode-toggle--modern .dark-mode-switch-input:not(:checked) + .dark-mode-switch-slider {
	background-color: var(--theme-primary, #99C33F);
}

body[data-theme="dark"] .dark-mode-toggle--modern .dark-mode-switch-input:not(:checked) + .dark-mode-switch-slider:before,
body.dark-mode .dark-mode-toggle--modern .dark-mode-switch-input:not(:checked) + .dark-mode-switch-slider:before {
	transform: translate(38px, -50%);
}

/* ==========================================================================
   Checkbox Style Toggle
   ========================================================================== */

.dark-mode-toggle--checkbox {
	width: 50px;
	height: 50px;
	padding: 0 !important;
}

.dark-mode-toggle--checkbox .dark-mode-switch-slider {
	border-radius: 8px;
	background-color: var(--theme-surface, #f5f5f5);
	border: 2px solid var(--theme-border, #ddd);
	display: flex;
	align-items: center;
	justify-content: center;
}

.dark-mode-toggle--checkbox .dark-mode-switch-slider:before {
	content: "☀️";
	position: static;
	height: auto;
	width: auto;
	background: none;
	box-shadow: none;
	font-size: 24px;
	transition: all 0.3s ease;
}

.dark-mode-toggle--checkbox .dark-mode-switch-input:checked + .dark-mode-switch-slider {
	background-color: var(--theme-primary, #99C33F);
	border-color: var(--theme-primary, #99C33F);
}

.dark-mode-toggle--checkbox .dark-mode-switch-input:checked + .dark-mode-switch-slider:before {
	content: "🌙";
	transform: rotate(360deg);
}

/* Dark mode state */
body[data-theme="dark"] .dark-mode-toggle--checkbox .dark-mode-switch-input:not(:checked) + .dark-mode-switch-slider,
body.dark-mode .dark-mode-toggle--checkbox .dark-mode-switch-input:not(:checked) + .dark-mode-switch-slider {
	background-color: var(--theme-primary, #99C33F);
	border-color: var(--theme-primary, #99C33F);
}

body[data-theme="dark"] .dark-mode-toggle--checkbox .dark-mode-switch-input:not(:checked) + .dark-mode-switch-slider:before,
body.dark-mode .dark-mode-toggle--checkbox .dark-mode-switch-input:not(:checked) + .dark-mode-switch-slider:before {
	content: "🌙";
}

/* ==========================================================================
   Icon Switch Style (Icons on the slider)
   ========================================================================== */

.dark-mode-toggle--icon-switch {
	width: 80px;
	height: 40px;
	padding: 0 !important;
}

.dark-mode-toggle--icon-switch .dark-mode-switch-slider {
	border-radius: 20px;
	background-color: var(--theme-surface, #f5f5f5);
	border: 2px solid var(--theme-border, #ddd);
	position: relative;
}

.dark-mode-toggle--icon-switch .dark-mode-switch-slider:before {
	position: absolute;
	content: "";
	height: 28px;
	width: 28px;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: var(--theme-primary, #99C33F);
	z-index: 2;
	transition: 0.4s;
}

.dark-mode-toggle--icon-switch .dark-mode-switch-input:checked + .dark-mode-switch-slider {
	background-color: var(--theme-surface-alt, #e8e8e8);
}

.dark-mode-toggle--icon-switch .dark-mode-switch-input:checked + .dark-mode-switch-slider:before {
	transform: translate(40px, -50%);
}

.dark-mode-toggle--icon-switch .icon-sun,
.dark-mode-toggle--icon-switch .icon-moon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	font-size: 16px;
	transition: all 0.3s ease;
}

.dark-mode-toggle--icon-switch .icon-sun {
	left: 10px;
	opacity: 0.5;
}

.dark-mode-toggle--icon-switch .icon-moon {
	right: 10px;
	opacity: 0.5;
}

.dark-mode-toggle--icon-switch .dark-mode-switch-input:checked + .dark-mode-switch-slider .icon-sun {
	opacity: 0.3;
}

.dark-mode-toggle--icon-switch .dark-mode-switch-input:checked + .dark-mode-switch-slider .icon-moon {
	opacity: 1;
	color: white;
}

.dark-mode-toggle--icon-switch .dark-mode-switch-input:not(:checked) + .dark-mode-switch-slider .icon-sun {
	opacity: 1;
	color: white;
}

/* Dark mode adjustments */
body[data-theme="dark"] .dark-mode-toggle--icon-switch .dark-mode-switch-input:not(:checked) + .dark-mode-switch-slider:before,
body.dark-mode .dark-mode-toggle--icon-switch .dark-mode-switch-input:not(:checked) + .dark-mode-switch-slider:before {
	transform: translate(40px, -50%);
}

/* ==========================================================================
   Text Labels
   ========================================================================== */

.dark-mode-toggle-text {
	transition: opacity 0.3s ease;
}

.dark-mode-toggle-text.light-mode-only {
	display: inline-block;
}

.dark-mode-toggle-text.dark-mode-only {
	display: none;
}

body[data-theme="dark"] .dark-mode-toggle-text.light-mode-only,
body.dark-mode .dark-mode-toggle-text.light-mode-only {
	display: none;
}

body[data-theme="dark"] .dark-mode-toggle-text.dark-mode-only,
body.dark-mode .dark-mode-toggle-text.dark-mode-only {
	display: inline-block;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	/* iOS Style */
	.dark-mode-toggle--ios {
		width: 50px;
		height: 28px;
	}

	.dark-mode-toggle--ios .dark-mode-switch-slider:before {
		height: 22px;
		width: 22px;
		left: 3px;
	}

	.dark-mode-toggle--ios .dark-mode-switch-input:checked + .dark-mode-switch-slider:before {
		transform: translate(22px, -50%);
	}

	/* Modern Style */
	.dark-mode-toggle--modern {
		width: 60px;
		height: 28px;
	}

	.dark-mode-toggle--modern .dark-mode-switch-slider:before {
		height: 20px;
		width: 20px;
		left: 4px;
	}

	.dark-mode-toggle--modern .dark-mode-switch-input:checked + .dark-mode-switch-slider:before {
		transform: translate(32px, -50%);
	}

	/* Checkbox Style */
	.dark-mode-toggle--checkbox {
		width: 44px;
		height: 44px;
	}

	.dark-mode-toggle--checkbox .dark-mode-switch-slider:before {
		font-size: 20px;
	}

	/* Icon Switch Style */
	.dark-mode-toggle--icon-switch {
		width: 70px;
		height: 34px;
	}

	.dark-mode-toggle--icon-switch .dark-mode-switch-slider:before {
		height: 24px;
		width: 24px;
	}

	.dark-mode-toggle--icon-switch .dark-mode-switch-input:checked + .dark-mode-switch-slider:before {
		transform: translate(36px, -50%);
	}

	.dark-mode-toggle--icon-switch .icon-sun {
		left: 8px;
		font-size: 14px;
	}

	.dark-mode-toggle--icon-switch .icon-moon {
		right: 8px;
		font-size: 14px;
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.dark-mode-toggle:focus-visible,
.dark-mode-switch-input:focus-visible + .dark-mode-switch-slider {
	outline: 2px solid var(--theme-primary, #99C33F);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.dark-mode-toggle,
	.dark-mode-toggle *,
	.dark-mode-switch-slider,
	.dark-mode-switch-slider:before {
		transition: none !important;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.elementor-dark-mode-toggle-wrapper {
		display: none !important;
	}
}