/* =========================================================================
   FreshXpress ROI Calculator
   A self-contained, frost-themed widget. All rules are namespaced under
   .freshxp-roi so the calculator never collides with the host theme.
   ========================================================================= */

.freshxp-roi {
	/* Palette matched to fresh-xp.com — black wordmark, white / #f5f5f5
	   surfaces, photography-led minimalism. If FreshXpress has an exact
	   brand accent hex, set --fx-accent below and the buttons, links and
	   primary chart line pick it up automatically. */
	--fx-accent: #1a1a1a; /* primary action / link / chart series colour */
	--fx-navy:   #1a1a1a;
	--fx-deep:   #000000;
	--fx-cyan:   var(--fx-accent);
	--fx-cyan-d: #111111;
	--fx-mint:   #f5f5f5;
	--fx-frost:  #fafafa;
	--fx-line:   #e6e6e6;
	--fx-ink:    #1a1a1a;
	--fx-muted:  #6b7280;
	--fx-good:   #1a1a1a;
	--fx-warn:   #7a5c2e;
	--fx-cons:   #9aa0a6;  /* conservative band — grey */
	--fx-opt:    #1a1a1a;  /* optimistic band — black */
	--fx-radius: 16px;
	--fx-shadow: 0 18px 50px -28px rgba(0, 0, 0, 0.30);

	box-sizing: border-box;
	max-width: 1040px;
	margin: 2rem auto;
	color: var(--fx-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.freshxp-roi *,
.freshxp-roi *::before,
.freshxp-roi *::after { box-sizing: border-box; }

.freshxp-roi__shell {
	background: #fff;
	border: 1px solid var(--fx-line);
	border-radius: var(--fx-radius);
	box-shadow: var(--fx-shadow);
	overflow: hidden;
}

/* ---- Header ----------------------------------------------------------- */
.freshxp-roi__head {
	position: relative;
	padding: 1.6rem 1.75rem 1.4rem;
	background: #fff;
	color: var(--fx-ink);
	border-bottom: 1px solid var(--fx-line);
}
.freshxp-roi__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5ch;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fx-muted);
	margin: 0 0 .5rem;
}
.freshxp-roi__eyebrow::before {
	content: "";
	width: 22px; height: 2px;
	background: var(--fx-cyan);
	display: inline-block;
}
.freshxp-roi__title {
	margin: 0;
	font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.05rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.12;
}
.freshxp-roi__sub {
	margin: .5rem 0 0;
	max-width: 60ch;
	color: var(--fx-muted);
	font-size: .95rem;
}

/* ---- Body grid -------------------------------------------------------- */
.freshxp-roi__body {
	display: grid;
	grid-template-columns: minmax(280px, 360px) 1fr;
	gap: 0;
}
@media (max-width: 820px) {
	.freshxp-roi__body { grid-template-columns: 1fr; }
}

/* ---- Form ------------------------------------------------------------- */
.freshxp-roi__form {
	padding: 1.5rem 1.5rem 1.75rem;
	background: var(--fx-frost);
	border-right: 1px solid var(--fx-line);
}
@media (max-width: 820px) {
	.freshxp-roi__form { border-right: 0; border-bottom: 1px solid var(--fx-line); }
}

.freshxp-roi__group { margin: 0 0 1.35rem; }
.freshxp-roi__group:last-child { margin-bottom: 0; }
.freshxp-roi__legend {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fx-cyan-d);
	margin: 0 0 .7rem;
	padding-bottom: .45rem;
	border-bottom: 1px solid var(--fx-line);
}

.freshxp-roi__field { margin: 0 0 .85rem; }
.freshxp-roi__field:last-child { margin-bottom: 0; }
.freshxp-roi__label {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	color: var(--fx-ink);
	margin: 0 0 .3rem;
}
.freshxp-roi__hint {
	display: block;
	font-size: .72rem;
	font-weight: 400;
	color: var(--fx-muted);
	margin-top: .12rem;
}

.freshxp-roi__control,
.freshxp-roi select.freshxp-roi__control,
.freshxp-roi input.freshxp-roi__control {
	width: 100%;
	padding: .55rem .7rem;
	font: inherit;
	font-size: .92rem;
	color: var(--fx-ink);
	background: #fff;
	border: 1px solid var(--fx-line);
	border-radius: 10px;
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.freshxp-roi select.freshxp-roi__control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2317b0c4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .7rem center;
	padding-right: 1.9rem;
}
.freshxp-roi__control:focus {
	outline: none;
	border-color: var(--fx-cyan);
	box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.16);
}

.freshxp-roi__range {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: .4rem;
}
.freshxp-roi__range-sep { color: var(--fx-muted); font-size: .8rem; }
.freshxp-roi__suffix-wrap { position: relative; }
.freshxp-roi__suffix {
	position: absolute;
	right: .7rem; top: 50%;
	transform: translateY(-50%);
	font-size: .8rem;
	color: var(--fx-muted);
	pointer-events: none;
}
.freshxp-roi__suffix-wrap .freshxp-roi__control { padding-right: 2.1rem; }

.freshxp-roi__check {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	font-size: .85rem;
	cursor: pointer;
}
.freshxp-roi__check input {
	margin-top: .15rem;
	width: 1.05rem; height: 1.05rem;
	accent-color: var(--fx-cyan);
	flex: 0 0 auto;
}

.freshxp-roi__advanced { margin-top: .4rem; }
.freshxp-roi__advanced > summary {
	cursor: pointer;
	font-size: .76rem;
	font-weight: 600;
	color: var(--fx-cyan-d);
	list-style: none;
	padding: .2rem 0;
}
.freshxp-roi__advanced > summary::-webkit-details-marker { display: none; }
.freshxp-roi__advanced > summary::before { content: "+ "; }
.freshxp-roi__advanced[open] > summary::before { content: "– "; }

.freshxp-roi__reset {
	margin-top: 1.1rem;
	width: 100%;
	padding: .6rem;
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	color: var(--fx-cyan-d);
	background: #fff;
	border: 1px solid var(--fx-line);
	border-radius: 10px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.freshxp-roi__reset:hover { background: var(--fx-mint); border-color: var(--fx-cyan); }

.freshxp-roi__flag {
	margin: 0 0 1.1rem;
	padding: .7rem .8rem;
	font-size: .78rem;
	line-height: 1.45;
	border-radius: 10px;
	background: var(--fx-mint);
	border: 1px solid var(--fx-line);
	color: var(--fx-deep);
}
.freshxp-roi__flag--warn {
	background: #f6f1e7;
	border-color: #e6dab9;
	color: #7a5c2e;
}
.freshxp-roi__flag strong { font-weight: 700; }

/* ---- Results ---------------------------------------------------------- */
.freshxp-roi__results { padding: 1.5rem 1.6rem 1.75rem; min-width: 0; }

.freshxp-roi__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .8rem;
	margin-bottom: 1.25rem;
}
@media (max-width: 520px) { .freshxp-roi__cards { grid-template-columns: 1fr; } }

.freshxp-roi__card {
	padding: .95rem 1rem;
	border: 1px solid var(--fx-line);
	border-radius: 12px;
	background: var(--fx-frost);
}
.freshxp-roi__card--hero {
	grid-column: 1 / -1;
	background: linear-gradient(135deg, var(--fx-navy), var(--fx-deep));
	border-color: transparent;
	color: #fff;
}
.freshxp-roi__card-label {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fx-muted);
	margin: 0 0 .25rem;
}
.freshxp-roi__card--hero .freshxp-roi__card-label { color: rgba(255, 255, 255, 0.72); }
.freshxp-roi__card-value {
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.05;
}
.freshxp-roi__card--hero .freshxp-roi__card-value { font-size: 1.9rem; }
.freshxp-roi__card-note { font-size: .74rem; color: var(--fx-muted); margin-top: .2rem; }
.freshxp-roi__card--hero .freshxp-roi__card-note { color: rgba(255, 255, 255, 0.6); }

/* ---- Chart ------------------------------------------------------------ */
.freshxp-roi__chart-wrap {
	position: relative;
	margin-bottom: 1.4rem;
	padding: 1rem 1rem .6rem;
	border: 1px solid var(--fx-line);
	border-radius: 12px;
	background: #fff;
}
.freshxp-roi__chart-title {
	font-size: .82rem;
	font-weight: 700;
	color: var(--fx-ink);
	margin: 0 0 .1rem;
}
.freshxp-roi__chart-sub { font-size: .72rem; color: var(--fx-muted); margin: 0 0 .6rem; }
.freshxp-roi__canvas-box { position: relative; height: 280px; }

/* ---- Table ------------------------------------------------------------ */
.freshxp-roi__table-title {
	font-size: .82rem;
	font-weight: 700;
	margin: 0 0 .5rem;
}
.freshxp-roi__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .85rem;
}
.freshxp-roi__table caption { text-align: left; }
.freshxp-roi__table th,
.freshxp-roi__table td {
	padding: .5rem .6rem;
	text-align: right;
	border-bottom: 1px solid var(--fx-line);
}
.freshxp-roi__table th:first-child,
.freshxp-roi__table td:first-child { text-align: left; }
.freshxp-roi__table thead th {
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fx-muted);
	border-bottom: 2px solid var(--fx-line);
}
.freshxp-roi__table tbody tr:last-child td { border-bottom: 0; }
.freshxp-roi__table tr.is-total td {
	font-weight: 800;
	color: var(--fx-deep);
	border-top: 2px solid var(--fx-line);
	background: var(--fx-mint);
}
.freshxp-roi__table td.is-muted { color: var(--fx-muted); }

/* ---- Footer ----------------------------------------------------------- */
.freshxp-roi__foot {
	margin-top: 1.3rem;
	padding-top: 1rem;
	border-top: 1px solid var(--fx-line);
	font-size: .73rem;
	color: var(--fx-muted);
	line-height: 1.5;
}
.freshxp-roi__foot a { color: var(--fx-cyan-d); }
.freshxp-roi__cta {
	display: inline-flex;
	align-items: center;
	gap: .4ch;
	margin-top: .7rem;
	padding: .6rem 1.05rem;
	font-size: .85rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background: var(--fx-cyan);
	border-radius: 999px;
	transition: background .15s ease, transform .15s ease;
}
.freshxp-roi__cta:hover { background: var(--fx-cyan-d); transform: translateY(-1px); color: #fff; }

.freshxp-roi__noscript { padding: 1.5rem; color: var(--fx-muted); }

@media (prefers-reduced-motion: reduce) {
	.freshxp-roi *,
	.freshxp-roi *::before,
	.freshxp-roi *::after { transition: none !important; }
}