/**
 * ShipLift frontend widget styles.
 * All values are driven by CSS custom properties set inline from admin
 * settings (spec section 72) — this file only ever hard-codes layout, never
 * merchant-configurable colors/sizes.
 */

.shiplift-widget {
	--sl-spacing: 0.75em;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 0 var(--sl-spacing);
	padding: var(--sl-spacing);
	overflow-wrap: break-word;
	word-break: break-word;
	font-size: var(--sl-font-size, 14px);
	color: var(--sl-text, #111827);
	transition: background-color 0.2s ease;
}

.shiplift-widget * {
	box-sizing: border-box;
	max-width: 100%;
}

.shiplift-widget__message {
	margin: 0 0 0.5em;
	line-height: 1.4;
}

.shiplift-widget__message:last-of-type {
	margin-bottom: 0.5em;
}

/* Mobile/desktop copy swap is pure CSS so it works without JS (spec section 19). */
.shiplift-widget__message--mobile {
	display: none;
}

@media (max-width: 480px) {
	.shiplift-widget__message--desktop {
		display: none;
	}

	.shiplift-widget__message--mobile {
		display: block;
	}
}

.shiplift-widget__bar-track {
	width: 100%;
	height: var(--sl-progress-height, 10px);
	background-color: var(--sl-bg, #e5e7eb);
	border-radius: var(--sl-border-radius, 6px);
	overflow: hidden;
}

.shiplift-widget__bar-fill {
	height: 100%;
	background-color: var(--sl-fill, #16a34a);
	border-radius: inherit;
	transition: width 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.shiplift-widget,
	.shiplift-widget__bar-fill {
		transition: none;
	}
}

.shiplift-widget .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Constrain gracefully inside narrow mini-cart / cart-drawer containers. */
.widget_shopping_cart_content .shiplift-widget,
.wc-block-mini-cart__drawer .shiplift-widget {
	padding: calc(var(--sl-spacing) * 0.75);
	font-size: calc(var(--sl-font-size, 14px) * 0.95);
}