@charset "UTF-8";
/* =====================================================================
 * v1.8.25 - Service selection cards: price on the title line.
 *
 * LatePoint lays each service card out as a flex row: the name and the
 * description together on the left, the price in a fixed column on the
 * right behind a vertical rule. With ten-dish descriptions that column
 * steals a third of the width, the description wraps to four or five
 * lines, and the price itself wraps onto two ("390000" / "GS").
 *
 * The markup, from OsBookingHelper::generate_services_list():
 *
 *   .os-item.os-selectable-item
 *     .os-service-selector.os-item-i
 *       [.os-item-img-w]
 *       .os-item-name-w        <- name AND description live in here
 *         .os-item-name
 *         .os-item-desc
 *       .os-item-price-w
 *         .os-item-price
 *         [.os-item-price-label]
 *
 * The name and the description share a parent, so they cannot be placed
 * in different grid cells directly. `display: contents` on that wrapper
 * dissolves it and promotes both children to grid items of .os-item-i,
 * which is what lets the price sit beside the name while the
 * description runs the full width underneath.
 *
 * SPECIFICITY. This is the whole difficulty. LatePoint's base rule is
 *
 *   .latepoint-w .latepoint-booking-form-element .os-items .os-item
 *     .os-item-i { display: flex; align-items: center }
 *
 * which is FIVE classes. v1.8.25 used three and v1.8.26 used four, so
 * neither ever applied: `display: grid` lost to `display: flex`, the card
 * kept its original flex row, and the only visible change was on cards
 * short enough that the flex layout already looked like the target. The
 * vertical rule and the trapped description were both symptoms of the
 * grid simply never existing.
 *
 * Every rule below carries the same `.latepoint-w
 * .latepoint-booking-form-element` prefix plus `.os-services.os-items`,
 * for seven classes, plus `.os-as-rows` which the same element carries,
 * for eight. Six alone only TIED LatePoint's longest `.os-item-i` rule,
 * and ties break on source order - which an asset optimiser is free to
 * reorder while combining files. This install has already had CSS
 * rewritten in transit once, so the layout does not rest on file order.
 *
 * A note for anyone editing this later: check the specificity of the rule
 * you are replacing before assuming a shorter selector is enough. Three
 * releases were spent on that mistake.
 *
 * v1.9.2 - the template gained "more" and "list" rows for the plate
 * expander. Those elements sit inside .os-item-name-w, which this file sets
 * to `display: contents` - so they become grid items of .os-item-i and are
 * AUTO-PLACED. Without named areas the toggle landed in the price column
 * and the list beside it. Named rows with no content collapse to zero
 * height, so cards without an expander are unaffected. Mobile needs no
 * variant: since 1.8.27 it shares the desktop template.
 *
 * Scoped to the services step only. The extras step has its own layout
 * rules in lp-service-extras-cap.css and must not inherit these.
 * ===================================================================*/

.latepoint-w .latepoint-booking-form-element .os-services.os-items.os-as-rows .os-item .os-item-i {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"name  price"
		"desc  desc"
		"more  more"
		"list  list";
	align-items: baseline;
	column-gap: 18px;
	width: 100%;
}

/* Dissolve the wrapper so name and description become grid items of the
   row rather than siblings inside one cell. */
.latepoint-w .latepoint-booking-form-element .os-services.os-items.os-as-rows .os-item .os-item-i .os-item-name-w {
	display: contents;
}

.latepoint-w .latepoint-booking-form-element .os-services.os-items.os-as-rows .os-item .os-item-i .os-item-name-w .os-item-name {
	grid-area: name;
	min-width: 0;
}

.latepoint-w .latepoint-booking-form-element .os-services.os-items.os-as-rows .os-item .os-item-i .os-item-name-w .os-item-desc {
	grid-area: desc;
	min-width: 0;
	max-width: none;
	margin: 3px 0 0;
	padding-right: 0;
}

.latepoint-w .latepoint-booking-form-element .os-services.os-items.os-as-rows .os-item .os-item-i .os-item-price-w {
	grid-area: price;
	/* The rule, the padding and the margin all existed to separate a
	   right-hand column that no longer exists. */
	border-left: 0;
	padding-left: 0;
	margin-left: 0;
	text-align: right;
	white-space: nowrap;
	align-self: baseline;
}

/* Price matches the title exactly, so the two read as one line. */
.latepoint-w .latepoint-booking-form-element .os-services.os-items.os-as-rows .os-item .os-item-i .os-item-price-w .os-item-price {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.latepoint-w .latepoint-booking-form-element .os-services.os-items.os-as-rows .os-item .os-item-i .os-item-price-w .os-item-price-label {
	display: block;
	text-align: right;
	white-space: nowrap;
}

/* A card carrying a selection image keeps it as a left column spanning
   both rows, so the description starts under the name, not under the
   image. */
.latepoint-w .latepoint-booking-form-element .os-services.os-items.os-as-rows .os-item .os-item-i:has(.os-item-img-w) {
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"img  name  price"
		"img  desc  desc"
		"img  more  more"
		"img  list  list";
}

.latepoint-w .latepoint-booking-form-element .os-services.os-items.os-as-rows .os-item .os-item-i .os-item-img-w {
	grid-area: img;
	align-self: center;
}

/* If anything renders a second price element the grid would stack both in
   one cell. Show the first, hide the rest. */
.latepoint-w .latepoint-booking-form-element .os-services.os-items.os-as-rows .os-item .os-item-i .os-item-price-w ~ .os-item-price-w {
	display: none;
}

/* Phones keep the SAME layout - price on the title line, description full
   width underneath. No stacking: the title wraps to a second line if it
   has to, and the price stays where the customer already learned to look
   for it. Only the gap and the type scale tighten. */
@media (max-width: 600px) {
	.latepoint-w .latepoint-booking-form-element .os-services.os-items.os-as-rows .os-item .os-item-i {
		column-gap: 12px;
	}

	.latepoint-w .latepoint-booking-form-element .os-services.os-items.os-as-rows .os-item .os-item-i .os-item-name-w .os-item-name,
	.latepoint-w .latepoint-booking-form-element .os-services.os-items.os-as-rows .os-item .os-item-i .os-item-price-w .os-item-price {
		font-size: 15px;
	}

	.latepoint-w .latepoint-booking-form-element .os-services.os-items.os-as-rows .os-item .os-item-i .os-item-name-w .os-item-desc {
		font-size: 12.5px;
	}
}