/* ==========================================================================
   Velas Velia — Checkout CLÁSICO de WooCommerce (form-checkout.php)
   --------------------------------------------------------------------------
   Estiliza a marca el checkout clásico de Woo. La plantilla aporta la
   estructura y la cabecera de marca; gran parte del markup interno (campos
   de facturación/envío, tabla del resumen, métodos de pago, botón de pedido)
   lo genera WooCommerce vía sus hooks, así que aquí se "viste" ese markup
   nativo con las clases/look del sistema sin reescribirlo.

   Consume EXCLUSIVAMENTE tokens del sistema. Reutiliza el lenguaje de los
   componentes vv- (.vv-input, .vv-btn--primary, hairlines, pills) replicando
   su estilo sobre los selectores que produce Woo.
   ========================================================================== */

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

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

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

.vv-checkout__lead {
	max-width: 56ch;
	margin: 0;
	font-size: var(--text-base);
	color: var(--text-muted);
}

.vv-checkout__lead .vv-sparkle-glyph {
	vertical-align: -2px;
}

/* ==========================================================================
   Layout en dos columnas (datos del cliente + resumen)
   ========================================================================== */

.vv-checkout__columns {
	/* Apilado robusto: datos del cliente a ancho completo y el resumen debajo.
	   (El grid 1fr 1fr chocaba con el width:48%/float de WooCommerce y dejaba
	   la columna de facturación en ~257px con inputs diminutos.) */
	display: block;
	margin-bottom: var(--space-12);
}

/* Anula el width:48% + float que WooCommerce aplica a .col-1/.col-2 dentro de
   .col2-set, para que facturación y envío ocupen TODO el ancho disponible. */
.vv-checkout #customer_details .col-1,
.vv-checkout #customer_details .col-2,
.vv-checkout .col2-set .col-1,
.vv-checkout .col2-set .col-2 {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 0 var(--space-8);
}

/* Salvaguarda de layout: si el markup de Woo se apila (sin .vv-checkout__columns),
   el formulario y el #order_review deben ocupar ancho cómodo y no comprimirse a
   una columna estrecha. Esto evita el "checkout en columna diminuta". */
.vv-checkout .woocommerce form.checkout,
.vv-checkout form.woocommerce-checkout {
	width: 100%;
}

.vv-checkout #customer_details,
.vv-checkout #order_review,
.vv-checkout #order_review_heading {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* La fila de "envío" de Woo puede quedar vacía si no hay envío: que no rompa. */
.vv-checkout__col {
	min-width: 0;
}

/* Tarjetas suaves alrededor de cada bloque de datos. */
.vv-checkout__col,
.vv-checkout__review {
	background: var(--surface-card);
	border: var(--border-gold-hair);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	box-shadow: var(--shadow-sm);
}

.vv-checkout__review {
	max-width: 720px;
	margin-inline: auto;
}

/* --- Títulos de sección que genera Woo (Detalles de facturación, etc.) ---- */
.vv-checkout .woocommerce-billing-fields h3,
.vv-checkout .woocommerce-shipping-fields h3,
.vv-checkout .woocommerce-additional-fields h3,
.vv-checkout #ship-to-different-address,
.vv-checkout__review-title {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	text-transform: none;
	letter-spacing: var(--tracking-display);
	color: var(--brand);
	font-size: var(--text-xl);
	line-height: var(--leading-tight);
	margin: 0 0 var(--space-6);
}

/* Checkbox "Enviar a una dirección distinta" — fila con su control inline. */
.vv-checkout #ship-to-different-address {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.vv-checkout #ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	cursor: pointer;
}

/* ==========================================================================
   Campos del formulario (form-row de Woo) → look .vv-input
   ========================================================================== */

.vv-checkout .form-row {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0 0 var(--space-5);
	padding: 0;
}

/* Filas que Woo marca como mitad de ancho: en una rejilla de 2. */
.vv-checkout .woocommerce-billing-fields__field-wrapper,
.vv-checkout .woocommerce-shipping-fields__field-wrapper,
.vv-checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--space-4);
}

.vv-checkout .form-row-wide,
.vv-checkout .form-row-first.form-row-wide,
.vv-checkout .notes,
.vv-checkout .create-account {
	grid-column: 1 / -1;
}

.vv-checkout .form-row-first {
	grid-column: 1 / 2;
}

.vv-checkout .form-row-last {
	grid-column: 2 / 3;
}

/* Etiquetas de campo (mismo tono que .vv-field__label). */
.vv-checkout .form-row label {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--text-body);
}

.vv-checkout .form-row label .required,
.vv-checkout .form-row label .optional {
	color: var(--gold-600);
	text-decoration: none;
	border: 0;
}

/* Ancho completo garantizado: cualquier input/select/textarea del checkout debe
   ocupar el 100% de su celda. Selector amplio (no depende de .input-text ni de
   .form-row) para que NUNCA queden como "círculos diminutos" aunque Woo cambie
   el markup. Mantiene box-sizing para que el padding no desborde la rejilla. */
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .input-text,
.vv-checkout .form-row input,
.vv-checkout .form-row select,
.vv-checkout .form-row textarea,
.vv-checkout .form-row .input-text {
	width: 100%;
	box-sizing: border-box;
}

/* Inputs, selects y textarea → estilo .vv-input/.vv-textarea. */
.vv-checkout .form-row input.input-text,
.vv-checkout .form-row textarea,
.vv-checkout .form-row select,
.vv-checkout .form-row input[type="text"],
.vv-checkout .form-row input[type="email"],
.vv-checkout .form-row input[type="tel"],
.vv-checkout .form-row input[type="password"],
.vv-checkout .select2-container .select2-selection--single {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--text-body);
	background: var(--white);
	border: var(--border-w-2) solid var(--gold-300);
	border-radius: var(--radius-pill);
	padding: 12px 18px;
	outline: none;
	transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.vv-checkout .form-row textarea {
	border-radius: var(--radius-md);
	padding: 12px 16px;
	resize: vertical;
	min-height: 96px;
	line-height: var(--leading-normal);
}

.vv-checkout .form-row input.input-text::placeholder,
.vv-checkout .form-row textarea::placeholder {
	color: var(--ink-300);
}

.vv-checkout .form-row input.input-text:focus,
.vv-checkout .form-row textarea:focus,
.vv-checkout .form-row select:focus,
.vv-checkout .select2-container--focus .select2-selection--single,
.vv-checkout .select2-container--open .select2-selection--single {
	border-color: var(--gold-600);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Estado de error que pinta Woo en los form-row. */
.vv-checkout .form-row.woocommerce-invalid input.input-text,
.vv-checkout .form-row.woocommerce-invalid select,
.vv-checkout .form-row.woocommerce-invalid .select2-container .select2-selection--single {
	border-color: var(--rose-400);
}

.vv-checkout .form-row.woocommerce-validated input.input-text {
	border-color: var(--gold-400);
}

/* --- Ajustes para el select2 (país/provincia) que usa Woo ----------------- */
.vv-checkout .select2-container .select2-selection--single {
	height: auto;
	display: flex;
	align-items: center;
}

.vv-checkout .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: var(--text-body);
}

.vv-checkout .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: var(--space-4);
	transform: translateY(-50%);
}

/* ==========================================================================
   Resumen del pedido (tabla review-order de Woo) — productos/totales REALES
   ========================================================================== */

/* El resumen puede contener nombres de producto largos: permitir scroll
   horizontal en pantallas estrechas sin romper el layout de la tarjeta. */
.vv-checkout .woocommerce-checkout-review-order {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.vv-checkout .woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-6);
	font-family: var(--font-body);
}

.vv-checkout .woocommerce-checkout-review-order-table th,
.vv-checkout .woocommerce-checkout-review-order-table td {
	padding: var(--space-3) 0;
	text-align: left;
	border-bottom: var(--border-hair);
	color: var(--text-body);
	font-size: var(--text-sm);
}

/* Cabecera de la tabla (Producto / Subtotal) en label de marca. */
.vv-checkout .woocommerce-checkout-review-order-table thead th {
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	font-size: var(--text-xs);
	color: var(--text-label);
}

/* Nombre del producto + cantidad. */
.vv-checkout .woocommerce-checkout-review-order-table .product-name {
	font-weight: var(--fw-medium);
	color: var(--text-heading);
	/* Que los nombres largos se partan en vez de estirar la columna. */
	word-break: break-word;
	overflow-wrap: anywhere;
}

.vv-checkout .woocommerce-checkout-review-order-table .product-quantity {
	color: var(--text-muted);
	font-weight: var(--fw-semibold);
}

.vv-checkout .woocommerce-checkout-review-order-table td.product-total,
.vv-checkout .woocommerce-checkout-review-order-table th.product-total {
	text-align: right;
	white-space: nowrap;
}

/* Filas de totales (subtotal, envío, total). */
.vv-checkout .woocommerce-checkout-review-order-table tfoot th {
	font-weight: var(--fw-medium);
	color: var(--text-muted);
	text-transform: none;
	letter-spacing: 0;
}

.vv-checkout .woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
	font-weight: var(--fw-semibold);
	color: var(--text-body);
}

/* Total final destacado con el oro de marca. */
.vv-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th,
.vv-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
	border-bottom: 0;
	padding-top: var(--space-4);
	font-size: var(--text-md);
}

.vv-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: var(--tracking-display);
	color: var(--brand);
}

.vv-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td .amount,
.vv-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td bdi {
	font-family: var(--font-rounded);
	font-weight: var(--fw-bold);
	font-size: var(--text-lg);
	color: var(--gold-700);
}

/* ==========================================================================
   Métodos de pago (Bold / Addi y demás gateways)
   ========================================================================== */

.vv-checkout #payment {
	background: var(--gold-050);
	border: var(--border-gold-hair);
	border-radius: var(--radius-md);
	padding: var(--space-6);
}

.vv-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 0;
	border: 0;
}

.vv-checkout #payment ul.payment_methods li {
	margin: 0 0 var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--white);
	border: var(--border-gold-hair);
	border-radius: var(--radius-sm);
}

.vv-checkout #payment ul.payment_methods li label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	color: var(--text-body);
	cursor: pointer;
}

.vv-checkout #payment ul.payment_methods li img {
	max-height: 28px;
	width: auto;
	vertical-align: middle;
}

/* Caja descriptiva del gateway. */
.vv-checkout #payment div.payment_box {
	margin: var(--space-3) 0 0;
	padding: var(--space-4);
	background: var(--gold-100);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--text-muted);
}

.vv-checkout #payment div.payment_box::before {
	display: none; /* Quita el triángulo nativo de Woo. */
}

/* Aviso de términos/privacidad. */
.vv-checkout #payment .woocommerce-privacy-policy-text,
.vv-checkout #payment .woocommerce-terms-and-conditions-wrapper {
	font-size: var(--text-xs);
	color: var(--text-muted);
	margin-bottom: var(--space-4);
}

/* --- Botón "Realizar pedido" → .vv-btn--primary --------------------------- */
.vv-checkout #payment #place_order,
.vv-checkout button#place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 16px 38px;
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
	border-radius: var(--radius-pill);
	border: var(--border-w-2) solid var(--gold-600);
	background: var(--gold-600);
	color: var(--text-on-brand);
	box-shadow: var(--shadow-pill);
	cursor: pointer;
	transition: transform var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}

.vv-checkout #payment #place_order:hover:not(:disabled) {
	filter: brightness(1.06);
}

.vv-checkout #payment #place_order:active {
	transform: var(--press-scale);
}

.vv-checkout #payment #place_order:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ==========================================================================
   Avisos, login y cupón nativos de Woo dentro del checkout
   ========================================================================== */

.vv-checkout .woocommerce-form-login-toggle,
.vv-checkout .woocommerce-form-coupon-toggle {
	margin-bottom: var(--space-6);
}

.vv-checkout .woocommerce-info,
.vv-checkout .woocommerce-message,
.vv-checkout .woocommerce-error {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	background: var(--gold-100);
	color: var(--text-body);
	border: var(--border-gold-hair);
	border-left: 4px solid var(--gold-600);
	border-radius: var(--radius-sm);
	padding: var(--space-3) var(--space-4);
	margin-bottom: var(--space-6);
	list-style: none;
}

.vv-checkout .woocommerce-error {
	border-left-color: var(--rose-400);
}

.vv-checkout .woocommerce-info a,
.vv-checkout .woocommerce-message a {
	color: var(--gold-700);
	font-weight: var(--fw-semibold);
}

/* Formularios de login/cupón que despliega Woo: campos al estilo de marca. */
.vv-checkout form.login,
.vv-checkout form.checkout_coupon {
	background: var(--surface-card);
	border: var(--border-gold-hair);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	margin-bottom: var(--space-6);
}

.vv-checkout form.login .button,
.vv-checkout form.checkout_coupon .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 26px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
	border-radius: var(--radius-pill);
	border: var(--border-w-2) solid var(--gold-400);
	background: transparent;
	color: var(--gold-700);
	cursor: pointer;
	transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.vv-checkout form.login .button:hover,
.vv-checkout form.checkout_coupon .button:hover {
	background: var(--gold-100);
}

.vv-checkout form.login .button:active,
.vv-checkout form.checkout_coupon .button:active {
	transform: var(--press-scale);
}

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

@media (max-width: 900px) {
	.vv-checkout__columns {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
}

@media (max-width: 600px) {
	.vv-checkout {
		padding: var(--space-8) var(--space-4) var(--space-12);
	}

	.vv-checkout__col,
	.vv-checkout__review {
		padding: var(--space-6);
	}

	.vv-checkout .woocommerce-billing-fields__field-wrapper,
	.vv-checkout .woocommerce-shipping-fields__field-wrapper,
	.vv-checkout .woocommerce-additional-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	.vv-checkout .form-row-first,
	.vv-checkout .form-row-last {
		grid-column: 1 / -1;
	}

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