/* ============================================================
   EP Weight Loss Calculation — base stylesheet
   ============================================================
   Everything is scoped under .ep-calc so styles never leak
   into the rest of the page. All brand decisions live in CSS
   custom properties declared on the wrapper. Elementor's
   Style-tab controls override these variables per instance
   via {{WRAPPER}} selectors — this file only ships defaults.
   ============================================================ */

.ep-calc {
	/* Brand colours (defaults — overridden by Elementor controls) */
	--green: #74A737;
	--green-dark: #628F2D;
	--green-deep: #557D26;
	--ink: #1E3932;
	--body: #51635B;
	--tint: #F3F7E9;
	--tint-2: #ECF3DD;
	--border: #DCE5CC;
	--card-bg: #FFFFFF;
	--gold: #E9A53C;
	--ok-bg: #EAF4DC;
	--maybe-bg: #FDF3DF;
	--maybe-ink: #8A6116;
	--info-bg: #EEF2F0;
	--error: #B3431F;
	--micro: #7C8A81;

	/* Shape & type */
	--radius-card: 20px;
	--radius-field: 12px;
	--font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	--shadow-card: 0 10px 30px rgba(30, 57, 50, .08);

	font-family: var(--font);
	color: var(--ink);
	line-height: 1.5;
}

.ep-calc *,
.ep-calc *::before,
.ep-calc *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
	.ep-calc * {
		transition: none !important;
		animation: none !important;
	}
}

/* ---- section shell ---- */
.ep-calc .calculator-section {
	background: var(--tint);
	padding: 56px 32px 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
}

.ep-calc .kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--green);
}

.ep-calc .section-title {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
	line-height: 1.18;
	text-align: center;
	letter-spacing: -.5px;
	max-width: 600px;
}

/* ---- primitives ---- */
.ep-calc .f-label {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	margin-bottom: 9px;
}

.ep-calc .f-row {
	display: flex;
	gap: 10px;
}

.ep-calc .f-box {
	flex: 1;
	display: flex;
	align-items: center;
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	border-radius: var(--radius-field);
	transition: border-color .15s;
	min-width: 0;
}

.ep-calc .f-box:focus-within {
	border-color: var(--green);
}

.ep-calc .f-box input {
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	border: 0;
	outline: 0;
	background: transparent;
	width: 100%;
	min-width: 0;
	padding: 13px 4px 13px 15px;
	-moz-appearance: textfield;
}

/* Theme override guard: some themes/Elementor kits add an outline or
   box-shadow on input:focus. Kill it on the inner input — the wrapper
   (.f-box:focus-within) carries the focus ring instead. */
.ep-calc .f-box input,
.ep-calc .f-box input:focus,
.ep-calc .f-box input:focus-visible,
.ep-calc .f-box input:active,
.ep-calc .f-box input:hover {
	outline: none !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	margin: 0 !important;
}

.ep-calc .f-box:focus-within {
	border-color: var(--green);
	box-shadow: 0 0 0 3px rgba(31, 107, 79, .12);
}

.ep-calc .f-box input::-webkit-outer-spin-button,
.ep-calc .f-box input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

.ep-calc .f-box .suffix {
	font-size: 13.5px;
	color: var(--body);
	padding-right: 14px;
	white-space: nowrap;
	user-select: none;
}

.ep-calc .f-err {
	display: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--error);
	margin-top: 7px;
}

.ep-calc .f-err.show {
	display: block;
}

.ep-calc .fg {
	margin-bottom: 2px;
}

.ep-calc .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: var(--green);
	border: 0;
	border-radius: 999px;
	padding: 15px 30px;
	min-height: 52px;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s, transform .1s;
}

.ep-calc .btn:hover {
	background: var(--green-dark);
	color: #fff;
}

.ep-calc .btn:active {
	transform: scale(.985);
}

.ep-calc .btn:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

.ep-calc .btn.full {
	width: 100%;
}

.ep-calc .summary {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ink);
}

.ep-calc .summary strong {
	color: var(--green-deep);
}

.ep-calc .micro {
	font-size: 12.5px;
	color: var(--micro);
	line-height: 1.55;
}

.ep-calc .stat {
	background: var(--card-bg);
	border-radius: 14px;
	padding: 18px 14px;
	text-align: center;
}

.ep-calc .stat .v {
	font-size: 24px;
	font-weight: 800;
	color: var(--green-deep);
	line-height: 1.15;
}

.ep-calc .stat .l {
	font-size: 12px;
	color: var(--body);
	margin-top: 4px;
}

.ep-calc .nudge {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border-radius: 14px;
	padding: 15px 18px;
	text-align: left;
}

.ep-calc .nudge .ic {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	margin-top: 1px;
}

.ep-calc .nudge .t {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
}

.ep-calc .nudge .s {
	font-size: 13px;
	margin-top: 3px;
	line-height: 1.5;
}

.ep-calc .nudge.ok {
	background: var(--ok-bg);
	border: 1px solid var(--green);
}

.ep-calc .nudge.ok .ic { background: var(--green); color: #fff; }
.ep-calc .nudge.ok .t  { color: var(--ink); }
.ep-calc .nudge.ok .s  { color: var(--body); }

.ep-calc .nudge.maybe {
	background: var(--maybe-bg);
	border: 1px solid #E5C476;
}

.ep-calc .nudge.maybe .ic { background: var(--gold); color: #fff; }
.ep-calc .nudge.maybe .t,
.ep-calc .nudge.maybe .s  { color: var(--maybe-ink); }

.ep-calc .nudge.info {
	background: var(--info-bg);
	border: 1px solid #C9D4CE;
}

.ep-calc .nudge.info .ic { background: var(--body); color: #fff; }
.ep-calc .nudge.info .t  { color: var(--ink); }
.ep-calc .nudge.info .s  { color: var(--body); }

/* ---- TOGGLE — underline tabs ---- */
.ep-calc .unit-tabs {
	display: flex;
	gap: 8px;
	border-bottom: 2px solid var(--tint-2);
	width: fit-content;
}

.ep-calc .unit-tabs button {
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--body);
	background: transparent;
	border: 0;
	padding: 8px 6px 11px;
	cursor: pointer;
	position: relative;
	transition: color .15s;
}

.ep-calc .unit-tabs button::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s;
}

.ep-calc .unit-tabs button.active {
	color: var(--ink);
}

.ep-calc .unit-tabs button.active::after {
	transform: scaleX(1);
}

.ep-calc .unit-tabs button:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

/* ---- EDIT — inline answers line + underlined text link ---- */
.ep-calc .answers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	font-size: 13.5px;
	color: var(--body);
}

.ep-calc .answers .vals {
	font-weight: 600;
	color: var(--ink);
}

.ep-calc .answers .edit-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--green-deep);
	background: none;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	padding: 0;
}

.ep-calc .answers .edit-link svg {
	width: 14px;
	height: 14px;
}

.ep-calc .answers .edit-link:hover {
	color: var(--green-dark);
}

.ep-calc .answers .edit-link:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ---- MINI JOURNEY — numbered steps ---- */
.ep-calc .journey {
	display: flex;
	flex-direction: column;
}

.ep-calc .journey .step {
	display: flex;
	gap: 14px;
	position: relative;
	padding-bottom: 18px;
}

.ep-calc .journey .step:last-child {
	padding-bottom: 0;
}

.ep-calc .journey .step::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 30px;
	bottom: -2px;
	width: 2px;
	background: var(--border);
}

.ep-calc .journey .step:last-child::before {
	display: none;
}

.ep-calc .journey .num {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--green);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.ep-calc .journey .txt .t {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
}

.ep-calc .journey .txt .s {
	font-size: 12.5px;
	color: var(--body);
	margin-top: 2px;
}

/* ---- split layout ---- */
.ep-calc .split-b {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	max-width: 1060px;
	background: var(--card-bg);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.ep-calc .split-b .form-side {
	padding: 38px 36px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ep-calc .split-b .res-side {
	background: var(--tint);
	padding: 38px 36px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	justify-content: center;
}

.ep-calc .split-b h3 {
	font-size: 21px;
	font-weight: 800;
	line-height: 1.25;
}

.ep-calc .split-b .res-side .stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* ---- illustration placeholder (pre-submit only) ---- */
.ep-calc .illus-ph {
	width: 100%;
	max-width: 340px;
	aspect-ratio: 4 / 3;
	margin: 0 auto;
	border: 2px dashed var(--green);
	border-radius: 16px;
	background: radial-gradient(circle at 30% 30%, rgba(116, 167, 55, .10), transparent 60%), var(--tint);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	padding: 22px;
}

.ep-calc .illus-ph .badge {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--green-deep);
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 5px 12px;
}

.ep-calc .illus-ph .frame-ic {
	width: 54px;
	height: 54px;
	color: var(--green);
}

.ep-calc .illus-ph .hint {
	font-size: 12.5px;
	color: var(--body);
	line-height: 1.5;
	max-width: 260px;
}

.ep-calc .illus-img {
	width: 100%;
	max-width: 340px;
	margin: 0 auto;
	display: block;
	border-radius: 16px;
}

/* ---- illustration filling the whole right panel (pre-submit) ---- */
.ep-calc .split-b .res-side.has-img {
	position: relative;
	padding: 0;
	min-height: var(--img-min-h, 300px);
}

.ep-calc .illus-fill {
	position: absolute;
	inset: 0;
}

.ep-calc .illus-fill img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--img-pos, center);
}

.ep-calc .illus-fill.fit-contain {
	inset: 28px;
}

.ep-calc .illus-fill.fit-contain img {
	object-fit: contain;
	object-position: center;
}

/* ---- responsive ---- */
@media (max-width: 760px) {
	.ep-calc .calculator-section {
		padding: 40px 16px 52px;
	}

	.ep-calc .split-b {
		grid-template-columns: 1fr;
	}

	.ep-calc .split-b .form-side,
	.ep-calc .split-b .res-side {
		padding: 26px 20px;
	}

	.ep-calc .split-b.is-results .res-side {
		order: -1;
	}

	.ep-calc .illus-ph {
		aspect-ratio: auto;
		min-height: 180px;
		max-width: 300px;
	}

	.ep-calc .illus-fill.fit-contain {
		inset: 20px;
	}
}

@media (max-width: 380px) {
	.ep-calc .split-b .res-side .stats {
		gap: 10px;
	}

	.ep-calc .stat {
		padding: 15px 10px;
	}

	.ep-calc .stat .v {
		font-size: 22px;
	}
}