/* ==========================================================================
   Leaseblok op de apparaatpagina (inc/lease.php)
   Stond tot 22 september 2026 onderin product-bb.css; los stylesheet sinds de
   apparaatpagina's twee opmaken kennen (product-bb.css voor de oude,
   productpagina-bb.css voor die met tabbladen). inc/lease.php laadt dit blad op
   elke apparaatpagina waar lease aanstaat, ongeacht welke opmaak de pagina heeft.
   ========================================================================== */

/* --- Lease (inc/lease.php) ---------------------------------------------------
   Naar het voorbeeld van lasermedical.nl: kop met "Leasen vanaf"-rondje, intro, lease
   tegenover koop, tabel met looptijden, voorbehoud en offerteknop. */

.bnb-lease__kop {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2em;
	flex-wrap: wrap;
}

.bnb-lease__kop .bt_bb_headline {
	margin: 0;
}

.bnb-lease__vanaf {
	display: flex;
	align-items: baseline;
	gap: 0.45em;
	font-family: var(--title-font);
	font-size: clamp(22px, 2.4vw, 32px);
	line-height: 1.1;
	color: var(--dark-color);
	white-space: nowrap;
}

.bnb-lease__vanaf-bedrag {
	display: inline-block;
	padding: 0.45em 0.7em;
	border-radius: var(--hard-rounded, 50px);
	background: var(--accent-color);
	color: var(--light-color);
	font-weight: 600;
}

.bnb-lease__intro {
	max-width: 62ch;
	margin-top: 2em;
}

/* Onder de intro: links de vergelijking als tabbladen, rechts de tegel met looptijden */
.bnb-lease__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(2em, 4vw, 4em);
	align-items: start;
	margin-top: clamp(2em, 4vw, 3.5em);
}

.bnb-lease__tablist {
	display: flex;
	gap: 0.25em;
	border-bottom: 1px solid var(--dark-light-color, rgba(0, 0, 0, 0.12));
	margin-bottom: 1.25em;
}

.bnb-lease__tab {
	position: relative;
	padding: 0.75em 1.1em;
	border: 0;
	background: transparent;
	font-family: var(--title-font);
	font-size: var(--title-size-small, 1.15em);
	font-weight: 500;
	color: var(--dark-gray-color);
	cursor: pointer;
	transition: color 200ms ease;
}

.bnb-lease__tab:hover,
.bnb-lease__tab.is-active {
	color: var(--dark-color);
}

.bnb-lease__tab.is-active:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--accent-color);
}

.bnb-lease__tab:focus-visible {
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
}

.bnb-lease__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--dark-gray-color);
}

.bnb-lease__lijst li {
	position: relative;
	padding: 0.5em 0 0.5em 1.8em;
	border-bottom: 1px solid var(--dark-light-color, rgba(0, 0, 0, 0.08));
}

.bnb-lease__lijst li:last-child {
	border-bottom: 0;
}

/* Vinkje voor elk punt (zelfde als de vinklijsten in "Over het apparaat") */
.bnb-lease__lijst li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.9em;
	width: 0.6em;
	height: 0.35em;
	border-left: 2px solid var(--accent-color);
	border-bottom: 2px solid var(--accent-color);
	transform: rotate(-45deg);
}

/* Tegel: witte kaart zoals de apparaatkaart */
.bnb-lease__tegel {
	padding: clamp(1.5em, 3vw, 2.25em);
	border-radius: var(--hard-rounded, 20px);
	background: var(--light-color);
}

.bnb-lease__tegel-kop {
	margin: 0 0 1em;
	font-size: var(--title-size-small, 1.25em);
}

.bnb-lease__tabel {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 1em;
}

.bnb-lease__tabel th,
.bnb-lease__tabel td {
	padding: 0.8em 0.5em;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--dark-light-color, rgba(0, 0, 0, 0.08));
	vertical-align: middle;
}

.bnb-lease__tabel th:last-child,
.bnb-lease__tabel td:last-child {
	text-align: right;
}

.bnb-lease__tabel thead th {
	padding-top: 0;
	font-family: var(--supertitle-font);
	font-size: var(--title-subtitle-size-extrasmall, 0.75em);
	text-transform: uppercase;
	letter-spacing: var(--supertitle-letter-spacing, 0.1em);
	font-weight: 500;
	color: var(--accent-color);
}

.bnb-lease__tabel td strong {
	color: var(--dark-color);
	font-size: 1.15em;
}

.bnb-lease__voorbehoud {
	margin: 1em 0 0;
	font-size: 0.875em;
	font-style: italic;
	color: var(--dark-gray-color);
}

.bnb-lease .bnb-lease__knop {
	margin-top: 1.5em;
}

@media (max-width: 991px) {
	.bnb-lease__grid {
		grid-template-columns: 1fr;
	}
}

/* Offerteformulier onder de tegel (uitgeklapt door de knop) */
.bnb-lease__formulier {
	margin-top: clamp(2.5em, 5vw, 4.5em);
	padding: clamp(1.5em, 3vw, 2.5em);
	border-radius: var(--hard-rounded, 20px);
	background: var(--light-color);
	scroll-margin-top: 120px;
}

.bnb-lease__formulier-kop {
	margin: 0 0 1em;
	font-size: var(--title-size-normal, 1.5em);
}

/* --- Regels die het leaseblok leende van product-bb.css ----------------------
   Het blok stond in de oude apparaatopmaak, waar product-bb.css meelaadde: de kop
   met de apparaatnaam kreeg daar zijn breedte (bnb-product-narrow) en de intro zijn
   regelafstand en kleur (bnb-product-text). De apparaatpagina's laden die stylesheet
   sinds 22 sep 2026 niet meer, dus staan die regels hier — alleen binnen .bnb-lease,
   zodat de oude opmaak er niets van merkt. */
.bnb-lease .bt_bb_headline.bnb-product-narrow{max-width:40ch}
.bnb-lease .bt_bb_text.bnb-product-text{line-height:1.8;color:var(--dark-gray-color)}
.bnb-lease .bnb-product-text > p,
.bnb-lease .bnb-product-text > ol{margin:0 0 1.25em;max-width:62ch;text-wrap:pretty}
.bnb-lease .bnb-product-text > :last-child{margin-bottom:0}

/* --- Compacte strook (24 sep 2026) -------------------------------------------
   Bart: "veel compacter en veel creatiever". Ontwerp: component Lease, variant compact, in het
   designsysteem. De oude regels hierboven (kop met rondje, tabbladen, tegel) blijven staan voor
   het geval de oude opbouw terugkomt; deze strook gebruikt alleen de klassen hieronder plus de
   thema-elementen bt_bb_promo, bt_bb_headline, bt_bb_price en bt_bb_button. */
.bnb-lease--compact > .bt_bb_port {
	padding-top: 30px;
	padding-bottom: 30px;
}
.bnb-lease__compact {
	position: relative;
	padding-left: 6.5em; /* de helft van de schijf (13em) hangt buiten de strook */
}
.bnb-lease__sticker {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	line-height: 0;
}
.bnb-lease__sticker .bt_bb_promo {
	display: block;
}
.bnb-lease__sticker .bt_bb_promo .bt_bb_promo_text span {
	font-family: var(--supertitle-font);
	font-weight: var(--supertitle-font-weight);
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--light-color);
}
.bnb-lease__sticker .bt_bb_promo .bt_bb_promo_text em {
	display: block;
	font-family: var(--em-heading-font);
	font-style: var(--em-heading-font-style, italic);
	font-weight: var(--em-heading-font-weight, 400);
	text-transform: none;
	letter-spacing: 0;
	font-size: 1.9rem;
	line-height: 1.15;
	padding: .05em 0;
}
.bnb-lease__sticker .bt_bb_promo .bt_bb_promo_icon .bt_bb_icon_holder {
	color: var(--light-color);
}
.bnb-lease__strook {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 1.5em 3em;
	align-items: center;
	min-height: 15em;
	padding: 2em 2.25em 2em 8.75em;
	background: var(--light-color);
	color: var(--dark-color);
	border-radius: var(--card-hard-rounded-shape, 20px);
}
.bnb-lease__strook .bt_bb_headline {
	margin: 0;
}
.bnb-lease__zin {
	margin: .9em 0 0;
	max-width: 44ch;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--dark-gray-color);
}
.bnb-lease__pillen {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin-top: 1.25em;
}
.bnb-lease__pil {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .5em 1.1em .5em .9em;
	border-radius: var(--hard-rounded, 50px);
	background: var(--alternate-color);
	color: var(--light-color);
	font-family: var(--supertitle-font);
	font-weight: 500;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	white-space: nowrap;
}
.bnb-lease__pil::before {
	content: "\e908";
	font-family: IBM;
	font-size: 12px;
	letter-spacing: 0;
}
.bnb-lease__regels {
	display: grid;
	gap: .55em;
}
.bnb-lease__regels .bt_bb_price .bt_bb_price_text,
.bnb-lease__regels .bt_bb_price .bt_bb_price_price {
	color: var(--dark-color); /* het thema zet de prijs via een inline variabele in tan (1,9:1 op wit) */
}
.bnb-lease__regels .bt_bb_price .bt_bb_price_text::after {
	background-color: var(--dark-color);
}
.bnb-lease--compact .bnb-lease__voorbehoud {
	margin: .9em 0 0;
	font-size: .75rem;
	line-height: 1.5;
	color: var(--dark-gray-color);
}
.bnb-lease__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: .5em 1em;
	align-items: center;
	margin-top: 1.4em;
}
.bnb-lease__knoppen .bt_bb_button {
	margin: 0;
	width: auto;
}
@media (max-width: 800px) {
	.bnb-lease__compact {
		padding-left: 0;
		padding-top: 6.5em;
	}
	.bnb-lease__sticker {
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}
	.bnb-lease__strook {
		grid-template-columns: 1fr;
		padding: 8.25em 1.5em 2em;
	}
}