/**
 * Seguimiento de pedidos.
 *
 * Los selectores genéricos (.step, .label, .circulo) van acotados dentro de
 * .znt-seguimiento para que no choquen con el tema ni con Elementor, que usan
 * esos mismos nombres. Las reglas de .page-id-31351 se mantienen como estaban:
 * afectan al detalle del pedido de WooCommerce en la página de seguimiento.
 */

:root {
	--znt-verde: #4caf50;
	--znt-gris: #ddd;
	--znt-gris-texto: #555;
	--znt-rojo: #eb6565;
	--znt-naranja: #d17b00;

	/* Distintivos del catálogo, con los mismos valores que tenían en el
	   Personalizador para que no cambie nada a la vista. */
	--znt-badge-texto: #6b7280;
	--znt-badge-verde: #16a34a;
	--znt-badge-ambar: #f59e0b;
	--znt-badge-gris: #9ca3af;
}

/* ---------------------------------------------------------------------------
 * Barra de progreso
 * ------------------------------------------------------------------------ */

.znt-seguimiento .progress-tracker {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	margin: 40px auto;
	padding: 0 20px;
	width: 100%;
	max-width: 1000px;
}

.znt-seguimiento .step {
	text-align: center;
	position: relative;
	flex: 1;
	transition: transform 0.3s ease-in-out;
}

.znt-seguimiento .circulo {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--znt-gris);
	border: 4px solid var(--znt-gris);
	margin: 0 auto;
	position: relative;
	z-index: 2;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
}

.znt-seguimiento .label {
	margin-top: 10px;
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--znt-gris-texto);
}

/* Línea que une los círculos. */
.znt-seguimiento .step::after {
	content: '';
	position: absolute;
	top: 20%;
	left: 50%;
	height: 4px;
	width: 100%;
	background-color: var(--znt-gris);
	z-index: 1;
	transform: translateX(-50%);
}

.znt-seguimiento .step:first-child::after {
	left: 100%;
	width: 100%;
	background-color: var(--znt-verde);
}

.znt-seguimiento .step:last-child::after {
	left: 0;
}

/* El primer paso siempre está hecho: el pedido existe. */
.znt-seguimiento .step:first-child .circulo {
	background-color: var(--znt-verde);
	border-color: var(--znt-verde);
}

.znt-seguimiento .step.complete .circulo {
	background-color: var(--znt-verde);
	border-color: var(--znt-verde);
	transform: scale(1.1);
}

.znt-seguimiento .step.complete::after,
.znt-seguimiento .step.current::after {
	background-color: var(--znt-verde);
}

.znt-seguimiento .step.current .circulo {
	background-color: var(--znt-verde);
	border-color: var(--znt-verde);
	transform: scale(1.2);
}

.znt-seguimiento .step.current .label {
	color: #fff;
}

.znt-seguimiento .circulo:hover {
	transform: scale(1.2);
}

/* ---------------------------------------------------------------------------
 * Fecha estimada y avisos
 * ------------------------------------------------------------------------ */

.znt-seguimiento .estimated-delivery {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 0;
}

.znt-seguimiento .estimated-recordatorio {
	text-align: center;
	margin-top: 8px;
}

.znt-seguimiento .mensaje-retraso {
	color: var(--znt-naranja);
	font-weight: 600;
	margin-top: 10px;
}

.znt-seguimiento-error {
	color: #c00;
	font-weight: 600;
	margin-top: 16px;
}

.znt-seguimiento .tracking-info {
	margin-top: 20px;
	padding: 15px;
	border: 1px solid var(--znt-gris);
}

.znt-seguimiento .tracking-info a {
	color: #0071a1;
	text-decoration: underline;
}

.znt-seguimiento .tracking-info a:hover {
	color: #005680;
}

/* ---------------------------------------------------------------------------
 * Formulario de consulta
 * ------------------------------------------------------------------------ */

#seguimiento-pedido-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 20px auto;
	max-width: 400px;
	padding: 20px;
	border: 1px solid var(--znt-gris);
	border-radius: 10px;
	background-color: #f9f9f9;
}

#seguimiento-pedido-form input[type="text"],
#seguimiento-pedido-form input[type="email"] {
	width: 100%;
	padding: 10px;
	margin: 10px 0;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
	font-size: 16px;
}

#seguimiento-pedido-form button {
	padding: 10px 20px;
	background-color: var(--znt-rojo);
	color: #fff;
	border: none;
	border-radius: 5px;
	font-size: 16px;
	cursor: pointer;
	margin-top: 10px;
}

/* ---------------------------------------------------------------------------
 * Distintivos del catálogo
 *
 * Se imprimen justo detrás del precio, dentro del <span class="price"> que
 * genera WooCommerce. De ahí que sean <span> y no <div>: un div ahí dentro
 * sería HTML inválido. El display:flex es lo que los baja a su propia línea.
 * ------------------------------------------------------------------------ */

.znt-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: var(--znt-badge-texto);
}

.znt-badge__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex: 0 0 10px;
	background: var(--znt-badge-gris);
}

.znt-badge--rapida .znt-badge__dot {
	background: var(--znt-badge-verde);
}

.znt-badge--estandar .znt-badge__dot {
	background: var(--znt-badge-ambar);
}

/* Variante inline del aviso de entrega en la ficha de producto. */
small.znt-eta-inline {
	font-size: 12px;
}

/* ---------------------------------------------------------------------------
 * Aviso de etiquetas listas (wp-admin)
 * ------------------------------------------------------------------------ */

.znt-open-banner {
	position: fixed;
	top: 40px;
	right: 20px;
	z-index: 999999;
	background: #2271b1;
	color: #fff;
	padding: 14px 18px;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	font: 600 14px/1.3 sans-serif;
	cursor: pointer;
	max-width: 340px;
	animation: zntPulse 1.4s ease-in-out infinite;
}

@keyframes zntPulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.04); }
}

/* ---------------------------------------------------------------------------
 * Móvil
 * ------------------------------------------------------------------------ */

@media (max-width: 768px) {
	.znt-seguimiento .progress-tracker {
		flex-direction: column;
		align-items: flex-start;
	}

	.znt-seguimiento .step {
		margin-bottom: 20px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.znt-seguimiento .step::after {
		width: 4px;
		left: 25px;
		height: 100%;
		top: 100%;
		transform: translateY(-50%);
	}

	.znt-seguimiento .step:last-child::after {
		display: none;
	}

	.znt-seguimiento .circulo {
		margin-right: 15px;
	}

	.znt-seguimiento .label {
		margin-bottom: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Página de seguimiento (ID 31351)
 *
 * Estilos propios de esa página, sobre el detalle del pedido de WooCommerce.
 * Se conservan tal cual estaban.
 * ------------------------------------------------------------------------ */

.page-id-31351 h3 {
	color: #fff;
}

.page-id-31351 button {
	background-color: var(--znt-rojo);
}

.page-id-31351 .woocommerce-order-details,
.page-id-31351 .woocommerce-customer-details {
	background-color: #0a0a0a;
	padding: 40px !important;
	border-radius: 5px;
}

.page-id-31351 p,
.page-id-31351 strong.wc-item-meta-label,
.page-id-31351 td,
.page-id-31351 th,
.page-id-31351 h2.woocommerce-order-details__title,
.page-id-31351 h2.woocommerce-column__title,
.page-id-31351 span.woocommerce-Price-amount.amount {
	color: #fff !important;
}

.page-id-31351 section.woocommerce-columns--addresses {
	display: block !important;
}

.page-id-31351 tr.woocommerce-table__product-purchase-note {
	display: none !important;
}

.page-id-31351 .woocommerce-column--billing-address,
.page-id-31351 .woocommerce-column--shipping-address {
	padding: 0 !important;
}

.page-id-31351 td.woocommerce-table__product-name.product-name a {
	color: var(--znt-rojo);
}

.page-id-31351 h2.woocommerce-order-details__title,
.page-id-31351 h2.woocommerce-column__title {
	font-size: 25px !important;
}

.page-id-31351 strong.wc-item-meta-label {
	text-decoration-line: underline;
}