/* GTP ROI Calculator v2.0.0 — GTP iCommerce, All Rights Reserved */

.gtp-roi {
	--gtp-bg: #f7f8fb;
	--gtp-card: #ffffff;
	--gtp-ink: #0f1729;
	--gtp-muted: #64748b;
	--gtp-line: #e6e9f0;
	--gtp-brand: #2563eb;
	--gtp-brand-2: #4f46e5;
	--gtp-accent: #0ea96b;
	--gtp-warn: #b45309;
	--gtp-radius: 16px;
	--gtp-shadow: 0 1px 2px rgba(15,23,41,.04), 0 12px 30px rgba(15,23,41,.07);

	max-width: 1060px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--gtp-ink);
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
}
.gtp-roi *, .gtp-roi *::before, .gtp-roi *::after { box-sizing: border-box; }

.gtp-roi__head { text-align: center; margin-bottom: 20px; }
.gtp-roi__title { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.gtp-roi__sub { color: var(--gtp-muted); margin: 0; font-size: 15px; }

.gtp-roi__panel {
	background: var(--gtp-card);
	border: 1px solid var(--gtp-line);
	border-radius: var(--gtp-radius);
	box-shadow: var(--gtp-shadow);
	padding: 22px;
}

/* ---- chooser ---- */
.gtp-roi__chooser { margin-bottom: 20px; }
.gtp-roi__chooser-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.gtp-roi__field--grow { flex: 1 1 260px; margin-bottom: 0; }
.gtp-roi__helper-btn {
	background: none; border: 1.5px solid var(--gtp-line); border-radius: 10px;
	padding: 11px 16px; font-size: 13.5px; font-weight: 700; color: var(--gtp-brand);
	cursor: pointer; transition: all .15s; white-space: nowrap;
}
.gtp-roi__helper-btn:hover { border-color: var(--gtp-brand); background: rgba(37,99,235,.05); }
.gtp-roi__engine-note { font-size: 13px; color: var(--gtp-muted); margin: 10px 0 0; }
.gtp-roi__engine-note strong { color: var(--gtp-brand); }

.gtp-roi__select {
	border: 0; outline: none; padding: 11px 12px; font-size: 15px; width: 100%;
	background: transparent; color: var(--gtp-ink); appearance: none; cursor: pointer;
}

/* ---- wizard ---- */
.gtp-roi__wizard { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--gtp-line); }
.gtp-roi__wizard[hidden] { display: none; }
.gtp-roi__wiz-q[hidden] { display: none; }
.gtp-roi__wiz-question { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.gtp-roi__wiz-opts { display: flex; flex-direction: column; gap: 8px; }
.gtp-roi__wiz-opts button {
	text-align: left; background: #fff; border: 1.5px solid var(--gtp-line); border-radius: 10px;
	padding: 12px 14px; font-size: 14px; cursor: pointer; transition: all .15s; color: var(--gtp-ink);
}
.gtp-roi__wiz-opts button:hover { border-color: var(--gtp-brand); background: rgba(37,99,235,.05); }
.gtp-roi__wiz-restart {
	background: none; border: 0; color: var(--gtp-muted); font-size: 12.5px;
	cursor: pointer; margin-top: 10px; padding: 0; text-decoration: underline;
}
.gtp-roi__wiz-restart[hidden] { display: none; }

/* ---- layout ---- */
.gtp-roi__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 820px) { .gtp-roi__grid { grid-template-columns: 1fr; } }

/* ---- inputs ---- */
.gtp-roi__section { margin-bottom: 22px; }
.gtp-roi__section:last-child { margin-bottom: 0; }
.gtp-roi__section[hidden] { display: none; }
.gtp-roi__section-label {
	display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; color: var(--gtp-brand); margin-bottom: 12px;
}
.gtp-roi__field { display: block; margin-bottom: 14px; }
.gtp-roi__label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.gtp-roi__hint { display: block; font-size: 11.5px; font-weight: 400; color: var(--gtp-muted); margin-top: 2px; }

.gtp-roi__input-wrap {
	display: flex; align-items: center; border: 1.5px solid var(--gtp-line);
	border-radius: 10px; background: #fff; overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}
.gtp-roi__input-wrap:focus-within {
	border-color: var(--gtp-brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.gtp-roi__prefix, .gtp-roi__suffix {
	padding: 0 12px; color: var(--gtp-muted); font-weight: 600; background: #f3f5f9;
	align-self: stretch; display: flex; align-items: center; font-size: 13px;
}
.gtp-roi__prefix { border-right: 1px solid var(--gtp-line); }
.gtp-roi__suffix { border-left: 1px solid var(--gtp-line); }
.gtp-roi__in[type="number"] {
	border: 0; outline: none; padding: 11px 12px; font-size: 15px; width: 100%;
	background: transparent; color: var(--gtp-ink); -moz-appearance: textfield;
}
.gtp-roi__in::-webkit-outer-spin-button, .gtp-roi__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.gtp-roi__row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gtp-roi__row3 .gtp-roi__field { margin-bottom: 8px; }
.gtp-roi__row3 .gtp-roi__prefix { padding: 0 8px; }
.gtp-roi__note { font-size: 11.5px; color: var(--gtp-muted); margin: 2px 0 14px; line-height: 1.5; }

.gtp-roi__check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; margin-top: 4px; }
.gtp-roi__check input { width: 17px; height: 17px; accent-color: var(--gtp-brand); }

/* ---- advanced ---- */
.gtp-roi__section--advanced { border-top: 1px dashed var(--gtp-line); padding-top: 16px; }
.gtp-roi__adv-toggle {
	background: none; border: 0; color: var(--gtp-brand); font-weight: 700;
	cursor: pointer; padding: 0; font-size: 13.5px;
}
.gtp-roi__adv-toggle span { display: inline-block; transition: transform .2s; }
.gtp-roi__adv-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.gtp-roi__adv { margin-top: 14px; }
.gtp-roi__adv[hidden] { display: none; }

/* ---- results ---- */
.gtp-roi__results { background: var(--gtp-bg); }
.gtp-roi__hero {
	background: linear-gradient(135deg, var(--gtp-brand), var(--gtp-brand-2));
	color: #fff; border-radius: 14px; padding: 22px; text-align: center; margin-bottom: 16px;
	box-shadow: 0 10px 24px rgba(37,99,235,.28);
}
.gtp-roi__hero-label { display: block; font-size: 12.5px; font-weight: 600; opacity: .9; text-transform: uppercase; letter-spacing: .05em; }
.gtp-roi__hero-value { display: block; font-size: 40px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 4px; line-height: 1; }
.gtp-roi__hero-note { display: block; font-size: 12.5px; opacity: .88; }

.gtp-roi__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.gtp-roi__stat { background: #fff; border: 1px solid var(--gtp-line); border-radius: 12px; padding: 13px 14px; }
.gtp-roi__stat[hidden] { display: none; }
.gtp-roi__stat-label { display: block; font-size: 12px; color: var(--gtp-muted); font-weight: 600; margin-bottom: 4px; }
.gtp-roi__stat-value { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.gtp-roi__stat-value small { font-size: 11.5px; font-weight: 600; color: var(--gtp-muted); display: block; margin-top: 2px; }
.gtp-roi__stat--accent { border-color: rgba(14,169,107,.4); background: rgba(14,169,107,.06); }
.gtp-roi__stat--accent .gtp-roi__stat-value { color: var(--gtp-accent); }
.gtp-roi__stat--steady { border-color: rgba(14,169,107,.4); background: rgba(14,169,107,.06); }
.gtp-roi__stat--steady .gtp-roi__stat-value { color: var(--gtp-accent); }
.gtp-roi__stat--ltv { border-color: rgba(79,70,229,.4); background: rgba(79,70,229,.06); }
.gtp-roi__stat--ltv .gtp-roi__stat-value { color: var(--gtp-brand-2); }
.gtp-roi__stat--profit { grid-column: 1 / -1; }

.gtp-roi__marketing { background: #fff; border: 1px solid var(--gtp-line); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.gtp-roi__marketing-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.gtp-roi__mk-label { display: block; font-size: 13.5px; font-weight: 700; }
.gtp-roi__mk-label em { color: var(--gtp-brand); font-style: normal; }
.gtp-roi__mk-sub { display: block; font-size: 12px; color: var(--gtp-muted); }
.gtp-roi__mk-figs { text-align: right; }
.gtp-roi__mk-month { display: block; font-size: 22px; font-weight: 800; }
.gtp-roi__mk-month small { font-size: 13px; font-weight: 600; color: var(--gtp-muted); }
.gtp-roi__mk-year { display: block; font-size: 12.5px; color: var(--gtp-muted); }
.gtp-roi__roi { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--gtp-line); font-size: 14px; }
.gtp-roi__roi strong { color: var(--gtp-accent); font-size: 16px; }

.gtp-roi__warn {
	background: rgba(180,83,9,.08); border: 1px solid rgba(180,83,9,.3); color: var(--gtp-warn);
	border-radius: 12px; padding: 13px 15px; font-size: 13px; margin-bottom: 14px; line-height: 1.55;
}
.gtp-roi__warn[hidden] { display: none; }

.gtp-roi__breakdown { font-size: 13.5px; }
.gtp-roi__toggle {
	background: none; border: 0; color: var(--gtp-brand); font-weight: 700; cursor: pointer;
	padding: 4px 0; font-size: 13.5px; display: inline-flex; align-items: center;
}
.gtp-roi__toggle span { transition: transform .2s; display: inline-block; }
.gtp-roi__toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.gtp-roi__detail[hidden] { display: none; }
.gtp-roi__detail ul { margin: 8px 0; padding-left: 18px; }
.gtp-roi__detail li { margin-bottom: 4px; color: var(--gtp-muted); }
.gtp-roi__detail li strong { color: var(--gtp-ink); }
.gtp-roi__assump { font-size: 12px; color: var(--gtp-muted); margin: 6px 0 0; line-height: 1.55; }

.gtp-roi__foot { text-align: center; font-size: 12px; color: var(--gtp-muted); margin: 18px 0 0; }