/* Super Slider by Shlomi - frontend */

.ssbs-slider {
	--ssbs-min-height: 640px;
	--ssbs-padding: 48px;
	--ssbs-center-scale: 1.2;
	--ssbs-center-offset: 0px;
	--ssbs-side-scale: 0.45;
	--ssbs-side-opacity: 0.75;
	--ssbs-side-blur: 5px;
	--ssbs-side-offset: 0px;
	--ssbs-stage-height: 460px;
	--ssbs-text-color: #fff;
	--ssbs-transition: 600ms;

	position: relative;
	overflow: hidden;
	min-height: var(--ssbs-min-height);
	color: var(--ssbs-text-color);
	isolation: isolate;
}

/* Background layers */
.ssbs-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ssbs-bg::after {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ssbs-bg-layer {
	position: absolute;
	inset: 0;
	background-color: #1a1a1a;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity var(--ssbs-transition) ease;
}

.ssbs-bg-layer.is-active {
	opacity: 1;
}

/* Layout */
.ssbs-inner {
	position: relative;
	z-index: 1;
	min-height: var(--ssbs-min-height);
	padding: var(--ssbs-padding);
	box-sizing: border-box;
}

/* The carousel sits behind the text, filling the whole widget. */
.ssbs-stage {
	position: absolute;
	inset: var(--ssbs-padding);
	display: flex;
	align-items: center;
	z-index: 1;
}

/* A 3x3 placement grid - every text block can be dropped into any cell. */
.ssbs-overlay {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto 1fr auto;
	gap: 24px;
	min-height: calc(var(--ssbs-min-height) - (var(--ssbs-padding) * 2));
	pointer-events: none;
}

.ssbs-block {
	--ssbs-block-x: 0px;
	--ssbs-block-y: 0px;
	transform: translate(var(--ssbs-block-x), var(--ssbs-block-y));
	pointer-events: none;
	min-width: 0;
}

.ssbs-block a,
.ssbs-block button {
	pointer-events: auto;
}

.ssbs-block-hero { grid-area: 1 / 1 / 2 / 2; align-self: start; }
.ssbs-block-info { grid-area: 3 / 1 / 4 / 2; align-self: end; }
.ssbs-block-button { grid-area: 3 / 2 / 4 / 3; align-self: end; justify-self: center; }
.ssbs-block-features { grid-area: 3 / 3 / 4 / 4; align-self: end; justify-self: end; text-align: end; }

.ssbs-hero {
	margin: 0;
	font-size: clamp(28px, 3.2vw, 48px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: .02em;
}

.ssbs-hero:empty { display: none; }

.ssbs-title {
	margin: 0 0 8px;
	font-size: clamp(20px, 1.8vw, 28px);
	font-weight: 700;
}

.ssbs-desc {
	font-size: 14px;
	line-height: 1.55;
	opacity: .85;
}

/* ══════════════════════════════════════════════════════════
   Stacked layout — the simple mode.

   Everything flows in one centred column. The !important flags
   are deliberate: Elementor writes grid-area / justify-self /
   transform straight from the saved panel values, and those
   values stay in the database even when the grid controls are
   hidden. Without the overrides, leftover settings from a
   previous grid layout keep pushing blocks around.
   ══════════════════════════════════════════════════════════ */
.ssbs-overlay.is-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	text-align: center;
	--ssbs-stack-w: 720px;
	--ssbs-stack-x: 0px;
	--ssbs-stack-y: 0px;
	/* Fine nudge on top of the coarse anchor above. transform is used
	   rather than margins so it never changes the layout box — the
	   content cannot start clipping the slide edges. */
	transform: translate(var(--ssbs-stack-x), var(--ssbs-stack-y));
}

/* Default order, so the column reads sensibly before anything is set
   in the panel. The panel overrides these per block. */
.ssbs-overlay.is-stack .ssbs-block-hero     { order: 1; }
.ssbs-overlay.is-stack .ssbs-block-info     { order: 2; }
.ssbs-overlay.is-stack .ssbs-block-free     { order: 3; }
.ssbs-overlay.is-stack .ssbs-block-features { order: 4; }
.ssbs-overlay.is-stack .ssbs-block-button   { order: 5; }
.ssbs-overlay.is-stack .ssbs-block-scroll   { order: 99; }

.ssbs-overlay.is-stack > .ssbs-block {
	grid-area: auto !important;
	justify-self: auto !important;
	align-self: auto !important;
	transform: none !important;
	width: 100%;
	max-width: var(--ssbs-stack-w) !important;
	margin-inline: auto;
	text-align: center;
}

/* Text elements inherit the centring instead of their own alignment,
   so one setting controls the whole column. */
.ssbs-overlay.is-stack .ssbs-hero,
.ssbs-overlay.is-stack .ssbs-title,
.ssbs-overlay.is-stack .ssbs-desc,
.ssbs-overlay.is-stack .ssbs-price,
.ssbs-overlay.is-stack .ssbs-free {
	margin-inline: auto;
	text-align: center;
}

/* Feature list centres its bullets too */
.ssbs-overlay.is-stack .ssbs-features {
	justify-content: center;
	align-items: center;
}
.ssbs-overlay.is-stack .ssbs-features li { justify-content: center; }

/* The button is inline-block, so centring is the parent's job */
.ssbs-overlay.is-stack .ssbs-block-button { text-align: center; }

/* Headings get room to sit on one line. A title that wrapped in a
   narrow grid cell has the full column width here. */
.ssbs-overlay.is-stack .ssbs-hero,
.ssbs-overlay.is-stack .ssbs-title { max-width: 100%; }

/* ── Free text: fixed copy that is not tied to the product ── */
.ssbs-free {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.6;
	max-width: 100%;
}

/* The WYSIWYG wraps content in <p>. Kill the browser margins so the
   spacing control in the panel is the only thing that moves it. */
.ssbs-free > *:first-child { margin-top: 0; }
.ssbs-free > *:last-child  { margin-bottom: 0; }
.ssbs-free p { margin: 0 0 .6em; }
.ssbs-free ul,
.ssbs-free ol { margin: 0 0 .6em; padding-inline-start: 1.2em; }
.ssbs-free a { color: inherit; text-decoration: underline; }

/* Scrollbar for the max-height case — thin, so it does not shout */
.ssbs-free { scrollbar-width: thin; }
.ssbs-free::-webkit-scrollbar { width: 4px; }
.ssbs-free::-webkit-scrollbar-thumb {
	background: currentColor;
	opacity: .3;
	border-radius: 99px;
}

.ssbs-price {
	margin-top: 8px;
	font-size: 18px;
	font-weight: 600;
}

/* Neutralise theme / WooCommerce styling on the two price parts so the
   widget controls are the single source of truth. */
.ssbs-price del,
.ssbs-price ins,
.ssbs-price del *,
.ssbs-price ins * {
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	opacity: 1;
	text-decoration: none;
}

.ssbs-price del,
.ssbs-price ins {
	display: inline-block;
	vertical-align: baseline;
}

.ssbs-price del {
	text-decoration: line-through;
	text-decoration-thickness: from-font;
	margin-inline-end: 10px;
}

.ssbs-price .woocommerce-Price-currencySymbol {
	font-size: inherit;
}

.ssbs-button {
	display: inline-block;
	padding: 14px 48px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 999px;
	color: inherit;
	font-size: 16px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.ssbs-button:hover {
	background: rgba(255, 255, 255, .14);
	border-color: #fff;
	color: inherit;
}

.ssbs-features {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
	font-size: 14px;
}

.ssbs-features li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ssbs-features li::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: currentColor;
	opacity: .8;
	order: -1;
	flex: 0 0 auto;
}

.ssbs-block-features .ssbs-features li { justify-content: flex-end; }

/* Stage */
.ssbs-stage {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 0;
}

.ssbs-viewport {
	position: relative;
	width: 100%;
	height: var(--ssbs-stage-height, 460px);
	overflow: hidden;
}

.ssbs-viewport.ssbs-grab { cursor: grab; }
.ssbs-viewport.ssbs-grab:active { cursor: grabbing; }

.ssbs-track {
	position: absolute;
	inset: 0;
}

.ssbs-slide {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	transform: translate(-50%, -50%);
	transition-property: transform;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	cursor: pointer;
}

/* Before the script runs, show the slides in a plain row so nothing is ever blank. */
.ssbs-slider:not(.ssbs-ready) .ssbs-track {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	height: 100%;
}

.ssbs-slider:not(.ssbs-ready) .ssbs-slide {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	flex: 0 0 auto;
	max-width: 40%;
}

.ssbs-slide-media {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	transform: translateY(var(--ssbs-side-offset, 0px)) scale(var(--ssbs-side-scale, 0.45));
	opacity: var(--ssbs-side-opacity, 0.75);
	filter: blur(var(--ssbs-side-blur, 5px));
	transition: transform var(--ssbs-transition, 600ms) ease,
		opacity var(--ssbs-transition, 600ms) ease,
		filter var(--ssbs-transition, 600ms) ease;
}

.ssbs-slide.is-active .ssbs-slide-media {
	transform: translateY(var(--ssbs-center-offset, 0px)) scale(var(--ssbs-center-scale, 1.2));
	opacity: 1;
	filter: none;
}

.ssbs-slide-media img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Arrows */
.ssbs-slider .ssbs-arrow,
.ssbs-slider .ssbs-arrow:hover,
.ssbs-slider .ssbs-arrow:focus,
.ssbs-slider .ssbs-arrow:active {
	background-image: none;
	box-shadow: none;
	outline: none;
	text-decoration: none;
	min-height: 0;
	-webkit-appearance: none;
	appearance: none;
}

.ssbs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(calc(-50% + var(--ssbs-arrow-y, 0px)));
	z-index: 5;
	width: 56px;
	height: 34px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease;
}

.ssbs-arrow:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
}

.ssbs-arrow span {
	display: block;
	width: 18px;
	height: 1px;
	margin: 0 auto;
	background: currentColor;
	position: relative;
}

.ssbs-arrow span::before {
	content: "";
	position: absolute;
	top: -4px;
	width: 9px;
	height: 9px;
	border-top: 1px solid currentColor;
	border-left: 1px solid currentColor;
}

.ssbs-arrow-prev { inset-inline-start: 0; }
.ssbs-arrow-next { inset-inline-end: 0; }

.ssbs-arrow-prev span::before { left: 0; transform: rotate(-45deg); }
.ssbs-arrow-next span::before { right: 0; transform: rotate(135deg); }

.ssbs-arrow.is-disabled {
	opacity: .35;
	pointer-events: none;
}

.ssbs-empty {
	padding: 16px;
	background: #fff4f4;
	border: 1px solid #f3c2c2;
	border-radius: 8px;
	direction: rtl;
}

/* Fallbacks - every value here is overridable per device from the Style panel */
@media (max-width: 1024px) {
	.ssbs-slider { --ssbs-padding: 32px; }
}

@media (max-width: 767px) {
	.ssbs-slider { --ssbs-padding: 20px; }

	.ssbs-overlay {
		/* The three columns stay, so a placement chosen in the panel still
		   resolves on phones. Only the flow below changes. */
		gap: 16px;
	}

	.ssbs-block-hero,
	.ssbs-block-info,
	.ssbs-block-button,
	.ssbs-block-features {
		/* Fallback only: stack the blocks and let each use the full width.
		   Anything set in the Style panel outranks this. */
		grid-area: auto / 1 / auto / 4;
	}
}

/* ---- Collapsible sheet ---- */
.ssbs-sheet {
	--ssbs-sheet-speed: 400ms;
	--ssbs-sheet-y: 0px;
	--ssbs-sheet-gap: 16px;

	grid-area: 3 / 1 / 4 / 4;
	align-self: end;
	justify-self: stretch;
	position: relative;
	z-index: 3;
	box-sizing: border-box;
	padding: 8px 24px 24px;
	background: rgba(18, 18, 18, .88);
	border-radius: 24px;
	transform: translateY(var(--ssbs-sheet-y));
	pointer-events: auto;
}

/* The handle is a <button>, so themes love to style it. These rules are scoped
   deeply enough to win against theme and Elementor button defaults. */
.ssbs-slider .ssbs-sheet .ssbs-sheet-handle,
.ssbs-slider .ssbs-sheet .ssbs-sheet-handle:hover,
.ssbs-slider .ssbs-sheet .ssbs-sheet-handle:focus,
.ssbs-slider .ssbs-sheet .ssbs-sheet-handle:active,
.ssbs-slider .ssbs-sheet .ssbs-sheet-handle:focus-visible {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 34px;
	min-height: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	text-decoration: none;
	cursor: pointer;
	touch-action: none;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .2s ease;
}

.ssbs-slider .ssbs-sheet .ssbs-sheet-handle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.ssbs-slider .ssbs-sheet .ssbs-sheet-bar {
	display: block;
	width: 64px;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .55);
	transition: background-color .2s ease, width .2s ease;
}

.ssbs-sheet-body {
	overflow: hidden;
	transition: height var(--ssbs-sheet-speed) cubic-bezier(.4, 0, .2, 1),
		opacity var(--ssbs-sheet-speed) ease;
}

.ssbs-sheet.is-closed > .ssbs-sheet-body {
	height: 0;
	opacity: 0;
}

.ssbs-sheet-inner {
	display: flex;
	flex-direction: column;
	gap: var(--ssbs-sheet-gap);
}

/* Blocks inside the sheet stack normally instead of using their grid cell.
   Specificity beats Elementor's generated {{WRAPPER}} .ssbs-block-x rules. */
.ssbs-slider .ssbs-sheet-inner .ssbs-block {
	grid-area: auto;
	align-self: auto;
	justify-self: auto;
	transform: none;
	max-width: none;
}

/* Sheet disabled on desktop when "mobile only" is on. */
.ssbs-sheet.ssbs-sheet-mobile-only {
	background: none;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.ssbs-sheet.ssbs-sheet-mobile-only > .ssbs-sheet-handle { display: none; }

.ssbs-sheet.ssbs-sheet-mobile-only > .ssbs-sheet-body {
	height: auto !important;
	opacity: 1;
	overflow: visible;
}

.ssbs-sheet.ssbs-sheet-mobile-only .ssbs-sheet-inner {
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---- Scroll cue ---- */
.ssbs-block-scroll {
	grid-area: 3 / 2 / 4 / 3;
	align-self: end;
	justify-self: center;
}

.ssbs-slider .ssbs-scroll-cue,
.ssbs-slider .ssbs-scroll-cue:hover,
.ssbs-slider .ssbs-scroll-cue:focus,
.ssbs-slider .ssbs-scroll-cue:active {
	--ssbs-cue-speed: 1800ms;
	--ssbs-cue-hover-scale: 1.1;

	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px 20px;
	margin: 0;
	min-height: 0;
	background: transparent;
	background-image: none;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	outline: none;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
	transition: transform .25s ease, background-color .25s ease, opacity .35s ease;
}

.ssbs-scroll-cue.ssbs-cue-text-below { flex-direction: column-reverse; }

.ssbs-slider .ssbs-scroll-cue:hover { transform: scale(var(--ssbs-cue-hover-scale)); }

.ssbs-slider .ssbs-scroll-cue:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ssbs-cue-text {
	font-size: 13px;
	letter-spacing: .08em;
	line-height: 1.2;
	white-space: nowrap;
}

.ssbs-cue-icon {
	--ssbs-cue-size: 48px;
	--ssbs-cue-thickness: 4px;
	--ssbs-cue-color: #fff;

	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ssbs-cue-color);
}

.ssbs-cue-icon svg {
	width: var(--ssbs-cue-size);
	height: var(--ssbs-cue-size);
	display: block;
}

.ssbs-cue-bar {
	display: block;
	width: var(--ssbs-cue-size);
	height: var(--ssbs-cue-thickness);
	border-radius: 999px;
	background: var(--ssbs-cue-color);
}

.ssbs-scroll-cue.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Animations - the mark moves, so the click target stays still. */
.ssbs-anim-bounce .ssbs-cue-icon { animation: ssbs-cue-bounce var(--ssbs-cue-speed) ease-in-out infinite; }
.ssbs-anim-float .ssbs-cue-icon { animation: ssbs-cue-float var(--ssbs-cue-speed) ease-in-out infinite; }
.ssbs-anim-pulse .ssbs-cue-icon { animation: ssbs-cue-pulse var(--ssbs-cue-speed) ease-in-out infinite; }
.ssbs-anim-fade .ssbs-cue-icon { animation: ssbs-cue-fade var(--ssbs-cue-speed) ease-in-out infinite; }

.ssbs-cue-mouse .ssbs-cue-wheel { animation: ssbs-cue-wheel var(--ssbs-cue-speed) ease-in-out infinite; }

@keyframes ssbs-cue-bounce {
	0%, 100% { transform: translateY(0); }
	40%      { transform: translateY(10px); }
	60%      { transform: translateY(4px); }
}

@keyframes ssbs-cue-float {
	0%, 100% { transform: translateY(-4px); }
	50%      { transform: translateY(6px); }
}

@keyframes ssbs-cue-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.18); opacity: .7; }
}

@keyframes ssbs-cue-fade {
	0%, 100% { opacity: 1; }
	50%      { opacity: .3; }
}

@keyframes ssbs-cue-wheel {
	0%, 100% { transform: translateY(0); opacity: 1; }
	50%      { transform: translateY(5px); opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
	.ssbs-cue-icon,
	.ssbs-cue-wheel {
		animation: none !important;
	}
}