/**
 * Shopping cart (issue #909).
 *
 * Listing card action rows: equal heights with the icon and text
 * vertically centered so the heart, Order Now and cart buttons line
 * up; Order Now + cart form one attached pair.
 */
.cart-actions .btn {
	height: 32px;
	padding: 0 0.6rem !important;
	font-size: 0.75rem !important;
	line-height: 30px !important;
	vertical-align: middle;
}
.cart-buy-group { display: inline-flex; align-items: center; vertical-align: middle; }
.cart-buy-group > .btn {
	margin: 0 !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.cart-buy-group .cart-add-btn {
	margin: 0 !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}
.cart-buy-group .cart-add-btn.btn-success { border-left: 1px solid rgba(255, 255, 255, 0.45) !important; }

/* Header cart tooltip must sit above the sticky header (z 9000/9010) */
.cart-header-tooltip { z-index: 9020; }

/* Quantity stepper on the cart page; plain elements because the theme's
   pill button styling breaks .btn-group attachment */
.cart-stepper { display: inline-flex; align-items: center; vertical-align: middle; }
.cart-stepper button,
.cart-stepper .cart-step-qty {
	height: 26px;
	min-width: 26px;
	padding: 0 7px;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--success-color, #43d9a3);
	background: transparent;
	color: var(--success-color, #43d9a3);
	font-size: 13px;
	line-height: 1;
}
.cart-stepper button { cursor: pointer; }
.cart-stepper button:focus { outline: none; }
.cart-stepper button:first-child { border-radius: 4px 0 0 4px; border-right: 0; }
.cart-stepper button:last-child { border-radius: 0 4px 4px 0; border-left: 0; }
.cart-stepper .cart-step-qty { font-weight: bold; }

/* Cart page lines */
.cart-line:last-child { border-bottom: 0 !important; }

/* Phones: stack each cart line so addons and controls get the full width.
 * The controls column becomes one flex row - line total on the left,
 * quantity stepper and remove on the right of it - with the coupon
 * centred underneath. */
@media (max-width: 575.98px) {
	.cart-line { flex-wrap: wrap; }
	.cart-line > .media-body { flex: 1 1 100%; padding-right: 0 !important; }
	.cart-line > .media-body .custom-control-label { white-space: nowrap; }
	.cart-line > .text-right {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-top: 0.5rem;
		text-align: left !important;
	}
	.cart-line > .text-right > .text-bold { margin-bottom: 0 !important; }
	.cart-line > .text-right > .d-flex { margin-left: auto; justify-content: flex-end !important; }
	.cart-line > .text-right > .position-relative {
		flex: 1 1 100%;
		margin: 0.75rem auto 0 !important;
	}
}

/* NOWPayments brand button (primary #64ACFF) */
.btn-nowpayments-brand {
	color: #fff !important;
	background-color: #64acff !important;
	border-color: #64acff !important;
	font-weight: 600;
}
.btn-nowpayments-brand:hover,
.btn-nowpayments-brand:focus {
	color: #fff !important;
	background-color: #4e9bf2 !important;
	border-color: #4e9bf2 !important;
}
.cart-gateway-icon {
	height: 18px;
	width: 18px;
	border-radius: 4px;
	vertical-align: -4px;
	margin-right: 4px;
}

/* The stepper's middle is a real input so a number can be typed. It
 * inherits the green border and colour from .cart-stepper .cart-step-qty
 * above - overriding those was what made the order page's copy look
 * different - and only its width is managed here, growing with digits. */
.cart-stepper .qty-stepper-input {
	/*
	 * Same border-box and height as the buttons beside it - the
	 * content-box experiment left it standing taller. The scripts
	 * size the width to the digit count plus room for the padding.
	 */
	width: 4ch;
	min-width: 26px;
	max-width: 7ch;
	text-align: center;
}
.cart-stepper .qty-stepper-input:focus { outline: none; }

/* Classes for what used to be inline styles on the cart page - all CSS
 * lives here, none in the markup. 2026-09-02 JD */
.cart-empty-icon { font-size: 48px; }
.cart-line-ineligible { opacity: 0.5; }
.cart-controls-col { min-width: 170px; }
.cart-coupon-wrap { width: 170px; }
.cart-coupon-wrap .form-control { padding-right: 30px; }
.cart-coupon-wrap .cartpg-coupon {
	position: absolute;
	right: 10px;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* Cart addon rows (issue #909/#908 polish): 13px normal-weight labels
 * on one line - long names ellipsize (tooltip carries the full name) -
 * checkbox centred, the days note in light text underneath, and a
 * light divider under each row. The doubled class in the selectors
 * outguns the theme's .custom-checkbox .custom-control-label, which
 * loads later and won a specificity tie. */
.cart-line .custom-checkbox .custom-control-label.cart-addon-label {
	display: flex;
	align-items: center;
	max-width: 100%;
	font-size: 13px;
	font-weight: 400;
}
.cart-line .cart-addon-label .cart-addon-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cart-line .cart-addon-label .cart-addon-price {
	margin-left: 5px;
	white-space: nowrap;
}
.cart-line .custom-checkbox .custom-control-label.cart-addon-label::before,
.cart-line .custom-checkbox .custom-control-label.cart-addon-label::after {
	top: 50%;
	transform: translateY(-50%);
}
.cart-line .cart-addon-row {
	padding: 4px 0 6px;
	border-bottom: 1px solid var(--primary-border-color);
}
.cart-line .cart-addon-row:last-child {
	border-bottom: 0;
}
.cart-line .cart-addon-days {
	font-size: 11px;
	line-height: 1.3;
	margin-top: 1px;
}