/* ============================================================
   PLP ROI Calculator — Premium Frontend Design
   Matches: dark bg, green/yellow icons, wave cards, clean UI
   ============================================================ */

/* ---- Reset & Base ---- */
.plp-roi-calculator,
.plp-roi-calculator * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.plp-roi-calculator {
	width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
	background: transparent;
	padding: 40px 0;
}

/* ---- Heading ---- */
.plp-roi-heading-wrap {
	text-align: center;
	margin-bottom: 40px;
}

.plp-roi-title {
	font-size: clamp(26px, 4vw, 42px);
	font-weight: 900;
	color: #FFFFFF;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.15;
	margin-bottom: 14px;
}

.plp-roi-title-line {
	width: 60px;
	height: 3px;
	background: #22C55E;
	margin: 0 auto 18px;
	border-radius: 2px;
}

.plp-roi-subtitle {
	font-size: 15px;
	color: #9CA3AF;
	line-height: 1.6;
	max-width: 520px;
	margin: 0 auto;
}

/* ---- Main Card ---- */
.plp-roi-main-card {
	background: #111827;
	border: 1px solid #1F2937;
	border-radius: 16px;
	padding: 36px;
	max-width: 1160px;
	margin: 0 auto;
}

/* ---- Controls Row ---- */
.plp-roi-controls-row {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 20px;
	align-items: end;
	margin-bottom: 20px;
}

@media (max-width: 767px) {
	.plp-roi-controls-row {
		grid-template-columns: 1fr;
	}
	.plp-roi-main-card {
		padding: 24px 18px;
	}
}

/* Field header (icon + label) */
.plp-roi-field-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.plp-roi-field-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.plp-roi-icon-green {
	background: #15803D;
}

.plp-roi-field-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #D1D5DB;
}

/* Select wrapper */
.plp-roi-select-wrap {
	position: relative;
}

.plp-roi-select {
	width: 100%;
	background: #1F2937;
	color: #F9FAFB;
	border: 1px solid #374151;
	border-radius: 10px;
	padding: 14px 44px 14px 18px;
	font-size: 15px;
	font-weight: 500;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	line-height: 1.4;
}

.plp-roi-select:focus {
	outline: none;
	border-color: #22C55E;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.plp-roi-select option {
	background: #1F2937;
	color: #F9FAFB;
}

.plp-roi-chevron {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

/* ---- Calculate Button ---- */
.plp-roi-field-btn {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.plp-roi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #F2B100;
	color: #0A0A0A;
	border: none;
	border-radius: 10px;
	padding: 15px 28px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: filter 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 20px rgba(242, 177, 0, 0.3);
	height: 52px;
	min-width: 220px;
}

.plp-roi-btn:hover {
	filter: brightness(1.08);
	box-shadow: 0 6px 28px rgba(242, 177, 0, 0.45);
	transform: translateY(-1px);
}

.plp-roi-btn:active {
	transform: translateY(0);
	filter: brightness(0.96);
}

.plp-roi-btn-icon {
	flex-shrink: 0;
}

/* Spinner */
.plp-roi-btn-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(0,0,0,0.25);
	border-top-color: #000;
	border-radius: 50%;
	animation: plp-roi-spin 0.55s linear infinite;
	flex-shrink: 0;
}

.plp-roi-calculate-btn.is-loading .plp-roi-btn-spinner {
	display: inline-block;
}

.plp-roi-calculate-btn.is-loading .plp-roi-btn-text,
.plp-roi-calculate-btn.is-loading .plp-roi-btn-icon {
	opacity: 0.65;
}

@keyframes plp-roi-spin {
	to { transform: rotate(360deg); }
}

/* ---- Info Banner ---- */
.plp-roi-info-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(34, 197, 94, 0.07);
	border: 1px solid rgba(34, 197, 94, 0.2);
	border-radius: 10px;
	padding: 13px 18px;
	margin-bottom: 24px;
}

.plp-roi-info-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.plp-roi-info-text {
	font-size: 13px;
	color: #9CA3AF;
	line-height: 1.5;
}

/* ---- Result Cards Grid ---- */
.plp-roi-results {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

@media (max-width: 991px) {
	.plp-roi-results {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 479px) {
	.plp-roi-results {
		grid-template-columns: 1fr;
	}
}

/* ---- Individual Result Card ---- */
.plp-roi-result-card {
	background: #0F1923;
	border: 1px solid #1E2A38;
	border-radius: 14px;
	padding: 26px 20px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	min-height: 220px;
}

.plp-roi-result-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}

/* Dimming on update */
.plp-roi-calculator.is-updating .plp-roi-result-card {
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

/* ---- Card Icon Circle ---- */
.plp-roi-card-icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	position: relative;
	z-index: 2;
	flex-shrink: 0;
}

.plp-roi-card-icon-green {
	background: rgba(34, 197, 94, 0.15);
	border: 1.5px solid rgba(34, 197, 94, 0.35);
	box-shadow: 0 0 20px rgba(34, 197, 94, 0.12);
}

.plp-roi-card-icon-yellow {
	background: rgba(242, 177, 0, 0.12);
	border: 1.5px solid rgba(242, 177, 0, 0.3);
	box-shadow: 0 0 20px rgba(242, 177, 0, 0.1);
}

/* ---- Wave SVG Background ---- */
.plp-roi-card-wave {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 68px;
	z-index: 0;
	opacity: 0.55;
}

.plp-roi-wave-green {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 68' preserveAspectRatio='none'%3E%3Cpath d='M0 40 Q20 20 40 35 Q60 50 80 30 Q100 10 120 28 Q140 46 160 32 Q180 18 200 36 Q220 54 240 38 Q260 22 280 40 Q290 46 300 40 L300 68 L0 68 Z' fill='%2322C55E' fill-opacity='0.15'/%3E%3Cpath d='M0 50 Q25 30 50 45 Q75 60 100 42 Q125 24 150 44 Q175 64 200 48 Q225 32 250 50 Q275 68 300 52 L300 68 L0 68 Z' fill='%2322C55E' fill-opacity='0.08'/%3E%3C/svg%3E") no-repeat bottom center / cover;
}

.plp-roi-wave-yellow {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 68' preserveAspectRatio='none'%3E%3Cpath d='M0 40 Q20 20 40 35 Q60 50 80 30 Q100 10 120 28 Q140 46 160 32 Q180 18 200 36 Q220 54 240 38 Q260 22 280 40 Q290 46 300 40 L300 68 L0 68 Z' fill='%23F2B100' fill-opacity='0.12'/%3E%3Cpath d='M0 50 Q25 30 50 45 Q75 60 100 42 Q125 24 150 44 Q175 64 200 48 Q225 32 250 50 Q275 68 300 52 L300 68 L0 68 Z' fill='%23F2B100' fill-opacity='0.06'/%3E%3C/svg%3E") no-repeat bottom center / cover;
}

/* ---- Card Text ---- */
.plp-roi-result-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6B7280;
	margin-bottom: 10px;
	position: relative;
	z-index: 2;
	line-height: 1.4;
}

.plp-roi-result-value {
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 900;
	color: #FFFFFF;
	line-height: 1.1;
	margin-bottom: 10px;
	position: relative;
	z-index: 2;
	transition: color 0.25s ease;
}

.plp-roi-value-yellow {
	color: #F2B100 !important;
}

.plp-roi-result-tag {
	font-size: 12px;
	font-weight: 600;
	position: relative;
	z-index: 2;
	margin-top: auto;
}

.plp-roi-tag-green {
	color: #22C55E;
}

/* ---- Disclaimer ---- */
.plp-roi-disclaimer {
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(34, 197, 94, 0.05);
	border: 1px solid rgba(34, 197, 94, 0.12);
	border-radius: 10px;
	padding: 13px 18px;
	margin: 20px auto 0;
	max-width: 1160px;
}

.plp-roi-disclaimer-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.plp-roi-disclaimer-text {
	font-size: 13px;
	color: #6B7280;
	line-height: 1.5;
}

/* ---- CTA ---- */
.plp-roi-cta {
	text-align: center;
	margin-top: 28px;
}

.plp-roi-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #F2B100;
	color: #0A0A0A;
	border-radius: 10px;
	padding: 15px 40px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter 0.2s ease, transform 0.1s ease;
	box-shadow: 0 4px 20px rgba(242, 177, 0, 0.3);
}

.plp-roi-cta-btn:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: #0A0A0A;
	text-decoration: none;
}

/* ---- Error ---- */
.plp-roi-error {
	color: #F87171;
	font-size: 13px;
	padding: 14px 18px;
	border: 1px solid rgba(248, 113, 113, 0.3);
	border-radius: 10px;
	background: rgba(248, 113, 113, 0.07);
}