/**
 * AOP Dark Mode - frontend styles.
 * Dark engines (invert + palette), transitions, and toggle presets.
 *
 * @package AOP_Dark_Mode
 */

/* ------------------------------------------------------------------ */
/* Transitions                                                          */
/* ------------------------------------------------------------------ */

html.aopdm-transitioning,
html.aopdm-transitioning body,
html.aopdm-transitioning body * {
	transition: background-color var(--aopdm-duration, 300ms) ease,
		color var(--aopdm-duration, 300ms) ease,
		border-color var(--aopdm-duration, 300ms) ease,
		filter var(--aopdm-duration, 300ms) ease !important;
}

@media (prefers-reduced-motion: reduce) {
	html.aopdm-transitioning,
	html.aopdm-transitioning body,
	html.aopdm-transitioning body * {
		transition: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* Engine: smart inversion                                              */
/* ------------------------------------------------------------------ */

html.aopdm-dark.aopdm-invert {
	filter: invert(1) hue-rotate(180deg);
	background-color: #fdfdfd; /* inverts to near-black */
}

/* Re-invert media so photos, videos and embeds keep true colors. */
html.aopdm-dark.aopdm-invert img,
html.aopdm-dark.aopdm-invert video,
html.aopdm-dark.aopdm-invert iframe,
html.aopdm-dark.aopdm-invert canvas,
html.aopdm-dark.aopdm-invert embed,
html.aopdm-dark.aopdm-invert object,
html.aopdm-dark.aopdm-invert picture,
html.aopdm-dark.aopdm-invert svg image,
html.aopdm-dark.aopdm-invert [style*="background-image"] {
	filter: invert(1) hue-rotate(180deg);
}

/* Avoid double inversion for media nested in re-inverted containers. */
html.aopdm-dark.aopdm-invert [style*="background-image"] img,
html.aopdm-dark.aopdm-invert [style*="background-image"] video,
html.aopdm-dark.aopdm-invert [style*="background-image"] iframe {
	filter: none;
}

/* ------------------------------------------------------------------ */
/* Engine: palette                                                      */
/* ------------------------------------------------------------------ */

html.aopdm-dark.aopdm-palette,
html.aopdm-dark.aopdm-palette body {
	background-color: var(--aopdm-bg) !important;
	color: var(--aopdm-text) !important;
}

html.aopdm-dark.aopdm-palette main,
html.aopdm-dark.aopdm-palette article,
html.aopdm-dark.aopdm-palette section,
html.aopdm-dark.aopdm-palette aside,
html.aopdm-dark.aopdm-palette header,
html.aopdm-dark.aopdm-palette footer,
html.aopdm-dark.aopdm-palette nav,
html.aopdm-dark.aopdm-palette .site,
html.aopdm-dark.aopdm-palette .site-content,
html.aopdm-dark.aopdm-palette .entry-content,
html.aopdm-dark.aopdm-palette .widget,
html.aopdm-dark.aopdm-palette .card,
html.aopdm-dark.aopdm-palette .elementor-widget-container,
html.aopdm-dark.aopdm-palette .wp-block-group,
html.aopdm-dark.aopdm-palette .wp-block-column,
html.aopdm-dark.aopdm-palette .et_pb_section,
html.aopdm-dark.aopdm-palette .fl-row,
html.aopdm-dark.aopdm-palette .vc_row,
html.aopdm-dark.aopdm-palette .fusion-layout-column,
html.aopdm-dark.aopdm-palette .wpb_wrapper {
	background-color: transparent;
	color: inherit;
	border-color: var(--aopdm-border);
}

html.aopdm-dark.aopdm-palette p,
html.aopdm-dark.aopdm-palette li,
html.aopdm-dark.aopdm-palette td,
html.aopdm-dark.aopdm-palette th,
html.aopdm-dark.aopdm-palette dd,
html.aopdm-dark.aopdm-palette dt,
html.aopdm-dark.aopdm-palette span,
html.aopdm-dark.aopdm-palette label,
html.aopdm-dark.aopdm-palette blockquote,
html.aopdm-dark.aopdm-palette figcaption {
	color: var(--aopdm-text);
}

html.aopdm-dark.aopdm-palette h1,
html.aopdm-dark.aopdm-palette h2,
html.aopdm-dark.aopdm-palette h3,
html.aopdm-dark.aopdm-palette h4,
html.aopdm-dark.aopdm-palette h5,
html.aopdm-dark.aopdm-palette h6 {
	color: var(--aopdm-heading);
}

html.aopdm-dark.aopdm-palette a {
	color: var(--aopdm-link);
}

html.aopdm-dark.aopdm-palette a:hover,
html.aopdm-dark.aopdm-palette a:focus {
	color: var(--aopdm-link-hover);
}

html.aopdm-dark.aopdm-palette input,
html.aopdm-dark.aopdm-palette textarea,
html.aopdm-dark.aopdm-palette select {
	background-color: var(--aopdm-input-bg) !important;
	color: var(--aopdm-text) !important;
	border-color: var(--aopdm-border) !important;
}

html.aopdm-dark.aopdm-palette button,
html.aopdm-dark.aopdm-palette .button,
html.aopdm-dark.aopdm-palette .btn,
html.aopdm-dark.aopdm-palette .wp-block-button__link,
html.aopdm-dark.aopdm-palette input[type="submit"],
html.aopdm-dark.aopdm-palette input[type="button"] {
	background-color: var(--aopdm-btn-bg);
	color: var(--aopdm-btn-text);
	border-color: var(--aopdm-border);
}

html.aopdm-dark.aopdm-palette pre,
html.aopdm-dark.aopdm-palette code,
html.aopdm-dark.aopdm-palette kbd,
html.aopdm-dark.aopdm-palette table,
html.aopdm-dark.aopdm-palette .wp-block-table td,
html.aopdm-dark.aopdm-palette .wp-block-table th {
	background-color: var(--aopdm-surface);
	color: var(--aopdm-text);
	border-color: var(--aopdm-border);
}

html.aopdm-dark.aopdm-palette hr {
	border-color: var(--aopdm-border);
	background-color: var(--aopdm-border);
}

html.aopdm-dark.aopdm-palette ::placeholder {
	color: var(--aopdm-text);
	opacity: 0.55;
}

html.aopdm-dark.aopdm-palette ::selection {
	background-color: var(--aopdm-link);
	color: var(--aopdm-bg);
}

/* ------------------------------------------------------------------ */
/* Toggle: shared                                                       */
/* ------------------------------------------------------------------ */

.aopdm-toggle-wrap {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.aopdm-toggle-wrap.aopdm-floating {
	position: fixed;
	z-index: var(--aopdm-z, 9999);
}

.aopdm-pos-bottom-right { right: var(--aopdm-offset-x, 24px); bottom: var(--aopdm-offset-y, 24px); }
.aopdm-pos-bottom-left  { left: var(--aopdm-offset-x, 24px);  bottom: var(--aopdm-offset-y, 24px); }
.aopdm-pos-top-right    { right: var(--aopdm-offset-x, 24px); top: var(--aopdm-offset-y, 24px); }
.aopdm-pos-top-left     { left: var(--aopdm-offset-x, 24px);  top: var(--aopdm-offset-y, 24px); }

.aopdm-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	-webkit-tap-highlight-color: transparent;
}

.aopdm-toggle:focus-visible {
	outline: 2px solid var(--aopdm-link, #8ab4f8);
	outline-offset: 3px;
	border-radius: 999px;
}

.aopdm-track {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--aopdm-toggle-bg-light, #e9ecef);
	transition: background-color 0.25s ease;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

html.aopdm-dark .aopdm-track {
	background: var(--aopdm-toggle-bg-dark, #3c4043);
}

.aopdm-knob {
	position: absolute;
	border-radius: 50%;
	background: var(--aopdm-toggle-knob, #fff);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

.aopdm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	transition: opacity 0.2s ease, transform 0.25s ease;
}

.aopdm-icon svg { display: block; }

/* Keep toggle out of the inversion filter so its colors stay true. */
html.aopdm-dark.aopdm-invert .aopdm-toggle-wrap.aopdm-floating {
	filter: invert(1) hue-rotate(180deg);
}

/* ------------------------------------------------------------------ */
/* Sizes                                                                */
/* ------------------------------------------------------------------ */

.aopdm-size-small .aopdm-track  { width: 46px; height: 24px; padding: 0 5px; }
.aopdm-size-small .aopdm-knob   { width: 18px; height: 18px; left: 3px; }
.aopdm-size-small .aopdm-icon svg,
.aopdm-size-small .aopdm-icon   { width: 12px; height: 12px; font-size: 11px; }
html.aopdm-dark .aopdm-size-small .aopdm-knob { transform: translateX(22px); }

.aopdm-size-medium .aopdm-track { width: 58px; height: 30px; padding: 0 7px; }
.aopdm-size-medium .aopdm-knob  { width: 24px; height: 24px; left: 3px; }
.aopdm-size-medium .aopdm-icon svg,
.aopdm-size-medium .aopdm-icon  { width: 15px; height: 15px; font-size: 13px; }
html.aopdm-dark .aopdm-size-medium .aopdm-knob { transform: translateX(28px); }

.aopdm-size-large .aopdm-track  { width: 72px; height: 38px; padding: 0 9px; }
.aopdm-size-large .aopdm-knob   { width: 30px; height: 30px; left: 4px; }
.aopdm-size-large .aopdm-icon svg,
.aopdm-size-large .aopdm-icon   { width: 19px; height: 19px; font-size: 16px; }
html.aopdm-dark .aopdm-size-large .aopdm-knob { transform: translateX(34px); }

/* ------------------------------------------------------------------ */
/* Style: button (single icon, no track)                                */
/* ------------------------------------------------------------------ */

.aopdm-style-button .aopdm-track {
	width: auto;
	height: auto;
	padding: 10px;
	border-radius: 50%;
	justify-content: center;
}

.aopdm-style-button .aopdm-knob { display: none; }

.aopdm-style-button .aopdm-icon-dark  { display: none; }
.aopdm-style-button .aopdm-icon-light { display: inline-flex; }
html.aopdm-dark .aopdm-style-button .aopdm-icon-light { display: none; }
html.aopdm-dark .aopdm-style-button .aopdm-icon-dark  { display: inline-flex; }

.aopdm-style-button .aopdm-icon svg { width: 20px; height: 20px; }
.aopdm-size-large.aopdm-style-button .aopdm-icon svg { width: 26px; height: 26px; }

/* ------------------------------------------------------------------ */
/* Style: floating bubble                                               */
/* ------------------------------------------------------------------ */

.aopdm-style-floating .aopdm-track {
	width: auto;
	height: auto;
	padding: 14px;
	border-radius: 50%;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.aopdm-style-floating .aopdm-knob { display: none; }
.aopdm-style-floating .aopdm-icon-dark  { display: none; }
.aopdm-style-floating .aopdm-icon-light { display: inline-flex; }
html.aopdm-dark .aopdm-style-floating .aopdm-icon-light { display: none; }
html.aopdm-dark .aopdm-style-floating .aopdm-icon-dark  { display: inline-flex; }
.aopdm-style-floating .aopdm-icon svg { width: 22px; height: 22px; }

.aopdm-style-floating .aopdm-toggle:hover .aopdm-track {
	transform: scale(1.08);
	transition: transform 0.2s ease;
}

/* ------------------------------------------------------------------ */
/* Style: pill (labels inside)                                          */
/* ------------------------------------------------------------------ */

.aopdm-style-pill .aopdm-track { border-radius: 999px; }

.aopdm-label {
	font-size: 13px;
	font-weight: 600;
}

.aopdm-label-dark { display: none; }
html.aopdm-dark .aopdm-label-light { display: none; }
html.aopdm-dark .aopdm-label-dark  { display: inline; }

/* ------------------------------------------------------------------ */
/* Toggle animations                                                    */
/* ------------------------------------------------------------------ */

.aopdm-anim-fade .aopdm-knob { transition: opacity 0.25s ease, transform 0s; }

.aopdm-anim-flip .aopdm-icon { transition: transform 0.35s ease; }
html.aopdm-dark .aopdm-anim-flip .aopdm-icon-dark { transform: rotate(360deg); }

.aopdm-anim-none .aopdm-knob,
.aopdm-anim-none .aopdm-icon { transition: none; }

/* ------------------------------------------------------------------ */
/* Menu item                                                            */
/* ------------------------------------------------------------------ */

.aopdm-menu-item {
	display: inline-flex;
	align-items: center;
}

.aopdm-menu-item .aopdm-toggle-wrap {
	vertical-align: middle;
}