/* ==========================================================================
   MN Service Qualifier — frontend styles
   All selectors are namespaced under .mn-sq to avoid theme conflicts.
   ========================================================================== */

:root {
	--mn-sq-primary:         linear-gradient(135deg, #55AA39 0%, #3d8a28 100%);
	--mn-sq-primary-solid:   #55AA39;
	--mn-sq-primary-hover:   linear-gradient(135deg, #4a9830 0%, #2f6d1f 100%);
	/* Neutral semi-transparent values that work on both light and dark backgrounds.
	   rgba(128,128,128,N) is the perceptual midpoint — it adds visible contrast
	   without assuming a light or dark page background. */
	--mn-sq-secondary:       rgba(128, 128, 128, 0.12);
	--mn-sq-secondary-hover: rgba(128, 128, 128, 0.22);
	--mn-sq-border:          rgba(128, 128, 128, 0.30);
	/* Muted text: medium neutral grey, readable on both dark and light pages */
	--mn-sq-muted:           rgba(128, 128, 128, 1);
	--mn-sq-error:           #c0392b;
	/* Error background as a soft transparent tint rather than solid light red */
	--mn-sq-error-bg:        rgba(192, 57, 43, 0.12);
	--mn-sq-success:         #15803d;
	--mn-sq-radius:          8px;
	--mn-sq-radius-sm:       4px;
	--mn-sq-shadow:          0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
}

/* Container — no own box; inherits page background, font, and colour */
.mn-sq {
	box-sizing: border-box;
	max-width: 860px;
	margin: 0 auto;
	padding: 0;
	font-family: 'Raleway', sans-serif;
	color: inherit;
}

.mn-sq *,
.mn-sq *::before,
.mn-sq *::after {
	box-sizing: inherit;
}

/* Typography */
.mn-sq__heading {
	margin: 0 0 .375rem;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	/* No colour override — let the theme's heading rule apply directly so the
	   heading always matches the site's intended heading colour. */
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: break-word;
}

.mn-sq__subheading {
	margin: 0 0 1.5rem;
	font-size: .9375rem;
	color: inherit;
	opacity: .75;
	text-align: center;
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Form layout */
.mn-sq__form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Row 1: street number + street name */
.mn-sq__row--street {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 1rem;
	align-items: start;
}

/* Row 2: suburb + state + postcode */
.mn-sq__row--location {
	display: grid;
	grid-template-columns: 1fr 130px 120px;
	gap: 1rem;
	align-items: start;
}

.mn-sq__row {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: flex-end;
}

/* Fields */
.mn-sq__field {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.mn-sq__field--grow     { flex: 1 1 160px; }
.mn-sq__field--narrow   { flex: 0 0 120px; }
.mn-sq__field--state    { flex: 0 0 130px; }
.mn-sq__field--postcode { flex: 0 0 120px; }

.mn-sq__label {
	font-size: .8125rem;
	font-weight: 600;
	color: inherit;
	letter-spacing: .01em;
}

.mn-sq__label--inline {
	flex-direction: row;
	align-items: center;
	gap: .5rem;
	cursor: pointer;
	font-weight: 400;
}

.mn-sq__required {
	color: var(--mn-sq-error);
	margin-left: .125rem;
}

.mn-sq__input,
.mn-sq__select {
	height: 2.5rem !important;
	padding: 0 .75rem;
	border: 1px solid var(--mn-sq-border);
	border-radius: var(--mn-sq-radius-sm);
	font-size: .9375rem;
	color: inherit;
	background: var(--mn-sq-secondary);
	transition: border-color .15s ease, box-shadow .15s ease;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box !important;
}

.mn-sq__select {
	padding-right: 2rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .5rem center;
}

.mn-sq__input:focus,
.mn-sq__select:focus {
	outline: none;
	border-color: var(--mn-sq-primary-solid);
	box-shadow: 0 0 0 3px rgba(85, 170, 57, .20);
}

.mn-sq__checkbox {
	width: 1rem;
	height: 1rem;
	cursor: pointer;
	accent-color: var(--mn-sq-primary-solid);
}

/* Advanced toggle */
.mn-sq__toggle-advanced {
	align-self: flex-start;
	padding: 0;
	border: none;
	background: none;
	font-size: .875rem;
	color: var(--mn-sq-primary-solid);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mn-sq__toggle-advanced:hover {
	color: #3d8a28;
}

.mn-sq__row--advanced {
	padding: .75rem;
	background: var(--mn-sq-secondary);
	border-radius: var(--mn-sq-radius-sm);
}

/* Form footer */
.mn-sq__form-footer {
	margin-top: .5rem;
}

/* Buttons */
.mn-sq__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .625rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--mn-sq-radius-sm);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	line-height: 1.25;
}

.mn-sq__btn:focus-visible {
	outline: 2px solid var(--mn-sq-primary-solid);
	outline-offset: 2px;
}

.mn-sq__btn--primary {
	background: linear-gradient(135deg, #55AA39 0%, #3d8a28 100%);
	color: #fff;
}

.mn-sq__btn--primary:hover:not(:disabled) {
	background: linear-gradient(135deg, #4a9830 0%, #2f6d1f 100%);
}

.mn-sq__btn--primary:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.mn-sq__btn--secondary {
	background: var(--mn-sq-secondary);
	color: inherit;
	border-color: var(--mn-sq-border);
}

.mn-sq__btn--secondary:hover {
	background: var(--mn-sq-secondary-hover);
}

.mn-sq__btn--ghost {
	background: none;
	color: var(--mn-sq-primary-solid);
	border-color: transparent;
	padding-left: 0;
}

.mn-sq__btn--ghost:hover {
	color: #3d8a28;
}

/* Spinner */
.mn-sq__spinner-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	padding: 2rem 0;
}

.mn-sq__spinner {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	border: 3px solid var(--mn-sq-border);
	border-top-color: var(--mn-sq-primary-solid);
	border-radius: 50%;
	animation: mn-sq-spin .8s linear infinite;
}

.mn-sq__spinner-label {
	font-size: .9375rem;
	color: inherit;
	opacity: .75;
}

@keyframes mn-sq-spin {
	to { transform: rotate(360deg); }
}

/* When spinner is inline inside a button — collapse the wrapper so its
   padding/flex-column layout can't inflate the button size */
.mn-sq__btn .mn-sq__spinner-wrap {
	display: contents;
}

.mn-sq__btn .mn-sq__spinner {
	width: 1rem;
	height: 1rem;
	border-width: 2px;
}

.mn-sq__btn .mn-sq__spinner-label {
	display: none;
}

/* Error */
.mn-sq__error-box {
	padding: .875rem 1rem;
	background: var(--mn-sq-error-bg);
	border: 1px solid #fca5a5;
	border-radius: var(--mn-sq-radius-sm);
}

.mn-sq__error-text {
	margin: 0 0 .5rem;
	color: var(--mn-sq-error);
	font-size: .9375rem;
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: break-word;
}

.mn-sq__error-text:last-child {
	margin-bottom: 0;
}

/* Address selection list */
.mn-sq--selecting .mn-sq__subheading {
	margin-bottom: 1rem;
}

.mn-sq__address-list {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	max-height: 320px;
	overflow-y: auto;
	border: 1px solid var(--mn-sq-border);
	border-radius: var(--mn-sq-radius-sm);
}

.mn-sq__address-btn {
	width: 100%;
	padding: .75rem 1rem;
	text-align: left;
	background: transparent;
	border: none;
	font-size: .9375rem;
	color: inherit;
	cursor: pointer;
	transition: background .12s ease;
	line-height: 1.4;
}

.mn-sq__address-btn:hover,
.mn-sq__address-btn:focus-visible {
	background: var(--mn-sq-secondary);
	outline: none;
}

/* Notices (CoAT upgrade / new development charge) */
.mn-sq__notice {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1rem 1.25rem;
	border-radius: var(--mn-sq-radius);
	border-left: 4px solid transparent;
	margin-bottom: 1.25rem;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.mn-sq__notice--coat {
	background: #eefbf3;
	border-left-color: #16a34a;
	color: #14532d;
}

.mn-sq__notice--warning {
	background: #fffbeb;
	border-left-color: #d97706;
	color: #78350f;
}

.mn-sq__notice-icon {
	flex: 0 0 auto;
	margin-top: .1rem;
}

.mn-sq__notice--coat .mn-sq__notice-icon   { color: #16a34a; }
.mn-sq__notice--warning .mn-sq__notice-icon { color: #d97706; }

.mn-sq__notice-body {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	overflow: hidden;
}

.mn-sq__notice-title {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: break-word;
}

.mn-sq__notice-text {
	margin: 0 !important;
	font-size: .9375rem;
	line-height: 1.5;
	white-space: normal !important;
	word-break: break-word;
	overflow-wrap: break-word;
	max-width: 100%;
}

/* Qualification results */
.mn-sq__result-header {
	margin-bottom: 1.25rem;
}

.mn-sq__result-address {
	margin: .25rem 0 0;
	font-size: .9375rem;
	color: inherit;
	opacity: .75;
	text-align: center;
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: break-word;
}

.mn-sq__details-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.mn-sq__detail-card {
	display: flex;
	flex-direction: column;
	gap: .375rem;
	padding: 1.125rem 1.25rem;
	background: var(--mn-sq-secondary);
	border-radius: var(--mn-sq-radius);
	border: 1px solid var(--mn-sq-border);
}

.mn-sq__detail-label {
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: inherit;
	opacity: .65;
}

.mn-sq__detail-value {
	font-size: 1.125rem;
	font-weight: 700;
	color: inherit;
	line-height: 1.3;
	word-break: break-word;
}

.mn-sq__tech-badge {
	display: inline-block !important;
	width: fit-content;
	padding: .3rem .875rem;
	background: linear-gradient(135deg, #55AA39 0%, #3d8a28 100%);
	color: #fff;
	border-radius: 99px;
	font-size: .9375rem;
	font-weight: 700;
	white-space: nowrap;
}

.mn-sq__location-id {
	font-family: 'Raleway', sans-serif;
	font-size: 1rem;
	font-weight: 600;
}

/* Speed tiers */
.mn-sq__speed-tiers {
	margin-bottom: 1.5rem;
	text-align: center;
}

.mn-sq__speed-tiers-label {
	margin: 0 0 .5rem;
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--mn-sq-muted);
}

.mn-sq__speed-tiers-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .375rem;
}

.mn-sq__speed-tier {
	padding: .25rem .75rem;
	background: var(--mn-sq-secondary);
	border: 1px solid var(--mn-sq-border);
	border-radius: 99px;
	font-size: .875rem;
	color: var(--mn-sq-text);
}

/* Interactive speed tier pills */
.mn-sq__speed-tier--has-tip {
	position: relative;
	cursor: help;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	transition: background .15s ease, border-color .15s ease;
}

.mn-sq__speed-tier--has-tip:hover {
	background: rgba(85, 170, 57, 0.15);
	border-color: var(--mn-sq-primary-solid);
}

/* Small ⓘ icon sitting next to the tier name */
.mn-sq__tier-tip-icon {
	display: inline-flex;
	align-items: center;
	opacity: .5;
	color: currentColor;
	transition: opacity .15s ease, color .15s ease;
	flex-shrink: 0;
}

.mn-sq__speed-tier--has-tip:hover .mn-sq__tier-tip-icon {
	opacity: 1;
	color: var(--mn-sq-primary-solid);
}

/* ---- Tooltip card ---- */
.mn-sq__tier-tooltip {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%);
	background: rgba(15, 15, 15, 0.96);
	border: 1px solid rgba(85, 170, 57, 0.45);
	border-radius: 10px;
	padding: .875rem 1.25rem;
	z-index: 9999;
	pointer-events: none;
	white-space: nowrap;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(85, 170, 57, 0.1);
	animation: mn-sq-tip-in .15s ease;
}

@keyframes mn-sq-tip-in {
	from { opacity: 0; transform: translateX(-50%) translateY(6px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0);   }
}

.mn-sq__tier-tooltip-stats {
	display: flex;
	align-items: stretch;
	gap: 1rem;
}

.mn-sq__tier-tooltip-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .1rem;
	min-width: 4rem;
}

.mn-sq__tier-tooltip-dir {
	font-size: 1rem;
	color: var(--mn-sq-primary-solid);
	line-height: 1;
	font-weight: 700;
}

.mn-sq__tier-tooltip-num {
	font-size: 1.625rem;
	font-weight: 800;
	color: #ffffff;
	line-height: 1;
	letter-spacing: -.02em;
}

.mn-sq__tier-tooltip-unit {
	font-size: .6875rem;
	font-weight: 700;
	color: var(--mn-sq-primary-solid);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.mn-sq__tier-tooltip-label {
	font-size: .6875rem;
	color: rgba(255, 255, 255, 0.45);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-top: .15rem;
}

.mn-sq__tier-tooltip-divider {
	width: 1px;
	background: rgba(255, 255, 255, 0.12);
	align-self: stretch;
}

/* Downward-pointing caret */
.mn-sq__tier-tooltip-caret {
	position: absolute;
	bottom: -6px;
	left: 50%;
	width: 10px;
	height: 10px;
	background: rgba(15, 15, 15, 0.96);
	border-right: 1px solid rgba(85, 170, 57, 0.45);
	border-bottom: 1px solid rgba(85, 170, 57, 0.45);
	transform: translateX(-50%) rotate(45deg);
}

.mn-sq__cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   Plan cards
   ========================================================================== */

/* Plans step — fill the full content-column width and let the carousel
   centre itself via max-width + auto margins. No full-bleed tricks needed. */
.mn-sq--plans {
	max-width: none;
	width: 100%;
	padding: 0;
}

/* Carousel wrapper: [←btn] [scrollable grid] [→btn]
   max-width keeps it to 4 × 280 px cards + gaps + arrows on wide screens;
   auto margins centre it within whatever column the plugin lives in. */
.mn-sq__plans-carousel {
	display: flex;
	align-items: center;
	gap: .75rem;
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
}

/* Arrow buttons */
.mn-sq__carousel-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: none;
	background: linear-gradient(135deg, #55AA39 0%, #3d8a28 100%);
	color: #fff;
	cursor: pointer;
	transition: opacity .2s ease, background .15s ease, transform .15s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	padding: 0;
}

.mn-sq__carousel-btn:hover {
	background: linear-gradient(135deg, #4a9830 0%, #2f6d1f 100%);
	transform: scale(1.05);
}

.mn-sq__carousel-btn--hidden {
	opacity: 0;
	pointer-events: none;
}

/* Spacer is the ONLY growing item in the card column — it fills all space
   between the feature list and the Get Started button so the button sits at
   the same vertical position on every card regardless of feature count.
   !important prevents Avada from zeroing the flex-grow. */
.mn-sq__plan-spacer {
	flex: 1 1 0% !important;
	min-height: 0 !important;
}

.mn-sq__plans-grid {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 1.25rem;
	margin: 1.5rem 0;
	overflow-x: auto;
	/* Scroll snapping — each card snaps neatly into view */
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	/* Hide scrollbar — navigation handled by arrow buttons */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mn-sq__plans-grid::-webkit-scrollbar {
	display: none;
}

.mn-sq__plan-card {
	position: relative;
	border-radius: var(--mn-sq-radius);
	border: 1px solid var(--mn-sq-border);
	overflow: hidden;
	/* Force column layout so the spacer trick works; !important beats Avada */
	display: flex !important;
	flex-direction: column !important;
	background: var(--mn-sq-secondary);
	transition: transform .18s ease, box-shadow .18s ease;
	/* Fixed width — cards never shrink or stretch.
	   260 px gives plan names and features a little more breathing room. */
	flex: 0 0 260px;
	scroll-snap-align: start;
	/* Ensure the card itself never clips its own text */
	min-width: 0;
}

.mn-sq__plan-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

/* Popular variant — green border glow */
.mn-sq__plan-card--popular {
	border-color: var(--mn-sq-primary-solid);
	box-shadow: 0 0 0 2px rgba(85, 170, 57, 0.35);
}

/* "Most Popular" pill — sits at the BOTTOM of the green header (inside it).
   margin-top:auto pushes it down in the flex-column header so name/tagline
   always anchor at the top of the header on every card. */
.mn-sq__plan-badge {
	margin-top: auto;
	align-self: center;
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
	text-align: center;
	font-size: .6rem;
	font-weight: 800;
	padding: .2rem .65rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	border-radius: 2rem;
	border: 1px solid rgba(255, 255, 255, 0.45);
}

/* Green gradient header.
   justify-content: flex-start pins the plan name to the TOP of the header so
   it sits at the same Y on every card regardless of how much text wraps.
   JS equalization (useLayoutEffect) forces all headers to the same height.
   !important blocks Avada overrides. */
.mn-sq__plan-header {
	background: linear-gradient(135deg, #FF6900 0%, #CF2E2E 100%);
	padding: 1.375rem 1.25rem 1rem;
	font-family: 'Raleway', sans-serif;
	min-height: 7rem !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	align-items: center !important;
	text-align: center;
}

/* Most Popular badge sits above the header — no extra height needed. */
.mn-sq__plan-card--popular .mn-sq__plan-header {
	padding-top: 1.375rem;
	padding-bottom: 1rem;
}

.mn-sq__plan-name {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 900;
	color: #fff;
	line-height: 1.2;
	text-align: center;
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: break-word;
}

.mn-sq__plan-name-accent {
	width: 40px;
	height: 3px;
	background: rgba(255, 255, 255, 0.55);
	border-radius: 2px;
	margin: .5rem auto .25rem;
	flex-shrink: 0;
}

.mn-sq__plan-tagline {
	margin: .25rem 0 0;
	font-size: .875rem;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.35;
	text-align: center;
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Price row */
.mn-sq__plan-price {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: .875rem 1.25rem .75rem;
	border-bottom: 1px solid var(--mn-sq-border);
	gap: .1rem;
	font-family: 'Raleway', sans-serif;
}

.mn-sq__plan-price-currency {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.6;
	color: inherit;
}

.mn-sq__plan-price-amount {
	font-size: 2.625rem;
	font-weight: 800;
	line-height: 1;
	color: inherit;
	letter-spacing: -.02em;
}

.mn-sq__plan-price-period {
	font-size: .875rem;
	align-self: flex-end;
	margin-bottom: .35rem;
	margin-left: .15rem;
	opacity: .6;
	color: inherit;
}

/* Feature tick-list */
.mn-sq__plan-features {
	list-style: none;
	margin: 0;
	padding: .75rem 1.25rem;
	/* Do NOT grow — only the mn-sq__plan-spacer should grow so that
	   the Get Started button is always pinned to the card bottom. */
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	font-family: 'Raleway', sans-serif;
}

.mn-sq__plan-feature {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .9375rem;
	color: inherit;
	padding: .4rem 0;
	border-bottom: 1px solid var(--mn-sq-border);
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: break-word;
}

.mn-sq__plan-feature:last-child {
	border-bottom: none;
}

.mn-sq__plan-feature-icon {
	flex-shrink: 0;
	color: var(--mn-sq-primary-solid);
	display: inline-flex;
}

/* CTA button */
.mn-sq__plan-cta {
	padding: .875rem 1.25rem .625rem;
}

.mn-sq__plan-cta .mn-sq__btn {
	width: 100%;
	justify-content: center;
}

/* Footer wrapper: CTA + description + CIS sit together as one block at the
   card bottom.  marginTop:auto (set inline) pushes it down; equalisation
   forces all footer blocks to the same height so the button Y is identical. */
.mn-sq__plan-footer {
	display: flex !important;
	flex-direction: column !important;
}

/* Critical Information Summary link — appears at the very bottom of the card */
.mn-sq__plan-cis {
	margin: 0;
	padding: .5rem 1.25rem .75rem;
	border-top: 1px solid var(--mn-sq-border);
	text-align: center;
}

.mn-sq__plan-cis a {
	font-size: .6875rem;
	color: var(--mn-sq-primary-solid);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: normal !important;
	overflow-wrap: break-word;
}

.mn-sq__plan-cis a:hover {
	opacity: .8;
}

/* ── Residential / Business tab switcher ────────────────────────────────── */

/* Pill track — a dark frosted capsule that holds both pills */
.mn-sq__plan-tabs {
	display: flex;
	gap: .25rem;
	width: fit-content;
	margin: 0 auto 0;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 99px;
	padding: .25rem;
}

/* Individual pill button */
.mn-sq__plan-tab {
	padding: .45rem 1.75rem;
	border-radius: 99px;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	font-family: 'Raleway', sans-serif;
	font-size: .9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .18s, color .18s, box-shadow .18s;
	white-space: nowrap;
	line-height: 1;
}

/* Active pill — orange-to-red gradient matching the modal header and card headers */
.mn-sq__plan-tab--active {
	background: linear-gradient(135deg, #FF6900 0%, #CF2E2E 100%);
	color: #fff;
	box-shadow: 0 2px 10px rgba(207, 46, 46, 0.45);
}

.mn-sq__plan-tab:not(.mn-sq__plan-tab--active):hover {
	background: rgba(255, 255, 255, 0.10);
	color: #fff;
}

/* Small print */
.mn-sq__plan-description {
	padding: 0 1.25rem .875rem;
	font-size: .8125rem;
	text-align: center;
	opacity: .6;
	margin: 0;
	color: inherit;
	line-height: 1.4;
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: break-word;
}

@media ( max-width: 600px ) {
	/* On mobile each card takes up most of the viewport so one is almost fully
	   visible and the next peeks in from the right, hinting that there are more. */
	.mn-sq__plan-card {
		flex: 0 0 82vw;
	}
}

/* Loading state */
.mn-sq--loading {
	min-height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── Modal overlay ──────────────────────────────────────────────────────── */

/* Full-viewport fixed backdrop — rendered via React portal on document.body
   so it always escapes theme containers.  z-index beats Avada's header (9999). */
.mn-sq__modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	display: flex;
	align-items: center;         /* vertically centred in viewport */
	justify-content: center;
	z-index: 999999;
	padding: 1.5rem 1rem;
	overflow-y: auto;
	animation: mn-sq-overlay-in .18s ease;
}

@keyframes mn-sq-overlay-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Modal box */
.mn-sq__modal {
	position: relative;
	background: #232330;         /* site's dark navy — cards sit on top of this */
	border-radius: var(--mn-sq-radius);
	/* Wide enough to fit all 4 plan cards side-by-side without scrolling */
	width: min(98vw, 1440px);
	min-width: 320px;
	padding: 2rem 1.75rem 2rem;
	box-shadow: 0 24px 64px rgba(0,0,0,.40), 0 4px 16px rgba(0,0,0,.18);
	animation: mn-sq-modal-in .2s ease;
	/* Explicit colours so the portal renders independent of page theme */
	color: #f0f0f5;
	font-family: 'Raleway', sans-serif;
	/* Clips the gradient header to the modal's rounded top corners */
	overflow: hidden;
}

@keyframes mn-sq-modal-in {
	from { opacity: 0; transform: translateY(-12px) scale(.98); }
	to   { opacity: 1; transform: translateY(0)     scale(1); }
}

/* Remove the page-column max-width constraint inside the modal */
.mn-sq__modal .mn-sq {
	max-width: none;
}

/* Ensure no inherited top margin pushes the carousel away from the tabs */
.mn-sq__modal .mn-sq__plans-carousel {
	margin-top: 0;
}

/* ── Branded gradient header strip ─────────────────────────────────────── */
/* Negative margins bleed the header edge-to-edge within the modal box.
   overflow:hidden on .mn-sq__modal clips it to the rounded top corners.    */
.mn-sq__modal .mn-sq__result-header {
	background: linear-gradient(135deg, #FF6900 0%, #CF2E2E 100%);
	margin: -2rem -1.75rem 0.875rem;
	padding: 1.5rem 3.5rem 1.25rem 1.75rem; /* right clearance for ✕ button */
	border-radius: var(--mn-sq-radius) var(--mn-sq-radius) 0 0;
}

/* Extra breathing room below the header on the results page only — plans page keeps 0.875rem */
.mn-sq__modal .mn-sq--qualified .mn-sq__result-header {
	margin-bottom: 1.75rem;
}

.mn-sq__modal .mn-sq__result-header .mn-sq__heading {
	color: #fff;
	text-align: left;
	margin-bottom: .25rem;
}

.mn-sq__modal .mn-sq__result-header .mn-sq__result-address {
	color: rgba(255, 255, 255, 0.82);
	opacity: 1;
	text-align: left;
	margin: 0;
	font-size: .9375rem;
}

/* Selecting-addresses view has a standalone heading with no result-header
   wrapper — give it the same gradient treatment.                           */
.mn-sq__modal .mn-sq--selecting > .mn-sq__heading {
	background: linear-gradient(135deg, #FF6900 0%, #CF2E2E 100%);
	color: #fff;
	text-align: left;
	margin: -2rem -1.75rem 1.5rem;
	padding: 1.5rem 3.5rem 1.25rem 1.75rem;
	border-radius: var(--mn-sq-radius) var(--mn-sq-radius) 0 0;
}

/* ── Close button — sits over the gradient header ───────────────────────── */
.mn-sq__modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background .15s, border-color .15s;
	line-height: 1;
	font-size: 0;
	z-index: 2;
}

.mn-sq__modal-close:hover {
	background: rgba(255, 255, 255, 0.32);
	border-color: rgba(255, 255, 255, 0.8);
}

/* ── Dark background overrides ──────────────────────────────────────────── */

/* Plan cards: explicit white card on the dark modal base */
.mn-sq__modal .mn-sq__plan-card {
	background: #fff;
	color: #232330;
}

/* Plan price / features / footer text inside the white card */
.mn-sq__modal .mn-sq__plan-price,
.mn-sq__modal .mn-sq__plan-feature,
.mn-sq__modal .mn-sq__plan-description {
	color: #232330;
}

/* Qualification detail cards: frosted-glass style on dark */
.mn-sq__modal .mn-sq__detail-card {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #f0f0f5;
}

.mn-sq__modal .mn-sq__detail-label {
	color: rgba(255, 255, 255, 0.55);
	opacity: 1; /* reset the base .65 opacity so the colour alone controls transparency */
}

.mn-sq__modal .mn-sq__detail-value {
	color: #fff;
}

/* Tech badge on dark background */
.mn-sq__modal .mn-sq__tech-badge {
	background: rgba(85, 170, 57, 0.2);
	border-color: rgba(85, 170, 57, 0.45);
	color: #7dda50;
}

/* Speed tier pills */
.mn-sq__modal .mn-sq__speed-tier {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.18);
	color: #f0f0f5;
}

.mn-sq__modal .mn-sq__speed-tiers-label {
	color: rgba(255, 255, 255, 0.55);
}

/* Heading + subheading in the dark body area */
.mn-sq__modal .mn-sq__heading {
	color: #fff;
}

.mn-sq__modal .mn-sq__subheading,
.mn-sq__modal .mn-sq__result-address {
	color: rgba(255, 255, 255, 0.65);
	opacity: 1;
}

/* Address selection buttons */
.mn-sq__modal .mn-sq__address-btn {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.15);
	color: #f0f0f5;
}

.mn-sq__modal .mn-sq__address-btn:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.3);
}

/* Notice banners keep their own background/text — no override needed */

/* "Back to Results" ghost button: light outline on dark */
.mn-sq__modal .mn-sq__btn--ghost {
	color: rgba(255, 255, 255, 0.75);
	border-color: rgba(255, 255, 255, 0.3);
}

.mn-sq__modal .mn-sq__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}

/* Secondary button (Search Another Address) */
.mn-sq__modal .mn-sq__btn--secondary {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.25);
	color: #f0f0f5;
}

.mn-sq__modal .mn-sq__btn--secondary:hover {
	background: rgba(255, 255, 255, 0.18);
}

/* ── Carousel dot indicators ──────────────────────────────────────────── */
/* Base styles declared BEFORE the mobile media query so the query can
   correctly override display:none → display:flex via the cascade.        */

.mn-sq__carousel-dots {
	display: none; /* hidden by default; mobile query below enables them */
	justify-content: center;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.875rem;
}

.mn-sq__carousel-dot {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 9999px;
	border: none;
	cursor: pointer;
	padding: 0;
	background: rgba(255, 255, 255, 0.3);
	transition: background 0.25s ease, width 0.25s ease;
	flex-shrink: 0;
}

.mn-sq__carousel-dot--active {
	background: linear-gradient(135deg, #FF6900 0%, #CF2E2E 100%);
	width: 20px;
	border-radius: 4px;
}

/* ── Mobile — full-width bottom sheet ──────────────────────────────────── */
@media ( max-width: 600px ) {
	.mn-sq__modal-overlay {
		padding: 0;
		align-items: flex-end;
	}

	.mn-sq__modal {
		width: 100%;
		border-radius: var(--mn-sq-radius) var(--mn-sq-radius) 0 0;
		padding: 2rem 1rem 2rem;
		max-height: 92dvh;
		overflow-y: auto;
	}

	.mn-sq__modal .mn-sq__result-header,
	.mn-sq__modal .mn-sq--selecting > .mn-sq__heading {
		margin: -2rem -1rem 1.5rem;
		padding: 1.5rem 3rem 1.25rem 1rem;
	}

	/* ── Mobile carousel: hide arrows, snap-scroll cards, show dots ── */

	/* Hide arrow buttons — dots take over navigation */
	.mn-sq__carousel-btn {
		display: none !important;
	}

	/* Carousel wrapper takes full width; JS width/margin overrides are cleared */
	.mn-sq__plans-carousel {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Bleed the grid edge-to-edge inside the modal so cards get maximum width.
	   Right padding leaves a ~1rem peek of the next card as a scroll hint.
	   touch-action:pan-x tells the browser this element handles horizontal
	   panning only — vertical swipes pass through to the modal scroll container
	   so the user can scroll down to the buttons below the carousel.
	   proximity snap is less aggressive than mandatory so vertical gestures
	   aren't hijacked by the snap logic. */
	.mn-sq__modal .mn-sq__plans-grid {
		margin-left: -1rem;
		margin-right: -1rem;
		padding-left: 1rem;
		padding-right: 0.5rem;
		scroll-padding-left: 1rem;
		gap: 0.75rem;
		touch-action: pan-x pan-y;
		scroll-snap-type: x proximity;
	}

	/* Cards nearly fill the screen width with a small peek of the next card */
	.mn-sq__plan-card {
		flex: 0 0 calc(100vw - 3rem);
		max-width: 320px;
	}

	/* Show dot indicators on mobile */
	.mn-sq__carousel-dots {
		display: flex;
	}
}

/* Editor placeholder (block editor only) */
.mn-service-qualifier-editor-preview {
	border: 1px dashed #adb5bd;
	border-radius: 4px;
	padding: 0;
}

.mn-sq-editor-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	text-align: center;
	gap: .5rem;
	color: #6b7280;
}

.mn-sq-editor-placeholder__icon {
	color: #9ca3af;
}

.mn-sq-editor-placeholder__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: #374151;
}

.mn-sq-editor-placeholder__description {
	margin: 0;
	font-size: .875rem;
	max-width: 320px;
}

/* ── Autocomplete single-field row ──────────────────────────────────────── */
.mn-sq__autocomplete-row {
	display: flex;
	gap: .625rem;
	align-items: stretch;
}

.mn-sq__autocomplete-input {
	flex: 1 1 0%;
	min-width: 0;
	font-size: 1rem;
}

/* Ensure Google's suggestion dropdown always appears above page content */
.pac-container {
	z-index: 999999 !important;
	font-family: inherit;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0,0,0,.15);
	border: 1px solid var(--mn-sq-border, #e2e8f0);
	margin-top: 2px;
}

.pac-item {
	padding: .5rem .875rem;
	font-size: .9375rem;
	cursor: pointer;
}

.pac-item:hover,
.pac-item-selected {
	background: var(--mn-sq-secondary, #f8fafc);
}

.pac-item-query {
	font-size: .9375rem;
}

/* Responsive */
@media ( max-width: 600px ) {
	.mn-sq {
		padding: 1.5rem;
		/* Prevent any child from causing horizontal scroll */
		overflow-x: hidden;
		width: 100%;
	}

	/* Prevent long heading/subheading text from breaking the layout */
	.mn-sq__heading,
	.mn-sq__subheading,
	.mn-sq__result-address,
	.mn-sq__error-text {
		overflow-wrap: break-word;
		word-break: break-word;
	}

	/* Stack the autocomplete field and button vertically on mobile.
	   Without this the full-width button rule crushes the input to nothing. */
	.mn-sq__autocomplete-row {
		flex-direction: column;
	}

	.mn-sq__autocomplete-input {
		width: 100%;
	}

	/* Override Avada theme height rules on mobile. */
	.mn-sq__input,
	.mn-sq__autocomplete-input {
		height: 2.5rem !important;
		min-height: 2.5rem !important;
		font-size: 1rem !important;
		padding: 0 0.75rem !important;
		box-sizing: border-box !important;
	}

	.mn-sq__row--street {
		grid-template-columns: 1fr;
	}

	.mn-sq__row--location {
		grid-template-columns: 1fr 1fr;
	}

	.mn-sq__row--location .mn-sq__field:first-child {
		grid-column: 1 / -1;
	}

	.mn-sq__details-grid {
		grid-template-columns: 1fr;
	}

	.mn-sq__cta-group {
		flex-direction: column;
		align-items: stretch;
	}

	.mn-sq__btn {
		width: 100%;
		justify-content: center;
	}
}