/* Scoped Local Reset for TKH Split Panels */
:where(.tkh-split-panels-outer, .tkh-split-panels-outer *) {
	box-sizing: border-box;
}
:where(.tkh-split-panels-outer) h1,
:where(.tkh-split-panels-outer) h2,
:where(.tkh-split-panels-outer) h3,
:where(.tkh-split-panels-outer) h4,
:where(.tkh-split-panels-outer) p,
:where(.tkh-split-panels-outer) ul,
:where(.tkh-split-panels-outer) ol,
:where(.tkh-split-panels-outer) li {
	margin: 0;
	padding: 0;
}
:where(.tkh-split-panels-outer) a {
	color: inherit;
	text-decoration: none;
}
:where(.tkh-split-panels-outer) button {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/**
 * Split Panels Widget CSS
 * Name: Split Panels (ألواح متمددة)
 * Slug: tkh-split-panels
 *
 * Scoped to .tkh-split-panels-outer and .khalaf-{{ID}}
 * @package Khalaf_Elementor_Widgets
 */

/* Fonts loaded centrally via tkh-tamkeen-fonts */

/* ==========================================================================
   1. Section & Outer Container
   ========================================================================== */
.tkh-split-panels-outer {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.tkh-split-panels-outer *,
.tkh-split-panels-outer *::before,
.tkh-split-panels-outer *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   2. Main Panels Wrapper (.vm)
   ========================================================================== */
.tkh-split-panels,
.tkh-split-panels.tkh-sp-vm, .tkh-split-panels.vm {
	display: flex;
	height: var(--tkh-height, min(620px, 86vh));
	border-radius: var(--tkh-radius, clamp(26px, 4vw, 56px));
	overflow: hidden;
	margin: var(--tkh-wrapper-margin, 0 clamp(10px, 1.5vw, 22px));
	position: relative;
	box-sizing: border-box;
	background-color: var(--tkh-wrapper-bg, transparent);
	gap: var(--tkh-gap, 0px);
	box-shadow: var(--tkh-wrapper-shadow, none);
	outline: none;
}

.tkh-split-panels.wm-allow-overflow {
	overflow: visible;
}

/* ==========================================================================
   3. Single Panel (.hf)
   ========================================================================== */
.tkh-panel,
.tkh-panel.tkh-sp-hf, .tkh-panel.hf {
	position: relative;
	flex: var(--tkh-panel-grow-normal, 1);
	padding: var(--tkh-panel-padding, clamp(30px, 4vw, 60px));
	display: flex;
	flex-direction: column;
	justify-content: var(--tkh-panel-valign, space-between);
	transition: flex var(--tkh-transition-speed, 0.8s) var(--tkh-transition-ease, cubic-bezier(0.7, 0, 0.2, 1)),
	            min-height var(--tkh-transition-speed, 0.8s) var(--tkh-transition-ease, cubic-bezier(0.7, 0, 0.2, 1)),
	            background var(--tkh-transition-speed, 0.8s) ease,
	            box-shadow 0.4s ease,
	            border-color 0.4s ease;
	overflow: hidden;
	cursor: default;
	box-sizing: border-box;
	min-width: 0;
	outline: none;
	user-select: none;
	isolation: isolate;
}

.tkh-panel.wm-allow-overflow {
	overflow: visible;
}

/* Vertical Alignments */
.tkh-panel.valign-space-between {
	justify-content: space-between;
}
.tkh-panel.valign-top {
	justify-content: flex-start;
}
.tkh-panel.valign-center {
	justify-content: center;
}
.tkh-panel.valign-bottom {
	justify-content: flex-end;
}

/* Focus indicator for accessibility */
.tkh-panel:focus-visible {
	outline: var(--tkh-focus-width, 3px) solid var(--tkh-focus-color, #5bc4c4);
	outline-offset: -3px;
	z-index: 10;
}

/* Stretched link when make_whole_panel_clickable is on */
.tkh-panel-stretched-link {
	position: absolute;
	inset: 0;
	z-index: 5;
	text-indent: -9999px;
	outline: none;
}

/* ==========================================================================
   4. Panel Header Area & Spacing Engine
   ========================================================================== */
.tkh-panel-header-area {
	position: relative;
	z-index: 3;
	margin-bottom: var(--tkh-label-text-gap, 24px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Icon */
.tkh-panel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--tkh-icon-size, 24px);
	color: var(--tkh-icon-color, currentColor);
	margin-bottom: var(--tkh-gap-icon-label, 12px);
	transition: transform 0.4s ease, color 0.4s ease;
}
.tkh-panel-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Label (small) */
.tkh-panel-label {
	font-family: var(--tkh-label-font, 'DM Mono', monospace);
	font-size: var(--tkh-label-size, 12.5px);
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--tkh-label-color, inherit);
	margin: 0 0 var(--tkh-gap-label-title, 0px) 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1.3;
	transition: color 0.4s ease, background 0.4s ease;
}
.tkh-panel-label.is-pill {
	background: var(--tkh-label-pill-bg, rgba(255, 255, 255, 0.15));
	padding: 5px 14px;
	border-radius: 100px;
}

/* Title (optional) */
.tkh-panel-title {
	font-family: 'Bricolage Grotesque', 'Bricolage Fallback', 'Manrope', 'Manrope Fallback', sans-serif;
	font-size: clamp(22px, 3vw, 36px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.035em;
	color: var(--tkh-title-color, inherit);
	margin: var(--tkh-gap-label-title-top, 8px) 0 var(--tkh-gap-title-text, 0px) 0;
	transition: color 0.4s ease;
}

/* ==========================================================================
   5. Inner Content Container & Main Text
   ========================================================================== */
.tkh-panel-inner {
	width: 100%;
	max-width: var(--tkh-inner-max-width, 560px);
	min-width: 0;
	position: relative;
	z-index: 3;
	pointer-events: auto;
	box-sizing: border-box;
}

/* Main Text (p) */
.tkh-panel-text {
	position: relative;
	z-index: 3;
	font-family: 'Bricolage Grotesque', 'Bricolage Fallback', 'Manrope', 'Manrope Fallback', sans-serif;
	font-size: clamp(21px, 2.5vw, 36px);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.035em;
	max-width: var(--tkh-inner-max-width, 560px);
	color: var(--tkh-text-color, inherit);
	margin: 0;
	transition: color 0.4s ease;
	overflow-wrap: anywhere;
}
.tkh-panel-text p {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	color: inherit;
}
.tkh-panel-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Button & Link Area */
.tkh-panel-btn-wrap {
	margin-top: var(--tkh-gap-text-btn, 26px);
	position: relative;
	z-index: 4;
}
.tkh-panel-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	font-family: 'DM Mono', 'DM Mono Fallback', monospace;
	font-size: 14px;
	font-weight: 700;
	color: var(--tkh-btn-color, inherit);
	cursor: pointer;
	transition: transform 0.4s ease, color 0.4s ease;
}
.tkh-panel-btn-circle {
	width: var(--tkh-btn-circle-size, 46px);
	height: var(--tkh-btn-circle-size, 46px);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--tkh-btn-circle-bg, rgba(255, 255, 255, 0.2));
	color: var(--tkh-btn-arrow-color, inherit);
	transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.4s ease;
	flex-shrink: 0;
}
.tkh-panel-btn-circle i,
.tkh-panel-btn-circle svg {
	transition: transform 0.4s ease;
}

/* ==========================================================================
   6. Big Watermark Word (.big) with Logical Properties
   ========================================================================== */
.tkh-panel-watermark,
.tkh-panel .big {
	position: absolute;
	font-family: 'Bricolage Grotesque', 'Bricolage Fallback', 'Manrope', 'Manrope Fallback', sans-serif;
	font-weight: 800;
	font-size: var(--tkh-wm-size, clamp(90px, 15vw, 240px));
	line-height: 0.8;
	letter-spacing: -0.06em;
	white-space: var(--tkh-wm-white-space, nowrap);
	opacity: var(--tkh-wm-opacity, 0.12);
	color: var(--tkh-wm-color, currentColor);
	pointer-events: none;
	user-select: none;
	z-index: var(--tkh-wm-zindex, 1);
	transform-origin: var(--tkh-wm-origin, center);
	will-change: transform, opacity;
	transition: transform var(--tkh-wm-trans-dur, var(--tkh-transition-speed, 0.8s)) var(--tkh-wm-trans-ease, var(--tkh-transition-ease, cubic-bezier(0.7, 0, 0.2, 1))),
	            opacity 0.4s ease,
	            color 0.4s ease,
	            -webkit-text-stroke-color 0.4s ease;
}

/* Logical Corner Anchors with Logical Properties */
.tkh-panel-watermark.pos-bottom-start {
	inset-block-end: var(--tkh-wm-offset-y, -30px);
	inset-inline-start: var(--tkh-wm-offset-x, -10px);
	inset-block-start: auto;
	inset-inline-end: auto;
	--tkh-inward-x: 1;
	--tkh-inward-y: -1;
}

.tkh-panel-watermark.pos-bottom-end {
	inset-block-end: var(--tkh-wm-offset-y, -30px);
	inset-inline-end: var(--tkh-wm-offset-x, -10px);
	inset-block-start: auto;
	inset-inline-start: auto;
	--tkh-inward-x: -1;
	--tkh-inward-y: -1;
}

.tkh-panel-watermark.pos-top-start {
	inset-block-start: var(--tkh-wm-offset-y, -30px);
	inset-inline-start: var(--tkh-wm-offset-x, -10px);
	inset-block-end: auto;
	inset-inline-end: auto;
	--tkh-inward-x: 1;
	--tkh-inward-y: 1;
}

.tkh-panel-watermark.pos-top-end {
	inset-block-start: var(--tkh-wm-offset-y, -30px);
	inset-inline-end: var(--tkh-wm-offset-x, -10px);
	inset-block-end: auto;
	inset-inline-start: auto;
	--tkh-inward-x: -1;
	--tkh-inward-y: 1;
}

.tkh-panel-watermark.pos-center-start {
	top: 50%;
	inset-inline-start: var(--tkh-wm-offset-x, -10px);
	inset-inline-end: auto;
	inset-block-start: auto;
	inset-block-end: auto;
	transform: translateY(calc(-50% + var(--tkh-wm-offset-y, 0px)));
	--tkh-inward-x: 1;
	--tkh-inward-y: 0;
}

.tkh-panel-watermark.pos-center-end {
	top: 50%;
	inset-inline-end: var(--tkh-wm-offset-x, -10px);
	inset-inline-start: auto;
	inset-block-start: auto;
	inset-block-end: auto;
	transform: translateY(calc(-50% + var(--tkh-wm-offset-y, 0px)));
	--tkh-inward-x: -1;
	--tkh-inward-y: 0;
}

.tkh-panel-watermark.pos-center {
	top: 50%;
	left: 50%;
	inset-inline-start: auto;
	inset-inline-end: auto;
	inset-block-start: auto;
	inset-block-end: auto;
	transform: translate(calc(-50% + var(--tkh-wm-offset-x, 0px)), calc(-50% + var(--tkh-wm-offset-y, 0px)));
	--tkh-inward-x: 0;
	--tkh-inward-y: 0;
}
[dir="rtl"] .tkh-panel-watermark.pos-center {
	transform: translate(calc(50% - var(--tkh-wm-offset-x, 0px)), calc(-50% + var(--tkh-wm-offset-y, 0px)));
}

.tkh-panel-watermark.pos-free {
	top: var(--tkh-wm-free-top, auto);
	right: var(--tkh-wm-free-right, auto);
	bottom: var(--tkh-wm-free-bottom, auto);
	left: var(--tkh-wm-free-left, auto);
	transform: translate(var(--tkh-wm-offset-x, 0px), var(--tkh-wm-offset-y, 0px));
	--tkh-inward-x: 1;
	--tkh-inward-y: 0;
}

/* Watermark Text Stroke */
.tkh-panel-watermark.has-stroke {
	-webkit-text-stroke-width: var(--tkh-wm-stroke-width, 2px);
	-webkit-text-stroke-color: var(--tkh-wm-stroke-color, currentColor);
	color: transparent;
}

/* Watermark Gradient Text */
.tkh-panel-watermark.has-gradient {
	background: var(--tkh-wm-gradient, linear-gradient(135deg, #5bc4c4 0%, #d4b06a 100%));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ==========================================================================
   7. Panel Background Image & Overlay Layer
   ========================================================================== */
.tkh-panel-img-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.tkh-panel-img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	min-width: 100% !important;
	min-height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: var(--tkh-img-fit, cover) !important;
	object-position: var(--tkh-img-pos, center center);
	opacity: var(--tkh-img-opacity, 1);
	transition: transform var(--tkh-img-zoom-duration, 0.8s) cubic-bezier(0.2, 0.9, 0.2, 1),
	            filter 0.5s ease;
	will-change: transform;
	display: block !important;
}
.tkh-panel-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--tkh-overlay-bg, transparent);
	opacity: var(--tkh-overlay-opacity, 0.75);
	transition: opacity 0.5s ease, background 0.5s ease;
}

/* ==========================================================================
   8. PURE CSS EXPANSION ON DESKTOP & WATERMARK HOVER MOTION
   ========================================================================== */
@media (min-width: 1001px) {
	/* Hover Trigger (Pure CSS Fallback & Standard) */
	.tkh-split-panels[data-trigger="hover"]:hover .tkh-panel:hover,
	.tkh-split-panels[data-trigger="hover-click"]:hover .tkh-panel:hover,
	.tkh-panel.is-active,
	.tkh-panel:focus-within {
		flex: var(--tkh-active-grow, 1.7) !important;
		cursor: default;
	}

	/* Dim Non-Active Panels when active is present */
	.tkh-split-panels.has-active .tkh-panel:not(.is-active) {
		opacity: var(--tkh-dim-opacity, 0.85);
	}

	/* Direction-Aware Watermark Slide on Hover / Active */
	/* Default reference: moves 30px inward from the corner */
	.tkh-split-panels[data-trigger="hover"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-bottom-start,
	.tkh-split-panels[data-trigger="hover-click"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-bottom-start,
	.tkh-panel.is-active .tkh-panel-watermark.pos-bottom-start,
	.tkh-panel:focus-within .tkh-panel-watermark.pos-bottom-start {
		transform: translate3d(var(--tkh-wm-hover-slide-x, 30px), var(--tkh-wm-hover-slide-y, 0px), 0) scale(var(--tkh-wm-hover-scale, 1)) rotate(var(--tkh-wm-hover-rotate, 0deg));
		opacity: var(--tkh-wm-hover-opacity, 0.22);
	}
	[dir="rtl"] .tkh-split-panels[data-trigger="hover"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-bottom-start,
	[dir="rtl"] .tkh-split-panels[data-trigger="hover-click"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-bottom-start,
	[dir="rtl"] .tkh-panel.is-active .tkh-panel-watermark.pos-bottom-start,
	[dir="rtl"] .tkh-panel:focus-within .tkh-panel-watermark.pos-bottom-start {
		transform: translate3d(calc(-1 * var(--tkh-wm-hover-slide-x, 30px)), var(--tkh-wm-hover-slide-y, 0px), 0) scale(var(--tkh-wm-hover-scale, 1)) rotate(var(--tkh-wm-hover-rotate, 0deg));
	}

	.tkh-split-panels[data-trigger="hover"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-bottom-end,
	.tkh-split-panels[data-trigger="hover-click"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-bottom-end,
	.tkh-panel.is-active .tkh-panel-watermark.pos-bottom-end,
	.tkh-panel:focus-within .tkh-panel-watermark.pos-bottom-end {
		transform: translate3d(calc(-1 * var(--tkh-wm-hover-slide-x, 30px)), var(--tkh-wm-hover-slide-y, 0px), 0) scale(var(--tkh-wm-hover-scale, 1)) rotate(var(--tkh-wm-hover-rotate, 0deg));
		opacity: var(--tkh-wm-hover-opacity, 0.22);
	}
	[dir="rtl"] .tkh-split-panels[data-trigger="hover"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-bottom-end,
	[dir="rtl"] .tkh-split-panels[data-trigger="hover-click"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-bottom-end,
	[dir="rtl"] .tkh-panel.is-active .tkh-panel-watermark.pos-bottom-end,
	[dir="rtl"] .tkh-panel:focus-within .tkh-panel-watermark.pos-bottom-end {
		transform: translate3d(var(--tkh-wm-hover-slide-x, 30px), var(--tkh-wm-hover-slide-y, 0px), 0) scale(var(--tkh-wm-hover-scale, 1)) rotate(var(--tkh-wm-hover-rotate, 0deg));
	}

	.tkh-split-panels[data-trigger="hover"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-top-start,
	.tkh-split-panels[data-trigger="hover-click"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-top-start,
	.tkh-panel.is-active .tkh-panel-watermark.pos-top-start,
	.tkh-panel:focus-within .tkh-panel-watermark.pos-top-start {
		transform: translate3d(var(--tkh-wm-hover-slide-x, 30px), var(--tkh-wm-hover-slide-y, 0px), 0) scale(var(--tkh-wm-hover-scale, 1)) rotate(var(--tkh-wm-hover-rotate, 0deg));
		opacity: var(--tkh-wm-hover-opacity, 0.22);
	}
	[dir="rtl"] .tkh-split-panels[data-trigger="hover"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-top-start,
	[dir="rtl"] .tkh-split-panels[data-trigger="hover-click"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-top-start,
	[dir="rtl"] .tkh-panel.is-active .tkh-panel-watermark.pos-top-start,
	[dir="rtl"] .tkh-panel:focus-within .tkh-panel-watermark.pos-top-start {
		transform: translate3d(calc(-1 * var(--tkh-wm-hover-slide-x, 30px)), var(--tkh-wm-hover-slide-y, 0px), 0) scale(var(--tkh-wm-hover-scale, 1)) rotate(var(--tkh-wm-hover-rotate, 0deg));
	}

	.tkh-split-panels[data-trigger="hover"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-top-end,
	.tkh-split-panels[data-trigger="hover-click"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-top-end,
	.tkh-panel.is-active .tkh-panel-watermark.pos-top-end,
	.tkh-panel:focus-within .tkh-panel-watermark.pos-top-end {
		transform: translate3d(calc(-1 * var(--tkh-wm-hover-slide-x, 30px)), var(--tkh-wm-hover-slide-y, 0px), 0) scale(var(--tkh-wm-hover-scale, 1)) rotate(var(--tkh-wm-hover-rotate, 0deg));
		opacity: var(--tkh-wm-hover-opacity, 0.22);
	}
	[dir="rtl"] .tkh-split-panels[data-trigger="hover"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-top-end,
	[dir="rtl"] .tkh-split-panels[data-trigger="hover-click"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-top-end,
	[dir="rtl"] .tkh-panel.is-active .tkh-panel-watermark.pos-top-end,
	[dir="rtl"] .tkh-panel:focus-within .tkh-panel-watermark.pos-top-end {
		transform: translate3d(var(--tkh-wm-hover-slide-x, 30px), var(--tkh-wm-hover-slide-y, 0px), 0) scale(var(--tkh-wm-hover-scale, 1)) rotate(var(--tkh-wm-hover-rotate, 0deg));
	}

	.tkh-split-panels[data-trigger="hover"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-center,
	.tkh-split-panels[data-trigger="hover-click"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-center,
	.tkh-panel.is-active .tkh-panel-watermark.pos-center,
	.tkh-panel:focus-within .tkh-panel-watermark.pos-center {
		transform: translate(calc(-50% + var(--tkh-wm-offset-x, 0px) + var(--tkh-wm-hover-slide-x, 0px)), calc(-50% + var(--tkh-wm-offset-y, 0px) + var(--tkh-wm-hover-slide-y, 0px))) scale(var(--tkh-wm-hover-scale, 1.05));
		opacity: var(--tkh-wm-hover-opacity, 0.22);
	}
	[dir="rtl"] .tkh-split-panels[data-trigger="hover"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-center,
	[dir="rtl"] .tkh-split-panels[data-trigger="hover-click"]:hover .tkh-panel:hover .tkh-panel-watermark.pos-center,
	[dir="rtl"] .tkh-panel.is-active .tkh-panel-watermark.pos-center,
	[dir="rtl"] .tkh-panel:focus-within .tkh-panel-watermark.pos-center {
		transform: translate(calc(50% - var(--tkh-wm-offset-x, 0px) - var(--tkh-wm-hover-slide-x, 0px)), calc(-50% + var(--tkh-wm-offset-y, 0px) + var(--tkh-wm-hover-slide-y, 0px))) scale(var(--tkh-wm-hover-scale, 1.05));
	}

	/* Button Arrow Motion on Hover or Active */
	.tkh-panel:hover .tkh-panel-btn-circle,
	.tkh-panel.is-active .tkh-panel-btn-circle {
		transform: translateX(var(--tkh-btn-hover-slide, 8px));
	}
	[dir="rtl"] .tkh-panel:hover .tkh-panel-btn-circle,
	[dir="rtl"] .tkh-panel.is-active .tkh-panel-btn-circle {
		transform: translateX(calc(-1 * var(--tkh-btn-hover-slide, 8px)));
	}

	/* Image Zoom on Hover or Active */
	.tkh-panel:hover .tkh-panel-img,
	.tkh-panel.is-active .tkh-panel-img {
		transform: scale(var(--tkh-img-hover-scale, 1.08));
	}
}

/* Always Equal Mode (No Expansion) */
.tkh-split-panels[data-trigger="always-equal"] .tkh-panel {
	flex: 1 !important;
}

/* ==========================================================================
   9. RESPONSIVE STACKING (MOBILE & TABLET <= 1000px)
   ========================================================================== */
@media (max-width: 1000px) {
	.tkh-split-panels,
	.tkh-split-panels.tkh-sp-vm, .tkh-split-panels.vm {
		flex-direction: column !important;
		height: auto !important;
		min-height: 0 !important;
	}
	.tkh-panel,
	.tkh-panel.tkh-sp-hf, .tkh-panel.hf {
		min-height: var(--tkh-mobile-min-height, 340px) !important;
		flex: none !important;
		width: 100% !important;
		padding: clamp(28px, 6vw, 44px) !important;
		overflow: hidden;
	}

	/* Watermark in mobile: sensible placement (anchored bottom-start by default, never cut off at top) */
	.tkh-panel-watermark {
		font-size: var(--tkh-wm-size-mobile, clamp(60px, 16vw, 110px)) !important;
		opacity: var(--tkh-wm-opacity-mobile, 0.12) !important;
		inset-block-end: var(--tkh-wm-offset-y-mobile, var(--tkh-wm-offset-y, -20px));
		inset-inline-start: var(--tkh-wm-offset-x-mobile, var(--tkh-wm-offset-x, -10px));
	}

	/* Accordion mode on mobile */
	.tkh-split-panels.mobile-accordion .tkh-panel.is-active {
		min-height: var(--tkh-mobile-active-min-height, 460px) !important;
	}
}

/* ==========================================================================
   10. Layout Checker HUD (Editor & Admins Only)
   ========================================================================== */
.tkh-layout-checker {
	margin-top: 18px;
	background: #0f1233;
	color: #bff0f0;
	border: 1px solid #2a9d9d;
	border-radius: 12px;
	padding: 14px 18px;
	font-family: 'DM Mono', 'DM Mono Fallback', monospace;
	font-size: 12px;
	line-height: 1.6;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.tkh-layout-checker-title {
	font-weight: 700;
	color: #d4b06a;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.tkh-layout-checker-warning {
	color: #ff6b6b;
	margin-top: 6px;
	font-weight: 600;
}

/* ==========================================================================
   11. Prefers Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.tkh-panel,
	.tkh-panel-watermark,
	.tkh-panel-btn-circle,
	.tkh-panel-img {
		transition: none !important;
		transform: none !important;
	}
}