/* ==========================================================================
   WTB Page — Find Near Me / Where To Buy
   Mirrors SFCC's store-locator-harmony.css (app_harmony cartridge).

   Rule: only override COLOR / TYPOGRAPHY / BORDER on BrandSDK-managed elements.
   Never override display / flex / position on #wtb-overlay or its children —
   BrandSDK controls show/hide via JS and we must not interfere.
   ========================================================================== */

/* ---- Page chrome ---- */

.wtb-page__content {
	max-width: 1200px;
}

.wtb-page__content h1 {
	text-align: center;
}

/* ---- BrandSDK wrapper: form (left) + content area (right) ---- */

.b-store_locator {
	padding: 0;
	margin: 0;
}

.b-store_locator-wrapper {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	position: relative;
	margin-bottom: 48px;
}

/* 1 px vertical separator between form and empty content area */
.b-store_locator-wrapper::before {
	content: '';
	position: absolute;
	left: calc(420px + 20px);
	top: 0;
	height: 100%;
	width: 1px;
	background: #efefef;
}

.b-store_locator-form {
	flex: 0 0 420px;
	max-width: 420px;
}

.b-store_locator-content {
	flex: 1;
	min-height: 1px;
}

/* ---- Select dropdowns ---- */

.f-input_select {
	position: relative;
	margin: 20px 0;
}

/* Custom caret */
.f-input_select::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid #2D292B;
}

.f-input_select-field {
	width: 100%;
	height: 48px;
	padding: 0 40px 0 14px;
	border: 1px solid #d0d0d0;
	border-radius: 0;
	background: #fff;
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	color: #2D292B;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.f-input_select-field:focus {
	outline: none;
	border-color: #4F729A;
}

/* ---- Text input (zip code) ---- */

.f-input_text {
	margin: 20px 0;
}

.f-input_text-field {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid #d0d0d0;
	border-radius: 0;
	background: #fff;
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	color: #2D292B;
	box-sizing: border-box;
}

.f-input_text-field::placeholder {
	color: #999;
}

.f-input_text-field:focus {
	outline: none;
	border-color: #4F729A;
}

/* ---- Radio group (In Stores / Dining Out) ---- */

#acctGroup {
	margin: 20px 0;
}

#acctGroup fieldset {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 24px;
}

.acctGrpWrapper {
	display: flex;
	align-items: center;
	gap: 8px;
}

.f-input_radio-field {
	width: 18px;
	height: 18px;
	accent-color: #4F729A;
	cursor: pointer;
	flex-shrink: 0;
	margin: 0;
}

.f-input_radio-label {
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	color: #2D292B;
	cursor: pointer;
}

/* ---- Submit button ---- */

.b-store_locator-submit_wrapper {
	margin-top: 24px;
}

.b-store_locator-submit {
	display: block;
	width: 100%;
	height: 48px;
	background: #4F729A;
	color: #fff;
	border: none;
	font-family: 'Saira ExtraCondensed', 'Saira Extra Condensed', sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}

.b-store_locator-submit:hover:not(:disabled) {
	background: #2D292B;
}

.b-store_locator-submit:disabled {
	background: #a0b5c8;
	cursor: not-allowed;
}

/* ---- Validation ---- */

.parsley-errors-list {
	list-style: none;
	padding: 0;
	margin: 6px 0 0;
	color: #ca1e36;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}

input.parsley-error,
select.parsley-error {
	border-color: #ca1e36;
}

/* Parsley v2 (bundled in BrandSDK) adds .parsley-success with a mint green
   background/text — override to keep fields looking neutral when valid. */
input.parsley-success,
select.parsley-success,
textarea.parsley-success {
	background-color: #fff !important;
	color: #2D292B !important;
	border-color: #d0d0d0 !important;
}

/* ---- WTB Results Overlay ---- */
/*
 * BrandSDK injects #wtb-overlay into <body> and controls display via JS.
 * We only override COLORS and TYPOGRAPHY — never display/flex/position.
 */

#wtb-overlay {
	background: #fff;
}

/*
 * BrandSDK injects its own <style> tag at runtime, using #wtb-overlay #closeBtn
 * selectors (specificity 0,2,0) that also appear later in the cascade than our
 * linked stylesheet. We must use the same #wtb-overlay prefix AND !important on
 * appearance properties where BrandSDK sets conflicting values.
 */

/* Close button — matches SFCC: flex row, 60px tall, text + close icon after */
#wtb-overlay #closeBtn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 60px !important;
	background: #fafafa !important;
	border: 0 !important;
	border-bottom: 1px solid #efefef !important;
	font-family: 'Saira ExtraCondensed', 'Saira Extra Condensed', sans-serif;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	color: #2D292B !important;
	text-shadow: none !important;
	cursor: pointer;
}

/* Close × icon (SFCC uses SVG mask; we use Unicode ✕ at matching size) */
#wtb-overlay #closeBtn::after {
	content: '\2715';
	display: inline-block;
	font-size: 14px;
	line-height: 14px;
	margin-left: 10px;
	font-family: sans-serif;
}

#wtb-overlay #closeBtn:hover {
	background: #f0f0f0 !important;
}

/* Listings panel — must match BrandSDK's injected (0,3,0) specificity:
   #wtb-overlay #overlayContent #resultListings { width: 250px } */
#wtb-overlay #overlayContent #resultListings {
	background: #fff;
	box-shadow: none !important;
	width: 495px;
}

/* Hide WTB logo and tab bar */
#wtb-overlay #resultItemsTab,
#wtbLogo {
	display: none;
}

/* Store listings */
#wtb-overlay #overlayContent #listings {
	border-radius: 0;
	box-shadow: none;
	height: 100%;
	margin: 0;
	padding: 0 15px 0 30px;
	width: 100%;
}

.listingItem {
	display: flex;
	align-items: center;
	padding: 20px 0 15px 20px;
	border-color: #efefef;
}

.listingItem:hover {
	background: #efefef;
}

.listingItem:hover .acctInfo {
	font-weight: 700;
}

.listingItem .acctInfo {
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.2px;
	color: #2D292B;
	width: 100%;
}

.listingItem .marker {
	margin-right: 20px;
	flex-shrink: 0;
}

/* No-results / error message */
#wtb-overlay #noData {
	font-family: 'Raleway', sans-serif !important;
	font-size: 18px !important;
	line-height: 1.5 !important;
	color: #ca1e36 !important;
	max-width: 680px;
	margin: 48px auto 0 !important;
	text-align: center;
}

/* Mobile map/list toggle — color only, layout set by BrandSDK */
#wtb-overlay #mobileNavWrapper {
	background: #fff;
	border-bottom: 1px solid #efefef;
}

#wtb-overlay #mapNav,
#wtb-overlay #acctNav {
	background: #fff !important;
	border: none !important;
	color: #757575 !important;
	font-family: 'Saira ExtraCondensed', 'Saira Extra Condensed', sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	height: 70px;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	cursor: pointer;
}

#wtb-overlay #mapNav[data-acct-nav-clicked="true"],
#wtb-overlay #acctNav[data-acct-nav-clicked="true"] {
	color: #2D292B !important;
}

#wtb-overlay #mapNav {
	text-align: right;
}

#wtb-overlay #acctNav {
	text-align: left;
}

/* ---- Google Maps popup ---- */

.gm-style .gm-style-iw-c {
	border-radius: 0 !important;
	border: 1px solid #757575 !important;
	padding: 20px !important;
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.gm-style .gm-style-iw-c .infoWinHeading {
	font-weight: 400;
}

.gm-style .gm-style-iw-t::after {
	display: none;
}

.gm-style .gm-style-iw-d {
	max-height: none !important;
	min-width: 180px;
	overflow: auto !important;
}

.gm-ui-hover-effect {
	height: auto !important;
	right: 10px !important;
	top: 10px !important;
	width: auto !important;
}

.gm-ui-hover-effect img {
	margin: 0 !important;
}

/* ---- Responsive ---- */

@media screen and (min-width: 769px) and (max-width: 1199px) {
	#wtb-overlay #overlayContent #resultListings {
		width: 50%;
	}
}

@media (max-width: 768px) {
	.b-store_locator-wrapper {
		flex-direction: column;
		gap: 32px;
	}

	.b-store_locator-wrapper::before {
		left: 0;
		top: auto;
		bottom: 0;
		height: 1px;
		width: 100%;
	}

	.b-store_locator-form {
		flex: none;
		width: 100%;
		max-width: 100%;
	}

	.b-store_locator-submit {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}

	#wtb-overlay #overlayContent #resultListings {
		width: 100%;
	}

	#wtb-overlay #overlayContent #listings {
		padding: 0 15px;
	}

	#wtb-overlay #noData {
		padding: 0 15px;
	}
}