/**
 * Helios Checkout - Novuna PayByFinance overrides.
 *
 * Restyles Novuna's injected #PBFPopup widget so it sits inside our
 * finance modal cleanly: flat background, our radius/padding, our type
 * scale, our blue/black brand colours.
 *
 * Hides the original injection point (the dummy .cart_totals target);
 * the launcher card and modal own the visible UI.
 */

.hc-finance-slot.finance div#PBFPopup {
	display: none !important;
}

.pbf-popup.pbf-cart-widget {
	background: transparent !important;
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: space-between !important;
	align-content: center !important;
	padding: 20px !important;
	border: 1px solid #E4E4E6 !important;
	border-radius: 8px !important;
	width: 100% !important;
	margin-top: 20px !important;
}

.pbf-representative-example {
	display: none;
}

img#pbf-widget-logo {
	max-width: 100px !important;
	object-fit: contain !important;
	padding: 0 !important;
	margin: 0 !important;
	object-position: center !important;
	margin-top: 10px !important;
}

.pbf-finance-widget-button {
	background: #000 !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 15px !important;
}

div#PBFPopup .pbf-finance-widget .pbf-finance-widget-button span,
div#PBFNonApplicable .pbf-finance-widget .pbf-finance-widget-button span {
	color: #fff !important;
	text-transform: capitalize !important;
	font-weight: 500 !important;
}

div#PBFPopup .pbf-finance-widget .pbf-finance-widget-button svg path,
div#PBFNonApplicable .pbf-finance-widget .pbf-finance-widget-button svg path {
	fill: #ffffff !important;
}

div#PBFPopup .pbf-finance-widget,
div#PBFNonApplicable .pbf-finance-widget {
	margin: 0 !important;
}

.pbf-finance-widget.expandIt.pbf-finance-widget-expandIt {
	width: 100%;
}

.pbf-finance-widget-calculator.expandIt.pbf-finance-widget-expandIt {
	margin-top: 20px;
}

button#pbf-save-button {
	width: 100%;
	border-radius: 8px !important;
	padding: 10px !important;
	font-size: 15px !important;
}

div#pbf-termField {
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	max-width: 100% !important;
	gap: 10px;
}

div#PBFPopup .pbf-widget-radio-toggle input + label,
div#PBFNonApplicable .pbf-widget-radio-toggle input + label {
	width: 100% !important;
	margin: 0 !important;
}

div#PBFPopup .pbf-fieldset-finance .pbf-widget-radio-toggle input + label,
div#PBFNonApplicable .pbf-fieldset-finance .pbf-widget-radio-toggle input + label {
	background: #0000000d !important;
	border: none !important;
	border-radius: 8px !important;
	width: 100% !important;
	color: #000 !important;
	text-transform: capitalize !important;
	font-size: 16px !important;
	font-weight: 500 !important;
}

div#PBFPopup input:checked + label {
	background: #000 !important;
	border: none !important;
	border-radius: 8px;
	color: #fff !important;
}

input + label {
	border-color: #000 !important;
	border-radius: 8px !important;
	color: #000 !important;
	margin: 0 !important;
}

p#pbf-termMessage {
	margin-bottom: 10px !important;
}

.pbf-slider-marker-horizontal.pbf-slider-marker-large {
	background: #000 !important;
}

.pbf-slider-handle.pbf-slider-handle-lower {
	background: #0171E4 !important;
}

div#PBFPopup .pbf-popup-heading h2 #pbf-financeable-value,
div#PBFNonApplicable .pbf-popup-heading h2 #pbf-financeable-value {
	color: #0171E4 !important;
}

div#PBFPopup fieldset p .variable-data,
div#PBFNonApplicable fieldset p .variable-data {
	color: #0171E4 !important;
}

button.hc-finance-modal__close {
	padding: 10px;
	background: #00000038;
}

div#PBFPopup .pbf-widget-radio-toggle input + label:hover,
div#PBFNonApplicable .pbf-widget-radio-toggle input + label:hover {
	border-color: color-mix(in srgb, white 15%, #0171E5) !important;
	background: color-mix(in srgb, white 15%, #0171E5) !important;
	color: var(--pbf-button-active-text);
}