/* =======================================================================
 * PESI — Cart & Checkout (WooCommerce Blocks) restyle.
 * Visual layer only (no markup changes). Brand: navy #0f1a37, blue #2f6bed.
 * Tuned against the real checkout DOM.
 * ===================================================================== */
.wc-block-cart,
.wc-block-checkout {
	--pesi-blue: #2f6bed;
	--pesi-blue-dark: #255fd6;
	--pesi-navy: #0f1a37;
	--pesi-muted: #6b7280;
	--pesi-line: #e7ebf3;
	font-family: 'Titillium Web', system-ui, -apple-system, sans-serif;
	color: var(--pesi-navy);
}

/* Neutralize the alignwide/alignfull "breakout" negative margins (all sizes).
   Inside a narrower Elementor container these use margin: 0 calc(50% - 50vw)
   and shove the whole cart/checkout off-screen to the left. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-cart.alignfull,
.wp-block-woocommerce-checkout.alignwide,
.wp-block-woocommerce-checkout.alignfull {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 100% !important;
	left: auto !important;
	right: auto !important;
}

/* Section / page headings */
.woocommerce h1.entry-title,
.wc-block-components-title,
.wp-block-woocommerce-cart h2,
.wc-block-checkout__main h2,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title-text {
	color: var(--pesi-navy);
	font-weight: 800;
}

/* ---- Left column (checkout form) ------------------------------------ */
.wc-block-checkout__main {
	background: #fff;
	border: 1px solid #eceef3;
	border-radius: 18px;
	padding: 28px 26px;
}

/* Inputs + selects */
.wc-block-components-text-input input,
.wc-blocks-components-select__container {
	border: 1px solid #d9dee8 !important;
	border-radius: 10px !important;
	min-height: 50px;
	background: #fff;
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
	border-color: var(--pesi-blue) !important;
	box-shadow: 0 0 0 3px rgba(47, 107, 237, 0.15) !important;
	outline: 0;
}

/* ---- Summary card (right column) ------------------------------------ */
.wc-block-components-sidebar {
	background: #f6f8fc;
	border: 1px solid var(--pesi-line);
	border-radius: 18px;
	padding: 22px 22px;
	box-shadow: 0 10px 30px rgba(20, 30, 60, 0.06);
}

/* Kill WooCommerce's per-block separator lines (the "striped" borders) */
.wc-block-components-totals-wrapper {
	border-top: 0 !important;
	padding: 8px 0 !important;
}

/* Product line in the summary */
.wc-block-components-order-summary-item {
	padding: 4px 0 14px;
}

.wc-block-components-order-summary-item__image img {
	border-radius: 10px;
}

.wc-block-components-order-summary-item__quantity span[aria-hidden="true"] {
	background: var(--pesi-navy) !important;
}

.wc-block-components-order-summary-item .wc-block-components-product-name {
	color: var(--pesi-navy);
	font-weight: 700;
	line-height: 1.35;
}

/* Hide the leftover English short description ("When you're worki…").
   Remove this rule once the products are re-described in Spanish. */
.wc-block-components-product-metadata__description {
	display: none;
}

/* Coupon accordion ("Añadir cupones") — one subtle divider, no box */
.wc-block-components-totals-coupon.wc-block-components-panel {
	border: 0 !important;
	border-top: 1px solid var(--pesi-line) !important;
}

.wc-block-components-panel__button {
	color: var(--pesi-navy);
	font-weight: 700;
}

.wc-block-components-totals-coupon__button {
	border-radius: 10px !important;
	border: 1px solid var(--pesi-navy) !important;
	color: var(--pesi-navy) !important;
	font-weight: 700 !important;
}

/* Totals rows */
.wc-block-components-totals-item__label {
	color: var(--pesi-muted);
}

.wc-block-components-totals-item__value {
	color: var(--pesi-navy);
	font-weight: 600;
}

/* Free shipping in green */
.wc-block-components-totals-shipping .wc-block-components-totals-item__value {
	color: #2e9e5b;
	font-weight: 800;
}

/* Total — one clean divider above, big and navy */
.wc-block-components-totals-footer-item {
	border-top: 1px solid #dfe4ee !important;
	padding-top: 16px !important;
	margin-top: 6px;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--pesi-navy);
	font-weight: 800;
	font-size: 20px;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--pesi-navy);
	font-weight: 800;
	font-size: 24px;
}

/* ---- Primary CTAs: "Proceder al pago" / "Realizar el pedido / Ir a PayPal" */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button.contained {
	background: var(--pesi-blue) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 12px !important;
	font-weight: 700 !important;
	font-size: 17px !important;
	width: 100%;
	min-height: 56px;
	box-shadow: 0 8px 18px rgba(47, 107, 237, 0.30) !important;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button.contained:hover {
	background: var(--pesi-blue-dark) !important;
	box-shadow: 0 10px 22px rgba(47, 107, 237, 0.40) !important;
}

.wc-block-cart__submit-button .wc-block-components-button__text::after,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text::after {
	content: " \2192";
}

/* ---- Cart line items (cart page) ------------------------------------ */
.wc-block-cart-item__image img { max-width: 84px; border-radius: 10px; }

.wc-block-cart-item__product .wc-block-components-product-name {
	color: var(--pesi-navy);
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
}

.wc-block-cart-item__remove-link { color: #d64545; font-weight: 600; }
.wc-block-cart-item__remove-link:hover { color: #b53434; }

.wc-block-cart-item__prices .wc-block-components-product-price__value {
	color: var(--pesi-navy);
	font-weight: 800;
}

/* ---- Payment method options ----------------------------------------- *
 * The option box is .wc-block-components-radio-control-accordion-option.
 * WooCommerce's default "highlight-checked" draws a dark (≈black) border on
 * the selected one — we override it to blue.                             */
.wc-block-components-radio-control-accordion-option {
	border: 1px solid var(--pesi-line) !important;
	border-radius: 12px !important;
	margin-bottom: 10px;
	overflow: hidden;
}

.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--pesi-blue) !important;
	box-shadow: 0 0 0 1px var(--pesi-blue) inset !important;
	background: #f2f7ff;
}

/* Remove the default (dark) highlight/box-shadow on the label itself */
.wc-block-components-radio-control__option,
.wc-block-components-radio-control__option-checked {
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Selected radio dot in brand blue */
.wc-block-components-radio-control__input:checked {
	accent-color: var(--pesi-blue);
	border-color: var(--pesi-blue) !important;
}

/* =======================================================================
 * MOBILE — priority. WooCommerce Blocks already stack the sidebar under
 * the form on narrow screens; here we tighten spacing/typography and keep
 * everything inside the viewport.
 * ===================================================================== */
.wc-block-cart,
.wc-block-checkout { max-width: 100%; }

.wc-block-cart *,
.wc-block-checkout * { box-sizing: border-box; }

.wc-block-cart img,
.wc-block-checkout img { max-width: 100%; height: auto; }

/* Tablet / large phone */
@media (max-width: 781px) {
	/* Force a single column, even when WooCommerce still thinks the container
	   is "wide" (it measures the Elementor container, not the viewport). This
	   fixes the two-column overflow that clips content on the left. */
	.wc-block-components-sidebar-layout {
		display: block !important;
	}
	.wc-block-checkout__main,
	.wc-block-checkout__sidebar,
	.wc-block-cart__main,
	.wc-block-cart__sidebar,
	.wc-block-components-sidebar {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0;
		padding-right: 0;
	}

	/* Kill the alignwide/alignfull negative margins on small screens. */
	.wp-block-woocommerce-cart,
	.wp-block-woocommerce-checkout {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
	}

	.wc-block-checkout__main {
		padding: 18px 14px;
		border-radius: 14px;
	}
	.wc-block-components-sidebar {
		padding: 18px 14px;
		border-radius: 14px;
		position: static !important; /* no sticky panel on mobile */
		margin-top: 18px;
	}
	.wc-block-components-title,
	.wc-block-components-checkout-step__title,
	.wc-block-components-checkout-order-summary__title-text {
		font-size: 20px;
	}
	.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 18px; }
	.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
	.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value { font-size: 21px; }

	.wc-block-cart__submit-button,
	.wc-block-components-checkout-place-order-button,
	.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button.contained {
		font-size: 16px !important;
		min-height: 52px;
	}

	.wc-block-cart-item__image img { max-width: 64px; }
	.wc-block-cart-item__product .wc-block-components-product-name { font-size: 16px; }

	/* Comfortable tap targets for payment options */
	.wc-block-components-radio-control__option { padding-top: 14px; padding-bottom: 14px; }
}

/* Small phones */
@media (max-width: 480px) {
	.wc-block-checkout__main,
	.wc-block-components-sidebar { padding: 15px 12px; }

	.wc-block-components-title,
	.wc-block-components-checkout-step__title,
	.wc-block-components-checkout-order-summary__title-text { font-size: 18px; }

	.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
	.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value { font-size: 20px; }

	/* Order-summary product line: keep image + text on one tidy row */
	.wc-block-components-order-summary-item__image img { width: 44px; height: 44px; }
	.wc-block-components-order-summary-item .wc-block-components-product-name { font-size: 15px; }
}

/* =======================================================================
 * EXTRAS — step progress bar (#1) and secure-payment badge (#9).
 * Injected by cart-checkout-extras.js.
 * ===================================================================== */
.pesi-steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin: 0 0 22px;
	font-family: 'Titillium Web', system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
}

.pesi-step {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #9aa2ad;
}

.pesi-step__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #e7ebf3;
	color: #6b7280;
	font-size: 14px;
	line-height: 1;
}

.pesi-step.is-active { color: #0f1a37; }
.pesi-step.is-active .pesi-step__badge { background: #2f6bed; color: #fff; }
.pesi-step.is-done { color: #0f1a37; }
.pesi-step.is-done .pesi-step__badge { background: #2e9e5b; color: #fff; }

.pesi-secure {
	margin: 14px 0 26px;
	text-align: center;
	color: #6b7280;
	font-size: 14px;
	font-weight: 600;
	font-family: 'Titillium Web', system-ui, sans-serif;
}

.pesi-secure__lock { margin-right: 4px; }
.pesi-secure__line { margin-bottom: 8px; }

/* Fila de métodos de pago bajo el aviso de reembolso. */
.pesi-pays {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	align-items: center;
}
.pesi-pays svg { border-radius: 4px; }

/* Hide the "Add a note to your order" field (no order notes wanted) */
.wp-block-woocommerce-checkout-order-note-block,
.wc-block-checkout__order-notes {
	display: none !important;
}

@media (max-width: 480px) {
	.pesi-steps { font-size: 13px; gap: 8px 14px; }
	.pesi-step__badge { width: 22px; height: 22px; font-size: 12px; }
}

/* PayPal "pay in 3" message moved under the PayPal payment option */
.pesi-paylater {
	padding: 2px 16px 12px 44px;
}