/**
 * Petopia cart + checkout — Dana font and brand pink buttons.
 * Scoped to body.petopia-cart-checkout (cart / checkout).
 */

body.petopia-cart-checkout {
	--pc-pink: #ff3b81;
	--pc-pink-hover: #e63574;
	--pc-font: dana, Tahoma, sans-serif;
}

/* Force Dana over Elementor / WoodMart / widget inline fonts in page content */
body.petopia-cart-checkout .main-page-wrapper,
body.petopia-cart-checkout .main-page-wrapper *:not(i):not(svg):not(path):not(.wd-icon):not([class*="fa-"]),
body.petopia-cart-checkout .wd-page-content,
body.petopia-cart-checkout .wd-page-content *:not(i):not(svg):not(path):not(.wd-icon):not([class*="fa-"]),
body.petopia-cart-checkout .content-layout-wrapper,
body.petopia-cart-checkout .content-layout-wrapper *:not(i):not(svg):not(path):not(.wd-icon):not([class*="fa-"]),
body.petopia-cart-checkout .elementor,
body.petopia-cart-checkout .elementor *:not(i):not(svg):not(path):not(.wd-icon):not([class*="fa-"]),
body.petopia-cart-checkout .woocommerce,
body.petopia-cart-checkout .woocommerce *:not(i):not(svg):not(path):not(.wd-icon):not([class*="fa-"]),
body.petopia-cart-checkout .premium-steps-wrapper,
body.petopia-cart-checkout .premium-steps-wrapper * {
	font-family: var(--pc-font) !important;
}

/*
 * Primary cart/checkout CTAs only — do not target header search,
 * .whb-header, or global .button / submit controls.
 */
body.petopia-cart-checkout .woocommerce .coupon .button,
body.petopia-cart-checkout .woocommerce .checkout-button,
body.petopia-cart-checkout .woocommerce .wc-proceed-to-checkout .button,
body.petopia-cart-checkout .woocommerce #place_order,
body.petopia-cart-checkout .woocommerce .woocommerce-checkout-payment #place_order,
body.petopia-cart-checkout .e-cart__container .button,
body.petopia-cart-checkout .e-cart__container .checkout-button,
body.petopia-cart-checkout .e-checkout__container #place_order,
body.petopia-cart-checkout .wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
body.petopia-cart-checkout .wc-block-cart__submit-button,
body.petopia-cart-checkout .wc-block-components-checkout-place-order-button {
	background-color: var(--pc-pink) !important;
	border-color: var(--pc-pink) !important;
	color: #fff !important;
}

body.petopia-cart-checkout .woocommerce .coupon .button:hover,
body.petopia-cart-checkout .woocommerce .checkout-button:hover,
body.petopia-cart-checkout .woocommerce .wc-proceed-to-checkout .button:hover,
body.petopia-cart-checkout .woocommerce #place_order:hover,
body.petopia-cart-checkout .e-cart__container .button:hover,
body.petopia-cart-checkout .e-cart__container .checkout-button:hover,
body.petopia-cart-checkout .e-checkout__container #place_order:hover,
body.petopia-cart-checkout .wc-block-cart__submit-button:hover,
body.petopia-cart-checkout .wc-block-components-checkout-place-order-button:hover {
	background-color: var(--pc-pink-hover) !important;
	border-color: var(--pc-pink-hover) !important;
	color: #fff !important;
}

/* Shetab card-to-card upload / copy — scoped to payment box */
body.petopia-cart-checkout .payment_method_shetab #receipt-upload-btn,
body.petopia-cart-checkout .payment_box #receipt-upload-btn,
body.petopia-cart-checkout .shetab-uploader #receipt-upload-btn,
body.petopia-cart-checkout .shetab-uploader .btn,
body.petopia-cart-checkout .shetab-uploader .btn-primary,
body.petopia-cart-checkout .shetab-uploader .upload-btn,
body.petopia-cart-checkout .payment_box .shetab-copy-btn,
body.petopia-cart-checkout .payment_method_shetab .shetab-copy-btn {
	background: var(--pc-pink) !important;
	background-color: var(--pc-pink) !important;
	border-color: var(--pc-pink) !important;
	color: #fff !important;
}

body.petopia-cart-checkout .payment_method_shetab #receipt-upload-btn:hover,
body.petopia-cart-checkout .shetab-uploader #receipt-upload-btn:hover,
body.petopia-cart-checkout .shetab-uploader .btn:hover,
body.petopia-cart-checkout .shetab-uploader .upload-btn:hover,
body.petopia-cart-checkout .payment_box .shetab-copy-btn:hover,
body.petopia-cart-checkout .payment_method_shetab .shetab-copy-btn:hover {
	background: var(--pc-pink-hover) !important;
	background-color: var(--pc-pink-hover) !important;
	border-color: var(--pc-pink-hover) !important;
	color: #fff !important;
}

/* Keep Woodmart icon-font glyphs on remove (×) controls after Dana override */
body.petopia-cart-checkout td.product-remove a:before,
body.petopia-cart-checkout .woocommerce-remove-coupon:before,
body.petopia-cart-checkout .wd-checkout-remove-btn:after {
	font-family: "woodmart-font" !important;
}

body.petopia-cart-checkout td.product-remove a,
body.petopia-cart-checkout .wd-checkout-remove-btn {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	cursor: pointer;
}

/*
 * Checkout columns (desktop)
 *
 * Woodmart uses flex + max-width:50% + column-gap on form.woocommerce-checkout.
 * 50% + 50% + gap overflows the row, so one column wraps and the desktop
 * layout collapses (empty billing card + orphan totals). Mobile already
 * stacks correctly — fix desktop with a real 2-column grid instead of
 * direction/row-reverse hacks.
 */
@media (min-width: 1025px) {
	/* Elementor Pro checkout widget */
	body.petopia-cart-checkout .elementor-widget-woocommerce-checkout-page form.woocommerce-checkout {
		display: block;
	}

	body.petopia-cart-checkout .elementor-widget-woocommerce-checkout-page .e-checkout__container {
		align-items: start;
		grid-template-columns: minmax(0, 1fr) minmax(280px, 38%);
		grid-column-gap: clamp(16px, 2.5vw, 30px);
	}

	body.petopia-cart-checkout .elementor-widget-woocommerce-checkout-page .e-checkout__column {
		min-width: 0;
	}

	body.petopia-cart-checkout .elementor-widget-woocommerce-checkout-page .e-checkout__column-end .e-sticky-right-column {
		width: 100%;
	}

	/* Woodmart predefined checkout (no Elementor columns) */
	body.petopia-cart-checkout form.woocommerce-checkout:not(:has(.e-checkout__container)) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(280px, 40%);
		column-gap: clamp(16px, 2.5vw, 30px);
		row-gap: 24px;
		align-items: start;
	}

	body.petopia-cart-checkout form.woocommerce-checkout:not(:has(.e-checkout__container)) > .customer-details,
	body.petopia-cart-checkout form.woocommerce-checkout:not(:has(.e-checkout__container)) > .checkout-order-review {
		flex: none;
		width: auto;
		max-width: none;
		min-width: 0;
	}

	body.petopia-cart-checkout form.woocommerce-checkout:not(:has(.e-checkout__container)) > *:not(.customer-details):not(.checkout-order-review) {
		grid-column: 1 / -1;
	}
}

/* Keep order-summary row labels visible (Woodmart turns this table into flex). */
body.petopia-cart-checkout .woocommerce-checkout-review-order-table tfoot th,
body.petopia-cart-checkout .woocommerce-checkout-review-order-table thead th {
	flex: 1 1 auto;
	min-width: 0;
}

body.petopia-cart-checkout .woocommerce-checkout-review-order-table tfoot td,
body.petopia-cart-checkout .woocommerce-checkout-review-order-table .cart_item .product-total {
	flex: 0 1 auto;
	white-space: nowrap;
}

/*
 * Cart columns — Woodmart uses flex: 1 0 0 (no shrink), so a wide
 * table can paint over the totals card. Force a contained grid.
 */
body.petopia-cart-checkout .cart-content-wrapper {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
	column-gap: clamp(20px, 3vw, 36px);
	row-gap: 24px;
	align-items: start;
	direction: ltr; /* products left, totals right */
}

body.petopia-cart-checkout .cart-content-wrapper > * {
	direction: rtl;
	min-width: 0;
	max-width: 100%;
	flex: none !important; /* kill Woodmart flex: 1 0 0 / .7 0 0 */
}

body.petopia-cart-checkout .cart-content-wrapper > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

body.petopia-cart-checkout .cart-content-wrapper > .woocommerce-cart-form {
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
}

body.petopia-cart-checkout .cart-content-wrapper > .cart_totals {
	position: relative;
	z-index: 2;
	isolation: isolate;
}

body.petopia-cart-checkout .cart-content-wrapper > .cart_totals .cart-totals-inner {
	background: #fff;
	box-sizing: border-box;
	width: 100%;
}

/* Elementor Pro cart widget — same containment */
body.rtl.petopia-cart-checkout .elementor-widget-woocommerce-cart .e-cart__container,
body.petopia-cart-checkout.rtl .elementor-widget-woocommerce-cart .e-cart__container {
	direction: ltr;
	align-items: start;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
	grid-column-gap: clamp(20px, 3vw, 36px);
	grid-row-gap: 24px;
}

body.rtl.petopia-cart-checkout .elementor-widget-woocommerce-cart .e-cart__column,
body.petopia-cart-checkout.rtl .elementor-widget-woocommerce-cart .e-cart__column {
	direction: rtl;
	min-width: 0;
	max-width: 100%;
}

body.petopia-cart-checkout .elementor-widget-woocommerce-cart .e-cart__column-start {
	overflow-x: auto;
}

body.petopia-cart-checkout .elementor-widget-woocommerce-cart .e-cart__column-end {
	position: relative;
	z-index: 2;
}

body.petopia-cart-checkout .elementor-widget-woocommerce-cart .e-cart__column-end .e-sticky-right-column,
body.petopia-cart-checkout .e-cart__column-end .cart_totals,
body.petopia-cart-checkout .e-cart__column-end .e-cart__column-inner {
	width: 100%;
	max-width: 100%;
	background: #fff;
}

/*
 * Woodmart Elementor cart layout (wd_cart_table + wd_cart_totals).
 * Do NOT use table-layout:fixed here — it scrambles RTL column widths
 * and stacks headers like محصول / قیمت vertically.
 */
body.petopia-cart-checkout .elementor-widget-wd_cart_table,
body.petopia-cart-checkout .wd-cart-table,
body.petopia-cart-checkout .elementor-widget-wd_cart_totals,
body.petopia-cart-checkout .wd-cart-totals {
	min-width: 0;
	max-width: 100%;
}

body.petopia-cart-checkout .elementor-widget-wd_cart_table .woocommerce-cart-form,
body.petopia-cart-checkout .wd-cart-table .woocommerce-cart-form {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

body.petopia-cart-checkout .elementor-widget-wd_cart_totals .cart-totals-inner,
body.petopia-cart-checkout .wd-cart-totals .cart-totals-inner {
	background: #fff;
	box-sizing: border-box;
	width: 100%;
}

/* Cart table: Woodmart defaults + light nowrap on money/qty only */
body.petopia-cart-checkout .woocommerce-cart-form table.shop_table.cart {
	table-layout: auto;
	width: 100%;
	min-width: 560px;
}

body.petopia-cart-checkout .woocommerce-cart-form table.shop_table.cart th,
body.petopia-cart-checkout .woocommerce-cart-form table.shop_table.cart td {
	width: auto;
	max-width: none;
	word-break: normal;
	overflow-wrap: normal;
	vertical-align: middle;
	box-sizing: border-box;
}

body.petopia-cart-checkout .woocommerce-cart-form table.shop_table.cart .product-name {
	white-space: normal;
	overflow-wrap: break-word;
	word-wrap: break-word;
	min-width: 10rem;
}

body.petopia-cart-checkout .woocommerce-cart-form table.shop_table.cart .product-price,
body.petopia-cart-checkout .woocommerce-cart-form table.shop_table.cart .product-quantity,
body.petopia-cart-checkout .woocommerce-cart-form table.shop_table.cart .product-subtotal {
	white-space: nowrap;
}

@media (max-width: 1024px) {
	body.petopia-cart-checkout .elementor-widget-woocommerce-checkout-page .e-checkout__container,
	body.rtl.petopia-cart-checkout .elementor-widget-woocommerce-cart .e-cart__container,
	body.petopia-cart-checkout.rtl .elementor-widget-woocommerce-cart .e-cart__container {
		grid-template-columns: 1fr;
		grid-row-gap: 24px;
	}

	body.rtl.petopia-cart-checkout .elementor-widget-woocommerce-cart .e-cart__container,
	body.petopia-cart-checkout.rtl .elementor-widget-woocommerce-cart .e-cart__container {
		direction: rtl;
	}

	body.petopia-cart-checkout .cart-content-wrapper {
		direction: rtl;
		grid-template-columns: 1fr;
	}

	body.petopia-cart-checkout .elementor-widget-woocommerce-checkout-page .e-checkout__column-start,
	body.petopia-cart-checkout .elementor-widget-woocommerce-cart .e-cart__column-start,
	body.petopia-cart-checkout .cart-content-wrapper > .woocommerce-cart-form {
		order: 1;
	}

	body.petopia-cart-checkout .elementor-widget-woocommerce-checkout-page .e-checkout__column-end,
	body.petopia-cart-checkout .elementor-widget-woocommerce-cart .e-cart__column-end,
	body.petopia-cart-checkout .cart-content-wrapper > .cart_totals {
		order: 2;
	}

	/* Sticky totals card overlaps cart / billing on tablet+mobile */
	body.petopia-cart-checkout .e-sticky-right-column,
	body.petopia-cart-checkout .e-sticky-right-column--active {
		position: static !important;
		top: auto !important;
	}

	body.petopia-cart-checkout form.woocommerce-checkout:not(:has(.e-checkout__container)) {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
	}

	body.petopia-cart-checkout form.woocommerce-checkout:not(:has(.e-checkout__container)) > .customer-details,
	body.petopia-cart-checkout form.woocommerce-checkout:not(:has(.e-checkout__container)) > .checkout-order-review {
		flex: 1 1 100%;
		flex-basis: 100%;
		max-width: 100%;
		width: 100%;
	}

	body.petopia-cart-checkout form.woocommerce-checkout:not(:has(.e-checkout__container)) > *:not(.customer-details):not(.checkout-order-review) {
		grid-column: auto;
	}

	body.petopia-cart-checkout .woocommerce-cart-form table.shop_table.cart {
		min-width: 0;
	}
}

@media (max-width: 767px) {
	body.petopia-cart-checkout .elementor-widget-woocommerce-checkout-page .e-checkout__container,
	body.petopia-cart-checkout .elementor-widget-woocommerce-cart .e-cart__container {
		grid-column-gap: 0;
		grid-row-gap: 20px;
	}

	body.petopia-cart-checkout .checkout-order-review,
	body.petopia-cart-checkout .e-checkout__column-end .e-checkout__order_review,
	body.petopia-cart-checkout .e-checkout__column-end .woocommerce-checkout-review-order,
	body.petopia-cart-checkout .e-cart__column-end .cart_totals,
	body.petopia-cart-checkout .cart-content-wrapper > .cart_totals {
		padding-inline: 0;
	}
}

