/* WatchTime Store Locator — front-end styles.
   Mirrors store-locator.png: centered "LOCATE A STORE" title with a rule,
   a pincode search box + "Locate Store Near" button, then a full-width map. */

.wt-sl-section {
	padding-top: 48px;
	padding-bottom: 56px;
	/* Offset for the "Locate Store" in-page anchor jump so the heading isn't
	   flush against the top of the viewport (and clears any sticky header). */
	scroll-margin-top: 100px;
}

.wt-sl-heading {
	text-align: center;
	margin-bottom: 28px;
}

/* Matched to live's "Locate A Store" heading, measured on
   www.watchtime.in/brand/33/chopard__watches across nine widths (§67).

   Live is NOT a smooth ramp - it steps, and it is bold, not regular:

     < 768px   28px / 700
     768-991   48px / 700
     >= 992    42px / 700

   The old `clamp(28px, 4vw, 44px)` with `font-weight: 400` happened to agree at the
   narrow end and nowhere else: it topped out at 44px against live's 42px, was regular
   weight throughout, and drifted continuously between the two instead of stepping.
   Explicit breakpoints are used rather than a clamp precisely because live steps down
   again at 992px, which no single clamp can express.

   This is the plugin's own stylesheet, so it follows the locator wherever it renders.
   Today that is brand pages only - the `[wt_store_locator]` shortcode is used by no
   post, and the theme's one call site is `taxonomy-brand.php`. */
.wt-sl-heading h2 {
	font-size: 28px;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 14px;
	font-weight: 700;
	/* Explicit so a theme `h2` rule can never left-align it (belt-and-braces;
	   the .wt-sl-heading container already centers it). */
	text-align: center;
}

@media (min-width: 768px) {
	.wt-sl-heading h2 {
		font-size: 48px;
	}
}

@media (min-width: 992px) {
	.wt-sl-heading h2 {
		font-size: 42px;
	}
}

.wt-sl-heading::after {
	content: "";
	display: block;
	width: min(520px, 80%);
	height: 1px;
	background: #111;
	margin: 0 auto;
}

.wt-sl-controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	gap: 16px;
	max-width: 1120px;
	margin: 0 auto 22px;
}

.wt-sl-search {
	position: relative;
	flex: 1 1 340px;
	max-width: 460px;
	display: flex;
}

.wt-sl-pincode {
	width: 100%;
	height: 52px;
	border: 1px solid #cfcfcf;
	background: #fff;
	padding: 0 52px 0 20px;
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #333;
	border-radius: 2px;
	outline: none;
}

.wt-sl-pincode:focus {
	border-color: #888;
}

.wt-sl-search-btn {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: #555;
	cursor: pointer;
	padding: 0;
}

.wt-sl-search-btn:hover {
	color: #000;
}

.wt-sl-near {
	flex: 0 1 340px;
	min-height: 52px;
	background: #fff;
	border: 1px solid #cfcfcf;
	border-radius: 2px;
	font-size: 15px;
	color: #333;
	cursor: pointer;
	padding: 0 24px;
	transition: background 0.2s, color 0.2s;
}

.wt-sl-near:hover {
	background: #111;
	color: #fff;
	border-color: #111;
}

.wt-sl-status {
	max-width: 1120px;
	margin: 0 auto 12px;
	min-height: 20px;
	font-size: 14px;
	color: #444;
	text-align: center;
}

.wt-sl-status:empty {
	margin: 0 auto;
	min-height: 0;
}

.wt-sl-map {
	width: 100%;
	height: 460px;
	background: #eef2f3;
	position: relative;
	overflow: hidden;
}

.wt-sl-nokey {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	color: #666;
	font-size: 15px;
}

/* Info window content */
.wt-sl-iw {
	max-width: 260px;
	font-family: inherit;
}

.wt-sl-iw h4 {
	margin: 0 0 6px;
	font-size: 15px;
	color: #111;
}

.wt-sl-iw p {
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.5;
	color: #444;
}

/* Address is the primary content of the marker popup (matches the live site). */
.wt-sl-iw-address {
	font-size: 14px;
	line-height: 1.5;
	color: #111;
	margin: 0 0 8px;
}

.wt-sl-iw a {
	font-size: 13px;
	color: #b8973e;
	text-decoration: none;
	font-weight: 600;
}

.wt-sl-iw a:hover {
	text-decoration: underline;
}

@media (max-width: 640px) {
	.wt-sl-controls {
		flex-direction: column;
	}

	.wt-sl-search,
	.wt-sl-near {
		max-width: none;
		flex-basis: auto;
	}

	.wt-sl-map {
		height: 380px;
	}
}