/* Scoped stylesheet for the imported local page fragment. */
/* Load this on the legacy site page that consumes the remote fragment. */

[data-remote-fragment].rf-page,
[data-remote-fragment].rf-page * {
	box-sizing: border-box;
}

[data-remote-fragment].rf-page {
	color: #434b54;
	font-family: Lato, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.5;
}

[data-remote-fragment].rf-page img {
	max-width: 100%;
	height: auto;
}

[data-remote-fragment].rf-page svg {
	display: inline-block;
	vertical-align: middle;
}

[data-remote-fragment].rf-page ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

[data-remote-fragment].rf-page p,
[data-remote-fragment].rf-page li {
	font-size: 16px;
}

[data-remote-fragment].rf-page .rf-container {
	width: calc(100% - 20px);
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

[data-remote-fragment].rf-page .rf-provider-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}

[data-remote-fragment].rf-page .rf-provider-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 90px;
}

[data-remote-fragment].rf-page .rf-recommendation-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

[data-remote-fragment].rf-page .rf-recommendation-card {
	min-width: 0;
	width: 100%;
}

[data-remote-fragment].rf-page .rf-recommendation-split,
[data-remote-fragment].rf-page .rf-package-grid {
	display: grid;
	grid-template-columns: 1fr;
}

[data-remote-fragment].rf-page .rf-recommendation-split {
	gap: 1.25rem;
}

[data-remote-fragment].rf-page .rf-package-grid {
	gap: 0.5rem;
}

[data-remote-fragment].rf-page .rf-deal-card h3 {
	word-break: break-word !important;
}

[data-remote-fragment].rf-page .rf-deal-card {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	overflow: hidden !important;
	background: #ffffff !important;
	border: 1px solid #e4e4e4 !important;
	border-radius: 0.25rem !important;
	color: #434b54 !important;
}

[data-remote-fragment].rf-page .rf-deal-card > div {
	display: block !important;
	width: 100% !important;
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}

[data-remote-fragment].rf-page .rf-deal-card p {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

[data-remote-fragment].rf-page .rf-deal-card img {
	width: 75px !important;
	height: 75px !important;
	max-width: 75px !important;
	max-height: 75px !important;
	object-fit: contain !important;
	display: block !important;
	flex: 0 0 75px !important;
}

[data-remote-fragment].rf-page .rf-deal-icons {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	color: #434b54 !important;
}

[data-remote-fragment].rf-page .rf-deal-icons svg {
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	display: inline-block !important;
	flex: 0 0 16px !important;
	overflow: visible;
}

[data-remote-fragment].rf-page .rf-deal-layout {
	display: grid !important;
	grid-template-columns: 1fr !important;
	width: 100% !important;
	border-top: 1px solid #eaeaea !important;
}

[data-remote-fragment].rf-page .rf-deal-contract {
	width: 100% !important;
	margin: 0 !important;
	padding: 0.75rem 0 !important;
	border: 0 !important;
}

[data-remote-fragment].rf-page .rf-deal-contract > div {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 1rem !important;
	width: 100% !important;
}

[data-remote-fragment].rf-page .rf-deal-metrics {
	display: grid !important;
	grid-template-columns: 1fr !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0.75rem 0 !important;
	border-top: 1px solid #eaeaea !important;
}

[data-remote-fragment].rf-page .rf-deal-metric {
	width: 100% !important;
	min-width: 0 !important;
	flex: none !important;
	padding-bottom: 0.875rem !important;
}

[data-remote-fragment].rf-page .rf-deal-metric p:last-child {
	line-height: 1.4 !important;
	margin-bottom: 0 !important;
}

[data-remote-fragment].rf-page .rf-deal-spacer {
	display: none !important;
}

[data-remote-fragment].rf-page .rf-chart-table {
	width: 100%;
	border-collapse: collapse;
}

[data-remote-fragment].rf-page .rf-chart-table th,
[data-remote-fragment].rf-page .rf-chart-table td {
	font-variant-numeric: tabular-nums;
}

[data-remote-fragment].rf-page .rf-chart-table tbody tr:nth-child(even) td {
	background-color: #f8f9fa;
}

[data-remote-fragment].rf-page .rf-chart-col-index,
[data-remote-fragment].rf-page .rf-chart-col-area {
	background: #ffffff;
}

[data-remote-fragment].rf-page .rf-chart-row .rf-chart-col-index,
[data-remote-fragment].rf-page .rf-chart-row .rf-chart-col-area {
	background: #ffffff;
}

[data-remote-fragment].rf-page .rf-chart-row.rf-chart-row--current .rf-chart-col-index,
[data-remote-fragment].rf-page .rf-chart-row.rf-chart-row--current .rf-chart-col-area {
	background: rgba(31, 78, 121, 0.10);
}

@media (max-width: 639px) {
	[data-remote-fragment].rf-page .rf-container {
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	[data-remote-fragment].rf-page .rf-provider-grid {
		gap: 0.5rem !important;
	}

	[data-remote-fragment].rf-page .rf-provider-tile {
		/* Keep natural 80×80 square so border-radius: 80px stays circular */
		margin: 0 !important;
	}

	[data-remote-fragment].rf-page [data-rf-id="rf-1"] {
		width: 100% !important;
		max-width: none !important;
	}

	[data-remote-fragment].rf-page .rf-deal-card {
		padding-top: 1rem !important;
	}

	[data-remote-fragment].rf-page [data-rf-id="rf-4"],
	[data-remote-fragment].rf-page [data-rf-id="rf-11"] {
		border-right: 0 !important;
		padding-top: 0.75rem !important;
		padding-right: 0 !important;
		padding-bottom: 0.75rem !important;
	}

	[data-remote-fragment].rf-page [data-rf-id="rf-7"],
	[data-remote-fragment].rf-page [data-rf-id="rf-14"] {
		padding-top: 0.75rem !important;
		padding-left: 0 !important;
		border-top: 1px solid #eaeaea !important;
	}

	[data-remote-fragment].rf-page .rf-deal-layout {
		flex-direction: column !important;
	}

	[data-remote-fragment].rf-page .rf-deal-contract {
		width: 100% !important;
		border-right: 0 !important;
	}

	[data-remote-fragment].rf-page .rf-deal-metrics {
		width: 100% !important;
	}

	[data-remote-fragment].rf-page .rf-deal-metric {
		flex: 1 1 100% !important;
	}

	[data-remote-fragment].rf-page .rf-deal-metric:first-child {
		padding-bottom: 1rem !important;
	}

	[data-remote-fragment].rf-page .rf-recommendation-split,
	[data-remote-fragment].rf-page .rf-package-grid {
		grid-template-columns: 1fr !important;
	}

	[data-remote-fragment].rf-page .rf-recommendation-grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 1.25rem !important;
	}

	[data-remote-fragment].rf-page .rf-recommendation-card {
		width: 100% !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		min-width: 0 !important;
	}

	[data-remote-fragment].rf-page .rf-recommendation-card > div:first-child {
		padding-left: 0.875rem !important;
		padding-right: 0.875rem !important;
	}

	[data-remote-fragment].rf-page .rf-recommendation-card > div:last-child {
		padding-left: 0.875rem !important;
		padding-right: 0.875rem !important;
		padding-top: 1rem !important;
		padding-bottom: 1rem !important;
	}

	[data-remote-fragment].rf-page .rf-recommendation-card h3 {
		font-size: 1.1rem !important;
		line-height: 1.2 !important;
		margin-top: 0 !important;
	}

	[data-remote-fragment].rf-page .rf-recommendation-card p,
	[data-remote-fragment].rf-page .rf-recommendation-card li {
		font-size: 13px !important;
	}

	[data-remote-fragment].rf-page .rf-package-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	[data-remote-fragment].rf-page .rf-package-grid > div p:last-child {
		font-size: 15px !important;
	}

	[data-remote-fragment].rf-page .rf-recommendation-card img {
		max-width: 60px !important;
		max-height: 60px !important;
	}

	[data-remote-fragment].rf-page .rf-recommendation-split > div:first-child {
		order: 2;
	}

	[data-remote-fragment].rf-page .rf-recommendation-split > div:last-child {
		order: 1;
	}

	[data-remote-fragment].rf-page [data-rf-id="rf-18"],
	[data-remote-fragment].rf-page [data-rf-id="rf-20"],
	[data-remote-fragment].rf-page [data-rf-id="rf-22"],
	[data-remote-fragment].rf-page [data-rf-id="rf-24"] {
		grid-template-columns: 1fr !important;
	}

	[data-remote-fragment].rf-page .rf-band {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}

	[data-remote-fragment].rf-page .rf-chart-table {
		min-width: 640px;
	}

	[data-remote-fragment].rf-page .rf-chart-col-index {
		position: sticky;
		left: 0;
		z-index: 3;
		background: #ffffff;
		width: 1.5rem;
		min-width: 1.5rem;
		max-width: 1.5rem;
		padding-left: 0.125rem !important;
		padding-right: 0.125rem !important;
		text-align: center;
		box-shadow: none;
	}

	[data-remote-fragment].rf-page .rf-chart-col-area {
		position: sticky;
		left: 1.5rem;
		z-index: 2;
		background: #ffffff;
		width: 9rem;
		min-width: 9rem;
		max-width: 9rem;
		padding-left: 0.5rem !important;
		white-space: normal;
		word-break: break-word;
		box-shadow:
			-1px 0 0 #ffffff,
			1px 0 0 #e2e8f0;
	}

	[data-remote-fragment].rf-page thead .rf-chart-col-index,
	[data-remote-fragment].rf-page thead .rf-chart-col-area {
		z-index: 4;
		background: #ffffff;
	}

	/* Scroll hint: label outside the scroll container, above the table */
	[data-remote-fragment].rf-page [data-rf-section="chart"] > p:first-of-type::after {
		content: '← Swipe to see all speed data →';
		display: block;
		font-size: 0.7rem;
		color: #94a3b8;
		text-align: center;
		padding-top: 0.4rem;
	}
}

/* Fastest + cheapest deal cards — mobile: 2x2 grid (speed|price / contract|setup) then button */
@media (max-width: 639px) {
	/* Parent layout: 2-column grid */
	[data-remote-fragment].rf-page [data-rf-section="fastest"] .rf-deal-layout,
	[data-remote-fragment].rf-page [data-rf-section="cheapest"] .rf-deal-layout {
		grid-template-columns: 1fr 1fr !important;
	}
	/* Dissolve metrics wrapper only — speed + price + button join the parent grid */
	[data-remote-fragment].rf-page [data-rf-section="fastest"] .rf-deal-metrics,
	[data-remote-fragment].rf-page [data-rf-section="cheapest"] .rf-deal-metrics {
		display: contents !important;
	}
	/* Speed + price: order 1, each one column — row 1 */
	[data-remote-fragment].rf-page [data-rf-section="fastest"] .rf-deal-metric,
	[data-remote-fragment].rf-page [data-rf-section="cheapest"] .rf-deal-metric {
		order: 1 !important;
		width: auto !important;
		padding: 0.75rem 0.5rem 0.5rem !important;
		flex: none !important;
	}
	/* Contract: order 3, spans full width — row 2 */
	[data-remote-fragment].rf-page [data-rf-section="fastest"] .rf-deal-contract,
	[data-remote-fragment].rf-page [data-rf-section="cheapest"] .rf-deal-contract {
		order: 3 !important;
		grid-column: 1 / -1 !important;
		display: block !important;
		width: 100% !important;
		padding: 0 !important;
		border-top: 1px solid #eaeaea !important;
		border-right: 0 !important;
	}
	/* Contract inner div: 2-col grid with zero gap, matching the parent exactly */
	[data-remote-fragment].rf-page [data-rf-section="fastest"] .rf-deal-contract > div,
	[data-remote-fragment].rf-page [data-rf-section="cheapest"] .rf-deal-contract > div {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 0 !important;
		width: 100% !important;
	}
	/* Contract items: same padding as metrics, clear inline margin */
	[data-remote-fragment].rf-page [data-rf-section="fastest"] [data-rf-id="rf-5"],
	[data-remote-fragment].rf-page [data-rf-section="fastest"] [data-rf-id="rf-6"],
	[data-remote-fragment].rf-page [data-rf-section="cheapest"] [data-rf-id="rf-12"],
	[data-remote-fragment].rf-page [data-rf-section="cheapest"] [data-rf-id="rf-13"] {
		padding: 0.75rem 0.5rem 0.5rem !important;
		margin: 0 !important;
	}
	/* Get Deal button: order 4, full width — row 3 */
	[data-remote-fragment].rf-page [data-rf-section="fastest"] [data-rf-id="rf-8"],
	[data-remote-fragment].rf-page [data-rf-section="cheapest"] [data-rf-id="rf-15"] {
		order: 4 !important;
		grid-column: 1 / -1 !important;
		padding: 0.25rem 0 0.5rem !important;
	}
}

@media (min-width: 640px) {
	[data-remote-fragment].rf-page [data-rf-id="rf-1"] {
		width: 50% !important;
	}

	[data-remote-fragment].rf-page [data-rf-id="rf-2"],
	[data-remote-fragment].rf-page [data-rf-id="rf-9"] {
		font-size: 20px !important;
	}

	[data-remote-fragment].rf-page .rf-deal-layout {
		display: grid !important;
		grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) !important;
		align-items: stretch !important;
		border-top: 1px solid #eaeaea !important;
	}

	[data-remote-fragment].rf-page .rf-deal-contract {
		border-right: 1px solid #eaeaea !important;
		border-top: 0 !important;
		border-bottom: 0 !important;
		border-left: 0 !important;
		padding-top: 1.75rem !important;
		padding-right: 1rem !important;
		padding-bottom: 1.75rem !important;
		padding-left: 0 !important;
		margin: 0 !important;
		width: 100% !important;
	}

	[data-remote-fragment].rf-page [data-rf-id="rf-5"],
	[data-remote-fragment].rf-page [data-rf-id="rf-6"],
	[data-remote-fragment].rf-page [data-rf-id="rf-12"],
	[data-remote-fragment].rf-page [data-rf-id="rf-13"] {
		justify-content: center !important;
		margin-right: 0 !important;
	}

	[data-remote-fragment].rf-page [data-rf-id="rf-5"],
	[data-remote-fragment].rf-page [data-rf-id="rf-12"] {
		margin-right: 0 !important;
	}

	[data-remote-fragment].rf-page .rf-deal-metrics {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		column-gap: 2rem !important;
		border-top: 0 !important;
		padding-top: 1.75rem !important;
		padding-right: 0 !important;
		padding-bottom: 1.75rem !important;
		padding-left: 2rem !important;
		width: 100% !important;
	}

	[data-remote-fragment].rf-page .rf-deal-metric {
		width: 100% !important;
		flex: none !important;
		padding-bottom: 0 !important;
	}

	[data-remote-fragment].rf-page .rf-deal-metric:first-child {
		padding-left: 0.25rem !important;
	}

	[data-remote-fragment].rf-page .rf-deal-spacer {
		display: none !important;
	}

	[data-remote-fragment].rf-page .rf-recommendation-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	[data-remote-fragment].rf-page .rf-recommendation-card {
		width: 100% !important;
	}

	[data-remote-fragment].rf-page .rf-recommendation-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	[data-remote-fragment].rf-page .rf-package-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	[data-remote-fragment].rf-page .rf-recommendation-split > div:first-child,
	[data-remote-fragment].rf-page .rf-recommendation-split > div:last-child {
		order: initial;
	}
}

@media (min-width: 1024px) {
	[data-remote-fragment].rf-page .rf-recommendation-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 10px;
	}
}

/* Hero banner — ported from BroadbandProviders hero.blade.php / standard.blade.php */
.site-hero {
	background-image: linear-gradient(52deg, #03B399 0%, #006fd6 14%, #9b1ceb 120%);
	min-height: 568px;
	padding: 30px 10px;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	font-family: Lato, 'Helvetica Neue', Arial, sans-serif;
}

/* Background image — hidden until 700px; right/max-width set via inline clamp() style */
.site-hero__bg-picture {
	display: none;
}
.site-hero__bg-img {
	position: absolute;
	bottom: 0;
	max-height: 95%;
	object-fit: contain;
	object-position: right bottom;
}

/* Breadcrumb row — matches: relative z-10 w-[calc(100%-40px)] max-w-[1200px] mx-auto px-[20px] pt-3 pb-[60px] */
.site-hero__breadcrumb-row {
	position: relative;
	z-index: 10;
	width: calc(100% - 40px);
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.75rem 20px 60px;
}
.site-hero__breadcrumb {
	font-family: Lato, 'Helvetica Neue', Arial, sans-serif;
	font-size: 1rem;
	color: #fff;
}
.site-hero__breadcrumb a,
.site-hero__breadcrumb span {
	color: #fff;
	text-decoration: none;
}
.site-hero__breadcrumb a:hover { text-decoration: underline; }
/* sep — matches: mx-1 text-lg font-semibold */
.site-hero__breadcrumb-sep {
	margin: 0 0.25rem;
	font-size: 1.125rem;
	font-weight: 600;
}

/* Main inner row — matches: relative z-10 w-[calc(100%-40px)] max-w-[1200px] mx-auto px-[20px] flex flex-col gap-6 pb-4 */
.site-hero__inner {
	position: relative;
	z-index: 10;
	width: calc(100% - 40px);
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px 1rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Left column — w-full on mobile, sm:w-[50%] on desktop (standard.blade.php leftColumnWidth) */
.site-hero__left { width: 100%; }

/* Right column — hidden on mobile */
.site-hero__right { display: none; }

/* h1 title — matches: text-xl m-0 mb-[20px] text-white leading-tight
   font-weight: 400 because Tailwind preflight resets h1-h6 to font-weight: inherit */
.site-hero__title {
	font-family: Lato, 'Helvetica Neue', Arial, sans-serif;
	font-size: 1.25rem;
	line-height: 1.25;
	color: #fff;
	margin: 0 0 20px;
	font-weight: 400;
}

/* Optional intro paragraph */
.site-hero__intro {
	font-family: Lato, 'Helvetica Neue', Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: #fff;
	margin: 0 0 12px;
}

/* h2 subtitle — matches: text-4xl text-white mt-2 tracking-[-0.02em] */
.site-hero__subtitle {
	font-family: Lato, 'Helvetica Neue', Arial, sans-serif;
	font-size: 2.25rem;
	line-height: 2.5rem;
	color: #fff;
	margin: 0.5rem 0;
	letter-spacing: -0.02em;
	font-weight: 400;
}
/* bold spans inside subtitle — matches: font-bold */
.site-hero__subtitle b,
.site-hero__subtitle strong,
.site-hero__subtitle .font-bold { font-weight: 700; }
/* default.css sets span/strong { color: #434B54 } which beats inherited white — override it */
.site-hero__subtitle span,
.site-hero__subtitle sup,
.site-hero__subtitle strong { color: #fff; }

/* Optional supporting text */
.site-hero__supporting {
	font-family: Lato, 'Helvetica Neue', Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	margin: 0.5rem 0 0;
}

/* Postcode widget spacing — matches: mt-[40px] mb-[15px] on the widget wrapper */
.site-hero__left .deals-postcode-input-wrapper {
	margin-top: 40px;
	margin-bottom: 15px;
}

/* Postcode note — matches: text-white/70 text-sm ml-[20px] */
.site-hero__postcode-note {
	font-family: Lato, 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: rgba(255, 255, 255, 0.7);
	margin: 0 0 0 20px;
}

@media (min-width: 640px) {
	/* sm:px-[10px] on both rows */
	.site-hero__breadcrumb-row { padding-left: 10px; padding-right: 10px; }
	.site-hero__inner { flex-direction: row; align-items: center; padding-left: 10px; padding-right: 10px; }
	/* sm:w-[50%] left, show right */
	.site-hero__left  { width: 50%; }
	.site-hero__right { display: flex; width: 50%; flex-direction: column; align-items: flex-end; justify-content: center; }
}

@media (min-width: 700px) {
	/* min-[700px]:block — matches BroadbandProviders breakpoint for the bg image */
	.site-hero__bg-picture { display: block; }
}

@media (max-width: 639px) {
	.site-hero {
		background-image: linear-gradient(34deg, #03B399 0%, #006fd6 14%, #9b1ceb 120%);
		min-height: auto;
		padding: 20px;
		overflow-x: hidden;
	}
	.site-hero__breadcrumb-row {
		width: 100%;
		padding: 0.5rem 0 40px;
	}
	.site-hero__inner {
		width: 100%;
		padding: 0 0 1rem;
	}
	.site-hero__subtitle {
		font-size: 1.5rem;
		line-height: 2rem;
	}
	.site-hero__left [data-postcode-lookup-hero] {
		margin-top: 20px;
		max-width: 100%;
	}
	.site-hero__left [data-postcode-lookup-hero] > div {
		max-width: 100% !important;
	}
}

/* Trust bar — pulled up to overlap the hero bottom by 30px, matching standard.blade.php -mt-[30px] z-20 */
.general-content { padding-top: 0; }
[data-rf-id="rf-trust-bar"] { margin-top: -30px !important; position: relative; z-index: 20; }

@media (max-width: 639px) {
	[data-rf-id="rf-trust-bar"] {
		gap: 0 !important;
		padding: 0 1.25rem !important;
	}
	[data-rf-id="rf-trust-bar"] > div {
		width: 100% !important;
		padding: 0.75rem 0 !important;
		border-bottom: 1px solid #e2e8f0;
	}
	[data-rf-id="rf-trust-bar"] > div:last-child {
		border-bottom: none;
	}
}

/* Footer gradient override — match hero on remote-content pages only */
.footer { background-image: linear-gradient(52deg, #03B399 0%, #006fd6 14%, #9b1ceb 120%); }

/* ─── Sticky postcode bar ────────────────────────────────────────────────────── */
#sticky-postcode-bar {
	position: fixed; top: 0; left: 0; width: 100%; z-index: 9999;
	padding: 1.25rem 1rem;
	background-image: linear-gradient(52deg, #03B399 0%, #006fd6 14%, #9b1ceb 120%);
	font-family: Lato, 'Helvetica Neue', Arial, sans-serif;
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
#sticky-postcode-bar.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
#sticky-postcode-bar .sticky-bar__inner {
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
}
#sticky-postcode-bar .sticky-bar__title {
	font-family: Lato, 'Helvetica Neue', Arial, sans-serif;
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.4;
	margin: 0 0 0.75rem;
}
/* Spacing for the postcode widget mount point inside the hero */
.site-hero__left [data-postcode-lookup-hero] {
	margin-top: 40px;
	margin-bottom: 15px;
	display: block;
	min-width: 0;
	max-width: 100%;
}

@media (max-width: 639px) {
	#sticky-postcode-bar {
		padding:1.25rem 0;
	}

	#sticky-postcode-bar .sticky-bar__inner {
		max-width: calc(100% - 40px);	
	}
}

/* PostcodeLookupHero — all styling is inline in the React component.          */
/* Only the ::placeholder pseudo-element requires a stylesheet rule.           */
[data-postcode-lookup-hero] input::placeholder { color: #909195; }

/* Savings info button + popover */
.savings-info-wrap {
    position: relative;
    display: inline-block;
    vertical-align: top;
}
.savings-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #fff;
    width: 22px;
    height: 22px;
    padding: 0;
    cursor: pointer;
    vertical-align: top;
    line-height: 1;
    margin-left: 5px;
    transition: background 0.15s;
    flex-shrink: 0;
}
.savings-info-btn:hover,
.savings-info-btn.is-active {
    background: rgba(255,255,255,0.15);
}
.savings-info-popover {
    display: none;
    position: absolute;
    background: #fff;
    color: #000 !important;
    font-size: 0.75rem;
    line-height: 1.45;
    font-family: Lato, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    padding: 10px 13px;
    border-radius: 8px;
    width: 220px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    z-index: 200;
    letter-spacing: 0;
}
.savings-info-popover.is-open { display: block; }
.savings-info-popover::after { content: ''; position: absolute; width: 0; height: 0; }

/* Right of button — arrow on left edge */
.savings-info-popover--right { left: calc(100% + 12px); top: 0; }
.savings-info-popover--right::after { top: 10px; left: -8px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 8px solid #fff; }

/* Left of button — arrow on right edge */
.savings-info-popover--left { right: calc(100% + 12px); top: 0; }
.savings-info-popover--left::after { top: 10px; right: -8px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid #fff; }

/* Below button — arrow on top, right-aligned to button */
.savings-info-popover--below { top: calc(100% + 10px); right: 0; }
.savings-info-popover--below::after { top: -8px; right: 10px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid #fff; }

/* Above button — arrow on bottom, right-aligned to button */
.savings-info-popover--above { bottom: calc(100% + 10px); right: 0; }
.savings-info-popover--above::after { bottom: -8px; right: 10px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #fff; }