/**
 * EarthCrete Turf & Artificial Grass Calculator — stylesheet
 *
 * Every selector is scoped under .ectg-calculator or .ectg-sticky so this
 * cannot collide with theme styles, Elementor defaults, or any other
 * plugin's CSS (including a legacy "Site Estimator" plugin). No class in
 * this file is generic (.card, .button, .container, .slider, etc.).
 *
 * Layout approach: fluid, clamp()-based sizing rather than one media
 * query per device width, so the calculator holds up cleanly from small
 * phones through large desktop monitors without duplicated breakpoints.
 * A single structural breakpoint (980px) switches between the mobile
 * single-column flow and the desktop two-column layout.
 *
 * The hero photo has no forced aspect-ratio: the frame is exactly as
 * tall as the image placed inside it (see the Media column section),
 * so it looks right whatever crop the real photo ends up being.
 *
 * v1.1.1 — fixes one theme-conflict issue, with the smallest override
 * that will do it (see "Theme overrides" at the end of the file):
 * themes that style `button:hover { color:#fff }` were turning the
 * selection-card text white on hover, making it unreadable.
 *
 * No markup, JS behaviour, class names or data-attributes were changed,
 * so this file is a drop-in replacement.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Work+Sans:wght@400;500;600&display=swap');

.ectg-calculator {
	--ectg-primary: #2F7A4D;
	--ectg-primary-deep: #1F5636;
	--ectg-text: #1B2420;
	--ectg-border: #E3E0D8;
	--ectg-radius: 18px;
	--ectg-stone: #F1F0EB;
	--ectg-surface: #FFFFFF;
	--ectg-muted: #6B6F68;
	--ectg-font-display: 'Space Grotesk', 'Segoe UI', Roboto, sans-serif;
	--ectg-font-body: 'Work Sans', 'Segoe UI', Roboto, sans-serif;

	--ectg-gap: clamp(24px, 4vw, 56px);
	--ectg-pad: clamp(20px, 3vw, 32px);

	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
	color: var(--ectg-text);
	font-family: var(--ectg-font-body);
	-webkit-font-smoothing: antialiased;
}

.ectg-calculator *,
.ectg-calculator *::before,
.ectg-calculator *::after {
	box-sizing: border-box;
}

.ectg-calculator__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ectg-gap);
}

@media (min-width: 980px) {
	.ectg-calculator__inner {
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
		align-items: start;
	}
}

/* -------------------------------------------------------------------- */
/* Media column                                                          */
/* -------------------------------------------------------------------- */

.ectg-media {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* No aspect-ratio and no fixed height: the frame is exactly as tall as
   the image inside it, whatever proportions that image happens to have.
   The image sits in normal flow (not absolutely positioned) so its own
   height is what sizes the frame. */
.ectg-media__frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--ectg-radius);
	background: linear-gradient(155deg, var(--ectg-stone), #E7E4DC);
	box-shadow: 0 28px 54px -30px rgba(17, 21, 18, 0.45), 0 2px 8px rgba(17, 21, 18, 0.06);
	line-height: 0;
}

.ectg-media__image {
	display: block;
	width: 100%;
	height: auto;
	opacity: 1;
	transition: opacity 0.35s ease;
}

.ectg-media__image.is-fading {
	opacity: 0;
}

.ectg-media__badge {
	position: absolute;
	top: clamp(14px, 2vw, 20px);
	left: clamp(14px, 2vw, 20px);
	background: rgba(17, 21, 18, 0.88);
	color: #fff;
	font-family: var(--ectg-font-body);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 7px 12px;
	border-radius: 999px;
	box-shadow: 0 8px 18px -8px rgba(17, 21, 18, 0.55);
	max-width: calc(100% - 2 * clamp(14px, 2vw, 20px));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ectg-float-estimate {
	position: relative;
	flex: none;
	margin-top: -56px;
	margin-inline: clamp(12px, 3vw, 24px);
	background: rgba(255, 255, 255, 0.88);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: calc(var(--ectg-radius) * 0.7);
	padding: 16px 20px;
	box-shadow: 0 20px 44px -20px rgba(17, 21, 18, 0.4);
}

.ectg-float-estimate__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.ectg-float-estimate__range {
	font-family: var(--ectg-font-display);
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 26px);
	letter-spacing: -0.01em;
}

.ectg-float-estimate__label {
	font-size: 12px;
	color: var(--ectg-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ectg-float-estimate__disclaimer {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ectg-muted);
}

@media (max-width: 979.98px) {
	.ectg-float-estimate {
		display: none;
	}
}

/* -------------------------------------------------------------------- */
/* Panel column                                                          */
/* -------------------------------------------------------------------- */

.ectg-panel {
	display: flex;
	flex-direction: column;
	gap: clamp(22px, 2.6vw, 30px);
	min-width: 0;
}

@media (min-width: 980px) {
	.ectg-panel {
		border-left: 1px solid var(--ectg-border);
		padding-left: var(--ectg-gap);
	}
}

.ectg-panel__header {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ectg-eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--ectg-font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ectg-primary);
}

.ectg-eyebrow::before {
	content: '';
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--ectg-primary);
}

.ectg-heading {
	margin: 0;
	font-family: var(--ectg-font-display);
	font-weight: 700;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--ectg-text);
}

.ectg-section {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: clamp(18px, 2.4vw, 26px);
	border-top: 1px solid var(--ectg-border);
}

.ectg-section--area {
	border-top: none;
	padding-top: 0;
}

.ectg-section__title {
	margin: 0;
	font-family: var(--ectg-font-display);
	font-weight: 600;
	font-size: clamp(16px, 1.6vw, 19px);
	color: var(--ectg-text);
}

/* -------------------------------------------------------------------- */
/* Area input + slider                                                   */
/* -------------------------------------------------------------------- */

.ectg-area {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.ectg-area__label {
	font-weight: 500;
	font-size: 15px;
}

.ectg-area__field {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid var(--ectg-border);
	border-radius: calc(var(--ectg-radius) * 0.5);
	padding: 6px 8px 6px 14px;
	background: var(--ectg-surface);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) {
	.ectg-area__field:hover {
		border-color: color-mix(in srgb, var(--ectg-primary) 45%, var(--ectg-border));
	}
}

.ectg-area__field:focus-within {
	border-color: var(--ectg-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ectg-primary) 18%, transparent);
}

.ectg-area__input {
	width: 4.5ch;
	border: 0;
	background: transparent;
	text-align: right;
	font-family: var(--ectg-font-display);
	font-weight: 600;
	font-size: 17px;
	color: var(--ectg-text);
	-moz-appearance: textfield;
}

.ectg-area__input::-webkit-outer-spin-button,
.ectg-area__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ectg-area__input:focus-visible {
	outline: none;
}

.ectg-area__unit {
	font-size: 13px;
	color: var(--ectg-muted);
	padding: 6px 8px;
	background: var(--ectg-stone);
	border-radius: calc(var(--ectg-radius) * 0.35);
}

.ectg-slider {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--ectg-primary) 0%, var(--ectg-primary) var(--ectg-fill, 0%), var(--ectg-border) var(--ectg-fill, 0%), var(--ectg-border) 100%);
	margin: 4px 0 2px;
	cursor: pointer;
}

.ectg-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--ectg-primary);
	box-shadow: 0 4px 10px rgba(17, 21, 18, 0.18);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ectg-slider::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--ectg-primary);
	box-shadow: 0 4px 10px rgba(17, 21, 18, 0.18);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ectg-slider::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: var(--ectg-border);
}

.ectg-slider::-moz-range-progress {
	height: 6px;
	border-radius: 999px;
	background: var(--ectg-primary);
}

@media (hover: hover) {
	.ectg-slider:hover::-webkit-slider-thumb {
		transform: scale(1.1);
		box-shadow: 0 6px 14px rgba(17, 21, 18, 0.24);
	}

	.ectg-slider:hover::-moz-range-thumb {
		transform: scale(1.1);
		box-shadow: 0 6px 14px rgba(17, 21, 18, 0.24);
	}
}

.ectg-slider:active::-webkit-slider-thumb {
	transform: scale(1.18);
	box-shadow: 0 6px 16px rgba(17, 21, 18, 0.3);
}

.ectg-slider:active::-moz-range-thumb {
	transform: scale(1.18);
	box-shadow: 0 6px 16px rgba(17, 21, 18, 0.3);
}

.ectg-slider:focus-visible {
	outline: 3px solid rgba(47, 122, 77, 0.35);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------- */
/* Selection cards                                                       */
/* -------------------------------------------------------------------- */

.ectg-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.ectg-card {
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	background: var(--ectg-surface);
	border: 1.5px solid var(--ectg-border);
	border-radius: calc(var(--ectg-radius) * 0.6);
	padding: 10px;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
	font-family: var(--ectg-font-body);
	color: var(--ectg-text);
	box-shadow: 0 1px 2px rgba(17, 21, 18, 0.04);
}

@media (hover: hover) {
	.ectg-card:hover {
		border-color: var(--ectg-primary);
		background: color-mix(in srgb, var(--ectg-primary) 6%, var(--ectg-surface));
		transform: translateY(-2px);
		box-shadow: 0 14px 26px -16px rgba(17, 21, 18, 0.35);
	}

	.ectg-card:hover .ectg-card__media img {
		transform: scale(1.07);
	}
}

.ectg-card:active {
	transform: translateY(0) scale(0.98);
}

.ectg-card:focus-visible {
	outline: 3px solid rgba(47, 122, 77, 0.35);
	outline-offset: 3px;
}

.ectg-card.is-selected {
	border-color: var(--ectg-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ectg-primary) 18%, transparent);
	background: color-mix(in srgb, var(--ectg-primary) 5%, var(--ectg-surface));
}

.ectg-card__media {
	position: relative;
	flex: none;
	width: clamp(52px, 6vw, 64px);
	height: clamp(52px, 6vw, 64px);
	border-radius: calc(var(--ectg-radius) * 0.4);
	overflow: hidden;
	background: var(--ectg-stone);
}

.ectg-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

/* Small check badge that appears on the thumbnail of whichever card in
   a group is currently selected — pure CSS, no markup change needed. */
.ectg-card.is-selected .ectg-card__media::after {
	content: '\2713';
	position: absolute;
	top: 4px;
	right: 4px;
	width: 17px;
	height: 17px;
	line-height: 17px;
	text-align: center;
	border-radius: 50%;
	background: var(--ectg-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	box-shadow: 0 0 0 2px #fff;
}

.ectg-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ectg-card__name {
	font-weight: 600;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.ectg-card__tag {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ectg-primary-deep);
	background: color-mix(in srgb, var(--ectg-primary) 14%, transparent);
	padding: 2px 7px;
	border-radius: 999px;
}

.ectg-card__desc {
	font-size: 12px;
	line-height: 1.35;
	color: var(--ectg-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
}

@media (max-width: 420px) {
	.ectg-cards {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------- */
/* Result + CTA                                                          */
/* -------------------------------------------------------------------- */

.ectg-result {
	padding-top: clamp(18px, 2.4vw, 26px);
	border-top: 1px solid var(--ectg-border);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ectg-result__price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.ectg-result__range {
	font-family: var(--ectg-font-display);
	font-weight: 700;
	font-size: clamp(26px, 3vw, 34px);
	letter-spacing: -0.01em;
}

.ectg-result__label {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ectg-muted);
}

.ectg-result__disclaimer {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ectg-muted);
	max-width: 46ch;
}

.ectg-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--ectg-primary);
	color: #fff;
	font-family: var(--ectg-font-body);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	padding: 15px 24px;
	border-radius: calc(var(--ectg-radius) * 0.55);
	box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--ectg-primary) 70%, transparent);
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.ectg-cta:hover,
.ectg-cta:focus-visible {
	background: var(--ectg-primary-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 18px 30px -14px color-mix(in srgb, var(--ectg-primary-deep) 75%, transparent);
}

.ectg-cta:active {
	transform: translateY(0) scale(0.98);
	box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--ectg-primary-deep) 70%, transparent);
}

.ectg-cta:focus-visible {
	outline: 3px solid rgba(47, 122, 77, 0.35);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ectg-calculator *,
	.ectg-calculator *::before,
	.ectg-calculator *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}

/* -------------------------------------------------------------------- */
/* Mobile sticky estimate bar                                            */
/* -------------------------------------------------------------------- */

.ectg-sticky {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid var(--ectg-border, #E3E0D8);
	border-radius: 16px;
	padding: 12px 14px;
	box-shadow: 0 -10px 30px -14px rgba(17, 21, 18, 0.35);
	font-family: 'Work Sans', 'Segoe UI', Roboto, sans-serif;
	color: var(--ectg-text, #1B2420);
	transform: translateY(140%);
	opacity: 0;
	transition: transform 0.28s ease, opacity 0.28s ease;
	pointer-events: none;
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.ectg-sticky.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.ectg-sticky__info {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}

.ectg-sticky__range {
	font-weight: 700;
	font-size: 16px;
}

.ectg-sticky__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ectg-muted, #6B6F68);
}

.ectg-sticky__jump {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: none;
	background: var(--ectg-primary, #2F7A4D);
	color: #fff;
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

@media (hover: hover) {
	.ectg-sticky__jump:hover {
		background: var(--ectg-primary-deep, #1F5636);
		transform: scale(1.08);
	}
}

.ectg-sticky__jump:active {
	transform: scale(0.94);
}

.ectg-sticky__jump:focus-visible {
	outline: 3px solid rgba(47, 122, 77, 0.35);
	outline-offset: 2px;
}

@media (min-width: 980px) {
	.ectg-sticky {
		display: none;
	}
}

body.ectg-has-sticky-padding {
	padding-bottom: 78px;
}

/* ==================================================================== */
/* Theme overrides                                                       */
/*                                                                       */
/* Minimal, targeted rules that exist only to out-rank two common        */
/* WordPress theme declarations. Kept as small as possible on purpose.   */
/* ==================================================================== */

/* Many themes ship `button:hover { color:#fff }`. The option cards are
   <button> elements, so that rule was turning their text white and
   unreadable on hover. This keeps the card text dark in every state. */
.ectg-calculator .ectg-card,
.ectg-calculator .ectg-card:hover,
.ectg-calculator .ectg-card:focus,
.ectg-calculator .ectg-card:active {
	color: var(--ectg-text) !important;
}

.ectg-calculator .ectg-card .ectg-card__name {
	color: var(--ectg-text) !important;
}

.ectg-calculator .ectg-card .ectg-card__desc {
	color: var(--ectg-muted) !important;
}

/* The frame now takes its height from the image, so this just stops a
   theme from imposing its own fixed height on it — it does NOT force
   height:100%, which would undo the sizing above. */
.ectg-calculator .ectg-media__image {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: none !important;
}

/* The CTA is an <a>, so a theme's link-hover colour could repaint it.
   White is the correct label colour here. */
.ectg-calculator a.ectg-cta:hover,
.ectg-calculator a.ectg-cta:focus {
	color: #fff !important;
}