/**
 * Smart Product Slider - Frontend Styles
 *
 * All colors/sizes are driven by CSS custom properties (--sps-*) that
 * Elementor's style controls set on the widget's OUTER wrapper element
 * (an ancestor of .sps-slider-wrapper below). We intentionally do NOT
 * redeclare those variables anywhere in this file - custom properties
 * inherit down through descendants automatically, and redeclaring them
 * here would shadow/override whatever the Style tab set. Instead, every
 * var(--sps-x) usage below carries its own fallback default as the
 * second argument, e.g. var(--sps-card-bg, #ffffff) - that fallback only
 * ever applies if nothing set the variable anywhere in the DOM tree.
 */

.sps-slider-wrapper {
	position: relative;
	box-sizing: border-box;
}

.sps-slider-wrapper *,
.sps-slider-wrapper *::before,
.sps-slider-wrapper *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------
 * Track / viewport
 * ---------------------------------------------------------------- */
.sps-track-viewport {
	overflow: hidden;
	width: 100%;
}

.sps-track {
	display: flex;
	will-change: transform;
	touch-action: pan-y;
	/* Transition is toggled off during drag via JS (.is-dragging) for a 1:1 finger-follow feel. */
	transition: transform 0.35s ease;
}

.sps-track.is-dragging {
	transition: none;
	cursor: grabbing;
}

.sps-slide {
	flex: 0 0 auto;
	padding-right: var(--sps-gap, 20px);
	min-width: 0;
}

.sps-slide:last-child {
	padding-right: 0;
}

/* -------------------------------------------------------------------
 * CSS-only responsive column widths.
 * JS also sets slide widths inline (and always wins, since inline
 * styles beat stylesheet rules) once it initialises - these rules only
 * exist so the correct number of products is visible immediately on
 * first paint, before JS has run, avoiding any layout shift/flash of
 * a single full-width product.
 * ---------------------------------------------------------------- */
@media (min-width: 1024px) {
	.sps-slider-wrapper[data-desktop="1"] .sps-slide { width: 100%; }
	.sps-slider-wrapper[data-desktop="2"] .sps-slide { width: 50%; }
	.sps-slider-wrapper[data-desktop="3"] .sps-slide { width: 33.3333%; }
	.sps-slider-wrapper[data-desktop="4"] .sps-slide { width: 25%; }
	.sps-slider-wrapper[data-desktop="5"] .sps-slide { width: 20%; }
	.sps-slider-wrapper[data-desktop="6"] .sps-slide { width: 16.6667%; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.sps-slider-wrapper[data-tablet="1"] .sps-slide { width: 100%; }
	.sps-slider-wrapper[data-tablet="2"] .sps-slide { width: 50%; }
	.sps-slider-wrapper[data-tablet="3"] .sps-slide { width: 33.3333%; }
	.sps-slider-wrapper[data-tablet="4"] .sps-slide { width: 25%; }
	.sps-slider-wrapper[data-tablet="5"] .sps-slide { width: 20%; }
	.sps-slider-wrapper[data-tablet="6"] .sps-slide { width: 16.6667%; }
}

@media (max-width: 767.98px) {
	.sps-slider-wrapper[data-mobile="1"] .sps-slide { width: 100%; }
	.sps-slider-wrapper[data-mobile="2"] .sps-slide { width: 50%; }
	.sps-slider-wrapper[data-mobile="3"] .sps-slide { width: 33.3333%; }
	.sps-slider-wrapper[data-mobile="4"] .sps-slide { width: 25%; }
	.sps-slider-wrapper[data-mobile="5"] .sps-slide { width: 20%; }
	.sps-slider-wrapper[data-mobile="6"] .sps-slide { width: 16.6667%; }
}

/* -------------------------------------------------------------------
 * Grid layout
 * When data-layout="grid" the track becomes a CSS grid instead of a
 * flex "filmstrip" - no transforms, no dragging, no arrows/dots. The
 * exact column count and "first N items" cutoff for each breakpoint is
 * written per-widget-instance into an inline <style> block by PHP
 * (render_grid_inline_style()), since those numbers come from the
 * user's Elementor settings rather than being fixed values.
 * ---------------------------------------------------------------- */
.sps-slider-wrapper[data-layout="grid"] .sps-track-viewport {
	overflow: visible;
}

.sps-slider-wrapper[data-layout="grid"] .sps-track {
	display: grid;
	gap: var(--sps-gap, 20px);
	transform: none !important;
}

.sps-slider-wrapper[data-layout="grid"] .sps-slide {
	padding-right: 0;
	width: auto;
}

/* -------------------------------------------------------------------
 * Product card
 * .sps-card is a plain container (not a link) so the Add to Cart
 * button can sit next to - not nested inside - the clickable product
 * link (.sps-card__link). Nesting a <button> inside an <a> is invalid
 * HTML and breaks click handling.
 * ---------------------------------------------------------------- */
.sps-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--sps-card-bg, #ffffff);
	border: 1px solid var(--sps-card-border, #eeeeee);
	border-radius: var(--sps-card-radius, 14px);
	overflow: hidden;
	position: relative;
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.sps-card:hover,
.sps-card:focus-within {
	border-color: var(--sps-card-border-hover, #dddddd);
	transform: translateY(-3px);
}

.sps-card__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	text-decoration: none !important;
	color: inherit;
}

.sps-card__image-wrap {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f7f7f7;
}

.sps-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.sps-card:hover .sps-card__image {
	transform: scale(1.04);
}

.sps-card__body {
	padding: var(--sps-card-padding-top, 16px) var(--sps-card-padding-right, 16px) var(--sps-card-padding-bottom, 16px) var(--sps-card-padding-left, 16px);
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
}

.sps-card__title {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--sps-title-color, #1e1e1e);
	/* Belt-and-braces clamp in case a very long single word slips past the PHP character limit. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sps-rating {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	line-height: 1;
	color: var(--sps-rating-text-color, #6b7280);
}

.sps-rating__star {
	flex: 0 0 auto;
	color: var(--sps-rating-star-color, #fbbf24);
}

.sps-rating__count {
	opacity: 0.85;
}

.sps-card__price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin-top: auto;
	font-size: 14px;
}

.sps-voucher-icon {
	flex: 0 0 auto;
	color: var(--sps-voucher-color, #f97316);
}

.sps-card__price-value {
	color: var(--sps-price-color, #16a34a);
	font-weight: 700;
	line-height: 1;
}

.sps-card__price-value del {
	color: var(--sps-price-regular-color, #999999);
	font-weight: 400;
	opacity: 1;
	margin-right: 4px;
	text-decoration: line-through;
}

.sps-card__price-value ins {
	color: var(--sps-price-color, #16a34a);
	text-decoration: none;
	font-weight: 700;
}

/* Sale badge */
.sps-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--sps-badge-bg, #ff4757);
	color: var(--sps-badge-color, #ffffff);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 8px;
	border-radius: 999px;
	z-index: 2;
	letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------
 * Smart AJAX Add to Cart button (optional, per-widget toggle)
 * ---------------------------------------------------------------- */
.sps-card__actions {
	padding: 0 var(--sps-card-padding-right, 16px) var(--sps-card-padding-bottom, 16px) var(--sps-card-padding-left, 16px);
}

.sps-add-to-cart {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 6px;
	padding: 10px 14px;
	border: none;
	border-radius: var(--sps-atc-radius, 10px);
	background: var(--sps-atc-bg, #16a34a);
	color: var(--sps-atc-color, #ffffff);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none !important;
	overflow: hidden;
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.sps-add-to-cart:hover,
.sps-add-to-cart:focus-visible {
	background: var(--sps-atc-bg-hover, #15803d);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.sps-add-to-cart:active {
	transform: scale(0.97);
}

.sps-atc-spinner,
.sps-atc-check {
	display: none;
}

/* Loading state: label fades out, spinner fades/spins in. */
.sps-add-to-cart.is-loading {
	cursor: default;
	pointer-events: none;
}

.sps-add-to-cart.is-loading .sps-atc-label {
	opacity: 0;
}

.sps-add-to-cart.is-loading .sps-atc-spinner {
	display: block;
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: currentColor;
	animation: sps-atc-spin 0.6s linear infinite;
}

/* Success state: checkmark pop-in, background swaps to the success color. */
.sps-add-to-cart.is-success {
	background: var(--sps-atc-success-bg, #16a34a);
}

.sps-add-to-cart.is-success .sps-atc-label {
	opacity: 0;
}

.sps-add-to-cart.is-success .sps-atc-check {
	display: flex;
	position: absolute;
	align-items: center;
	justify-content: center;
	animation: sps-atc-pop 0.3s ease;
}

/* Error state: a brief red pulse, label stays visible so the merchant
 * can retry - no separate error icon needed for such a short-lived state. */
.sps-add-to-cart.is-error {
	background: #dc2626;
	animation: sps-atc-shake 0.4s ease;
}

@keyframes sps-atc-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes sps-atc-pop {
	from {
		transform: scale(0.5);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes sps-atc-shake {
	25% {
		transform: translateX(-3px);
	}
	75% {
		transform: translateX(3px);
	}
}

/* -------------------------------------------------------------------
 * Arrows
 * ---------------------------------------------------------------- */
.sps-arrow {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--sps-card-border, #eeeeee);
	background: var(--sps-arrow-bg, #ffffff);
	color: var(--sps-arrow-color, #1e1e1e);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	z-index: 3;
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.sps-arrow:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.sps-arrow--prev {
	left: -10px;
}

.sps-arrow--next {
	right: -10px;
}

.sps-arrow[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.sps-arrow svg {
	pointer-events: none;
}

/* -------------------------------------------------------------------
 * Dots
 * ---------------------------------------------------------------- */
.sps-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}

.sps-dots button {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: var(--sps-card-border, #eeeeee);
	padding: 0;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.sps-dots button.is-active {
	background: var(--sps-arrow-color, #1e1e1e);
	transform: scale(1.2);
}

/* -------------------------------------------------------------------
 * Empty state
 * ---------------------------------------------------------------- */
.sps-no-products {
	opacity: 0.7;
	font-style: italic;
}

/* -------------------------------------------------------------------
 * Responsive breakpoints - align with Astra's common tablet/mobile breaks
 * ---------------------------------------------------------------- */
@media (max-width: 768px) {
	.sps-arrow {
		width: 32px;
		height: 32px;
	}

	.sps-arrow--prev {
		left: 4px;
	}

	.sps-arrow--next {
		right: 4px;
	}
}