/* ==========================================================================
   search-page-v2.css - /search.html, the advanced search FORM page (2026-09)
   Loaded ONLY by htdocs/search_files/search.html, and every rule is scoped
   under body.search-page-v2 as well. Brings the page onto the homepage /
   results-page design language: warm hero band, kicker + big title, a white
   rounded form card with warm fields, icon cards like the homepage features,
   photo cards and pill buttons. The results page chrome is search-v2.css -
   a different page, not loaded here.

   Palette (as search-v2.css / listing-v2.css):
     accent        #C06014   hover #9a4a0f
     ink           #191919
     secondary     #4a443f
     muted         #8a7f75
     hairline      #ececea   card hairline #e3dfd8
     warm ground   #faf5ed   soft #f7f5f1
     icon circle   #f9e3d2   (the homepage .home-icons tint)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. PAGE SECTION GROUNDS
   -------------------------------------------------------------------------- */

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

.search-page-v2 .page-section.lmm-main-light,
.search-page-v2 .page-section.lmm-secondary {
	background: #fff;
}


/* --------------------------------------------------------------------------
   2. HERO - kicker, title, subtitle
   -------------------------------------------------------------------------- */

.search-page-v2 .search-page-hero {
	padding: 26px 0 30px;
}

.search-page-v2 .search-page-kicker {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #C06014;
	margin-bottom: 10px;
}

.search-page-v2 h1.pageTitleSearch {
	margin: 0;
	font-size: 56px;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #191919;
}

.search-page-v2 .search-page-subtitle {
	margin-top: 12px;
	font-size: 18px;
	line-height: 1.5;
	color: #4a443f;
}


/* --------------------------------------------------------------------------
   3. FORM CARD
   -------------------------------------------------------------------------- */

.search-page-v2 .search-page-card {
	background: #fff;
	border: 1px solid #e3dfd8;
	border-radius: 20px;
	padding: 28px 28px 30px;
	box-shadow: 0 18px 40px rgba(60, 40, 20, 0.07);
	margin-bottom: 24px;
}

.search-page-v2 .search-page-card .form-group {
	margin-bottom: 20px;
}

/* the place input sits in a nested form-group of its own */
.search-page-v2 .search-page-card .form-group .form-group {
	margin-bottom: 0;
}

.search-page-v2 .search-page-card label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #4a443f;
	margin-bottom: 8px;
}

.search-page-v2 .search-page-optional {
	font-size: 12px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: #8a7f75;
}

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

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

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

/* the place picker marks its input readonly on phones so a tap opens the
   fullscreen picker; lmm.less paints readonly auto-complete inputs white -
   keep it matching the other fields here */
.search-page-v2 .search-page-card input.auto-complete-entry[readonly] {
	background-color: #f7f5f1;
	border-color: #ececea;
}

/* native selects: one rendering mode and our own chevron (same treatment
   as the results page filters) so hover doesn't make the text hop */
.search-page-v2 .search-page-card 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 vertical centring - fill the 32px
	   content box (44 - 2x1 border - 2x5 input-sm padding) */
	line-height: 32px;
}

/* "Suppliers with" tag picker (bootstrap-select): the wrapper carries
   .form-control too, so strip its box and style the toggle as a field */
.search-page-v2 .search-page-card .bootstrap-select.form-control {
	background: transparent;
	border: none;
	height: auto;
	padding: 0;
}

.search-page-v2 .search-page-card .bootstrap-select > .dropdown-toggle {
	height: 44px;
	padding-left: 14px;
	background: #f7f5f1;
	border: 1px solid #ececea;
	border-radius: 10px;
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
	color: #191919;
	transition: border-color 150ms, background-color 150ms;
}

.search-page-v2 .search-page-card .bootstrap-select > .dropdown-toggle:hover {
	border-color: #d8d2c8;
}

.search-page-v2 .search-page-card .bootstrap-select.open > .dropdown-toggle,
.search-page-v2 .search-page-card .bootstrap-select > .dropdown-toggle:focus {
	border-color: #C06014;
	background-color: #fff;	/* -color: the shorthand would wipe the chevron image */
	outline: none !important;
}

/* the OUTER menu only (the child combinator matters): bootstrap-select nests a
   second ul.dropdown-menu.inner inside it, and an unscoped rule gave that list
   its own border, radius and shadow - a rounded box inside the rounded box.
   padding 0: bootstrap's 5px bottom padding left a strip under the list. */
.search-page-v2 .search-page-card .bootstrap-select > .dropdown-menu {
	padding: 0;
	overflow: hidden;
	border: 1px solid #ececea;
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.search-page-v2 .search-page-card .bootstrap-select .dropdown-menu.inner {
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 4px 0;
}

/* "Choose tags..." header: bootstrap's popover title carries 5px corners and
   a grey fill - square it off against the menu's own radius */
.search-page-v2 .search-page-card .bootstrap-select .popover-title {
	border-radius: 0;
	background: #f7f5f1;
	border-bottom: 1px solid #ececea;
	font-size: 14px;
	color: #4a443f;
}

/* show-menu-arrow draws a notch on the toggle pointing at the menu - it read
   as a stray arrow against the detached rounded menu */
.search-page-v2 .search-page-card .bootstrap-select.show-menu-arrow .dropdown-toggle:before,
.search-page-v2 .search-page-card .bootstrap-select.show-menu-arrow .dropdown-toggle:after {
	display: none !important;
}

/* the toggle's up-caret becomes the same drawn chevron as the native selects */
.search-page-v2 .search-page-card .bootstrap-select > .dropdown-toggle .caret {
	display: none;
}

.search-page-v2 .search-page-card .bootstrap-select > .dropdown-toggle {
	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;
}

.search-page-v2 .search-page-submit {
	display: block;
	width: 100%;
	height: 52px;
	margin-top: 4px;
	border-radius: 999px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.search-page-v2 .search-page-submit .glyphicon {
	font-size: 15px;
	margin-right: 6px;
	top: 2px;
}


/* --------------------------------------------------------------------------
   4. SIDE CARDS - homepage feature icon + text + pill
   -------------------------------------------------------------------------- */

.search-page-v2 .search-page-aside-card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: #fff;
	border: 1px solid #e3dfd8;
	border-radius: 20px;
	padding: 24px;
	margin-bottom: 20px;
}

.search-page-v2 .search-page-aside-icon {
	flex: 0 0 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f9e3d2;
	color: #C06014;
	font-size: 19px;
}

.search-page-v2 .search-page-aside-body {
	min-width: 0;
}

.search-page-v2 .search-page-aside-card h2 {
	margin: 2px 0 6px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #191919;
}

.search-page-v2 .search-page-aside-card p {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.5;
	color: #4a443f;
}

/* nowrap: in the 360px side card "Let us suggest suppliers" wrapped its
   chevron onto a second line */
.search-page-v2 .search-page-pill {
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.search-page-v2 .search-page-pill .glyphicon {
	font-size: 10px;
	margin-left: 4px;
	top: 0;
}

.search-page-v2 .search-page-pill-outline {
	background: #fff;
	border: 1px solid #d8d2c8;
	color: #191919;
}

.search-page-v2 .search-page-pill-outline:hover,
.search-page-v2 .search-page-pill-outline:focus {
	background: #fff;
	border-color: #C06014;
	color: #C06014;
}


/* --------------------------------------------------------------------------
   5. POPULAR SEARCHES - photo cards
   -------------------------------------------------------------------------- */

.search-page-v2 .search-page-popular {
	padding: 48px 0 16px;
}

.search-page-v2 .search-page-popular h2.largeBlue {
	margin: 0 0 8px;
	color: #191919;
	letter-spacing: -0.01em;
}

.search-page-v2 .search-page-popular-intro {
	margin-bottom: 26px;
	font-size: 16px;
	color: #4a443f;
}

/* flex so the three cards share one height whatever their text length */
.search-page-v2 .search-page-popular-row {
	display: flex;
	flex-wrap: wrap;
}

.search-page-v2 .search-page-popular-row > [class*="col-"] {
	margin-bottom: 30px;
}

.search-page-v2 .search-page-popular-card {
	display: block;
	height: 100%;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e3dfd8;
	border-radius: 20px;
	color: #191919;
	transition: box-shadow 200ms, transform 200ms;
}

.search-page-v2 .search-page-popular-card:hover,
.search-page-v2 .search-page-popular-card:focus {
	color: #191919;
	text-decoration: none;
	box-shadow: 0 18px 40px rgba(60, 40, 20, 0.1);
	transform: translateY(-2px);
}

.search-page-v2 .search-page-popular-image {
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
}

.search-page-v2 .search-page-popular-body {
	padding: 18px 20px 22px;
}

.search-page-v2 .search-page-popular-body .search-page-kicker {
	margin-bottom: 6px;
	font-size: 11px;
}

.search-page-v2 .search-page-popular-card h3 {
	margin: 0 0 6px;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.search-page-v2 .search-page-popular-text {
	margin-bottom: 14px;
	font-size: 15px;
	color: #4a443f;
}

.search-page-v2 .search-page-popular-link {
	font-size: 14px;
	font-weight: 700;
	color: #C06014;
	transition: color 150ms;
}

/* the same geometric chevron as the listing page's related searches */
.search-page-v2 .search-page-popular-link:after {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	vertical-align: 1px;
}

.search-page-v2 .search-page-popular-card:hover .search-page-popular-link {
	color: #9a4a0f;
}


/* --------------------------------------------------------------------------
   6. JOIN BAND
   -------------------------------------------------------------------------- */

.search-page-v2 .search-page-join {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px 24px;
	margin: 8px 0 48px;
	padding: 32px 36px;
	background: #faf5ed;
	border-radius: 20px;
}

.search-page-v2 .search-page-join h2 {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #191919;
}

.search-page-v2 .search-page-join p {
	margin: 0;
	font-size: 16px;
	color: #4a443f;
}

.search-page-v2 .search-page-join-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}


/* --------------------------------------------------------------------------
   7. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
	.search-page-v2 h1.pageTitleSearch {
		font-size: 46px;
	}
}

@media (max-width: 767px) {
	.search-page-v2 .search-page-hero {
		padding: 16px 0 22px;
	}

	.search-page-v2 h1.pageTitleSearch {
		font-size: 38px;
	}

	.search-page-v2 .search-page-subtitle {
		font-size: 16px;
	}

	.search-page-v2 .search-page-card {
		padding: 20px 16px 22px;
		border-radius: 16px;
	}

	.search-page-v2 .search-page-aside-card {
		padding: 20px 16px;
		border-radius: 16px;
	}

	/* ONE 24px rhythm on phones between every stacked block - measured
	   before: form->help card 24, help card->band end 56, band->heading 32,
	   card->card 30, last card->join band 54 */
	.search-page-v2 .page-section.lmm-main-dark {
		padding-bottom: 0;	/* the last side card's own 24px margin closes the band */
	}

	.search-page-v2 .search-page-aside-card {
		margin-bottom: 24px;
	}

	.search-page-v2 .search-page-popular {
		padding: 24px 0 0;
	}

	.search-page-v2 .search-page-popular-row > [class*="col-"] {
		margin-bottom: 24px;
	}

	.search-page-v2 .search-page-join {
		padding: 24px 20px;
		margin: 0 0 24px;
	}
}