/* ── BB Premium: Loan Calculator ─────────────────────────────────────────── */

.bbpe-lc { width: 100%; }

/* ── Shared structure ────────────────────────────────────────────────────── */
.bbpe-lc__heading {
	font-size: 1.5rem;
	font-weight: 800;
	margin: 0 0 6px;
	line-height: 1.2;
}

.bbpe-lc__subheading {
	font-size: 0.9375rem;
	margin: 0 0 28px;
	opacity: 0.75;
}

.bbpe-lc__amount-display {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	margin-bottom: 24px;
}

.bbpe-lc__currency {
	font-size: clamp( 1rem, 3vw, 1.625rem );
	font-weight: 700;
	line-height: 1;
}

/* Input styled to look like plain text */
.bbpe-lc__amount-val {
	/* Visual */
	font-size: clamp( 3.25rem, 7vw, 3.5rem );
	font-weight: 900;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	color: inherit;
	text-align: center;

	/* Reset input chrome */
	border: none;
	outline: none;
	background: transparent;
	padding: 0;
	margin: 0;
	-moz-appearance: textfield;
	cursor: text;

	/* Size — JS also resizes dynamically */
	min-width: 2ch;
	max-width: 10ch;
	width: 4ch;

	transition: color 0.15s, width 0.1s;
}

/* Remove number spinners */
.bbpe-lc__amount-val::-webkit-inner-spin-button,
.bbpe-lc__amount-val::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Subtle underline while editing */
.bbpe-lc__amount-val:focus {
	outline: none;
	border-bottom: 3px solid currentColor;
	margin-bottom: -3px;
}

/* ── Range slider ────────────────────────────────────────────────────────── */
.bbpe-lc__slider-wrap { margin-bottom: 12px; }

.bbpe-lc__slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: var( --bbpe-lc-height, 8px );
	border-radius: 100px;
	background: linear-gradient(
		to right,
		var( --bbpe-lc-accent, #38bdf8 ) var( --bbpe-lc-fill, 10% ),
		var( --bbpe-lc-track, rgba(255,255,255,0.15) ) var( --bbpe-lc-fill, 10% )
	);
	outline: none;
	cursor: pointer;
	transition: background 0s;
}

/* Thumb – WebKit */
.bbpe-lc__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 0 0 3px var( --bbpe-lc-accent, #38bdf8 );
	cursor: grab;
	transition: transform 0.1s, box-shadow 0.1s;
}
.bbpe-lc__slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }

/* Thumb – Firefox */
.bbpe-lc__slider::-moz-range-thumb {
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 0 0 3px var( --bbpe-lc-accent, #38bdf8 );
	cursor: grab;
}

/* ── Min/Max labels ──────────────────────────────────────────────────────── */
.bbpe-lc__labels {
	display: flex;
	justify-content: space-between;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 28px;
	opacity: 0.6;
}

/* ── Button ──────────────────────────────────────────────────────────────── */
.bbpe-lc__btn {
	display: block;
	width: 100%;
	text-align: center;
	padding: 16px 24px;
	border-radius: 12px;
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
}

.bbpe-lc__btn:hover,
.bbpe-lc__btn:focus-visible {
	transform: translateY(-2px);
	text-decoration: none;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* MODERN variant — dark navy, cyan accent                                   */
/* ───────────────────────────────────────────────────────────────────────── */
.bbpe-lc--modern .bbpe-lc__wrap {
	padding: 48px 40px;
	background: linear-gradient( 155deg, #0c1628 0%, #0f2952 100% );
	border-radius: 24px;
	box-shadow: 0 32px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
	position: relative;
	overflow: hidden;
}

.bbpe-lc--modern .bbpe-lc__wrap::before {
	content: '';
	position: absolute;
	top: -30%;
	right: -20%;
	width: 55%;
	height: 55%;
	background: radial-gradient( ellipse, rgba(56,189,248,0.12) 0%, transparent 70% );
	pointer-events: none;
}

.bbpe-lc--modern .bbpe-lc__heading  { color: #f0f9ff; }
.bbpe-lc--modern .bbpe-lc__subheading { color: rgba(240,249,255,0.6); }
.bbpe-lc--modern .bbpe-lc__amount-val,
.bbpe-lc--modern .bbpe-lc__currency { color: #38bdf8; text-shadow: 0 0 32px rgba(56,189,248,0.5); }
.bbpe-lc--modern .bbpe-lc__labels { color: rgba(240,249,255,0.55); }

.bbpe-lc--modern .bbpe-lc__slider {
	--bbpe-lc-accent: #38bdf8;
	--bbpe-lc-track: rgba(255,255,255,0.12);
}

.bbpe-lc--modern .bbpe-lc__btn {
	background: linear-gradient( 135deg, #0ea5e9 0%, #005E29 100% );
	color: #fff;
	box-shadow: 0 8px 32px rgba(14,165,233,0.35);
}
.bbpe-lc--modern .bbpe-lc__btn:hover { box-shadow: 0 12px 40px rgba(14,165,233,0.5); filter: brightness(1.08); }

/* ───────────────────────────────────────────────────────────────────────── */
/* CLEAN variant — white card, blue accent                                   */
/* ───────────────────────────────────────────────────────────────────────── */
.bbpe-lc--clean .bbpe-lc__wrap {
	padding: 48px 40px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	box-shadow: 0 8px 40px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
}

.bbpe-lc--clean .bbpe-lc__heading   { color: #0f172a; }
.bbpe-lc--clean .bbpe-lc__subheading { color: #64748b; }
.bbpe-lc--clean .bbpe-lc__amount-val,
.bbpe-lc--clean .bbpe-lc__currency { color: #005E29; }
.bbpe-lc--clean .bbpe-lc__labels    { color: #94a3b8; }

.bbpe-lc--clean .bbpe-lc__slider {
	--bbpe-lc-accent: #005E29;
	--bbpe-lc-track: #e2e8f0;
}
.bbpe-lc--clean .bbpe-lc__slider::-webkit-slider-thumb { box-shadow: 0 2px 10px rgba(99,102,241,0.25), 0 0 0 3px #005E29; }
.bbpe-lc--clean .bbpe-lc__slider::-moz-range-thumb     { box-shadow: 0 2px 10px rgba(99,102,241,0.25), 0 0 0 3px #005E29; }

.bbpe-lc--clean .bbpe-lc__btn {
	background: #005E29;
	color: #fff;
	box-shadow: 0 6px 24px rgba(99,102,241,0.3);
}
.bbpe-lc--clean .bbpe-lc__btn:hover { background: #4f46e5; box-shadow: 0 10px 32px rgba(99,102,241,0.45); }

/* ───────────────────────────────────────────────────────────────────────── */
/* BOLD variant — gradient card, green/emerald energy                        */
/* ───────────────────────────────────────────────────────────────────────── */
.bbpe-lc--bold .bbpe-lc__wrap {
	padding: 48px 40px;
	background: linear-gradient( 145deg, #064e3b 0%, #065f46 60%, #047857 100% );
	border-radius: 24px;
	box-shadow: 0 32px 80px rgba(4,120,87,0.35), 0 0 0 1px rgba(255,255,255,0.08);
	position: relative;
	overflow: hidden;
}

.bbpe-lc--bold .bbpe-lc__wrap::before {
	content: '';
	position: absolute;
	bottom: -20%;
	left: -10%;
	width: 60%;
	height: 60%;
	background: radial-gradient( ellipse, rgba(16,185,129,0.2) 0%, transparent 70% );
	pointer-events: none;
}

.bbpe-lc--bold .bbpe-lc__heading   { color: #ecfdf5; }
.bbpe-lc--bold .bbpe-lc__subheading { color: rgba(236,253,245,0.65); }
.bbpe-lc--bold .bbpe-lc__amount-val,
.bbpe-lc--bold .bbpe-lc__currency { color: #6ee7b7; text-shadow: 0 0 32px rgba(110,231,183,0.4); }
.bbpe-lc--bold .bbpe-lc__labels    { color: rgba(236,253,245,0.5); }

.bbpe-lc--bold .bbpe-lc__slider {
	--bbpe-lc-accent: #10b981;
	--bbpe-lc-track: rgba(255,255,255,0.15);
}
.bbpe-lc--bold .bbpe-lc__slider::-webkit-slider-thumb { box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 0 0 3px #10b981; }
.bbpe-lc--bold .bbpe-lc__slider::-moz-range-thumb     { box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 0 0 3px #10b981; }

.bbpe-lc--bold .bbpe-lc__btn {
	background: #ffffff;
	color: #065f46;
	font-weight: 900;
	box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.bbpe-lc--bold .bbpe-lc__btn:hover { background: #ecfdf5; box-shadow: 0 12px 40px rgba(0,0,0,0.35); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.bbpe-lc--modern .bbpe-lc__wrap,
	.bbpe-lc--clean  .bbpe-lc__wrap,
	.bbpe-lc--bold   .bbpe-lc__wrap {
		padding: 36px 24px;
	}
}