/**
 * GHDM Pro — Frontend Styles
 * Layers on top of public/css/ghdm-frontend.css.
 */

:root {
	--ghdm-color-adjust: brightness(100%) contrast(100%) saturate(100%);
	--ghdm-bg-darken: 0;
	--ghdm-image-filter-extra: brightness(100%) grayscale(0%) invert(0%);
	--ghdm-video-filter-extra: brightness(100%) grayscale(0%);
	--ghdm-toggle-track-bg: var(--ghdm-switch-bg, #2b2f38);
	--ghdm-toggle-track-bg-2: transparent;
	--ghdm-toggle-knob-bg: #ffffff;
	--ghdm-toggle-icon-color: var(--ghdm-switch-icon, #ffffff);
	--ghdm-toggle-text-color: #1c1d22;
	--ghdm-toggle-track-border: transparent;
}

/* Light-mode baselines — must mirror the Pro dark-mode selectors so the
 * browser can interpolate the filter values smoothly when toggling.
 * These override the free-version identity filters (same specificity,
 * later source order wins) and include the Pro CSS variables. */
html {
	filter: invert(0) hue-rotate(0deg) var(--ghdm-color-adjust);
}
html img,
html svg,
html picture,
html canvas {
	filter: invert(0) hue-rotate(0deg) var(--ghdm-color-adjust) var(--ghdm-image-filter-extra);
}
html video,
html iframe,
html embed {
	filter: invert(0) hue-rotate(0deg) var(--ghdm-color-adjust) var(--ghdm-video-filter-extra);
}
html .swiper-slide,
html .splide__slide,
html .slick-slide,
html .owl-item,
html .elementor-repeater-item,
html .elementor-carousel-slide,
html .flickity-slider > *,
html .tns-item,
html .glide__slide,
html .keen-slider__slide {
	filter: invert(0) hue-rotate(0deg) var(--ghdm-color-adjust);
}

/* Dark mode — combine the base invert with fine colour adjustment
 * (brightness / contrast / saturation). */
html.ghdm-dark {
	filter: invert(1) hue-rotate(180deg) var(--ghdm-color-adjust);
}

/* Images (and static/vector media) — counter-invert, then layer on the
 * Image Behavior effects: Low Brightness, Grayscale, and partial Invert. */
html.ghdm-dark img,
html.ghdm-dark svg,
html.ghdm-dark picture,
html.ghdm-dark canvas {
	filter: invert(1) hue-rotate(180deg) var(--ghdm-color-adjust) var(--ghdm-image-filter-extra);
}

/* Video (and embeds) — counter-invert, then layer on the Video Behavior
 * effects: Low Brightness and Grayscale, independent from images above. */
html.ghdm-dark video,
html.ghdm-dark iframe,
html.ghdm-dark embed {
	filter: invert(1) hue-rotate(180deg) var(--ghdm-color-adjust) var(--ghdm-video-filter-extra);
}

/* Carousel / slider slides — counter-invert CSS background images so they
 * display naturally (mirrors the matching block in ghdm-frontend.css but
 * includes the Pro colour-adjust variable for consistent brightness). */
html.ghdm-dark .swiper-slide,
html.ghdm-dark .splide__slide,
html.ghdm-dark .slick-slide,
html.ghdm-dark .owl-item,
html.ghdm-dark .elementor-repeater-item,
html.ghdm-dark .elementor-carousel-slide,
html.ghdm-dark .flickity-slider > *,
html.ghdm-dark .tns-item,
html.ghdm-dark .glide__slide,
html.ghdm-dark .keen-slider__slide {
	filter: invert(1) hue-rotate(180deg) var(--ghdm-color-adjust);
}

/* Darken elements carrying a CSS background-image (best-effort, generic technique):
 * an overlay pseudo-element dims the element behind it. Opt an element in with
 * the .ghdm-bg-darken helper class (added automatically to common hero/banner
 * selectors via JS, and available for manual use in custom templates). */
html.ghdm-dark .ghdm-bg-darken {
	position: relative;
}
html.ghdm-dark .ghdm-bg-darken::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: var(--ghdm-bg-darken);
	pointer-events: none;
}

/* ---------------------------------------------------------------------
 * Toggle animation effects
 * ------------------------------------------------------------------- */
.ghdm-anim-rotate .ghdm-icon {
	transition: transform 0.4s ease;
}
.ghdm-anim-rotate.is-animating .ghdm-icon {
	transform: rotate(180deg);
}

.ghdm-anim-bounce.is-animating {
	animation: ghdm-bounce 0.45s ease;
}
@keyframes ghdm-bounce {
	0% { transform: scale(1); }
	30% { transform: scale(1.25); }
	60% { transform: scale(0.92); }
	100% { transform: scale(1); }
}

.ghdm-anim-fade .ghdm-icon {
	transition: opacity 0.3s ease;
}
.ghdm-anim-fade.is-animating .ghdm-icon {
	opacity: 0;
}

/* ---------------------------------------------------------------------
 * Tooltip
 * ------------------------------------------------------------------- */
.ghdm-toggle-btn[data-tooltip] {
	position: fixed;
}
.ghdm-toggle-btn[data-tooltip]::before {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	background: #1c1d22;
	color: #fff;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.ghdm-toggle-btn[data-tooltip]:hover::before,
.ghdm-toggle-btn[data-tooltip]:focus-visible::before {
	opacity: 1;
	transform: translateY(0);
}

/* ---------------------------------------------------------------------
 * Popup theme switcher
 * ------------------------------------------------------------------- */
.ghdm-popup-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Keep the popup's true colors visible even while the page is inverted for dark mode. */
html.ghdm-dark .ghdm-popup-overlay {
	filter: invert(1) hue-rotate(180deg);
}
.ghdm-popup-overlay[hidden] {
	display: none;
}
.ghdm-popup {
	background: #fff;
	color: #1c1d22;
	border-radius: 10px;
	width: min(420px, 90vw);
	max-height: 80vh;
	overflow: auto;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
.ghdm-popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #eee;
}
.ghdm-popup-header h3 {
	margin: 0;
}
.ghdm-popup-close {
	background: none;
	border: none;
	font-size: 22px;
	cursor: pointer;
	line-height: 1;
}
.ghdm-popup-body {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	padding: 20px;
}
.ghdm-theme-swatch {
	border: 2px solid transparent;
	border-radius: 8px;
	padding: 14px 10px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
}
.ghdm-theme-swatch.is-active {
	outline: 3px solid #6a5cff;
	outline-offset: 2px;
}

/* Inline (shortcode/menu) toggle buttons shouldn't be position:fixed. */
.ghdm-inline-toggle {
	position: static !important;
	display: inline-flex;
	box-shadow: none;
	/* Keep icon layout LTR inside RTL (Persian) menus/content so sun/moon,
	   sliding knobs and icon+text order never mirror. */
	direction: ltr;
	unicode-bidi: isolate;
}

.ghdm-menu-toggle-item {
	display: inline-flex;
	align-items: center;
	/* Isolate the menu item from the surrounding RTL menu flow. */
	direction: ltr;
	unicode-bidi: isolate;
}

/* Menu Toggle Size (Toggle Switch → Menu Toggle → Menu Toggle Size). */
.ghdm-menu-size-small {
	font-size: 14px;
	padding: 4px 8px;
}
.ghdm-menu-size-medium {
	font-size: 18px;
	padding: 6px 10px;
}
.ghdm-menu-size-large {
	font-size: 24px;
	padding: 8px 12px;
}
.ghdm-menu-size-custom {
	font-size: var( --ghdm-menu-toggle-size, 24px );
	padding: 6px 10px;
}

/* ---------------------------------------------------------------------
 * Toggle Switch — numbered style presets (mirrors the Floating Toggle
 * Style grid in Settings). Styles 1 & 2 are the free defaults, styled
 * in ghdm-frontend.css. 3-18 below are Pro, each one distinct.
 * ------------------------------------------------------------------- */

/* 3 — Accent knob: light pill track, gradient circular knob slides + swaps icon. */
.ghdm-style-3 {
	box-sizing: border-box;
	width: 56px !important; height: 30px !important; min-height: 30px !important;
	border-radius: 999px; padding: 3px !important; gap: 0 !important;
	background: var(--ghdm-toggle-track-bg, #eef1fb) !important; background-image: none !important;
	background-color: var(--ghdm-toggle-track-bg, #eef1fb) !important;
	border: 1px solid var(--ghdm-toggle-track-border, transparent) !important;
	justify-content: flex-start !important; align-items: center !important;
	overflow: hidden !important;
}
.ghdm-style-3 .ghdm-icon { display: none !important; }
.ghdm-style-3::after {
	content: "☀️"; display: inline-flex !important; align-items: center !important; justify-content: center !important;
	width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; flex-shrink: 0 !important;
	border-radius: 50% !important; font-size: 12px !important; line-height: 1 !important;
	background: var(--ghdm-toggle-knob-bg, linear-gradient(135deg, #6ea8fe, #4361ee)) !important;
	transition: transform 0.35s ease !important;
}
html.ghdm-dark .ghdm-style-3::after { content: "🌙"; transform: translateX(26px); }

/* 4 — Classic switch: sun/moon fixed at each end, knob slides between them. */
.ghdm-style-4 {
	box-sizing: border-box;
	width: 68px !important; height: 30px !important; min-height: 30px !important;
	border-radius: 999px; padding: 0 8px !important; display: inline-flex !important;
	background: var(--ghdm-toggle-track-bg, #eceef2) !important; justify-content: space-between !important; gap: 0 !important;
	align-items: center !important; border: 1px solid var(--ghdm-toggle-track-border, transparent) !important;
}
.ghdm-style-4 .ghdm-icon-sun,
.ghdm-style-4 .ghdm-icon-moon { display: inline-block !important; font-size: 14px !important; color: var(--ghdm-toggle-icon-color, currentColor) !important; }
.ghdm-style-4::after {
	content: "" !important; position: absolute !important; left: 25px !important; top: 50% !important; width: 18px !important; height: 18px !important;
	border-radius: 50% !important; background: var(--ghdm-toggle-knob-bg, #6a5cff) !important; transform: translateY(-50%) !important;
	transition: left 0.35s ease !important;
}
html.ghdm-dark .ghdm-style-4::after { left: 42px !important; }

/* 5 — Dual flat: both icons shown together, current mode highlighted. */
.ghdm-style-5 {
	border-radius: 10px; background: #f4f5f7; border: 1px solid #e0e2e8;
	color: #1c1d22; gap: 10px; padding: 8px 12px;
}
.ghdm-style-5 .ghdm-icon-sun,
.ghdm-style-5 .ghdm-icon-moon { display: inline-block !important; opacity: 0.3; transition: opacity 0.25s ease; }
.ghdm-style-5 .ghdm-icon-sun { opacity: 1; }
html.ghdm-dark .ghdm-style-5 .ghdm-icon-sun { opacity: 0.3; }
html.ghdm-dark .ghdm-style-5 .ghdm-icon-moon { opacity: 1; }

/* 6 — Small gradient pill with plain white sliding knob. */
.ghdm-style-6 {
	box-sizing: border-box;
	width: 44px !important; height: 24px !important; min-height: 24px !important;
	border-radius: 999px; padding: 3px !important; gap: 0 !important;
	background: var(--ghdm-toggle-track-bg, linear-gradient(135deg, #4facfe, #2b2f38)) !important;
	justify-content: flex-start !important; align-items: center !important;
	overflow: hidden !important; border: 1px solid var(--ghdm-toggle-track-border, transparent) !important;
}
.ghdm-style-6 .ghdm-icon { display: none !important; }
.ghdm-style-6::after {
	content: "" !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; flex-shrink: 0 !important;
	border-radius: 50% !important; background: var(--ghdm-toggle-knob-bg, #fff) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; transition: transform 0.35s ease !important;
}
html.ghdm-dark .ghdm-style-6::after { transform: translateX(20px); }

/* 7 — Segmented control: two separate circular icon buttons, active one raised. */
.ghdm-style-7 {
	border-radius: 999px; background: #eceef2; padding: 4px; gap: 4px;
}
.ghdm-style-7 .ghdm-icon-sun,
.ghdm-style-7 .ghdm-icon-moon {
	display: inline-flex !important; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%; font-size: 13px;
	transition: background 0.25s ease, box-shadow 0.25s ease;
}
.ghdm-style-7 .ghdm-icon-sun { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
html.ghdm-dark .ghdm-style-7 .ghdm-icon-sun { background: transparent; box-shadow: none; }
html.ghdm-dark .ghdm-style-7 .ghdm-icon-moon { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }

/* 8 — Decorative scenic gradient card (wide, no moving parts). */
.ghdm-style-8 {
	border-radius: 12px; padding: 10px 16px; color: #fff;
	background: linear-gradient(135deg, #a8edea, #2b6777);
}

/* 9 — Wide sky-gradient pill, sun/moon fixed at each end. */
.ghdm-style-9 {
	width: 72px; height: 30px; border-radius: 999px; padding: 0 8px;
	background: linear-gradient(135deg, #667eea, #764ba2); justify-content: space-between;
}
.ghdm-style-9 .ghdm-icon-sun,
.ghdm-style-9 .ghdm-icon-moon { display: inline-block !important; color: #fff; font-size: 13px; }

/* 10 — Plain pastel gradient pill, no icon, just a sliding knob. */
.ghdm-style-10 {
	box-sizing: border-box;
	width: 44px !important; height: 24px !important; min-height: 24px !important;
	border-radius: 999px; padding: 3px !important; gap: 0 !important;
	background: var(--ghdm-toggle-track-bg, linear-gradient(135deg, #fbc2eb, #a6c1ee)) !important;
	justify-content: flex-start !important; align-items: center !important;
	overflow: hidden !important; border: 1px solid var(--ghdm-toggle-track-border, transparent) !important;
}
.ghdm-style-10 .ghdm-icon,
.ghdm-style-10 .ghdm-switch-text { display: none !important; }
.ghdm-style-10::after {
	content: "" !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; flex-shrink: 0 !important;
	border-radius: 50% !important; background: var(--ghdm-toggle-knob-bg, #fff) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important; transition: transform 0.35s ease !important;
}
html.ghdm-dark .ghdm-style-10::after { transform: translateX(20px); }

/* 11 — Wide labeled pill: "Light"/"Dark" text at both ends, knob slides between. */
.ghdm-style-11 {
	box-sizing: border-box;
	width: 112px !important; height: 30px !important; min-height: 30px !important;
	border-radius: 999px; padding: 0 12px !important; gap: 0 !important;
	background: var(--ghdm-toggle-track-bg, linear-gradient(135deg, #fbc2eb, #a6c1ee)) !important;
	justify-content: space-between !important; align-items: center !important;
	overflow: clip !important; border: 1px solid var(--ghdm-toggle-track-border, transparent) !important;
}
.ghdm-style-11 .ghdm-icon { display: none !important; }
.ghdm-style-11 .ghdm-switch-text { display: inline-block !important; font-size: 12px !important; color: var(--ghdm-toggle-text-color, #1c1d22) !important; }
.ghdm-style-11::after {
	content: "" !important; position: absolute !important; top: 50% !important; left: 44px !important; width: 24px !important; height: 24px !important;
	border-radius: 50% !important; background: var(--ghdm-toggle-knob-bg, #fff) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
	transform: translateY(-50%) !important; transition: left 0.35s ease !important; pointer-events: none !important;
}
html.ghdm-dark .ghdm-style-11::after { left: 82px !important; }

/* 12 — Dark segmented control: two circular icon buttons on a dark rounded square. */
.ghdm-style-12 {
	border-radius: 10px; background: #1f2937; padding: 4px; gap: 4px;
}
.ghdm-style-12 .ghdm-icon-sun,
.ghdm-style-12 .ghdm-icon-moon {
	display: inline-flex !important; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 13px;
	background: rgba(255, 255, 255, 0.08); transition: background 0.25s ease;
}
.ghdm-style-12 .ghdm-icon-sun { background: rgba(255, 255, 255, 0.25); }
html.ghdm-dark .ghdm-style-12 .ghdm-icon-sun { background: rgba(255, 255, 255, 0.08); }
html.ghdm-dark .ghdm-style-12 .ghdm-icon-moon { background: rgba(255, 255, 255, 0.25); }

/* 13 — Settings-row style: icon + current-mode text on the left, iOS switch on the right. */
.ghdm-style-13 {
	width: auto; min-width: 150px; height: 38px; border-radius: 8px;
	background: #fff; color: #1c1d22; border: 1px solid #e0e2e8;
	justify-content: space-between; padding: 0 12px; gap: 10px;
}
.ghdm-style-13 .ghdm-switch-text { display: inline-block !important; font-size: 13px; font-weight: 600; }
.ghdm-style-13 .ghdm-switch-text.ghdm-text-dark { display: none !important; }
html.ghdm-dark .ghdm-style-13 .ghdm-switch-text.ghdm-text-light { display: none !important; }
html.ghdm-dark .ghdm-style-13 .ghdm-switch-text.ghdm-text-dark { display: inline-block !important; }
.ghdm-style-13::after {
	content: ""; width: 34px; height: 18px; border-radius: 999px; background: #c7cbd4;
	flex: 0 0 auto; transition: background 0.3s ease;
}
.ghdm-style-13::before {
	content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
	background: #fff; right: 22px; top: 50%; transform: translateY(-50%);
	transition: right 0.3s ease;
}
html.ghdm-dark .ghdm-style-13::after { background: #6a5cff; }
html.ghdm-dark .ghdm-style-13::before { right: 6px; }

/* 14 — Very small, minimal, borderless icon button. */
.ghdm-style-14 {
	width: 32px; height: 32px; padding: 0; border-radius: 8px;
	background: transparent; box-shadow: none;
}

/* 15 — Vertical stacked cells: sun on top (active in light), moon on bottom (active in dark). */
.ghdm-style-15 {
	width: 36px; height: 64px; border-radius: 8px; flex-direction: column;
	gap: 2px; padding: 3px; background: #e5e7ec;
}
.ghdm-style-15 .ghdm-icon-sun,
.ghdm-style-15 .ghdm-icon-moon {
	display: flex !important; align-items: center; justify-content: center;
	width: 100%; flex: 1; border-radius: 5px; font-size: 14px;
	transition: background 0.25s ease;
}
.ghdm-style-15 .ghdm-icon-sun { background: #fff; }
html.ghdm-dark .ghdm-style-15 .ghdm-icon-sun { background: transparent; }
html.ghdm-dark .ghdm-style-15 .ghdm-icon-moon { background: #2b2f38; }

/* 16 — Vertical card: current-mode label on top, a switch bar below. */
.ghdm-style-16 {
	width: 120px; height: 64px; border-radius: 10px; flex-direction: column;
	align-items: flex-start; gap: 8px; padding: 10px;
	background: #fff; border: 1px solid #e0e2e8; color: #1c1d22;
}
.ghdm-style-16 .ghdm-switch-text { display: inline-block !important; font-size: 13px; font-weight: 600; }
.ghdm-style-16 .ghdm-switch-text.ghdm-text-dark { display: none !important; }
html.ghdm-dark .ghdm-style-16 .ghdm-switch-text.ghdm-text-light { display: none !important; }
html.ghdm-dark .ghdm-style-16 .ghdm-switch-text.ghdm-text-dark { display: inline-block !important; }
.ghdm-style-16::after {
	content: ""; width: 100%; height: 16px; border-radius: 999px; background: #e5e7ec;
	transition: background 0.3s ease;
}
html.ghdm-dark .ghdm-style-16::after { background: #6a5cff; }

/* 17 — Typography motif: two stacked "A" boxes (small/large) instead of sun/moon icons. */
.ghdm-style-17 {
	width: 36px; height: 64px; border-radius: 8px; flex-direction: column;
	gap: 4px; padding: 0; background: transparent; box-shadow: none;
}
.ghdm-style-17 .ghdm-icon,
.ghdm-style-17 .ghdm-switch-text { display: none !important; }
.ghdm-style-17::before,
.ghdm-style-17::after {
	content: "A"; width: 100%; flex: 1; border-radius: 6px; background: #eceef2;
	color: #1c1d22; display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.ghdm-style-17::before { font-size: 14px; }
.ghdm-style-17::after { font-size: 20px; }
html.ghdm-dark .ghdm-style-17::before,
html.ghdm-dark .ghdm-style-17::after { background: #2b2f38; color: #fff; }

/* 18 — Icon + bold "A" letter side by side. */
.ghdm-style-18 {
	border-radius: 8px; background: #f4f5f7; border: 1px solid #e0e2e8;
	color: #1c1d22; gap: 8px; padding: 8px 12px;
}
.ghdm-style-18::after {
	content: "A"; font-weight: 700; font-size: 15px;
}

/* ---------------------------------------------------------------------
 * Attention effects — periodic animation to draw the eye to the toggle.
 * ------------------------------------------------------------------- */
.ghdm-attn-pulse { animation: ghdm-attn-pulse 2.4s ease-in-out infinite; }
@keyframes ghdm-attn-pulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
	50% { box-shadow: 0 4px 14px rgba(106,92,255,0.6), 0 0 0 6px rgba(106,92,255,0.15); }
}

.ghdm-attn-bounce { animation: ghdm-attn-bounce 1.8s ease-in-out infinite; }
@keyframes ghdm-attn-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

.ghdm-attn-shake { animation: ghdm-attn-shake 3.2s ease-in-out infinite; }
@keyframes ghdm-attn-shake {
	0%, 92%, 100% { transform: rotate(0); }
	93% { transform: rotate(-8deg); }
	95% { transform: rotate(8deg); }
	97% { transform: rotate(-6deg); }
}

.ghdm-attn-glow { animation: ghdm-attn-glow 2.2s ease-in-out infinite; }
@keyframes ghdm-attn-glow {
	0%, 100% { filter: drop-shadow(0 0 0 rgba(106,92,255,0)); }
	50% { filter: drop-shadow(0 0 8px rgba(106,92,255,0.8)); }
}

/* ---------------------------------------------------------------------
 * Draggable toggle + visibility delay
 * ------------------------------------------------------------------- */
.ghdm-draggable { cursor: grab; }
.ghdm-draggable.is-dragging { cursor: grabbing; opacity: 0.85; }

.ghdm-toggle-btn.ghdm-delayed-hidden {
	opacity: 0;
	transform: scale(0.8);
	pointer-events: none;
}
.ghdm-toggle-btn.ghdm-delayed-visible {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.4s ease, transform 0.4s ease;
}