/* Dental Express — Cart page redesign (woocommerce/cart, default template) */

:root {
	--dx-cart-blue: #005596;
	--dx-cart-blue-dark: #003b71;
	--dx-cart-red: #d71920;
	--dx-cart-green: #0f8a43;
	--dx-cart-border: #d9e4ef;
	--dx-cart-border-soft: #e6eef6;
	--dx-cart-text: #102a43;
	--dx-cart-muted: #64748b;
	--dx-cart-bg: #f8fbfe;
}

/* ---- Step breadcrumb (سبد خرید / جزئیات پرداخت / اتمام عملیات خرید) ----
   Flatsome renders this inside `.checkout-page-title`, a semi-transparent
   teal overlay meant to sit on a banner image — with no image set it just
   shows as a flat teal box, disconnected from the rest of the redesign. */
body.woocommerce-cart .checkout-page-title,
body.woocommerce-cart #main .checkout-page-title,
body.woocommerce-cart #main .page-title {
	background: var(--dx-cart-bg) !important;
	background-image: none !important;
	background-color: var(--dx-cart-bg) !important;
	border-bottom: 1px solid var(--dx-cart-border-soft);
	padding: 22px 0 !important;
}

body.woocommerce-cart .checkout-page-title .title-bg,
body.woocommerce-cart .checkout-page-title .title-overlay {
	display: none !important;
}

/* Same white-pill-with-blue-accent language as the shop page breadcrumb
   (dx-hs-breadcrumb), so the two feel like one design system. */
body.woocommerce-cart .checkout-breadcrumbs {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin: 0 auto !important;
	background: #fff;
	border: 1px solid var(--dx-cart-border);
	border-right: 3px solid var(--dx-cart-blue);
	border-radius: 10px;
	box-shadow: 0 8px 20px rgba(16, 42, 67, .06);
	padding: 12px 22px !important;
}

body.woocommerce-cart .checkout-breadcrumbs a {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	color: var(--dx-cart-muted) !important;
	font-size: 12.4px !important;
	font-weight: 850 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
}

body.woocommerce-cart .checkout-breadcrumbs a.current {
	color: var(--dx-cart-blue-dark) !important;
	font-weight: 950 !important;
}

body.woocommerce-cart .checkout-breadcrumbs .breadcrumb-step {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	border-radius: 50% !important;
	background: #eef3f8 !important;
	color: var(--dx-cart-muted) !important;
	font-size: 11.5px !important;
	font-weight: 950 !important;
	line-height: 1 !important;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

body.woocommerce-cart .checkout-breadcrumbs a.current .breadcrumb-step {
	background: linear-gradient(180deg, var(--dx-cart-blue) 0%, var(--dx-cart-blue-dark) 100%) !important;
	color: #fff !important;
	box-shadow: 0 6px 14px rgba(0, 85, 150, .3);
}

body.woocommerce-cart .checkout-breadcrumbs .divider {
	margin: 0 16px;
	color: #cbd5e1 !important;
}

@media only screen and (max-width: 849px) {
	body.woocommerce-cart .checkout-page-title {
		padding: 16px 0 !important;
	}

	body.woocommerce-cart .checkout-breadcrumbs {
		max-width: calc(100% - 32px);
		padding: 10px 14px !important;
	}

	body.woocommerce-cart .checkout-breadcrumbs .divider {
		margin: 0 8px;
	}
}

body.woocommerce-cart .woocommerce {
	direction: rtl;
}

/* ---- Cart table shell ---- */
body.woocommerce-cart table.shop_table {
	background: #fff;
	border: 1px solid var(--dx-cart-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(16, 42, 67, .05);
	border-collapse: separate;
	border-spacing: 0;
}

body.woocommerce-cart table.shop_table thead th {
	background: var(--dx-cart-bg);
	border-bottom: 1px solid var(--dx-cart-border);
	color: var(--dx-cart-blue-dark);
	font-size: 12.5px;
	font-weight: 950;
	padding: 14px 12px;
}

body.woocommerce-cart table.shop_table tr.cart_item {
	transition: background .15s ease;
}

body.woocommerce-cart table.shop_table tr.cart_item:hover {
	background: var(--dx-cart-bg);
}

body.woocommerce-cart table.shop_table tr.cart_item td {
	border-bottom: 1px solid var(--dx-cart-border-soft);
	padding: 14px 12px;
	vertical-align: middle;
}

body.woocommerce-cart table.shop_table tr.cart_item:last-child td {
	border-bottom: 0;
}

/* ---- Remove (×) button ----
   Flatsome ships its own `a.remove { position: absolute; left: -26px; }`
   which fights our layout (and gets clipped by the table's overflow:hidden
   on narrow screens) — reset positioning before applying our own button. */
body.woocommerce-cart .product-remove a.remove {
	position: static !important;
	inset: auto !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: #fff1f0 !important;
	border: 1px solid #ffc7c9;
	border-radius: 50%;
	color: var(--dx-cart-red) !important;
	font-size: 15px;
	line-height: 1 !important;
	transition: background .16s ease, color .16s ease, transform .16s ease;
}

body.woocommerce-cart .product-remove a.remove:hover {
	background: var(--dx-cart-red) !important;
	color: #fff !important;
	transform: scale(1.08) rotate(90deg);
}

/* ---- Thumbnail ---- */
body.woocommerce-cart .product-thumbnail img {
	width: 68px;
	height: 68px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--dx-cart-border);
	border-radius: 9px;
	padding: 6px;
}

/* ---- Product name / price ---- */
body.woocommerce-cart .product-name a {
	color: var(--dx-cart-blue-dark);
	font-size: 13px;
	font-weight: 900;
	line-height: 1.7;
	text-decoration: none;
}

body.woocommerce-cart .product-name a:hover {
	color: var(--dx-cart-red);
}

body.woocommerce-cart .product-price .amount,
body.woocommerce-cart .product-subtotal .amount {
	color: var(--dx-cart-text);
	font-weight: 950;
}

body.woocommerce-cart .product-subtotal .amount {
	color: var(--dx-cart-blue-dark);
}

/* ---- Quantity stepper: one seamless pill instead of 3 separate flat
   grey squares (Flatsome's own `.buttons_added` default look) ---- */
body.woocommerce-cart .quantity.buttons_added {
	display: inline-flex !important;
	align-items: stretch !important;
	border: 1px solid var(--dx-cart-border) !important;
	border-radius: 8px !important;
	overflow: hidden;
	background: #fff !important;
}

body.woocommerce-cart .quantity.buttons_added .minus,
body.woocommerce-cart .quantity.buttons_added .plus {
	flex: 0 0 32px !important;
	width: 32px !important;
	height: 38px !important;
	min-height: 38px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--dx-cart-bg) !important;
	color: var(--dx-cart-blue-dark) !important;
	font-size: 16px !important;
	font-weight: 950 !important;
	line-height: 1 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background .16s ease, color .16s ease;
}

body.woocommerce-cart .quantity.buttons_added .minus:hover,
body.woocommerce-cart .quantity.buttons_added .plus:hover {
	background: var(--dx-cart-blue) !important;
	color: #fff !important;
}

body.woocommerce-cart .quantity .qty,
body.woocommerce-cart div.quantity input.qty {
	width: 42px !important;
	height: 38px !important;
	min-height: 38px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-right: 1px solid var(--dx-cart-border) !important;
	border-left: 1px solid var(--dx-cart-border) !important;
	border-radius: 0 !important;
	background: #fff !important;
	color: var(--dx-cart-blue-dark) !important;
	font-weight: 950;
	text-align: center;
	box-shadow: none !important;
	transition: background .16s ease;
}

body.woocommerce-cart .quantity .qty:focus {
	background: var(--dx-cart-bg) !important;
	outline: none;
}

/* ---- Actions row: coupon + update cart ---- */
body.woocommerce-cart .actions {
	padding: 16px 14px !important;
	background: var(--dx-cart-bg);
}

body.woocommerce-cart .coupon {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

body.woocommerce-cart .coupon .input-text#coupon_code {
	height: 42px;
	min-width: 190px;
	border: 1px solid var(--dx-cart-border);
	border-radius: 8px;
	padding: 0 12px;
	font-size: 12.5px;
	transition: border-color .16s ease, box-shadow .16s ease;
}

body.woocommerce-cart .coupon .input-text#coupon_code:focus {
	border-color: var(--dx-cart-blue);
	box-shadow: 0 0 0 4px rgba(0, 85, 150, .14);
	outline: none;
}

body.woocommerce-cart .coupon button[name="apply_coupon"],
body.woocommerce-cart button[name="update_cart"] {
	height: 42px;
	background: linear-gradient(180deg, var(--dx-cart-blue) 0%, var(--dx-cart-blue-dark) 100%) !important;
	border: 0 !important;
	border-bottom: 2px solid var(--dx-cart-red) !important;
	border-radius: 8px !important;
	color: #fff !important;
	font-size: 12.4px !important;
	font-weight: 950 !important;
	padding: 0 18px !important;
	transition: transform .16s ease, box-shadow .16s ease;
}

body.woocommerce-cart .coupon button[name="apply_coupon"]:hover,
body.woocommerce-cart button[name="update_cart"]:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 20px rgba(0, 85, 150, .22);
}

body.woocommerce-cart button[name="update_cart"] {
	background: #fff !important;
	border: 1px solid var(--dx-cart-border) !important;
	border-bottom: 2px solid var(--dx-cart-border) !important;
	color: var(--dx-cart-blue-dark) !important;
}

body.woocommerce-cart button[name="update_cart"]:hover {
	border-color: var(--dx-cart-blue) !important;
	color: var(--dx-cart-blue) !important;
	box-shadow: none;
}

/* ---- Totals sidebar ----
   Flatsome already ships a `.is-sticky-column` wrapper around this sidebar
   (for its UX-builder "sticky content" option) but it sits inert at
   position:static on the default cart template. Activating it here means
   the totals card + checkout button stay in view while a long product list
   scrolls, instead of disappearing off the top of the page. */
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .cart-sidebar,
body.woocommerce-cart .is-sticky-column,
body.woocommerce-cart .is-sticky-column__inner,
body.woocommerce-cart .woocommerce.row.row-divided {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}

body.woocommerce-cart .cart-collaterals {
	margin-top: 26px;
}

body.woocommerce-cart .is-sticky-column {
	position: sticky !important;
	top: 20px !important;
	align-self: flex-start;
}

@media only screen and (max-width: 849px) {
	body.woocommerce-cart .is-sticky-column {
		position: static !important;
	}
}

body.woocommerce-cart .cart_totals {
	background: #fff;
	border: 1px solid var(--dx-cart-border);
	border-top: 4px solid var(--dx-cart-blue);
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(16, 42, 67, .07);
	padding: 22px 20px;
}

body.woocommerce-cart .cart_totals h2 {
	margin: 0 0 14px;
	color: var(--dx-cart-blue-dark);
	font-size: 15px;
	font-weight: 950;
}

body.woocommerce-cart .cart_totals table {
	border: 0;
}

body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
	border-bottom: 1px solid var(--dx-cart-border-soft);
	padding: 10px 0;
	font-size: 12.6px;
}

body.woocommerce-cart .cart_totals table th {
	color: var(--dx-cart-muted);
	font-weight: 850;
}

body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td {
	border-bottom: 0;
	padding-top: 14px;
}

body.woocommerce-cart .cart_totals .order-total .amount {
	color: var(--dx-cart-red);
	font-size: 17px;
	font-weight: 950;
}

body.woocommerce-cart .wc-proceed-to-checkout {
	margin-top: 16px;
}

body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	background: linear-gradient(180deg, var(--dx-cart-blue) 0%, var(--dx-cart-blue-dark) 100%) !important;
	border: 0 !important;
	border-bottom: 3px solid var(--dx-cart-red) !important;
	border-radius: 9px !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 950 !important;
	box-shadow: 0 10px 22px rgba(0, 85, 150, .26) !important;
	transition: transform .16s ease, box-shadow .16s ease;
}

body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px rgba(0, 85, 150, .34) !important;
}

/* ---- Empty cart ---- */
body.woocommerce-cart .cart-empty {
	background: #fff;
	border: 1px solid var(--dx-cart-border);
	border-right: 4px solid var(--dx-cart-blue);
	border-radius: 10px;
	padding: 18px 16px;
	color: var(--dx-cart-text);
	font-weight: 800;
}

body.woocommerce-cart .wc-empty-cart-message + p a.button,
body.woocommerce-cart .return-to-shop .button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin-top: 14px;
	min-height: 46px;
	padding: 0 22px !important;
	background: linear-gradient(180deg, var(--dx-cart-blue) 0%, var(--dx-cart-blue-dark) 100%) !important;
	border: 0 !important;
	border-bottom: 3px solid var(--dx-cart-red) !important;
	border-radius: 9px !important;
	color: #fff !important;
	font-weight: 950 !important;
}

/* ---- Responsive: each row becomes its own card ---- */
@media only screen and (max-width: 849px) {
	body.woocommerce-cart table.shop_table {
		border-radius: 12px;
	}

	body.woocommerce-cart table.shop_table thead {
		display: none;
	}

	body.woocommerce-cart table.shop_table,
	body.woocommerce-cart table.shop_table tbody,
	body.woocommerce-cart table.shop_table tr.cart_item {
		display: block;
		width: 100%;
	}

	body.woocommerce-cart table.shop_table tr.cart_item {
		position: relative;
		padding: 16px 14px 14px 44px;
		border-bottom: 8px solid var(--dx-cart-bg);
	}

	body.woocommerce-cart table.shop_table tr.cart_item:last-child {
		border-bottom: 0;
	}

	body.woocommerce-cart table.shop_table tr.cart_item td {
		display: block;
		width: auto;
		border: 0 !important;
		padding: 0;
	}

	/* Remove (×) pinned to the top corner of the card */
	body.woocommerce-cart table.shop_table tr.cart_item td.product-remove {
		position: absolute;
		top: 14px;
		left: 12px;
	}

	/* Thumbnail floats beside the product name to form a header row */
	body.woocommerce-cart table.shop_table tr.cart_item td.product-thumbnail {
		float: right;
		width: 58px;
		margin-left: 12px;
		padding-bottom: 10px;
	}

	body.woocommerce-cart table.shop_table tr.cart_item td.product-thumbnail img {
		width: 58px;
		height: 58px;
	}

	body.woocommerce-cart table.shop_table tr.cart_item td.product-name {
		padding: 3px 0 10px;
	}

	body.woocommerce-cart table.shop_table tr.cart_item td.product-name a {
		font-size: 12.6px;
		line-height: 1.6;
	}

	/* Price / quantity / subtotal become clean label ↔ value rows, using
	   WooCommerce's own data-title attribute for the Persian label. */
	body.woocommerce-cart table.shop_table tr.cart_item td.product-price,
	body.woocommerce-cart table.shop_table tr.cart_item td.product-quantity,
	body.woocommerce-cart table.shop_table tr.cart_item td.product-subtotal {
		clear: both;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 9px 0;
		border-top: 1px dashed var(--dx-cart-border-soft) !important;
		font-size: 12.5px;
	}

	body.woocommerce-cart table.shop_table tr.cart_item td.product-price::before,
	body.woocommerce-cart table.shop_table tr.cart_item td.product-quantity::before,
	body.woocommerce-cart table.shop_table tr.cart_item td.product-subtotal::before {
		content: attr(data-title);
		flex: 0 0 auto;
		color: var(--dx-cart-muted);
		font-size: 11.5px;
		font-weight: 850;
	}

	body.woocommerce-cart table.shop_table tr.cart_item td.product-subtotal {
		border-top-style: solid !important;
		border-top-color: var(--dx-cart-border-soft) !important;
	}

	body.woocommerce-cart table.shop_table tr.cart_item td.product-subtotal .amount {
		font-size: 13.5px;
	}

	body.woocommerce-cart .quantity.buttons_added .minus,
	body.woocommerce-cart .quantity.buttons_added .plus {
		flex: 0 0 34px !important;
		width: 34px !important;
		height: 36px !important;
		min-height: 36px !important;
		font-size: 17px !important;
	}

	body.woocommerce-cart .quantity .qty,
	body.woocommerce-cart div.quantity input.qty {
		width: 46px !important;
		height: 36px !important;
		min-height: 36px !important;
	}

	body.woocommerce-cart .actions {
		flex-direction: column;
		align-items: stretch;
	}

	body.woocommerce-cart .coupon {
		width: 100%;
	}

	body.woocommerce-cart .coupon .input-text#coupon_code {
		flex: 1 1 auto;
	}

	body.woocommerce-cart .cart_totals {
		padding: 18px 16px;
	}
}