/* הדמיית וילון זברה: חלון, בד בשתי שכבות פסים, וסליידר יום/לילה (design/Configurator.dc.html). */

.zebra-preview {
	--zb-color: #F7F6F3;
	--zb-sheer: rgba(247, 246, 243, .5);
	--zb-rail: var(--zb-color);
	--zb-shift: 0;
	--zb-band: 20px;
	--zb-w-pct: 58%;
	--zb-h-pct: 66%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	color: #121212; /* גם בתוך מקטע כהה */
}

.zebra-preview__stage {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 24px;
	background-color: #FFFFFF;
	background-image:
		repeating-linear-gradient(90deg, #F5F4F0 0, #F5F4F0 1px, transparent 1px, transparent 40px),
		repeating-linear-gradient(180deg, #F5F4F0 0, #F5F4F0 1px, transparent 1px, transparent 40px);
}

.zebra-preview__badge {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 3;
	padding: 6px 14px;
	border-radius: 999px;
	background: #F5F4F0;
	font-size: 13px;
	font-weight: 700;
}

.zebra-preview__badge:empty {
	display: none;
}

.zebra-preview__window {
	position: relative;
	width: var(--zb-w-pct);
	height: var(--zb-h-pct);
	background: #F4E7CE; /* האור שמאחורי הווילון */
	box-shadow: 0 30px 60px -30px rgba(18, 18, 18, .45);
	transition: width .35s ease, height .35s ease;
}

.zebra-preview__blind {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
}

/* מסילה עליונה בגוון הבד */
.zebra-preview__head {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	height: 16px;
	margin: 0 -4px;
	border-radius: 3px;
	background: var(--zb-rail);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.zebra-preview__fabric {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
}

/* שתי שכבות זהות של פסים אטומים ושקופים. הזזת השכבה הקדמית יוצרת את מעבר יום/לילה. */
.zebra-preview__layer {
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		180deg,
		var(--zb-color) 0,
		var(--zb-color) var(--zb-band),
		var(--zb-sheer) var(--zb-band),
		var(--zb-sheer) calc(var(--zb-band) * 2)
	);
}

.zebra-preview__layer--front {
	background-position: 0 calc(var(--zb-shift) * var(--zb-band));
}

.zebra-preview__rail {
	flex: 0 0 auto;
	height: 8px;
	background: var(--zb-rail);
}

.zebra-preview__chain {
	position: absolute;
	top: 16px;
	right: -12px;
	width: 3px;
	height: 45%;
	background-image: repeating-linear-gradient(180deg, #8E8B83 0, #8E8B83 4px, transparent 4px, transparent 7px);
}

.zebra-preview__blind[data-side="left"] .zebra-preview__chain {
	right: auto;
	left: -12px;
}

/* קווי מידה בצבע ההדגשה */
.zebra-preview__dim {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--zebra-accent, #C2410C);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.zebra-preview__dim::before,
.zebra-preview__dim::after {
	content: "";
	flex: 1;
	background: currentColor;
}

.zebra-preview__dim--width {
	bottom: -34px;
	left: 0;
	right: 0;
}

.zebra-preview__dim--width::before,
.zebra-preview__dim--width::after {
	height: 1.5px;
}

.zebra-preview__dim--height {
	top: 0;
	bottom: 0;
	left: -40px;
	flex-direction: column;
}

.zebra-preview__blind[data-side="left"] .zebra-preview__dim--height {
	left: auto;
	right: -40px;
}

.zebra-preview__dim--height::before,
.zebra-preview__dim--height::after {
	width: 1.5px;
}

.zebra-preview__dim--height span {
	writing-mode: vertical-rl;
}

.zebra-preview__dim span:empty {
	display: none;
}

/* סליידר יום/לילה */
.zebra-daynight {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 20px;
	border-radius: 16px;
	background: #FFFFFF;
}

.zebra-daynight__title {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	font-weight: 700;
}

.zebra-daynight__value {
	color: #5C5A55;
	font-weight: 500;
}

.zebra-daynight__ends {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: #5C5A55;
}

/* עיצוב מלא של הסליידר (גם כדי לגבור על עיצוב ה-input של ה-Theme) */
.zebra-daynight input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	cursor: grab;
}

.zebra-daynight input[type="range"]:focus {
	border: 0;
	box-shadow: none;
}

.zebra-daynight input[type="range"]:focus-visible {
	outline: 3px solid #121212;
	outline-offset: 2px;
}

.zebra-daynight input[type="range"]::-webkit-slider-runnable-track {
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, #121212, #E6E4DD);
}

.zebra-daynight input[type="range"]::-moz-range-track {
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, #121212, #E6E4DD);
}

.zebra-daynight input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 28px;
	height: 28px;
	margin-top: -9px;
	border: 3px solid #121212;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.zebra-daynight input[type="range"]::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 3px solid #121212;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

@media (prefers-reduced-motion: reduce) {
	.zebra-preview__window {
		transition: none;
	}
}