/**
 * Public-facing styles for Sidocode Shipping Goal Tracker.
 *
 * All colours and dimensions are driven by CSS custom properties set inline
 * on .ssgt-bar-wrap by the bar template. This file contains only structural
 * styles — no hardcoded colour values, no !important.
 *
 * Custom properties (set inline on .ssgt-bar-wrap):
 *   ssgt-bg        Background of the track (pill track colour).
 *   ssgt-bar       Fill colour of the progress bar.
 *   ssgt-btn       Background colour of upsell "Add" buttons.
 *   ssgt-text      Text and icon colour.
 *   ssgt-radius    Border radius (px unit included inline).
 *   ssgt-height    Height of the progress track (px unit included inline).
 *   ssgt-progress  Current progress percentage (e.g. 60%). Used by CSS animation.
 *
 * @package ShippingThresholdTracker
 * @since   1.0.0
 */

/* ==========================================================================
	Bar wrapper — base
	========================================================================== */

.ssgt-bar-wrap {
	position: relative;
	padding: 14px 16px;
	box-sizing: border-box;
	width: 100%;
	color: var(--ssgt-text);
	max-width: 600px;
	margin: var(--ssgt-margin-top, 5px) auto var(--ssgt-margin-bottom, 5px);
	border-radius: var(--ssgt-wrap-radius, 0);
	background-color: var(--ssgt-wrap-bg, transparent);
	clear: both;
}

/* ==========================================================================
	Bar title (optional heading above the bar row)
	========================================================================== */

.ssgt-bar-title {
	font-size: 0.9em;
	margin-bottom: 8px;
	margin-top: 8px;
	color: var(--ssgt-text);
	line-height: 1.4;
}

/* ==========================================================================
	Bar row — track + cart value label side by side
	========================================================================== */

.ssgt-bar-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: var(--ssgt-bar-row-w-desktop, 100%);
	max-width: 100%;
	margin: 0 auto;
}

/* ==========================================================================
	Progress track and fill
	========================================================================== */

.ssgt-bar-track {
	flex: 1;
	min-width: 0;
	height: var(--ssgt-height);
	background-color: var(--ssgt-bg);
	border-radius: var(--ssgt-radius);
	overflow: hidden;
}

/* Entry animation — bar animates from 0% to ssgt-progress on page load. */
@keyframes ssgt-fill-in {
	from {
		width: 0%;
	}

	to {
		width: var(--ssgt-progress, 0%);
	}
}

.ssgt-bar-fill {
	height: 100%;
	width: 0;
	background-color: var(--ssgt-bar);
	border-radius: var(--ssgt-radius);
	animation: ssgt-fill-in 0.8s ease-out forwards;
	/* Subsequent JS-driven width changes use the transition, not the animation. */
	transition: width 0.4s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	.ssgt-bar-fill {
		animation: none;
	}
}

/* ==========================================================================
	Cart value label (right of the track)
	========================================================================== */

.ssgt-bar-label {
	flex-shrink: 0;
	font-size: 0.85em;
	white-space: nowrap;
	color: var(--ssgt-text);
}

/* ==========================================================================
	Message row — icon + text
	========================================================================== */

.ssgt-bar-message {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	margin-bottom: 8px;
	font-size: 0.9375em;
	text-align: var(--ssgt-text-align, left);
	color: var(--ssgt-text);
	line-height: 1.4;
}

.ssgt-bar-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	color: var(--ssgt-icon-color, var(--ssgt-text));
}

.ssgt-bar-icon svg {
	display: block;
}

/* Fallback for custom SVGs injected via the ssgt_bar_icon_svg filter that may
	not go through get_svg() normalisation. fill/stroke normalisation at source
	(get_svg) is the primary mechanism; this is a safety net only. */
.ssgt-bar-icon .ssgt-svg-icon [fill]:not([fill="none"]) {
	fill: currentColor;
}

.ssgt-bar-icon .ssgt-svg-icon [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

.ssgt-bar-text {
	min-width: 0;
}

/* Message token bold — store owners can wrap FREE DELIVERY in <strong>
	in their message string; this rule ensures it renders correctly. */
.ssgt-bar-text strong,
.ssgt-bar-text b {
	font-weight: 700;
}

/* ==========================================================================
	Reached state
	========================================================================== */

.ssgt-bar-wrap.ssgt-reached .ssgt-bar-fill {
	width: 100%;
}

/* ==========================================================================
	Upsells container
	========================================================================== */

.ssgt-upsells {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}

.ssgt-upsells.ssgt-list {
	flex-direction: column;
}

/* ==========================================================================
	Carousel Layout
	========================================================================== */
.ssgt-bar-wrap:has(.ssgt-upsells.ssgt-carousel) {
	padding-right: 1.2rem;
	padding-left: 1.2rem;
}

.ssgt-carousel-wrap {
	position: relative;
	margin-top: 16px;
}

.ssgt-carousel-wrap .ssgt-upsells {
	margin-top: 0;
}

.ssgt-upsells.ssgt-carousel {
	flex-direction: row;
	/* Override list column */
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE and Edge */
	scroll-behavior: smooth;
	padding-bottom: 2px;
	/* Prevent clipping of box-shadows if any */
	gap: 0;
}

.ssgt-upsells.ssgt-carousel::-webkit-scrollbar {
	display: none;
}

.ssgt-upsells.ssgt-carousel .ssgt-upsell-card {
	flex: 0 0 100%;
	width: 100%;
	/* Show 1 card at a time */
	scroll-snap-align: start;
	scroll-snap-stop: always;
	padding-right: 1.2rem;
	padding-left: 1.2rem;
}

.ssgt-upsells.ssgt-carousel .ssgt-upsell-card> :last-child {
	grid-column: 1 / -1;
}

/* Carousel Chevrons */
.ssgt-bar-wrap .ssgt-carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	padding: 0;
	background: #fff;
	color: #333;
	border: 1px solid #e0e0e0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	z-index: 2;
	font-size: 20px;
	line-height: 1;
	padding-bottom: 3px;
	/* visual center tweak for lsaquo/rsaquo */
	transition: opacity 0.2s, visibility 0.2s;
}

.ssgt-bar-wrap .ssgt-carousel-btn:hover {
	background: #f9f9f9;
	color: initial;
}

.ssgt-bar-wrap .ssgt-carousel-prev {
	left: -5px;
}

.ssgt-bar-wrap .ssgt-carousel-next {
	right: -5px;
}

.ssgt-bar-wrap .ssgt-carousel-btn.ssgt-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}



.ssgt-upsells.ssgt-carousel .ssgt-upsell-add {
	max-width: calc(100% - 1rem);
	margin: 0 auto;
}


/* ==========================================================================
	Upsell card
	========================================================================== */

.ssgt-upsell-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	flex: 1 1 120px;
	max-width: 160px;
	padding: 10px;
	border-radius: var(--ssgt-radius);
	box-sizing: border-box;
}

.ssgt-upsells.ssgt-list .ssgt-upsell-card {
	flex: none;
	align-items: center;
	display: grid;
	gap: 14px;
	grid-template-columns: 64px 1fr auto;
	max-width: none;
}



.ssgt-upsells.ssgt-list .sst-description {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ssgt-image-wrap {
	width: 100%;
	padding-bottom: 60px;
	position: relative;
}

.ssgt-upsell-card img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	max-width: 60px;
	max-height: 60px;
	object-fit: cover;
	border-radius: var(--ssgt-upsell-img-radius, 50px);
	display: block;
}

/* ==========================================================================
	Upsell card text
	========================================================================== */

.ssgt-upsell-name {
	margin: 0;
	font-weight: 600;
	font-size: 0.8125em;
	color: var(--ssgt-text);
	line-height: 1.3;
}

.ssgt-upsell-price {
	margin: 0;
	font-size: 0.8125em;
	color: var(--ssgt-text);
	opacity: 0.7;
}

.ssgt-upsell-price .woocommerce-Price-amount {
	display: block;
}

/* ==========================================================================
	Upsell card links — image and name links (upsell_link_card option)
	========================================================================== */

.ssgt-upsell-card-link,
.ssgt-upsell-name-link {
	width: 100%;
	display: block;
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
	Upsell add-to-cart button
	========================================================================== */

.ssgt-upsell-add {
	display: block;
	width: 100%;
	margin-top: auto;
	padding: 5px 8px;
	font-size: 0.8125em;
	text-align: center;
	text-decoration: none;
	color: var(--ssgt-btn-text, #ffffff);
	background-color: var(--ssgt-btn);
	border: none;
	border-radius: var(--ssgt-radius);
	cursor: pointer;
	box-sizing: border-box;
	transition: opacity 0.2s ease;
}

.ssgt-list .ssgt-upsell-add {
	margin-top: 0;
}

.ssgt-upsell-add:hover {
	opacity: 0.85;
	color: var(--ssgt-btn-text, #ffffff);
}

/* ==========================================================================
	Loading / spinner state
	========================================================================== */

.ssgt-upsell-add.ssgt-loading {
	pointer-events: none;
	opacity: 0.6;
	position: relative;
}

.ssgt-upsell-add.ssgt-loading::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: ssgt-spin 0.6s linear infinite;
	vertical-align: middle;
}

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

/* ==========================================================================
	Responsive
	========================================================================== */

@media (max-width: 480px) {
	.ssgt-bar-row {
		width: var(--ssgt-bar-row-w-mobile, 100%);
	}

	.ssgt-upsells::not(.ssgt-list) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.ssgt-upsells::not(.ssgt-list) .ssgt-upsell-card {
		padding: 0 9px;
	}

	.ssgt-upsells::not(.ssgt-list) .ssgt-upsell-card img {
		flex-shrink: 0;
	}
}

/* ==========================================================================
	Text alignment — controlled by data-ssgt-align set from ssgt_settings.styles.text_align
	========================================================================== */

[data-ssgt-align="center"] .ssgt-bar-message {
	justify-content: center;
}

[data-ssgt-align="center"] .ssgt-bar-title {
	text-align: center;
}

[data-ssgt-align="left"] .ssgt-bar-row {
	margin: unset;
}

/* ==========================================================================
	Border — controlled by data-ssgt-border / data-ssgt-shadow on .ssgt-bar-wrap
	Rules placed after template rules so equal-specificity selectors win here.
	========================================================================== */

.ssgt-bar-wrap[data-ssgt-border="1"] {
	border: 1px solid var(--ssgt-border-color, #e0e0e0);
}

.ssgt-bar-wrap[data-ssgt-border="0"] {
	border: none;
}

.ssgt-bar-wrap[data-ssgt-shadow="1"] {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.ssgt-bar-wrap[data-ssgt-shadow="0"] {
	box-shadow: none;
}

/* ==========================================================================
	Typography — driven by CSS custom properties set inline on .ssgt-bar-wrap
	ssgt-title-fs      Bar title font size (px).
	ssgt-msg-fs        Below-threshold message font size (px).
	ssgt-amount-fw     Font weight of the remaining amount token.
	ssgt-amount-color  Colour of the remaining amount token.
	ssgt-label-fs      Font size of the bar label (cart total) to the right of the track (px).
	========================================================================== */

.ssgt-bar-title {
	font-size: var(--ssgt-title-fs, 0.9em);
}

.ssgt-bar-message {
	font-size: var(--ssgt-msg-fs, 0.9375em);
}

/* Target wc_price() output wrapping the {remaining} and {threshold} tokens. */
.ssgt-bar-text .woocommerce-Price-amount {
	font-weight: var(--ssgt-amount-fw, bold);
	color: var(--ssgt-amount-color, #22a94f);
}
.ssgt-bar-label .woocommerce-Price-amount {
	color: var(--ssgt-amount-color, #22a94f);
	font-size: var(--ssgt-label-fs, 0.85em);
}

/* ==========================================================================
	Icon visibility — data-ssgt-show-icon on .ssgt-bar-wrap
	========================================================================== */

[data-ssgt-show-icon="0"] .ssgt-bar-icon {
	display: none;
}

/* ==========================================================================
	Icon shake — periodic attention animation on the truck icon
	Shake occupies ~15% of a 4s cycle; the remaining 85% is static.
	Respects prefers-reduced-motion.
	========================================================================== */

@keyframes ssgt-icon-shake {
	0% {
		transform: rotate(0deg);
	}

	2% {
		transform: rotate(-8deg);
	}

	4% {
		transform: rotate(8deg);
	}

	6% {
		transform: rotate(-8deg);
	}

	8% {
		transform: rotate(8deg);
	}

	10% {
		transform: rotate(-4deg);
	}

	12% {
		transform: rotate(4deg);
	}

	14%,
	100% {
		transform: rotate(0deg);
	}
}

[data-ssgt-icon-shake="1"] .ssgt-bar-icon {
	/* 4s cycle: ~0.56s shake then ~3.44s pause. 2s initial delay before first shake. */
	animation: ssgt-icon-shake 4s ease-in-out 2s infinite;
}

@media (prefers-reduced-motion: reduce) {
	[data-ssgt-icon-shake="1"] .ssgt-bar-icon {
		animation: none;
	}
}