/*
 * Free Shipping Progress — barra nativa Akibara (sin dependencias).
 *
 * Markup contract (ver FreeShippingProgress.php):
 *
 *   .akb-fsp-wrap.akb-fsp-active
 *     ├── .akb-fsp-title         (sello editorial uppercase)
 *     ├── .akb-fsp-track         (pista gris)
 *     │     └── .akb-fsp-fill    (relleno rojo brand, width inline)
 *     └── .akb-fsp-message       (mensaje principal, monto destacado)
 *
 *   .akb-fsp-wrap.akb-fsp-qualified.akb-fsp-q--{order_amount|coupon|zero_fee}
 *     └── .akb-fsp-message       (banda verde discreta con checkmark)
 *
 *   .akb-fsp-wrap.akb-fsp-empty   (placeholder vacío para fragments AJAX)
 *
 * Solo el width del fill usa style inline (legítimo: progresivo).
 */

.akb-fsp-wrap {
	/* Defaults asumen dark theme (Akibara cart/checkout body bg #0a0a0a). */
	--akb-fsp-track:   rgba(255, 255, 255, 0.12);
	--akb-fsp-fill:    #d90010;
	--akb-fsp-ink:     #e0e0e0;
	--akb-fsp-tag-ink: #9a9a9a;
	--akb-fsp-success: #4cd16a;

	padding: 14px 0;
	font-family: inherit;
	color: var(--akb-fsp-ink);
	line-height: 1.4;
	/* El skew(-15deg) del track proyecta sus esquinas ~3px fuera del ancho
	   del contenedor (overflow horizontal en /carrito/ desktop); el camión
	   (right:-12px) también puede sobresalir con fill alto. Contener aquí. */
	overflow: hidden;
}

.akb-fsp-wrap.akb-fsp-empty {
	padding: 0;
	margin: 0;
}

.akb-fsp-title {
	font-family: var(--font-heading, "Inter", sans-serif);
	font-size: 13px;
	font-weight: 800;
	font-style: italic;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--aki-black, #0a0a0a);
	background: var(--aki-white, #fff);
	padding: 6px 14px;
	margin: 0 0 16px;
	display: inline-block;
	transform: skew(-10deg);
	box-shadow: -4px 4px 0 var(--akb-fsp-fill);
}

.akb-fsp-track {
	height: 10px;
	margin: 22px 0 14px;
	background-color: var(--aki-black, #0a0a0a);
	border: 1px solid var(--akb-fsp-track);
	border-radius: 0;
	position: relative;
	transform: skew(-15deg);
}

.akb-fsp-fill {
	display: block;
	position: relative;
	height: 100%;
	background: var(--akb-fsp-fill);
	border-radius: 0;
	border-right: 3px solid var(--aki-white, #fff);
	transition: width 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Camión que viaja con la barra de progreso. SVG inline via mask para que herede el color brand. */
.akb-fsp-truck {
	position: absolute;
	right: -12px;
	top: -8px;
	width: 24px;
	height: 24px;
	background-color: var(--aki-white, #fff);
	transform: skew(15deg); /* Un-skew truck so it's not distorted by the track skew */
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm12 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM17 12V9.5h2.5l1.96 2.5H17z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm12 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM17 12V9.5h2.5l1.96 2.5H17z'/></svg>");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
	transition: right 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.akb-fsp-message {
	font-family: var(--font-heading, "Inter", sans-serif);
	font-style: italic;
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--akb-fsp-ink);
	margin: 0;
	letter-spacing: 0.02em;
}

.akb-fsp-active .akb-fsp-message bdi,
.akb-fsp-active .akb-fsp-message .amount,
.akb-fsp-active .akb-fsp-message .woocommerce-Price-amount {
	font-weight: 800;
	color: var(--aki-yellow, #FFD700);
	font-size: 1.15em;
	font-variant-numeric: tabular-nums;
	text-shadow: -1px 1px 0 var(--aki-black, #0a0a0a);
}

/* — Estado calificado: Banda MISSION ACCOMPLISHED — */
.akb-fsp-qualified {
	padding: 14px 20px;
	background: var(--aki-black, #0a0a0a);
	border: none;
	border-radius: 0;
	box-shadow: -4px 4px 0 var(--akb-fsp-success);
	transform: skew(-10deg);
	margin-top: 10px;
}

.akb-fsp-qualified .akb-fsp-message {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-heading, "Inter", sans-serif);
	font-style: italic;
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--akb-fsp-success);
	letter-spacing: 0.04em;
	transform: skew(4deg);
}

.akb-fsp-qualified .akb-fsp-message::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: var(--akb-fsp-success);
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.3 11.3 3 8l1.4-1.4 1.9 1.9 5.3-5.3L13 4.6z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.3 11.3 3 8l1.4-1.4 1.9 1.9 5.3-5.3L13 4.6z'/></svg>");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* — Mini-cart drawer (Woo Fly Cart) y widget nativo: densidad alta — */
.woofc-cart-area .akb-fsp-wrap,
.widget_shopping_cart_content .akb-fsp-wrap {
	padding: 12px 0 14px;
}

.woofc-cart-area .akb-fsp-title,
.widget_shopping_cart_content .akb-fsp-title {
	font-size: 10px;
	margin-bottom: 8px;
}

.woofc-cart-area .akb-fsp-message,
.widget_shopping_cart_content .akb-fsp-message {
	font-size: 13px;
}

/* — Cart page: espacioso — */
.woocommerce-cart .akb-fsp-wrap {
	padding: 18px 0 22px;
}

/* — Checkout: densidad media — */
.woocommerce-checkout .akb-fsp-wrap {
	padding: 14px 0 18px;
}

/* — Mobile — */
@media (max-width: 480px) {
	.akb-fsp-title { font-size: 9.5px; letter-spacing: 0.12em; }
	.akb-fsp-message { font-size: 13px; }
	.akb-fsp-track { height: 4px; }
}

/* — Estado "casi lo logras" (≥80% del threshold) —
 * Antes vivía como <style> inline dentro del fragment (con !important y
 * re-emitido en cada add-to-cart AJAX). La clase switch la pone
 * render_progress(); specificity 0,2,0 gana a las bases 0,1,0 sin !important. */
@keyframes akb-fsp-pulse {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.05); }
	100% { transform: scale(1); }
}

.akb-fsp-wrap.akb-fsp-almost-there {
	animation: akb-fsp-pulse 1.5s infinite;
}

.akb-fsp-almost-there .akb-fsp-track {
	background: #ffe4e1;
	border: 2px solid #ff4500;
}

.akb-fsp-almost-there .akb-fsp-fill {
	background: #ff4500;
}

.akb-fsp-almost-there .akb-fsp-message {
	color: var(--aki-white, #ffffff);
	font-weight: 900;
}

.akb-fsp-almost-there .akb-fsp-message bdi,
.akb-fsp-almost-there .akb-fsp-message .amount,
.akb-fsp-almost-there .akb-fsp-message .woocommerce-Price-amount {
	color: var(--aki-yellow, #ffcc00);
}

.akb-fsp-almost-there .akb-fsp-message .dashicons {
	font-size: 16px;
	margin-top: 2px;
	color: var(--aki-red, #ff0000);
}

@media (prefers-reduced-motion: reduce) {
	.akb-fsp-wrap.akb-fsp-almost-there { animation: none; }
}