/* ==========================================================================
   Velas Velia — Página "Pedido recibido" / Gracias (checkout/thankyou.php)
   --------------------------------------------------------------------------
   Estiliza a marca la página de gracias. La plantilla aporta la cabecera de
   marca, la tarjeta con los datos reales del pedido y el CTA de WhatsApp; el
   detalle del pedido (tabla de productos, dirección) lo imprime WooCommerce
   vía el hook woocommerce_thankyou, así que aquí también se "viste" ese markup
   nativo (.woocommerce-order-details, .woocommerce-customer-details).

   Esto es WEB (no email): consume EXCLUSIVAMENTE tokens del sistema y reutiliza
   el lenguaje de los componentes vv- (pills, hairlines, badges, botones).
   ========================================================================== */

/* --- Lienzo general ------------------------------------------------------- */
.vv-thankyou {
	width: 100%;
	max-width: var(--container-narrow);
	margin-inline: auto;
	padding: var(--space-16) var(--space-6) var(--space-20);
	background: var(--bg);
	color: var(--text-body);
}

/* --- Cabecera de marca ---------------------------------------------------- */
.vv-thankyou__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-3);
	margin-bottom: var(--space-10);
}

.vv-thankyou__title {
	margin: 0;
	font-size: var(--text-3xl);
	color: var(--brand);
}

.vv-thankyou__lead {
	max-width: 56ch;
	margin: 0;
	font-size: var(--text-md);
	color: var(--text-body);
}

.vv-thankyou__lead .vv-sparkle-glyph,
.vv-thankyou__lead svg {
	vertical-align: middle;
	margin-left: var(--space-1);
}

/* --- Nota "bajo pedido ~5 días hábiles" ----------------------------------- */
.vv-thankyou__note {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	background: var(--surface-tinted);
	border: var(--border-gold-hair);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	margin-bottom: var(--space-10);
}

.vv-thankyou__note .vv-badge {
	flex-shrink: 0;
	margin-top: 2px;
}

.vv-thankyou__note p {
	margin: 0;
	color: var(--text-body);
}

/* --- Resumen del pedido (datos reales) ------------------------------------ */
.vv-thankyou__overview {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	margin: 0 0 var(--space-10);
	padding: 0;
}

.vv-thankyou__overview-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	background: var(--surface-card);
	border: var(--border-hair);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
	box-shadow: var(--shadow-xs);
}

.vv-thankyou__overview-label {
	font-size: var(--text-2xs);
	color: var(--gold-600);
}

.vv-thankyou__overview-value {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--text-base);
	color: var(--text-heading);
}

.vv-thankyou__overview-total {
	font-family: var(--font-rounded);
	font-weight: var(--fw-bold);
	color: var(--gold-700);
}

/* El total de Woo trae markup interno: que respete el color de marca. */
.vv-thankyou__overview-total .woocommerce-Price-amount {
	color: var(--gold-700);
}

/* --- CTA de WhatsApp ------------------------------------------------------ */
.vv-thankyou__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-4);
	background: var(--gold-050);
	border: var(--border-gold-hair);
	border-radius: var(--radius-lg);
	padding: var(--space-10) var(--space-6);
	margin-bottom: var(--space-12);
}

.vv-thankyou__cta-text {
	max-width: 48ch;
	margin: 0;
	font-size: var(--text-md);
	color: var(--text-body);
}

/* --- Acciones (pedido fallido) -------------------------------------------- */
.vv-thankyou__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-bottom: var(--space-12);
}

/* ==========================================================================
   Markup nativo de Woo impreso por el hook woocommerce_thankyou
   (detalle del pedido + datos del cliente). Se viste con el lenguaje vv-.
   ========================================================================== */

.vv-thankyou .woocommerce-order-details,
.vv-thankyou .woocommerce-customer-details {
	margin-top: var(--space-10);
}

.vv-thankyou .woocommerce-order-details__title,
.vv-thankyou .woocommerce-column__title {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	text-transform: none;
	letter-spacing: var(--tracking-display);
	font-size: var(--text-xl);
	color: var(--brand);
	margin-bottom: var(--space-5);
}

/* Contenedor de la tabla: permite scroll horizontal en móvil cuando el
   contenido no cabe, sin deformar la tarjeta del detalle del pedido. */
.vv-thankyou .woocommerce-order-details {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Tabla de productos del pedido */
.vv-thankyou .woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	background: var(--surface-card);
	border: var(--border-hair);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/* El nombre del producto puede ser largo: que se parta y no estire la tabla. */
.vv-thankyou .woocommerce-table--order-details .product-name {
	word-break: break-word;
	overflow-wrap: anywhere;
}

.vv-thankyou .woocommerce-table--order-details th,
.vv-thankyou .woocommerce-table--order-details td {
	padding: var(--space-4) var(--space-5);
	text-align: left;
	border-bottom: var(--border-hair);
	color: var(--text-body);
	font-size: var(--text-sm);
}

.vv-thankyou .woocommerce-table--order-details thead th {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	font-size: var(--text-xs);
	color: var(--text-label);
	background: var(--gold-050);
}

.vv-thankyou .woocommerce-table--order-details tfoot th,
.vv-thankyou .woocommerce-table--order-details tfoot td {
	font-weight: var(--fw-semibold);
	color: var(--text-heading);
}

.vv-thankyou .woocommerce-table--order-details tfoot tr:last-child th,
.vv-thankyou .woocommerce-table--order-details tfoot tr:last-child td {
	font-family: var(--font-rounded);
	font-weight: var(--fw-bold);
	color: var(--gold-700);
	border-bottom: 0;
}

.vv-thankyou .woocommerce-table--order-details a {
	color: var(--brand);
}

/* Datos del cliente (direcciones) */
.vv-thankyou .woocommerce-customer-details address {
	font-style: normal;
	background: var(--surface-card);
	border: var(--border-hair);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	line-height: var(--leading-relaxed);
	color: var(--text-body);
}

/* --- Responsivo ----------------------------------------------------------- */
@media (max-width: 600px) {
	.vv-thankyou {
		padding: var(--space-12) var(--space-4) var(--space-16);
	}

	.vv-thankyou__title {
		font-size: var(--text-2xl);
	}

	.vv-thankyou__overview {
		grid-template-columns: 1fr;
	}

	.vv-thankyou__note {
		flex-direction: column;
		gap: var(--space-3);
	}
}