/* =============================================================
   WP Components — Dark Mode floating toggle
   Faithful re-creation of the classic WP Dark Mode "switch-3"
   floating switch (scale 0.8). Adds our own fixed positioning,
   drag-to-reposition and data-theme driven active state.
   ============================================================= */

.wpc-theme-toggle {
	--wpc-dm-scale: 0.8;
	position: fixed !important;
	z-index: 999999 !important; /* above drawers/overlays */
	right: var(--wpc-tgl-right, 10px);
	bottom: var(--wpc-tgl-bottom, 10px);
	left: var(--wpc-tgl-left, auto);
	top: var(--wpc-tgl-top, auto);
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	line-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: none;
}

/* Some themes style bare <button> elements — keep ours chrome-free. */
.wpc-theme-toggle:hover,
.wpc-theme-toggle:active,
.wpc-theme-toggle:focus {
	background: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

.wpc-theme-toggle.is-dragging {
	cursor: grabbing;
	/* Instant, jank-free follow while dragging: no position transition and a
	   promoted compositing layer so translate() updates stay on the GPU. */
	transition: none !important;
	will-change: transform;
}

/* Track ------------------------------------------------------- */
.wpc-theme-toggle ._track {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(2px * var(--wpc-dm-scale));
	width: calc(75px * var(--wpc-dm-scale));
	height: calc(34px * var(--wpc-dm-scale));
	padding: calc(2px * var(--wpc-dm-scale));
	border-radius: 9999px;
	background: #39393d;
	color: #fff;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ambient icons sitting at each end of the track. */
.wpc-theme-toggle ._icon {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(20px * var(--wpc-dm-scale));
	height: calc(20px * var(--wpc-dm-scale));
	margin: 0 calc(3px * var(--wpc-dm-scale));
}

.wpc-theme-toggle ._icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.wpc-theme-toggle ._icon--sun svg {
	fill: currentColor;
}

.wpc-theme-toggle ._icon--moon svg {
	fill: none;
	stroke: currentColor;
}

/* Sliding thumb (opaque, rides over the icon on its side). */
.wpc-theme-toggle ._thumb {
	position: absolute;
	z-index: 2;
	left: calc(2px * var(--wpc-dm-scale));
	width: calc(30px * var(--wpc-dm-scale));
	height: calc(30px * var(--wpc-dm-scale));
	border-radius: 9999px;
	background: #fff;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active state = dark theme (html[data-theme="dark"]). */
[data-theme="dark"] .wpc-theme-toggle ._track {
	background: #fff;
	color: #374151;
}

[data-theme="dark"] .wpc-theme-toggle ._thumb {
	background: #39393d;
	margin-right: calc(4px * var(--wpc-dm-scale));
	transform: translateX(calc(75px * var(--wpc-dm-scale) - 34px * var(--wpc-dm-scale)));
}

/* Focus ring for keyboard users. */
.wpc-theme-toggle:focus-visible {
	outline: none;
}
.wpc-theme-toggle:focus-visible ._track {
	outline: 2px solid var(--wpc-accent, #8b1a1a);
	outline-offset: 2px;
}

/* Visual feedback when dragged near screen edges (BA-010) */
.wpc-theme-toggle.is-edge-clamped ._track {
	box-shadow: 0 0 0 2px var(--wpc-accent, #e8650a), 0 0 12px rgba(232, 101, 10, 0.4);
	transform: scale(0.96);
}

/* Subtle pulse state while switching themes (BA-012) */
.wpc-theme-toggle.is-switching ._thumb {
	transform: scale(1.15);
	transition: transform 0.15s ease-in-out;
}

@media (max-width: 767px) {
	.wpc-theme-toggle {
		right: var(--wpc-tgl-right-mob, 10px);
		bottom: var(--wpc-tgl-bottom-mob, 84px);
		left: var(--wpc-tgl-left-mob, auto);
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.wpc-theme-toggle {
		right: var(--wpc-tgl-right-tab, 10px);
		bottom: var(--wpc-tgl-bottom-tab, 10px);
		left: var(--wpc-tgl-left-tab, auto);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpc-theme-toggle ._track,
	.wpc-theme-toggle ._thumb {
		transition: none;
	}
}

.wpc-theme-toggle[hidden] {
	display: none !important;
}

/* Fix Gutenberg / WooCommerce block buttons contrast in some themes */
.wp-block-button__link.add_to_cart_button {
	color: #fff !important;
}