/**
 * LatePoint Cart Icon In Heading
 *
 * Styles our injected cart trigger to match LatePoint's native heading icons
 * (.latepoint-lightbox-summary-trigger / .latepoint-lightbox-close). The heading
 * is a flexbox; .os-heading-text has margin-right:auto, so order:1 places our
 * icon on the right, just before the close button (order:2).
 */
.latepoint-w .latepoint-heading-w .lp-cart-icon-trigger {
	display: block;
	order: 1;
	position: relative;
	z-index: 2;
	padding: 5px;
	margin-left: 10px;
	font-size: 20px;
	line-height: 18px;
	color: #1e222b;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
}

.latepoint-w .latepoint-heading-w .lp-cart-icon-trigger:hover {
	opacity: 0.7;
}

.latepoint-w .latepoint-heading-w .lp-cart-icon-trigger:focus-visible {
	outline: 2px solid var(--latepoint-brand-primary);
	outline-offset: 2px;
}

.latepoint-w .latepoint-heading-w .lp-cart-icon-trigger i {
	display: block;
	line-height: 1;
}

.latepoint-w .latepoint-heading-w .lp-cart-icon-trigger.lp-cart-icon-hidden {
	display: none;
}

/* Red presence dot — shown only when the cart has committed items. */
.latepoint-w .latepoint-heading-w .lp-cart-icon-trigger .lp-cart-icon-dot {
	display: none;
	position: absolute;
	top: 2px;
	right: 2px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: #e02b2b;
	box-shadow: 0 0 0 2px #fff;
	box-sizing: content-box;
	pointer-events: none;
}

.latepoint-w .latepoint-heading-w .lp-cart-icon-trigger.lp-cart-has-items .lp-cart-icon-dot {
	display: block;
}

/**
 * Cart overlay — driven ONLY by our private .lp-cart-icon-open class on
 * .latepoint-w, independent of LatePoint's own summary state classes (which core
 * re-toggles on every AJAX render), so the panel appears strictly on icon click.
 *
 * The extra class on the ancestor gives this higher specificity than core's base
 * ".latepoint-w .latepoint-summary-w{display:none}"; !important guards the
 * transform/display.
 */
.latepoint-w.lp-cart-icon-open .latepoint-summary-w {
	display: block !important;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0) !important;
	z-index: 100000;
	width: 420px;
	max-width: 90vw;
	max-height: 90vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

/* Dark backdrop behind the overlay. */
.latepoint-w.lp-cart-icon-open .latepoint-booking-form-element:before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 99999;
}

/**
 * "Close cart" text button. Hidden by default (desktop uses the panel's X, the
 * backdrop, and Esc); shown only inside the open overlay on mobile, stuck to the
 * bottom of the scrolling panel.
 */
.latepoint-w .latepoint-summary-w .lp-cart-close-btn {
	display: none;
}

@media (max-width: 767px) {
	.latepoint-w.lp-cart-icon-open .latepoint-summary-w .lp-cart-close-btn {
		display: block;
		position: sticky;
		bottom: 0;
		width: 100%;
		margin: 10px 0 0;
		padding: 14px 16px;
		border: none;
		border-radius: 8px;
		background-color: var(--latepoint-brand-primary, #1e222b);
		color: #fff;
		font-size: 15px;
		font-weight: 600;
		text-align: center;
		cursor: pointer;
		z-index: 1;
	}
}