/* LatePoint Recipe Extras — Service-extras cap UI (v1.3.0)
 *
 * v1.3.0 additions:
 *   - Hide $0 price labels on the extras step (kitchen menu is free).
 *   - Style the "×N" qty pill the JS rewrites in place of "(N x 0)".
 *   - Visual state for the gated Next button when total < min required.
 */

/* v1.3.15 — Match the duplicados counter pill exactly: full width,
 * left-aligned, light gray background by default (no more amber when
 * below min), light-teal tint when fully selected. Same padding and
 * font as `.lp-menu-counter` so both pages feel consistent.
 * v1.3.16 — explicit border:none + box-shadow:none to defeat any
 * LP-default rules that draw a hairline around step children.
 * v1.3.17 — explicit padding-left/right + text-indent: 0 + gap: 0.
 * The asymmetric left-side gap the user reported was from an inherited
 * LP rule that adds left-padding to flex children of certain step
 * containers. Setting padding explicitly on both sides (not shorthand)
 * makes our rule win the cascade unambiguously. */
.lp-extras-cap-counter {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0 !important;
	width: 100%;
	box-sizing: border-box;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	padding-left: 14px !important;
	padding-right: 14px !important;
	margin: 0 0 16px 0 !important;
	background: rgba(0, 0, 0, 0.04);
	border: none !important;
	border-radius: 15px;
	box-shadow: none !important;
	outline: none !important;
	font-size: 14px;
	font-weight: 500;
	color: #4b5563;
	text-align: left;
	text-indent: 0 !important;
}

.lp-extras-cap-counter.is-at-cap {
	background: rgba(63, 168, 142, 0.14);
	color: #2d7a66;
	font-weight: 600;
}

/* v1.3.15 — below-min state uses the SAME gray as default. No more
 * amber/yellow — the user wants the alert to look identical to the
 * duplicados pill regardless of state. */
.lp-extras-cap-counter.is-below-min {
	background: rgba(0, 0, 0, 0.04);
	color: #4b5563;
}
	margin: 0 0 16px 0;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.lp-extras-cap-counter.lp-extras-flash {
	animation: lpExtrasFlash 0.4s ease-out;
}

@keyframes lpExtrasFlash {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.04); background-color: rgba(63, 168, 142, 0.28); }
	100% { transform: scale(1); }
}

/* Locked / out-of-budget items */

.os-service-extras .os-selectable-item.lp-extras-locked {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
	filter: saturate(0.6);
}

/* Allow click events to STILL register on the locked item so our
 * capture-phase blocker can intercept and show the flash. Without this
 * pointer-events:none would swallow the click silently. */
.os-service-extras .os-selectable-item.lp-extras-locked {
	pointer-events: auto;
}

.os-service-extras .item-quantity-selector.lp-extras-btn-locked {
	opacity: 0.3;
	cursor: not-allowed;
}

/* Dark theme */

.latepoint-bg-dark .lp-extras-cap-counter,
.latepoint-style-dark .lp-extras-cap-counter {
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.75);
}

.latepoint-bg-dark .lp-extras-cap-counter.is-at-cap,
.latepoint-style-dark .lp-extras-cap-counter.is-at-cap {
	background: rgba(63, 168, 142, 0.22);
	color: #6ddcb9;
}

.latepoint-bg-dark .lp-extras-cap-counter.is-below-min,
.latepoint-style-dark .lp-extras-cap-counter.is-below-min {
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.75);
}


/* ===================================================================
 * v1.3.0 — Hide $0 prices on the service-extras step
 *
 * The kitchen menu treats all extras as free, so the "PYG 0" / "$0.00"
 * labels add visual noise. Hide them only on the extras STEP — the
 * side-panel summary and downstream totals stay intact.
 * ===================================================================*/

.latepoint-step-content[data-step-code="booking__service_extras"] .os-item-price,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-item .item-price,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-item .latepoint-service-price,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-item .os-extra-price,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-item .item-price-w,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-item .price-w,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-priced-item .price,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item .price,

.latepoint-step-content[data-step-code="booking__service_extras"] .item-free,
.latepoint-step-content[data-step-code="booking__service_extras"] .latepoint-free-label,
.latepoint-step-content[data-step-code="booking__service_extras"] .free-tag,

.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-multiplier,
.latepoint-step-content[data-step-code="booking__service_extras"] .qty-price,
.latepoint-step-content[data-step-code="booking__service_extras"] .extra-total,
.latepoint-step-content[data-step-code="booking__service_extras"] .item-total-price,
.latepoint-step-content[data-step-code="booking__service_extras"] .item-charge,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-item-totals {
	display: none !important;
}


/* ===================================================================
 * v1.3.0 — "×N" qty pill (replaces "(13 x 0)" via JS rewrite)
 * ===================================================================*/

.latepoint-step-content[data-step-code="booking__service_extras"] .lp-extras-qty-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.06);
	font-size: 12px;
	font-weight: 600;
	color: #4b5563;
	margin-left: 6px;
	white-space: nowrap;
	line-height: 1.6;
}


/* ===================================================================
 * v1.3.0 — Gated Next button (when total qty < required minimum)
 * ===================================================================*/

.latepoint-booking-form-element .latepoint-btn-step-next.lp-extras-next-blocked,
.latepoint-booking-form-element .latepoint-next-btn.lp-extras-next-blocked,
.latepoint-booking-form-element .os-next-btn.lp-extras-next-blocked {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: auto; /* allow click so capture-phase blocker fires flash */
	filter: saturate(0.6);
}


/* ===================================================================
 * v1.3.3 — Sticky counter (ALL viewports).
 *
 * The plate list scrolls long — sticky-top keeps the "X / 13" /
 * "¡Ya tenés tus 13!" alert visible while scrolling, on phone AND
 * desktop. Sticks INSIDE the step content so it doesn't collide
 * with LP's outer chrome.
 * ===================================================================*/

.latepoint-step-content[data-step-code="booking__service_extras"] .lp-extras-cap-counter {
	position: sticky;
	top: 0;
	z-index: 50;
	margin: 0 -8px 12px;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.latepoint-step-content[data-step-code="booking__service_extras"] .lp-extras-cap-counter.is-at-cap {
	background: rgba(63, 168, 142, 0.14) !important;
	color: #2d7a66 !important;
	font-weight: 600 !important;
}

.latepoint-step-content[data-step-code="booking__service_extras"] .lp-extras-cap-counter.is-below-min {
	background: rgba(0, 0, 0, 0.04) !important;
	color: #4b5563 !important;
}


/* ===================================================================
 * v1.3.3 — Hide the per-plate checkbox.
 *
 * LP's actual class is `.os-item-checker` (NOT `.checkbox`). v1.3.1
 * used the wrong selector, so the checkbox kept showing. This pass
 * targets every variant LP uses across versions.
 *
 * The +/- pattern handles selection now: qty 0 = unselected, qty > 0
 * = selected (LP toggles .has-quantity / .selected automatically).
 * The checkbox is redundant noise.
 * ===================================================================*/

.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item .os-item-checker,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item .os-checker,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item .checker,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item .os-selectable-item-checker,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item .os-checkbox-w,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item .checkbox,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item .os-item-checkbox,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-item .os-item-checker,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-item .checker,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-item .checkbox,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item input[type="checkbox"],
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item [role="checkbox"] {
	display: none !important;
}

/* Some LP themes draw the checker as a ::before on the name wrapper.
 * Kill that too. */
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item .os-item-name-w::before,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item .os-item-info::before {
	display: none !important;
	content: none !important;
}

/* Reclaim the horizontal space the checkbox occupied. */
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item .os-item-info,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item .os-item-name-w {
	padding-left: 0 !important;
}


/* ===================================================================
 * v1.3.1 — Lock the qty input AND its row at cap.
 *
 * The previous version locked the `+` button but the qty input itself
 * was still focusable and the row was still clickable, which could
 * jam the count above the maximum. We now disable focus + pointer
 * events on the input AND on the row, leaving only the `−` button
 * usable so the user can free up space.
 * ===================================================================*/

.latepoint-step-content[data-step-code="booking__service_extras"]
	.os-selectable-item.lp-extras-locked .item-quantity-selector-input,
.latepoint-step-content[data-step-code="booking__service_extras"]
	.os-selectable-item .item-quantity-selector-input[readonly] {
	pointer-events: none !important;
	user-select: none;
	-webkit-user-select: none;
	background: rgba(0, 0, 0, 0.03);
	color: rgba(0, 0, 0, 0.45);
	caret-color: transparent;
}

.latepoint-step-content[data-step-code="booking__service_extras"]
	.os-selectable-item.lp-extras-locked .os-item-info,
.latepoint-step-content[data-step-code="booking__service_extras"]
	.os-selectable-item.lp-extras-locked .os-item-name,
.latepoint-step-content[data-step-code="booking__service_extras"]
	.os-selectable-item.lp-extras-locked .os-item-name-w {
	pointer-events: none !important;
}


/* ===================================================================
 * v1.3.1 — Hide $0 prices in the side-panel cost breakdown.
 *
 * The JS rewrites "(N x 0)" → "(×N)" and flags zero-value price
 * elements with .lp-extras-zero-price. CSS then hides them. We can't
 * do this purely in CSS because the price text is a leaf node we
 * need to test before hiding.
 * ===================================================================*/

.latepoint-summary-w .lp-extras-zero-price,
.latepoint-side-panel-i .lp-extras-zero-price {
	display: none !important;
}

/* If a whole summary row has both a 0-price value AND a name with a
 * rewritten qty pill, the row will look unbalanced — give it a sane
 * single-column flow. */
.latepoint-summary-w .summary-row.lp-extras-zero-row,
.latepoint-side-panel-i .summary-row.lp-extras-zero-row {
	justify-content: flex-start;
}


/* ===================================================================
 * v1.3.4 — Generic hide class for structural cleanup.
 * The JS adds this to qty-multiplier / zero-cost cells in the side
 * panel summary, so we don't have to maintain an ever-growing list
 * of LP class selectors.
 * ===================================================================*/

.lp-extras-hide {
	display: none !important;
}


/* ===================================================================
 * v1.3.4 — Smaller plate name + Adults-style big circle +/- buttons.
 *
 * Goal: plate items in the extras step should look like the
 * adults/children selectors (image 3 reference) — name on the left,
 * a clean row of circle minus / number / circle plus on the right.
 * No box around the input, no checker on the left.
 * ===================================================================*/

/* Smaller plate-name text — was inheriting LP's main service size
 * (~16px). v1.3.8: scoped STRICTLY to the extras step so it doesn't
 * leak into the main service picker or the payment form. Deep
 * selector specificity matches LP's own rule so it wins without
 * `!important`. */
.latepoint-step-content[data-step-code="booking__service_extras"] .os-items .os-item .os-item-i .os-item-name-w .os-item-name,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item .os-item-name,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-item .os-item-name {
	font-weight: 600;
	font-size: 14px;
	display: block;
	line-height: 1.35;
	color: #1f2937;
}

/* Circle +/- buttons — same style as the Adults selector */
.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector,
.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector-plus,
.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector-minus {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px;
	border-radius: 50% !important;
	border: 1px solid rgba(0, 0, 0, 0.14) !important;
	background: #fff !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	color: rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector:hover,
.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector-plus:hover,
.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector-minus:hover {
	border-color: rgba(0, 0, 0, 0.3) !important;
	color: rgba(0, 0, 0, 0.8);
}

/* Borderless qty input between the +/- circles */
.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector-input {
	width: 32px !important;
	min-width: 32px;
	height: 36px !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	color: #111827;
	-moz-appearance: textfield;
	margin: 0 4px;
}

.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector-input::-webkit-outer-spin-button,
.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector-w {
	display: inline-flex !important;
	align-items: center;
	gap: 0;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}


/* ===================================================================
 * v1.3.5 — Kill ONLY checker pseudos on the name wrapper.
 *
 * v1.3.4 also knocked out ::before/::after on .os-selectable-item
 * itself, which is where LP draws the tree-connector arrow between
 * each plate and the group's vertical line. Restoring that — we now
 * only target the NAME wrapper, never the item.
 *
 * v1.3.11: also kill pseudos on .os-item-i. The green checkmark
 * overlay LP renders for selected/has-quantity items lives as either
 * a separate element OR a pseudo on .os-item-i. We can safely kill
 * .os-item-i pseudos because the tree connector lives on .os-item
 * (the wrapper), not on .os-item-i (the inner).
 * ===================================================================*/

.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item.lp-extras-checker-killed .os-item-name-w::before,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item.lp-extras-checker-killed .os-item-name-w::after,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item.lp-extras-checker-killed .os-item-info::before,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item.lp-extras-checker-killed .os-item-info::after,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item.lp-extras-checker-killed .os-item-i::before,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item.lp-extras-checker-killed .os-item-i::after {
	display: none !important;
	content: none !important;
	background: none !important;
	border: none !important;
	width: 0 !important;
	height: 0 !important;
}


/* ===================================================================
 * v1.3.6 — Position-based checker selector REMOVED.
 *
 * v1.3.5 used `> :first-child:not(...)` to catch unknown checker
 * classes, but LP's actual inner wrapper class wasn't in my allow-
 * list, so the rule hid the entire plate content. Reverted.
 *
 * Checker hiding now relies on JS removal (removeCheckers) + the
 * class-name-based CSS rules above. If a checker still slips through,
 * run `lpExtrasDebug()` in the console — the output will show me the
 * exact class name to add.
 * ===================================================================*/


/* ===================================================================
 * v1.3.5 — Reset focus outlines on +/- buttons.
 *
 * The thick green/teal box you saw around the "+" was the browser /
 * theme focus outline. With our 36px circle buttons it looked like
 * an offset rectangle. Replace it with a tight, theme-friendly
 * focus ring.
 * ===================================================================*/

.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector:focus,
.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector-plus:focus,
.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector-minus:focus,
.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector:focus-visible,
.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector-plus:focus-visible,
.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector-minus:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(63, 168, 142, 0.18) !important;
	border-color: rgba(63, 168, 142, 0.55) !important;
}

.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector-input:focus,
.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector-input:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}


/* ===================================================================
 * v1.3.10 — Plate item borders restored.
 *
 * v1.3.8 removed borders on .os-selectable-item entirely, but the
 * user wanted only the icon-image border gone — each plate option
 * keeps its own card border (LP's native styling).
 * ===================================================================*/


/* ===================================================================
 * v1.3.8 — Position-based checker hide, NOW scoped to .os-item-i.
 *
 * v1.3.5's version sat at the .os-selectable-item level and broke
 * when LP's first child was the .os-item-i wrapper. Now that the
 * inspector confirms the structure is:
 *
 *   .os-item.os-selectable-item
 *     └─ .os-item-i
 *          ├─ <checker>                  ← THIS is what we want gone
 *          ├─ .os-item-name-w
 *          │    └─ .os-item-name
 *          └─ .item-quantity-selector-w
 *
 * we can target inside .os-item-i and hide any child that isn't an
 * allow-listed wrapper. Safe because .os-item-i itself stays visible.
 *
 * v1.3.10: ALSO hide non-.os-item-i children of .os-selectable-item.
 * The green checkmark seen on the selected state lives as a sibling
 * of .os-item-i, not inside it, so the previous layer alone missed
 * it. Both layers together = checker dies regardless of where LP
 * renders it.
 * ===================================================================*/

.latepoint-step-content[data-step-code="booking__service_extras"]
	.os-item-i > *:not(.os-item-name-w):not(.os-item-info):not(.item-quantity-selector-w):not(.os-item-content):not(.os-item-bottom-w):not(.os-item-aside):not(.os-item-image-w):not(.os-item-image):not(.os-item-name) {
	display: none !important;
}

/* v1.3.10 — additional layer at the .os-selectable-item level. The
 * .os-item-i wrapper stays; the qty selector stays; anything else
 * (the green check overlay LP renders on the selected state) goes. */
.latepoint-step-content[data-step-code="booking__service_extras"]
	.os-selectable-item > *:not(.os-item-i):not(.item-quantity-selector-w):not(.os-item-name):not(.os-item-name-w):not(.os-item-info) {
	display: none !important;
}

/* And the same defense inside .os-item-name-w (if LP renders the
 * checker as a sibling of .os-item-name). */
.latepoint-step-content[data-step-code="booking__service_extras"]
	.os-item-name-w > *:not(.os-item-name):not(.item-quantity-selector-w):not(.os-item-info):not(.os-item-bottom-w) {
	display: none !important;
}


/* ===================================================================
 * v1.3.12 — Read-only qty input.
 *
 * Users must use the +/- buttons; typing is disabled because synthetic
 * clamps don't sync with LP's summary engine (LP requires real
 * user-trusted click events on +/- to update its internal extras
 * state). Cursor stays default; no caret on focus.
 * ===================================================================*/

.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector-input {
	cursor: default !important;
	caret-color: transparent !important;
	user-select: none !important;
	-webkit-user-select: none !important;
}

.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector-input:focus,
.latepoint-step-content[data-step-code="booking__service_extras"] .item-quantity-selector-input:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}


/* ===================================================================
 * v1.3.13 — Green border ONLY on items with qty > 0.
 *
 * LP applies `.has-quantity` to ALL items that CAN have a quantity
 * (regardless of the actual value), so we can't trust that class for
 * "is selected". Instead, our JS reads the qty input value and adds
 * `.lp-extras-has-qty` only when the value is > 0. 1px border (matches
 * the duplicates page), light teal tint, no extra shadow ring.
 * ===================================================================*/

.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item.lp-extras-has-qty,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-item.lp-extras-has-qty {
	border: 1px solid rgba(63, 168, 142, 0.7) !important;
	background: rgba(63, 168, 142, 0.06) !important;
	box-shadow: none !important;
}

.latepoint-step-content[data-step-code="booking__service_extras"] .os-selectable-item.lp-extras-has-qty .os-item-i,
.latepoint-step-content[data-step-code="booking__service_extras"] .os-item.lp-extras-has-qty .os-item-i {
	background: transparent !important;
	border: none !important;
}


/* ===================================================================
 * v1.3.12 — Collapse leftover space where the checkbox lived.
 *
 * Hidden checker still claimed horizontal space from the parent's
 * gap/padding. Zero out width/padding/margin on all hidden non-name
 * children inside the item layout containers.
 * ===================================================================*/

.latepoint-step-content[data-step-code="booking__service_extras"]
	.os-item-i > *:not(.os-item-name-w):not(.os-item-info):not(.item-quantity-selector-w):not(.os-item-content):not(.os-item-bottom-w):not(.os-item-aside):not(.os-item-image-w):not(.os-item-image):not(.os-item-name),
.latepoint-step-content[data-step-code="booking__service_extras"]
	.os-selectable-item > *:not(.os-item-i):not(.item-quantity-selector-w):not(.os-item-name):not(.os-item-name-w):not(.os-item-info) {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

/* Tighten the inner wrap's left padding if LP added it for the checker. */
.latepoint-step-content[data-step-code="booking__service_extras"] .os-item-i {
	gap: 0 !important;
}


/* ===================================================================
 * v1.3.12 — Conditional Next-button gate.
 *
 * Only block when the form is currently on the extras step. The
 * .lp-extras-next-blocked class may persist after back-navigation,
 * but its visual + click-blocking effect is now scoped to the form
 * being on that step. JS gate also checks this at click time so the
 * synthetic block call can't bite the previous step.
 * ===================================================================*/

.latepoint-booking-form-element:not(.current-step-booking__service_extras) .lp-extras-next-blocked {
	opacity: 1 !important;
	pointer-events: auto !important;
	cursor: pointer !important;
	filter: none !important;
}


/* ===================================================================
 * v1.3.14 — User-supplied padding override for multi-select items.
 * Scopes only to extras step to avoid leaking into main service picker.
 * ===================================================================*/

.latepoint-step-content[data-step-code="booking__service_extras"] .os-items .os-item.os-allow-multiselect .os-item-i {
	padding-left: 15px;
}


/* ===================================================================
 * v1.3.14 — Duplicados full-width + left-aligned counter pill.
 * ===================================================================*/

.lp-menu-step .lp-menu-counter {
	display: flex !important;
	align-items: center;
	justify-content: flex-start !important;
	width: 100% !important;
	box-sizing: border-box;
	text-align: left !important;
}


/* ===================================================================
 * v1.3.14 — Service selection (booking__services) — same plate style
 * as the menu-duplicates step. Gray by default, green when selected
 * (LP toggles `.selected` on the service item).
 *
 * v1.3.16 — also kill the inner .os-item-i border so we don't get
 * a double-border effect (my outer card border + LP's native inner
 * wrapper border stacking).
 * ===================================================================*/

.latepoint-step-content[data-step-code="booking__services"] .os-item,
.latepoint-step-content[data-step-code="booking__services"] .os-selectable-item {
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	background: #fff !important;
	transition: border-color .15s, background .15s, box-shadow .15s;
}

.latepoint-step-content[data-step-code="booking__services"] .os-item .os-item-i,
.latepoint-step-content[data-step-code="booking__services"] .os-selectable-item .os-item-i {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

.latepoint-step-content[data-step-code="booking__services"] .os-item:hover,
.latepoint-step-content[data-step-code="booking__services"] .os-selectable-item:hover {
	border-color: rgba(63, 168, 142, 0.4) !important;
	background: rgba(63, 168, 142, 0.02) !important;
}

.latepoint-step-content[data-step-code="booking__services"] .os-item.selected,
.latepoint-step-content[data-step-code="booking__services"] .os-selectable-item.selected {
	border: 1px solid #3FA88E !important;
	background: rgba(63, 168, 142, 0.07) !important;
	box-shadow: none !important;
}


/* ===================================================================
 * v1.3.18 — Injected "Duplicado N: PlateName" rows in the desglose.
 *
 * Styled to match LP's existing breakdown row look — small text,
 * dimmer color, same padding/font-size as nearby rows. Sits between
 * the regular extras lines and the "Precio Total" row.
 * ===================================================================*/

.lp-extras-dup-row {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 4px 0;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.65);
	line-height: 1.4;
	/* v1.3.33 — override parent flex/grid layouts that were
	 * squishing the rows side-by-side (chef's menu desglose). */
	flex: 0 0 100% !important;
	flex-basis: 100% !important;
	grid-column: 1 / -1 !important;
	clear: both !important;
}

.latepoint-bg-dark .lp-extras-dup-row,
.latepoint-style-dark .lp-extras-dup-row {
	color: rgba(255, 255, 255, 0.7);
}


/* ===================================================================
 * v1.3.23 — Anti-flicker fade on side-panel rows.
 *
 * When LP re-renders the desglose (after +/- clicks, after step
 * changes, after AJAX, etc), new DOM elements briefly show dirty
 * "(N x 0)" / "0PYG" content before our MutationObserver cleanup
 * runs. Even when cleanup completes in the same task as the
 * mutation, there's a tiny visible window because the browser may
 * have already begun painting.
 *
 * Solution: apply a 60ms hold-then-fade animation to every direct
 * child of the side-panel breakdown. The animation:
 *   • 0–45ms (75%): element is INVISIBLE — our cleanup runs here
 *   • 45–60ms (25%): element fades in to opacity 1
 *
 * The animation re-triggers whenever an element is inserted or its
 * animation-name property is (re)set, so each new render hides
 * during the cleanup window.
 *
 * Total perceived latency: 60ms — well below the 100ms threshold
 * where users perceive a delay. The result is a tiny fade-in instead
 * of a visible flicker of dirty text.
 * ===================================================================*/

@keyframes lp-extras-fade-row-in {
	0%   { opacity: 0; }
	75%  { opacity: 0; }
	100% { opacity: 1; }
}

.latepoint-side-panel .summary-row,
.latepoint-side-panel [class*="breakdown"] > *,
.latepoint-side-panel [class*="extras-line"],
.latepoint-side-panel [class*="cost-line"],
.latepoint-summary-w .summary-row,
.latepoint-summary-w [class*="breakdown"] > *,
.summary-price-breakdown-wrapper > *,
.summary-box-wrapper > * {
	animation: lp-extras-fade-row-in 60ms ease-out;
}


/* ===================================================================
 * v1.3.39 — Tree-bullet styling for sub-rows in the desglose.
 *
 * Any .summary-price-item-w row with an empty .spi-price column is
 * a sub-item of the service above (LP's native extras for arma-tu-menú
 * AND our injected duplicates for the chef's menu). Apply a "└" tree
 * marker prefix so users see the visual relationship.
 *
 * Duplicate rows get a two-part name: "Duplicado N:" in dark, plate
 * name in gray. LP's native extras inherit the same gray tone.
 * ===================================================================*/

/* Tree bullet on any "sub-row" of the desglose.
 *
 * v1.3.40 — match by POSITION (any .summary-price-item-w that has
 * another .summary-price-item-w before it AND isn't the total).
 * The previous :has(.spi-price:empty) selector missed LP's native
 * extras because their price column contains "0PYG" — our cleanup
 * adds .lp-extras-hide to that text but the element isn't actually
 * empty in the CSS sense. The general-sibling approach catches
 * every sub-row regardless of price-column content. */
.summary-price-breakdown-inner .summary-price-item-w ~ .summary-price-item-w:not(.spi-total) {
	padding-left: 18px !important;
	position: relative;
}

.summary-price-breakdown-inner .summary-price-item-w ~ .summary-price-item-w:not(.spi-total)::before {
	content: '└';
	position: absolute;
	left: 0;
	top: 0;
	color: rgba(0, 0, 0, 0.35);
	font-size: 14px;
	line-height: 1.5;
	pointer-events: none;
}

/* Duplicate row — collapse padding/margin so siblings are dense. */
.lp-extras-dup-row.summary-price-item-w {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	min-height: 0 !important;
}

/* Dark label, gray plate name. */
.lp-extras-dup-row .lp-extras-dup-label {
	color: rgba(0, 0, 0, 0.88);
	font-weight: 500;
}

.lp-extras-dup-row .lp-extras-dup-plate {
	color: rgba(0, 0, 0, 0.55);
	font-weight: 400;
}

.lp-extras-dup-row.summary-price-item-w .spi-name {
	font-size: 14px;
	line-height: 1.5;
	padding-top: 0;
	padding-bottom: 0;
}

/* Empty price column on dup rows — invisible but holds layout. */
.lp-extras-dup-row.summary-price-item-w .spi-price {
	color: transparent;
}

/* Dark theme variants. */
.latepoint-bg-dark .summary-price-breakdown-inner .summary-price-item-w ~ .summary-price-item-w:not(.spi-total)::before,
.latepoint-style-dark .summary-price-breakdown-inner .summary-price-item-w ~ .summary-price-item-w:not(.spi-total)::before {
	color: rgba(255, 255, 255, 0.35);
}

.latepoint-bg-dark .lp-extras-dup-row .lp-extras-dup-label,
.latepoint-style-dark .lp-extras-dup-row .lp-extras-dup-label {
	color: rgba(255, 255, 255, 0.92);
}

.latepoint-bg-dark .lp-extras-dup-row .lp-extras-dup-plate,
.latepoint-style-dark .lp-extras-dup-row .lp-extras-dup-plate {
	color: rgba(255, 255, 255, 0.6);
}


/* ===================================================================
 * v1.3.36 — Pure-CSS hide of the "Extras:" attributes span.
 *
 * Inspector revealed LP's actual structure:
 *   <div class="summary-attributes sa-clean">
 *       <span>Asistentes: <strong>1 persona</strong></span>
 *       <span>Extras: <strong>Bolognesa...</strong></span>  ← hide this
 *   </div>
 *
 * Both labels are SEPARATE <span> siblings of .summary-attributes.
 * Asistentes is always the first span; Extras is the second (and
 * any future LP-added labels would come after, equally noisy in
 * this design — we want them all gone too).
 *
 * Pure CSS rule = zero flicker. The hide is applied by the browser
 * during the FIRST paint of the new content, before LP's render is
 * ever visible. No MutationObserver race, no JS delay.
 * ===================================================================*/

.latepoint-booking-form-element .summary-attributes > span ~ span,
.summary-attributes > span ~ span {
	display: none !important;
}


/* Fallback inline-hide for installs where "Extras:" shares a parent
 * with another label (not this install — they're separate spans —
 * but kept here so the JS surgical wrap fallback still works). */
.lp-extras-hide-inline {
	display: inline !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	max-width: 0 !important;
	max-height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* =====================================================================
 * v1.4.5 — Auto-double mode UI.
 *
 * When the extras step is in .lp-auto-double-mode, the customer can't
 * pick quantities — each plate is a binary on/off "include in my menu".
 * Each "on" plate is silently doubled to qty=2 server-side. The UI
 * therefore drops the +/- controls and the qty number entirely and
 * replaces them with an "×2" badge on selected plates.
 * ===================================================================*/

/* Hide quantity controls inside auto-double mode.
 * v1.4.6 — use the sr-only / clip pattern instead of display:none so
 * programmatic .click() on the +/- buttons still fires. LP only
 * updates its extras state on its own button-click handler; we trigger
 * those clicks ourselves when the user taps a plate row. */
.lp-auto-double-mode .os-selectable-item .item-quantity-selector,
.lp-auto-double-mode .os-selectable-item .item-quantity-selector-plus,
.lp-auto-double-mode .os-selectable-item .item-quantity-selector-minus,
.lp-auto-double-mode .os-selectable-item .item-quantity-selector-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Each plate row is a single clickable target. */
.lp-auto-double-mode .os-selectable-item {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.lp-auto-double-mode .os-selectable-item:hover {
	background-color: rgba(63, 168, 142, 0.04);
}

/* Selected state — uses .lp-extras-has-qty which is toggled by JS
 * based on actual input value (NOT LP's .has-quantity class which
 * is set on every quantity-capable item regardless of value).
 *
 * v1.4.19 — The ×2 badge is gated on BOTH .lp-auto-double-flow
 * (form, attendees=1 only) AND .lp-auto-double-mode (step). The
 * step class is "tap-to-toggle UI is on", the form class is "this
 * booking will actually be doubled". For attendees ≥ 2 the picker
 * is still tap-to-toggle but plates are NOT doubled, so the badge
 * must not appear. */
.lp-auto-double-mode .os-selectable-item.lp-extras-has-qty {
	position: relative;
}

.lp-auto-double-flow .lp-auto-double-mode .os-selectable-item.lp-extras-has-qty::after {
	content: '×2';
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	background: #3FA88E;
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 999px;
	letter-spacing: 0.02em;
	pointer-events: none;
}

/* =====================================================================
 * v1.4.7 — Auto-double flow: show (×2) suffix on each plate in the
 * desglose. Each plate is qty=1 client-side; the server doubles to
 * qty=2 at submit. To avoid customer confusion about "why only ×1?"
 * the suffix is rendered purely visually via CSS — data is unchanged.
 *
 * The marker only shows for sub-rows (rows where there's a prior
 * .summary-price-item-w sibling, same selector as the tree bullet).
 * ===================================================================*/

.lp-auto-double-flow
	.summary-price-breakdown-inner
	.summary-price-item-w ~ .summary-price-item-w:not(.spi-total)
	.spi-name::after {
	content: ' (×2)';
	color: #3FA88E;
	font-weight: 500;
	margin-left: 4px;
	white-space: nowrap;
}

/* =====================================================================
 * v1.4.9 — Desglose panel widening (exact LP selectors).
 *
 * Per Don's CSS spec May 17: target LP's own width declarations
 * directly. Summary panel = 350px (was ~300px), form panel = 570px
 * (was ~500-540px). The text size tweak from v1.4.8 stays.
 *
 * Gated by min-width: 900px because below that LP stacks the panels
 * vertically and these widths shouldn't apply.
 * ===================================================================*/

.latepoint-booking-form-element {
	--lp-summary-name-fs: 13px;
	--lp-summary-name-lh: 1.45;
}

@media (min-width: 900px) {
	.latepoint-w .latepoint-summary-w {
		flex: 0 0 350px !important;
		width: 350px !important;
	}
	.latepoint-w .latepoint-booking-form-element .latepoint-form-w {
		flex: 0 0 550px !important;
		width: 570px !important;
	}
}

/* Smaller, tighter plate names in the desglose — applies on all
 * screen sizes so the text-density is consistent. */
.summary-price-breakdown-inner .summary-price-item-w:not(.spi-total) .spi-name,
.summary-price-breakdown-inner .summary-price-item-w:not(.spi-total) .lp-extras-dup-label,
.summary-price-breakdown-inner .summary-price-item-w:not(.spi-total) .lp-extras-dup-plate {
	font-size: var(--lp-summary-name-fs);
	line-height: var(--lp-summary-name-lh);
}

/* Service-name row (e.g. "ARMA TU MENÚ" / "MENÚ DEL CHEF #1") stays
 * at its normal size — it's the parent label of the sub-rows. */
.summary-price-breakdown-inner .summary-price-item-w:first-of-type .spi-name {
	font-size: 14px;
}