/* OffPeakLuxury self-catering. Only what results.css does not already cover. */

/* the card's promise list. PPJ has ppj-tick-items with an image tick; this is the same
   shape with a CSS tick, so there is no asset to ship and nothing to 404 */
div.opl-tick-items {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 6px;
}
div.opl-tick-items span {
	display: flex;
	align-items: center;
	font-size: 13px;
	color: #666;
}
div.opl-tick-items span::before {
	content: "\2713";
	margin-right: 8px;
	font-weight: bold;
	color: #810000;
}

/* OPL gives every p a top and bottom margin; inside a card that stacks into the excess spacing
   PPJ never shows, because PPJ zeroes .card-desc p. Same reset, scoped to the card */
.sc-card .card-desc p, .sc-card .card_footer_elements_container p {
	margin: 0;
}
.sc-card p.button_container {
	padding-top: 10px;
	margin-bottom: 0;
}
/* the two footer rows that carry nothing on a self-catering card */
.sc-card p.show_instant_availability, .sc-card p.extras_container:empty {
	display: none;
}
.sc-card div.opl-tick-items:empty {
	display: none;
}
/* the results title on this brand: same weight the hotel results give it */
.inner_page.sc-results > h1 {
	margin-bottom: 10px;
}

/* .col-4 is flex and .card-container is flex:0 1 auto with no width, so it shrink-wraps its
   content - and the carousel measures 320px. The hotel card happens to fill; this one must be told to */
.sc-card .card-container {
	width: 100%;
}

/* the hotel card caps its image at 240px; the carousel image takes the same cap, cover-cropped, so a
   self-catering card stands no taller than its neighbour on browse-offers */
.sc-card .carousel-wrapper img {
	max-height: 240px;
	object-fit: cover;
}

/* the sort in force carries the marker image; make the word carry it too */
.browse-navigation .sort_options a:has(> img) .a_text {
	font-weight: 700;
	text-decoration: underline;
}

/* the shared landing wraps the grid in .page-content, which OPL pads; the hotel results have no such wrapper */
.inner_page.sc-results .page-content, .inner_page.sc-results .page-content > .container {
	padding: 0;
	margin: 0;
}

/* the hotel bar is sort / map / pager spread across one line; the count sits under the sort
   options, out of the flow, so the three keep their places and the bar keeps its 72px */
.inner_page.sc-results .browse-navigation {
	flex-wrap: nowrap;
	position: relative;
}
.inner_page.sc-results .browse-navigation .sc-result-count {
	position: absolute;
	left: 20px;
	bottom: 4px;
	margin: 0;
	padding: 0;
	font-size: 12px;
	color: #777;
	white-space: nowrap;
}

/* the chip draws its own square in ::after; a radio must vanish exactly as the checkbox does */
.filter-tab input[type=radio] {
	display: none;
}

/* the text half of the card, tightened. The hotel card reserves 60px for a three-line offer name and
   a 160px offer box; a self-catering card carries one line and two, so the floors go and the
   paddings come down. Every rule is scoped to the card so the hotel results keep their shape */
.sc-card .card-container .card-details-inner {
	padding: 10px 15px 12px;
}
.sc-card .card-container p.hotel_location {
	padding-top: 7px;
	padding-bottom: 7px;
}
.sc-card .card-desc-first, .sc-card .card-desc.card-desc-first h3 {
	min-height: 0;
}
.sc-card .card-desc.card-desc-first h3 {
	padding: 4px 0 6px;
}
.sc-card .card-container div.package-details-container {
	margin: 4px 0 6px;
	padding-top: 8px;
}
.sc-card .card-container .price_container_container {
	min-height: 0;
}
.sc-card p.button_container {
	padding-top: 6px;
}