/* XT Checkout — PetMarket checkout redesign */

.xtchk-checkout {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}

/* Hide the default Petio checkout header breadcrumb */
.xtchk-checkout ~ .woocommerce-page-header,
.woocommerce-page-header {
	display: none;
}

/* ── Main Layout: 80/20 ─────────────────────────── */

.xtchk-layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 24px;
	align-items: start;
}

@media (max-width: 960px) {
	.xtchk-layout {
		grid-template-columns: 1fr;
	}
}

.xtchk-main {
	min-width: 0;
}

.xtchk-sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ── Order Summary ───────────────────────────────── */

.xtchk-order-summary h3 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 15px;
	color: #333;
}

.xtchk-order-summary .woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
}

.xtchk-order-summary .woocommerce-checkout-review-order-table th,
.xtchk-order-summary .woocommerce-checkout-review-order-table td {
	padding: 10px 12px;
	border-bottom: 1px solid #eee;
	text-align: left;
}

.xtchk-order-summary .woocommerce-checkout-review-order-table tfoot tr:last-child td,
.xtchk-order-summary .woocommerce-checkout-review-order-table tfoot tr:last-child th {
	font-weight: 700;
	font-size: 16px;
	border-bottom: 2px solid #333;
}

/* Hide the default place order button inside the review table */
.xtchk-order-summary #payment {
	display: none;
}

/* ── Subtotal / Total alineados a la derecha con ancho fijo simétrico ── */

.xtchk-order-summary .shop_table .cart-subtotal,
.xtchk-order-summary .shop_table .order-total,
.xtchk-order-summary .cart-subtotal,
.xtchk-order-summary .order-total,
.xtchk-order-summary .xtchk-shipping-line {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: baseline !important;
	gap: 0 !important;
	padding: 12px 16px;
	border-bottom: 1px solid #eee;
}

.xtchk-order-summary .xtchk-shipping-line h2 {
	width: 100px;
	margin: 0;
	padding: 0;
	text-align: right;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	flex-shrink: 0;
}

.xtchk-order-summary .xtchk-shipping-amount {
	width: 140px;
	text-align: right;
	font-size: 14px;
	flex-shrink: 0;
	color: #333;
}

.xtchk-order-summary .order-total {
	border-bottom: 2px solid #333;
	font-weight: 700;
}

.xtchk-order-summary .cart-subtotal h2,
.xtchk-order-summary .order-total h2 {
	width: 100px;
	margin: 0;
	padding: 0;
	text-align: right;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	flex-shrink: 0;
}

.xtchk-order-summary .order-total h2 {
	font-size: 16px;
	font-weight: 700;
}

.xtchk-order-summary .subtotal-price,
.xtchk-order-summary .total-price {
	width: 140px;
	text-align: right;
	font-size: 14px;
	flex-shrink: 0;
}

.xtchk-order-summary .total-price {
	font-size: 16px;
}

.xtchk-order-summary .total-price .includes_tax {
	display: block;
	font-size: 11px;
	font-weight: normal;
	color: #888;
	margin-top: 2px;
}

/* ── Sidebar cards (address + payment) ───────────── */

.xtchk-col {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 20px;
}

.xtchk-col h3 {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 12px;
	color: #333;
}

/* ── Shipping selector (movido al panel derecho) ── */

.xtchk-shipping-source {
	display: none !important;
}

.xtchk-shipping-selector {
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eee;
}

.xtchk-section-label,
.xtchk-section-label-secondary {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #555;
	margin: 0 0 6px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.xtchk-section-label-secondary {
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	color: #333;
	margin-top: 8px;
	margin-bottom: 10px;
}

/* ── Radio group de tipo de envío ── */

.xtchk-shipping-radios {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.xtchk-shipping-loading {
	font-size: 13px;
	color: #999;
	margin: 0;
}

.xtchk-shipping-radio {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.35;
	transition: border-color 0.15s, background 0.15s;
}

.xtchk-shipping-radio:hover {
	border-color: #2e7d32;
}

.xtchk-shipping-radio input[type="radio"] {
	margin: 2px 0 0;
	flex-shrink: 0;
	accent-color: #2e7d32;
	width: 16px;
	height: 16px;
}

/* Resaltar la opción seleccionada */
.xtchk-shipping-radio:has(input[type="radio"]:checked) {
	border-color: #2e7d32;
	background: #f3faf3;
}

.xtchk-shipping-radio-text {
	flex: 1;
	color: #333;
}

.xtchk-shipping-note {
	font-size: 12px;
	color: #777;
	margin-top: 6px;
}

/* Ocultar el bloque original de shipping totals en el resumen izquierdo
   (lo movemos al panel derecho vía JS, pero por si acaso no carga JS, lo ocultamos). */
.xtchk-order-summary .woocommerce-shipping-totals {
	display: none !important;
}

/* ── Store cards (recogida en tienda) ── */

.xtchk-stores {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.xtchk-store-card {
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 12px 14px;
	cursor: pointer;
	background: #fff;
	transition: border-color 0.15s, background 0.15s;
}

.xtchk-store-card:hover {
	border-color: #28a745;
}

.xtchk-store-card--selected {
	border-color: #28a745;
	background: #f0faf3;
	box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.15);
}

.xtchk-store-card strong {
	display: block;
	color: #333;
	font-size: 14px;
	margin-bottom: 4px;
}

.xtchk-store-address {
	font-size: 12px;
	color: #777;
	line-height: 1.4;
}

/* ── Selects ─────────────────────────────────────── */

.xtchk-select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 13px;
	background: #fff;
	appearance: auto;
}

.xtchk-select:focus {
	border-color: #28a745;
	outline: none;
	box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.15);
}

/* ── Action links ────────────────────────────────── */

.xtchk-address-actions,
.xtchk-payment-actions {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

.xtchk-link {
	font-size: 12px;
	color: #28a745;
	text-decoration: none;
}

.xtchk-link:hover {
	text-decoration: underline;
}

/* ── Detail cards ────────────────────────────────── */

.xtchk-address-details,
.xtchk-payment-details {
	margin-top: 12px;
	padding: 12px;
	background: #f9f9f9;
	border-radius: 6px;
	border: 1px solid #eee;
}

.xtchk-detail-row {
	font-size: 13px;
	line-height: 1.5;
	color: #555;
}

.xtchk-detail-row:empty {
	display: none;
}

.xtchk-detail-name {
	font-weight: 600;
	color: #333;
}

.xtchk-detail-card-brand {
	font-weight: 600;
	color: #333;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.5px;
}

.xtchk-detail-card-name {
	font-weight: 600;
	color: #333;
	font-size: 13px;
}

.xtchk-detail-card-number {
	font-size: 13px;
	font-family: monospace;
}

.xtchk-detail-maps a {
	color: #28a745;
	text-decoration: none;
	font-size: 12px;
}

.xtchk-detail-maps a:hover {
	text-decoration: underline;
}

/* ── Login prompt (guest users) ──────────────────── */

.xtchk-col--login h3 {
	text-align: center;
}

.xtchk-login-prompt {
	text-align: center;
	padding: 16px 0;
}

.xtchk-login-prompt p {
	color: #555;
	margin-bottom: 10px;
	font-size: 14px;
}

.xtchk-login-register {
	font-size: 13px;
	margin-top: 12px !important;
}

.xtchk-login-register a {
	color: #28a745;
}

/* ── Empty states ────────────────────────────────── */

.xtchk-address-empty,
.xtchk-saved-cards-empty {
	text-align: center;
	padding: 12px 0;
}

.xtchk-address-empty p,
.xtchk-saved-cards-empty p {
	color: #888;
	margin-bottom: 8px;
	font-size: 13px;
}

.xtchk-btn-action {
	display: inline-block;
	background: #28a745;
	color: #fff !important;
	border: none;
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 13px;
	cursor: pointer;
	text-decoration: none;
}

.xtchk-btn-action:hover {
	background: #218838;
}

/* ── Gateway list ────────────────────────────────── */

.xtchk-gateway-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.xtchk-gateway-item {
	border-bottom: 1px solid #f0f0f0;
	padding: 10px 0;
}

.xtchk-gateway-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.xtchk-gateway-item:first-child {
	padding-top: 0;
}

.xtchk-gateway-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: #333;
}

.xtchk-gateway-radio {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: #28a745;
}

.xtchk-gateway-details {
	margin-top: 8px;
	padding-left: 24px;
}

.xtchk-gateway-desc {
	font-size: 12px;
	color: #777;
	line-height: 1.4;
}

.xtchk-gateway-desc p {
	margin: 0;
}

/* ── Saved cards (sub-section inside Azul gateway) ─ */

.xtchk-saved-cards {
	margin-top: 10px;
	padding-left: 24px;
}

.xtchk-payment-none {
	color: #888;
	font-size: 13px;
}

/* ── Fiscal fields ───────────────────────────────── */

.xtchk-fiscal {
	margin-top: 24px;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
}

.xtchk-fiscal-toggle-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: #333;
	cursor: pointer;
}

.xtchk-fiscal-toggle-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
}

.xtchk-fiscal-fields {
	margin-top: 12px;
}

.xtchk-fiscal-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 768px) {
	.xtchk-fiscal-row {
		grid-template-columns: 1fr;
	}
}

.xtchk-fiscal-fields label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 4px;
	color: #555;
}

.xtchk-fiscal-fields input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 14px;
}

/* ── Notes ───────────────────────────────────────── */

.xtchk-notes {
	margin-top: 16px;
}

.xtchk-notes label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 6px;
	color: #555;
}

.xtchk-textarea {
	width: 100%;
	min-height: 70px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 14px;
	resize: vertical;
}

/* ── Pay button ──────────────────────────────────── */

.xtchk-submit {
	text-align: center;
}

.xtchk-btn-pay {
	display: inline-block;
	width: 100%;
	padding: 14px 20px;
	font-size: 16px;
	font-weight: 700;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s, opacity 0.2s;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.xtchk-btn-pay:disabled {
	background: #cccccc;
	color: #888;
	cursor: not-allowed;
}

.xtchk-btn-pay:not(:disabled) {
	background: #28a745;
	color: #fff;
}

.xtchk-btn-pay:not(:disabled):hover {
	background: #218838;
}

.xtchk-btn-hint {
	font-size: 13px;
	color: #999;
	margin-top: 8px;
}

/* ── Coupon ──────────────────────────────────────── */

.xtchk-coupon-toggle {
	margin-bottom: 20px;
}

.xtchk-coupon-row {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}

.xtchk-coupon-row input {
	flex: 1;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
}

.xtchk-coupon-row button {
	white-space: nowrap;
}

/* ── Coupon form (WC native) — compacto, alineado a la izquierda ── */

/* Estilos visuales del form. NO usamos `display: flex !important` global porque WC oculta
   el form via inline `style="display:none"` y el `!important` de CSS gana sobre el inline.
   Solo aplicamos `display: flex` cuando el form NO tiene style="display: none" ya sea con o sin espacio. */
.xtchk-checkout .checkout_coupon,
.xtchk-checkout .woocommerce-form-coupon {
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	max-width: 420px;
	margin: 0 0 20px 0 !important;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
}

.xtchk-checkout .checkout_coupon:not([style*="none"]),
.xtchk-checkout .woocommerce-form-coupon:not([style*="none"]) {
	display: flex;
}

.xtchk-checkout .checkout_coupon .form-row,
.xtchk-checkout .woocommerce-form-coupon .form-row {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto;
}

.xtchk-checkout .checkout_coupon .form-row-first,
.xtchk-checkout .woocommerce-form-coupon .form-row-first {
	flex: 1 1 200px;
	min-width: 0;
}

.xtchk-checkout .checkout_coupon input[name="coupon_code"],
.xtchk-checkout .woocommerce-form-coupon input[name="coupon_code"] {
	width: 100% !important;
	height: 42px;
	padding: 10px 14px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
	line-height: 1.2;
}

.xtchk-checkout .checkout_coupon button[name="apply_coupon"],
.xtchk-checkout .woocommerce-form-coupon button[name="apply_coupon"] {
	width: auto !important;
	height: 42px;
	padding: 0 18px !important;
	font-size: 14px !important;
	white-space: nowrap;
	border-radius: 6px !important;
	box-sizing: border-box;
	line-height: 1;
}

.xtchk-checkout .checkout_coupon .clear {
	display: none;
}

/* ── Hidden helpers ──────────────────────────────── */

.xtchk-hidden {
	display: none !important;
}

.xtchk-hidden-fields {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.xtchk-hidden-field {
	display: none !important;
}

/* ── Terms & Conditions ──────────────────────────── */

.xtchk-terms {
	padding: 0 4px;
}

.xtchk-terms label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	line-height: 1.4;
	color: #555;
	cursor: pointer;
}

.xtchk-terms input[type="checkbox"] {
	margin-top: 2px;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.xtchk-terms span {
	flex: 1;
}

.xtchk-terms a {
	color: #28a745;
}

/* ── Store pickup ───────────────────────────────── */

.xtchk-pickup-standalone {
	margin-top: 12px;
}

.xtchk-pickup-divider {
	color: #aaa;
	font-size: 13px;
	margin: 8px 0 !important;
}

.xtchk-btn-pickup {
	display: block;
	width: 100%;
	background: #fff !important;
	color: #28a745 !important;
	border: 2px solid #28a745 !important;
	border-radius: 6px !important;
	padding: 8px 16px !important;
	font-size: 13px !important;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	margin-top: 6px;
}

.xtchk-btn-pickup:hover {
	background: #28a745 !important;
	color: #fff !important;
}

/* Hide default WooCommerce elements we don't need */
.xtchk-checkout .woocommerce-billing-fields > h3,
.xtchk-checkout .woocommerce-shipping-fields > h3,
.xtchk-checkout .woocommerce-additional-fields__field-wrapper {
	display: none;
}

/* ── Mobile: reduce vertical whitespace ─────────── */

@media (max-width: 768px) {

	.xtchk-checkout {
		padding: 0 10px;
	}

	.xtchk-layout {
		gap: 14px;
	}

	.xtchk-sidebar {
		gap: 10px;
	}

	.xtchk-col {
		padding: 14px;
	}

	.xtchk-col h3 {
		margin: 0 0 8px;
		font-size: 15px;
	}

	.xtchk-order-summary h3 {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.xtchk-order-summary .woocommerce-checkout-review-order-table th,
	.xtchk-order-summary .woocommerce-checkout-review-order-table td {
		padding: 6px 8px;
	}

	.xtchk-fiscal {
		margin-top: 14px;
		padding: 12px 14px;
	}

	.xtchk-notes {
		margin-top: 10px;
	}

	.xtchk-notes label {
		margin-bottom: 4px;
	}

	.xtchk-textarea {
		min-height: 56px;
	}

	.xtchk-address-details,
	.xtchk-payment-details {
		margin-top: 8px;
		padding: 8px 10px;
	}

	.xtchk-gateway-item {
		padding: 7px 0;
	}

	.xtchk-gateway-details {
		margin-top: 5px;
	}

	.xtchk-saved-cards {
		margin-top: 6px;
	}

	.xtchk-address-actions,
	.xtchk-payment-actions {
		margin-top: 5px;
	}

	.xtchk-btn-pay {
		padding: 12px 16px;
		font-size: 15px;
	}

	.xtchk-btn-hint {
		margin-top: 5px;
		font-size: 12px;
	}

	.xtchk-terms label {
		font-size: 12px;
	}

	.xtchk-coupon-toggle {
		margin-bottom: 12px;
	}

	.xtchk-coupon-row {
		margin-bottom: 12px;
	}

	.xtchk-fiscal-fields {
		margin-top: 8px;
	}

	.xtchk-fiscal-row {
		gap: 8px;
	}

	/* WooCommerce review order table — tighter on mobile */
	.xtchk-order-summary .shop_table tbody td,
	.xtchk-order-summary .shop_table tfoot td,
	.xtchk-order-summary .shop_table tfoot th {
		padding: 6px 8px;
	}

	.xtchk-order-summary .shop_table .product-name {
		font-size: 13px;
	}

	.xtchk-order-summary #order_review {
		margin-bottom: 0;
	}

	/* Reduce spacing in WC shipping/totals sections */
	.xtchk-order-summary .woocommerce-shipping-totals td {
		padding-top: 4px;
		padding-bottom: 4px;
	}

	.xtchk-order-summary .woocommerce-shipping-totals ul {
		margin: 0;
	}

	.xtchk-order-summary .woocommerce-shipping-totals li {
		margin-bottom: 2px;
	}
}