/* ==========================================================================
   search-card-v2.css - shared result-card design (2026-07)
   Split out of search-v2.css so the CARD treatment can be reused on every
   context that renders result_template.html via Listing->searchResult():
     - /search/... results pages (results_list.html)      .results-container
     - /favourites                                          .results-container
     - myaccount showevent Shortlist tab                    .shortlist-container
     - myaccount showevent Alternatives tab                 .search-results-container
   The markup in result_template.html and the JS hooks (.favourite,
   .add-shortlist, .remove-shortlist, .play-container, .video-player,
   .result-container, tooltips, infinite scroll) are untouched - pure
   restyle. Design language matches listing-v2.css / search-v2.css.

   Palette (matches listing-v2.css / search-v2.css):
     accent        #C06014  (brand tertiary orange)
     accent hover  #9a4a0f
     ink           #191919
     secondary     #4a443f
     muted         #8a7f75
     hairline      #ececea  / soft #f4f3f0
     card hairline #e3dfd8  (warm, cards sit on white)
     warm ground   #faf5ed  / soft #f7f5f1

   Page-only chrome (hero, filters form, pagination, prose bands, etc.)
   stays in search-v2.css, loaded only by results_list.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   GRID - the bootstrap float grid becomes a flex grid so every card in a
   visual row is the same height and the button row pins to the bottom.
   Selector list covers every wrapper class used across the four contexts.
   -------------------------------------------------------------------------- */

.results-container,
.shortlist-container,
.search-results-container {
	display: flex;
	flex-wrap: wrap;
	/* clear: both is required here - becoming a flex container makes this a
	   new block-formatting-context box, and a new-BFC box sitting right after
	   a floated sibling (e.g. favourites.html's full-width .col-xs-12 info
	   panels, which float:left like every Bootstrap 3 .col-xs-* class) tries
	   to fit BESIDE the float instead of below it and collapses to 0 width.
	   A plain block div never had this problem; only the switch to flex
	   exposed it. Clearing unconditionally is harmless on results_list.html,
	   which already clears via its own .clearfix before this element. */
	clear: both;
}

.results-container .result-container,
.shortlist-container .result-container,
.search-results-container .result-container {
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
}

.results-container .result-container > .search-result,
.shortlist-container .result-container > .search-result,
.search-results-container .result-container > .search-result {
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* card shell */
.search-result.panel {
	border: 1px solid #e3dfd8;
	border-radius: 16px;
	box-shadow: none;
	margin-bottom: 0;
	transition: box-shadow 250ms, border-color 250ms;
}

.result-container .search-result.panel-default {
	border-color: #e3dfd8;
}

.search-result.panel:hover {
	box-shadow: 0 14px 34px rgba(60, 40, 20, 0.08);
	border-color: #cfc8bc;
}

/* media */
.search-result .searchResultsImage {
	height: 201px;	/* fallback */
	transition: transform 600ms, filter 400ms;
}

@supports (aspect-ratio: 16 / 10) {
	.search-result .searchResultsImage {
		height: auto;
		aspect-ratio: 16 / 10;
	}
}

.search-result:hover .searchResultsImage {
	transform: scale(1.04);
	filter: brightness(92%);
	-webkit-filter: brightness(92%);
}

/* media hover: dark shade + "Visit listing" cue (the mockup's wb-media-link).
   The media wrapper is always the card's first child; the underlying
   .searchResultsImage anchor already links to the listing. pointer-events
   none keeps clicks going to the anchor / play pill beneath. */
.search-result > div:first-child {
	position: relative;
}

.search-result > div:first-child:after {
	content: "Visit listing";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(40, 36, 32, 0.45);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.01em;
	opacity: 0;
	transition: opacity 200ms;
	pointer-events: none;
}

.search-result > div:first-child:hover:after {
	opacity: 1;
}

/* the inline mp3 bar floats inside the media box instead of touching the
   card edges (base rule pins it bottom 0 / left 0 / width 100%) */
.search-result .video-player .mp3-player audio {
	left: 10px;
	bottom: 10px;
	width: calc(100% - 20px);
	border-radius: 999px;
}

/* no overlay once a player iframe / audio bar is up */
.search-result > div:first-child:has(iframe):after,
.search-result > div:first-child:has(.mp3-player):after,
.search-result > div:first-child:has(.play-container.hidden):after {
	display: none;
}

/* play button becomes a small glass pill, bottom-left of the media.
   The pill IS the click zone now - the rest of the photo clicks through
   to the listing anchor (mockup behaviour) */
.search-result .video-player .play-container {
	top: auto;
	left: 6px;
	bottom: 6px;
	right: auto;
	width: auto;
	height: auto;
	padding: 8px;	/* invisible tap-target extension around the pill */
	z-index: 100;
	background: none;
}

.search-result .video-player .play-container:hover {
	background: none;
}

.search-result .video-player .play-container .play {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1;
	white-space: nowrap;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background 150ms;
}

.search-result .video-player .play-container:hover .play {
	background: #C06014;
}

.search-result .video-player .play-container .play:before {
	font-family: 'Glyphicons Halflings';
	content: "\e072";
	font-size: 9px;
	line-height: 1;
}

.search-result .video-player .play-container .play:after {
	content: "Play video";
}

.search-result .video-player[data-mp3-id] .play-container .play:after,
.search-result .video-player[data-soundcloud-id] .play-container .play:after {
	content: "Play audio";
}

/* favourite: heart circle over the top-right of the media.
   Same anchor, same JS (icon swaps to a cross + .pink-text when active).
   Not rendered on the showevent Shortlist/Alternatives tabs - those get
   the add-shortlist / remove-shortlist button instead, see below. */
.search-result a.favourite {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 110;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	color: #4a443f;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.search-result a.favourite:hover,
.search-result a.favourite:focus {
	color: #C06014;
	background: #fff;
}

.search-result a.favourite .glyphicon {
	font-size: 15px;
	top: 0;
}

.search-result a.favourite .favtext {
	display: none;
}

.search-result a.favourite.pink-text {
	background: #C06014;
	color: #fff !important;
}

.search-result a.favourite.pink-text:hover {
	background: #9a4a0f;
}

/* while a video/soundcloud iframe is up, keep the heart out of the player
   chrome (progressive enhancement - browsers without :has() keep it) */
.search-result:has(.video-player iframe) a.favourite {
	opacity: 0;
	pointer-events: none;
}

/* body */
.search-result .search-result-padding {
	padding: 16px 16px 10px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.search-result .search-result-padding > .listingResult,
.search-result .search-result-padding > .short-description {
	flex: none;
}

/* the meta wrapper is <div class="small margin-bottom-sm margin-top"> - the
   .margin-bottom-sm qualifier keeps this off .short-description (also .small) */
.search-result .search-result-padding > .small.margin-bottom-sm {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-top: 8px;
	margin-bottom: 0;
}

.search-result .listingResult h2 {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	height: auto;
	color: #191919;
	margin: 0 0 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.search-result .listingResult h2:hover {
	color: #C06014;
}

.search-result .short-description {
	height: auto;
	font-size: 13.5px;
	color: #4a443f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* category label: quiet uppercase kicker under the description */
.search-result .label.label-custom-search {
	display: block;
	width: fit-content;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 7px 0 0;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.88px;
	color: #8a7f75;
	text-shadow: none;
}

/* location: grey panel becomes a hairline-ruled row */
.search-result .location-flag-container {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	background: none;
	margin: 0;
	padding: 9px 0;
	border-top: 1px solid #f4f3f0;
	border-bottom: 1px solid #f4f3f0;
}

.search-result .location-flag-container .flag-icon {
	width: 28px !important;
	height: 21px !important;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* grid neutralises the template floats: flag spans both text rows and
   centres against them, text divs stack in column 2 */
.search-result .location-flag-container .pull-left {
	grid-row: 1 / 3;
	margin-right: 10px;
}

.search-result .location-flag-container .pull-left ~ div {
	grid-column: 2;
}

.search-result .location-flag-container h3 {
	font-size: 13.5px;
	font-weight: 700;
	color: #191919;
	margin: 0;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.search-result .location-flag-container .overflowHidden {
	font-size: 12.5px;
	color: #8a7f75;
	line-height: 1.4;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* the wrapper that holds location + meta rows */
.search-result .search-result-padding .margin-bottom-sm.margin-top {
	margin-top: 10px;
	margin-bottom: 0;
}

/* "Available in X" line (place searches): quiet grey confirmation; the
   glyphicon-ok classes stay in the markup for the legacy card contexts,
   here the glyph swaps for a thin SVG check in the same grey */
.search-result .search-result-padding .avail-row {
	margin-top: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.search-result .search-result-padding .avail-row p {
	margin: 0;
	padding: 8px 0 0;
	color: #8a7f75;
}

.search-result .search-result-padding .avail-row .glyphicon-ok {
	position: relative;
	top: 1px;
	width: 12px;
	height: 12px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l4 4 7-8' fill='none' stroke='%238a7f75' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.search-result .search-result-padding .avail-row .glyphicon-ok:before {
	content: none;
}

/* "Based X miles from Y" line (place searches with a distance): DISTANCEFROM
   token in Listing.pm's searchResult, one row below "Available in X" -
   same quiet-grey treatment, just swapping the icon for a pin. */
.search-result .search-result-padding .distance-row {
	margin-top: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.search-result .search-result-padding .distance-row p {
	margin: 0;
	padding: 8px 0 0;
	color: #8a7f75;
}

.search-result .search-result-padding .distance-row .glyphicon-map-marker {
	position: relative;
	top: 1px;
	font-size: 12px;
	color: #8a7f75;
}

/* meta rows: reviews + response time / price */
.search-result .search-result-padding p {
	font-size: 12.5px;
	color: #4a443f;
	margin: 0;
	padding: 3px 0 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* reviews row: stars + grey (count) on the left, "Replies in ~N hrs" pushed
   to the right edge; star strip sized by the .search-result .stars recipe
   in lmm.less (shared blue-stars.gif sprite at the 0.25 meta-row scale) */
.search-result .search-result-padding p.review-row {
	display: flex;
	align-items: center;
	gap: 5px;
	padding-top: 8px;
}

.search-result .search-result-padding .review-row .review-count {
	color: #8a7f75;
}

.search-result .search-result-padding .review-row .fast-response {
	margin-left: auto;
}

.search-result .search-result-padding p .glyphicon-flash {
	color: #C06014;
	font-size: 11px;
}

/* hide the credit-card glyph on the price row */
.search-result .search-result-padding p .glyphicon-credit-card {
	display: none;
}

/* price row: even rhythm with the rows above - the flex slack of tall cards
   now sits between the meta block and the buttons (like the mockup), see
   margin-top:auto on .btn-group-justified below */
.search-result .search-result-padding p.price-row {
	padding-top: 8px;
	font-size: 13px;
}

.search-result .search-result-padding .price-row .currency-code {
	font-weight: 400;
	font-size: 12.5px;
	color: #8a7f75;
}

.search-result .search-result-padding p .pink-text,
.search-result .search-result-padding p .brand-primary {
	font-weight: 700;
	font-size: 15px;
	color: #C06014;
}

.search-result .search-result-padding p a {
	color: #8a7f75;
}

.search-result .search-result-padding p a:hover {
	color: #C06014;
}

/* add/remove-shortlist button: shown instead of the favourite heart on the
   customer event page's Shortlist / Alternatives tabs (same FAVOURITEALTERNATIVE
   slot in result_template.html, see Listing.pm searchResult). It's an in-flow
   btn-block anchor rather than an overlay, sitting as the last row in the meta
   flex column. Fixed 8px top margin matches the existing row rhythm (review-row
   / price-row both use padding-top:8px) - no bottom margin, so the gap down to
   the Send enquiry / Visit listing row is the same 22px (10px search-result-padding
   + 12px btn-group-justified) as the plain favourite-heart card variant already uses. */
.search-result .add-shortlist,
.search-result .remove-shortlist {
	display: block;
	width: 100%;
	margin: 8px 0 0;
	border: 1px solid #e3dfd8;
	border-radius: 10px !important;
	background: #fff;
	color: #4a443f;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 10px 8px;
	line-height: 1.3;
	text-align: center;
	transition: background 150ms, border-color 150ms, color 150ms;
}

.search-result .add-shortlist:hover,
.search-result .add-shortlist:focus {
	background: #f7f5f1;
	border-color: #cfc8bc;
	color: #191919;
}

.search-result .remove-shortlist {
	border-color: #C06014;
	color: #C06014;
}

.search-result .remove-shortlist:hover,
.search-result .remove-shortlist:focus {
	background: #C06014;
	color: #fff;
}

/* buttons: justified table becomes a padded flex pair of pills; margin-top
   auto absorbs the equal-height slack so the meta rows above stay clustered.
   Left/right padding must match .search-result-padding's (16px / 14px at
   the mobile breakpoint below) so this row lines up with the content above
   it instead of sitting narrower. Top padding stays low (2px, on top of
   .search-result-padding's own 10px bottom padding = 12px total) to match
   the 8-10px rhythm every other row in the card uses - it was 12px here,
   stacking with that 10px to make a 22px gap under the shortlist button,
   nearly 3x every other gap in the card. */
.search-result .btn-group-justified {
	display: flex;
	gap: 10px;
	padding: 2px 16px 14px;
	margin-top: auto;
}

.search-result .btn-group-justified > .btn-group {
	display: block;
	float: none;
	width: auto;
	flex: 1;
	min-width: 0;
}

.search-result .btn-group-justified > .btn-group > a {
	display: block;
}

.search-result .btn-group-justified .btn {
	width: 100%;
	border-radius: 10px !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 10px 8px;
	line-height: 1.3;
	transition: background 150ms, border-color 150ms, color 150ms;
}

/* send enquiry: ghost */
.search-result .btn-group-justified .btn-primary {
	background: #fff;
	border: 1px solid #e3dfd8;
	color: #4a443f;
}

.search-result .btn-group-justified .btn-primary:hover {
	background: #f7f5f1;
	border-color: #cfc8bc;
	color: #191919;
}

/* visit listing: solid accent */
.search-result .btn-group-justified .btn-pink {
	border: 1px solid #C06014;
}

/* infinite-scroll skeletons inherit the card shell; round their shimmer */
.search-result.search-result-template {
	overflow: hidden;
}

.search-result.search-result-template .gradient {
	border-radius: 6px;
}

.search-result.search-result-template .gradient:first-child {
	border-radius: 0;
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	/* two buttons still fit side by side at 320px; tighten the chrome.
	   Left/right (14px) matches .search-result-padding below. Top padding
	   (2px, same reasoning as the desktop rule above) stacks with
	   .search-result-padding's 8px bottom padding here for a 10px total gap. */
	.search-result .btn-group-justified {
		gap: 8px;
		padding: 2px 14px 12px;
	}

	.search-result .btn-group-justified .btn {
		font-size: 11.5px;
		padding: 10px 6px;
	}

	.search-result .add-shortlist,
	.search-result .remove-shortlist {
		font-size: 11.5px;
		padding: 10px 6px;
	}

	.search-result .search-result-padding {
		padding: 14px 14px 8px;
	}
}