/* ==========================================================================
   search-v2.css - search results page redesign (2026-07)
   Loaded ONLY by htdocs/search_files/results_list.html, so selectors here
   are effectively scoped to /search/... results page CHROME (hero, filters
   form, pagination, prose bands). Pure restyle otherwise. The RESULT CARD
   treatment itself lives in search-card-v2.css - shared with /favourites and
   the myaccount showevent Shortlist/Alternatives tabs, so it isn't scoped to
   this page and is edited over there instead. Design language follows the
   2026 refresh (listing-v2.css): kickers, pills, warm cards, hairlines, site
   fonts.

   Palette (matches listing-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
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE SECTION GROUNDS
   One white page with hairline-separated bands; the hero closes with a
   warm gradient like the listing page.
   -------------------------------------------------------------------------- */

.page-section.lmm-main-dark {
	background: linear-gradient(180deg, #fff 0%, #faf5ed 100%);
}

/* trust bar reads as the tail of the hero band */
.header-ratings-outer-container {
	background: #faf5ed;
	border-top: none;
	border-bottom: 1px solid #ececea;
}

.page-section.location-section {
	background: #fff;
	border-bottom: 1px solid #ececea;
	padding-top: 18px;
	padding-bottom: 4px;
}

/* results band: was light grey, cards now carry their own borders */
.page-section.lmm-main-light {
	background-color: #fff;
}

/* start a new search */
.page-section.lmm-secondary {
	background-color: #fff;
	border-top: 1px solid #ececea;
}

/* need help + find-near-you + also-viewed / worldwide categories */
.page-section.lmm-extra-content {
	background-color: #f7f5f1;
	border-top: 1px solid #ececea;
}

/* about prose band */
.page-section.template-content {
	background-color: #fff;
}

/* cost band (class is also used by the JS-injected venues band) */
.page-section.blue-gradient-bg {
	background-color: #faf5ed;
	border-top: 1px solid #ececea;
	border-bottom: 1px solid #ececea;
}

/* reviews band (was dark grey) */
.page-section.grey-featured {
	background-color: #f7f5f1;
}


/* --------------------------------------------------------------------------
   2. HERO - title, intro, read more
   -------------------------------------------------------------------------- */

#home-page-container h1.pageTitleSearch,
h1.pageTitleSearch {
	color: #191919;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.search-results-header .intro-text {
	color: #4a443f !important;
	font-size: 16px;
	line-height: 1.5;
	max-height: 3em;	/* 2 lines at 1.5 - the read-more JS mechanic is unchanged */
}

.search-results-header .intro-text.is-expanded {
	max-height: 2000px;
}

.search-results-header .intro-text b,
.search-results-header .intro-text strong {
	color: #191919;
}

/* the read-more slot is a reserved band under the intro and the button is
   absolutely positioned into it - so whichever script toggles it (the
   pre-paint decider in results_list.html, or the search_init backstop
   after a font swap re-wraps the intro) the page below can never shift.
   The band only collapses on the user's own expand click, in step with
   the max-height reveal (non-:has browsers keep the band - no breakage) */
.search-results-header {
	position: relative;
	padding-bottom: 24px;
	transition: padding-bottom 0.5s ease-in-out;	/* matches .intro-text max-height */
}

.search-results-header:has(.intro-text.is-expanded) {
	padding-bottom: 0;
}

.search-results-header #read-more-btn {
	position: absolute;
	left: 0;
	bottom: 0;
	color: #C06014;
	font-weight: 700;
	padding-left: 0;
}


/* --------------------------------------------------------------------------
   3. TRUST BAR
   -------------------------------------------------------------------------- */

.header-ratings-container {
	color: #4a443f;
	font-size: 13.5px;
	margin-top: 0;
	margin-bottom: 0;
}

.header-ratings-outer-container .page-section {
	padding: 9px 0;
}

.header-ratings-container b {
	color: #191919;
}

.header-ratings-container a {
	color: #C06014;
}


/* --------------------------------------------------------------------------
   4. FILTERS FORM (Category / Available in / Sort)
   -------------------------------------------------------------------------- */

/* 15px of air above the labels and below the inputs - the section padding
   IS the spacing (same pattern as the xs block in section 14, which stays
   at 12px); form + form-group margins are zeroed on desktop so they don't
   stack under the section padding */
.page-section.location-section {
	padding-top: 15px;
	padding-bottom: 15px;
}

@media (min-width: 768px) {
	.advanced-search-page form,
	.advanced-search-page .form-group {
		margin-bottom: 0;
	}
}

/* the three top-bar fields only - the filters modal lives inside the same
   form and its .checkbox labels must keep their normal case.
   display:block: as an inline-block the label rides the form-group's 16px
   baseline strut, adding ~5px of phantom space above it - which made the
   15px section padding read as 20 */
.advanced-search-page .form-group > label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #4a443f;
	margin-bottom: 7px;
}

/* the legacy .autocomplete-search-box under the place input is permanently
   empty on this page (the venue picker renders elsewhere) - its
   margin-top-v-sm made the middle column 5px taller than the others and
   stretched the band below the inputs (was xs-only, section 14) */
.advanced-search-page .autocomplete-search-box:empty {
	margin-top: 0;
}

/* bootstrap-icons here, not glyphicons - the mockup's thin-line set, sized
   to read level with the 11px uppercase titles */
.advanced-search-page .form-group > label [class^="bi-"] {
	color: #8a7f75;
	font-size: 15px;
	vertical-align: -0.18em;
}

.advanced-search-page .form-control {
	background-color: #f7f5f1;
	border: 1px solid #ececea;
	border-radius: 10px;
	box-shadow: none;
	height: 40px;
	font-size: 14px;
	color: #191919;
	transition: border-color 150ms, background-color 150ms;
}

.advanced-search-page .form-control:hover {
	border-color: #d8d2c8;
}

.advanced-search-page .form-control:focus {
	border-color: #C06014;
	background-color: #fff;
	box-shadow: none;
}

/* Category picker gets readonly="readonly" on mobile (ai_autocomplete.js) so
   tapping it opens the fullscreen picker overlay instead of the native
   keyboard. The global input.auto-complete-entry[readonly] rule (lmm.less)
   forces a white background there to look tappable rather than disabled -
   right for its other homes (header/help/homepage pickers), but it must
   match the rest of this filter row instead. */
.advanced-search-page input.auto-complete-entry[readonly] {
	background-color: #f7f5f1;
	border-color: #ececea;
}

/* sort select: macOS Chrome re-rasterises a native select when hover
   restyles it and the option text hops vertically - pin one rendering
   mode and draw our own chevron so both states share identical metrics */
.advanced-search-page select.form-control {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234a443f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 34px;
	/* appearance:none drops the UA's own vertical centring - fill the
	   28px content box (40 - 2x1 border - 2x5 padding) so the text centres */
	line-height: 28px;
}

/* selects have no ::placeholder - while the empty "Please choose..." option
   is selected, match the inputs' #999 placeholder grey; a real pick restores
   the base ink via the rule above (non-:has browsers just stay dark) */
.advanced-search-page select.form-control:has(option[value=""]:checked) {
	color: #999;
}

/* the venue-picker dropdown anchors INSIDE the bordered group, where
   top:40px lands on the group's 1px bottom border + corner rounding -
   1px down = flush under the border, identical to the category picker */
.advanced-search-page .search-area .input-group .ai-autocomplete-dropdown-picker {
	margin-top: 1px;
}

.advanced-search-page .search-area .input-group .ai-autocomplete-dropdown-picker.ai-autocomplete-dropdown-flip-up {
	margin-top: 0;
	margin-bottom: 1px;
}

/* category picker rows reuse the site-search supplier-row styling whose 17px
   titles truncate in the narrow filter column - shrink them HERE only.
   :not(-place) keeps the Available-in rows on their own sizing, and the
   .advanced-search-page scope (this stylesheet loads only on results_list)
   leaves every other dropdown on the site untouched */
.advanced-search-page .ai-autocomplete-dropdown-picker .ai-autocomplete-item:not(.ai-autocomplete-item-picker-place) .ai-autocomplete-item-title {
	font-size: 15px;
}

/* "Available in": the border lives on the group, not the parts - the input
   sits borderless inside and the globe addon separates with a single
   hairline (mockup's wb-select-loc treatment) */
.advanced-search-page .search-area .input-group {
	background-color: #f7f5f1;
	border: 1px solid #ececea;
	border-radius: 10px;
	/* NO overflow:hidden here - the venue picker appends its dropdown INSIDE
	   this group (ai_autocomplete anchors to the styled container), so any
	   clipping renders the whole dropdown invisible. The rounded look holds
	   without it: the group's own background self-clips to its border-radius
	   and the input/addon inside are transparent. */
	transition: border-color 150ms, background-color 150ms;
}

.advanced-search-page .search-area .input-group:hover {
	border-color: #d8d2c8;
}

.advanced-search-page .search-area .input-group:focus-within {
	border-color: #C06014;
	background-color: #fff;
}

.advanced-search-page .search-area .input-group .form-control,
.advanced-search-page .search-area .input-group .form-control:focus,
.advanced-search-page .search-area .input-group .form-control:hover {
	background: transparent;
	border: none;
	height: 38px;
	border-radius: 0;
}

.advanced-search-page .input-group-addon {
	background: transparent;
	border: none;
	border-left: 1px solid #ececea;
	border-radius: 0 !important;
	color: #8a7f75;
}

/* keep the two floating clear-x buttons vertically centred (inline styles
   already position them; just tone the colour) */
.clear-search-sub-category-icon .glyphicon,
.clear-search-place-name-icon .glyphicon {
	color: #8a7f75;
}


/* --------------------------------------------------------------------------
   5. CRUMB BAR + FILTER CHIPS
   (the footer also contains a .crumbtrail - scope to the results band)
   -------------------------------------------------------------------------- */

.lmm-main-light .crumbtrail {
	font-size: 13px;
	color: #8a7f75;
}

.lmm-main-light .crumbtrail a {
	color: #4a443f;
}

.lmm-main-light .crumbtrail a:hover {
	color: #C06014;
}

/* FILTERS + sort buttons: deliberately NOT restyled - they keep the compact
   live-site treatment from search-results.css (Adam 2026-07-23) */

/* applied-filter chips */
.filters-list-container .remove-filter-button {
	background-color: #f7f5f1;
	border: 1px solid #ececea;
	color: #4a443f;
}

.filters-list-container .remove-filter-button:hover {
	background-color: #f1ede5;
}


/* --------------------------------------------------------------------------
   6. RESULT CARDS
   Moved to search-card-v2.css (2026-07-24) so the card treatment can be
   shared with /favourites and the myaccount showevent Shortlist/Alternatives
   tabs, which don't load this page-chrome stylesheet. That file also carries
   the add-shortlist/remove-shortlist button and the distance-badge styling
   those two tabs need. Load order in results_list.html: search-card-v2.css
   then search-v2.css.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   7. PAGINATION + VIEWING WHAT
   -------------------------------------------------------------------------- */

.pagination-container .viewing-what {
	font-size: 13px;
	color: #8a7f75;
}

.navigation-container .btn {
	min-width: 40px;
	padding: 9px 12px;
	margin: 2px 3px;
	font-size: 14px;
	line-height: 1.3;
	border-radius: 10px !important;
	border: 1px solid #ececea;
	background: #fff;
	color: #4a443f;
	box-shadow: none;
}

.navigation-container .btn.btn-default:hover {
	border-color: #C06014;
	color: #C06014;
	background: #fff;
}

/* current page */
.navigation-container .btn.btn-primary {
	background: #191919;
	border-color: #191919;
	color: #fff;
}

/* prev / next */
.navigation-container .btn.btn-pink {
	background: #C06014;
	border-color: #C06014;
	color: #fff;
	border-radius: 999px !important;
	padding: 9px 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.navigation-container .btn.btn-pink:hover {
	background: #9a4a0f;
	border-color: #9a4a0f;
}

.navigation-container .btn.btn-pink[disabled] {
	opacity: 0.35;
}


/* --------------------------------------------------------------------------
   8. START A NEW SEARCH
   -------------------------------------------------------------------------- */

.lmm-secondary h2.largeBlue {
	color: #191919;
	letter-spacing: -0.01em;
}

.lmm-secondary .listingsSearch.advancedSearch {
	border: 1px solid #ececea !important;
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(60, 40, 20, 0.05);
}

.lmm-secondary .advancedSearchButton {
	border-radius: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

/* xs faux search input */
.lmm-secondary .site-search-faux-input {
	border: 1px solid #ececea;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(60, 40, 20, 0.05);
}


/* --------------------------------------------------------------------------
   9. NEED HELP / FIND-NEAR-YOU / ALSO VIEWED / WORLDWIDE CATEGORIES
   -------------------------------------------------------------------------- */

.largeBlue {
	color: #191919;
	letter-spacing: -0.01em;
}

.lmm-extra-content a {
	color: #C06014;
}

.lmm-extra-content a:hover {
	color: #9a4a0f;
}

/* the country rows on top-level pages carry small flags */
#table-of-links .flag-icon {
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}


/* --------------------------------------------------------------------------
   10. ABOUT PROSE
   -------------------------------------------------------------------------- */

.template-content {
	font-size: 16px;
	line-height: 1.65;
	color: #4a443f;
}

.template-content h2 {
	color: #191919;
	letter-spacing: -0.01em;
	margin-bottom: 18px;
}

.template-content h3,
.template-content b:not(:first-child) {
	color: #191919;
}

.template-content .col-xs-12 > div > h3,
.template-content h3 {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 26px 0 10px;
	padding-top: 22px;
	border-top: 1px solid #ececea;
}

.template-content a {
	color: #C06014;
}


/* --------------------------------------------------------------------------
   11. COST CARDS (+ the JS venues band shares .blue-gradient-bg)
   -------------------------------------------------------------------------- */

.blue-gradient-bg h2.largeBlue {
	color: #191919;
}

.blue-gradient-bg .panel.panel-default {
	border: 1px solid #ececea;
	border-radius: 16px;
	box-shadow: none;
}

.blue-gradient-bg .panel.panel-default h6 {
	font-size: 16px;
	font-weight: 700;
	color: #191919;
}

.blue-gradient-bg .panel.panel-default .small {
	color: #8a7f75;
}

.blue-gradient-bg .panel.panel-default .pink-text b {
	font-size: 26px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* venues: tone the oversized house glyph */
#search-page-venues .glyphicon-home {
	font-size: 56px !important;
	color: #C06014;
}


/* --------------------------------------------------------------------------
   12. REVIEWS
   -------------------------------------------------------------------------- */

.grey-featured h2.largeBlue {
	color: #191919;
}

#reviews-container .review {
	background: #fff;
	border: 1px solid #ececea;
	border-radius: 16px;
	padding: 22px 20px;
}

#reviews-container .review:hover {
	border-color: #cfc8bc;
}

#reviews-container .photo {
	width: 120px;
	height: 120px;
}


/* --------------------------------------------------------------------------
   13. FAQS
   -------------------------------------------------------------------------- */

#contact-faqs-accordion > hr {
	display: none;
}

#contact-faqs-accordion .panel.faq {
	border: none;
	border-bottom: 1px solid #ececea;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	background: transparent;
}

#contact-faqs-accordion .panel.faq:first-of-type {
	border-top: 1px solid #ececea;
}

#contact-faqs-accordion .panel.faq .panel-heading {
	background: transparent;
	border: none;
	padding: 4px 2px;
}

#contact-faqs-accordion .panel.faq .question {
	font-size: 16px;
	font-weight: 700;
	color: #191919;
	padding: 14px 0;
}

#contact-faqs-accordion .panel.faq .panel-title a:hover .question {
	color: #C06014;
}

#contact-faqs-accordion .panel.faq .answer {
	font-size: 15px;
	line-height: 1.6;
	color: #4a443f;
	max-width: 860px;
}

#contact-faqs-accordion .glyphicon-chevron-down-custom span,
#contact-faqs-accordion .glyphicon-chevron-up-custom span {
	background-color: #C06014;
}


/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.search-results-header .intro-text {
		font-size: 15px;
	}

	.page-section.location-section {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	/* gap under the location box mirrors the 12px above the category box:
	   the section padding is the spacing, not form/form-group margins (nor
	   the idle autocomplete dropdown box, which keeps its margin only once
	   suggestions render into it) */
	.advanced-search-page form,
	.advanced-search-page .col-sm-6 .form-group {
		margin-bottom: 0;
	}

	.advanced-search-page .autocomplete-search-box:empty {
		margin-top: 0;
	}

	.advanced-search-page .form-control {
		height: 42px;
	}

	/* card responsive rules (btn-group-justified / search-result-padding)
	   moved to search-card-v2.css alongside the rest of the card treatment */

	.navigation-container .btn {
		min-width: 36px;
		padding: 8px 10px;
	}
}