/* === CUSTOM PRODUCT SELECTOR === */

.modal-content:has(.selector-container) .modal-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 22px 0px !important;
	background: var(--grey-white) !important;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	font-weight: var(--fw-bold);
	font-size: 24px;
	line-height: 28.8px;
	letter-spacing: 0.72px;
	color: var(--grey-black);
	border-bottom: 1px solid var(--grey-e0) !important;
}


.selector-container .text-16 { font-size: 16px; }
.selector-container .mb-1 { margin-bottom: 4px; }
.selector-container .mb-2 { margin-bottom: 8px; }

.selector-container .range-info-box {
	background: var(--grey-bg);
	border-radius: 16px;
	padding: 16px 20px;
	margin-bottom: 20px;
	margin-top: 8px;
}

.selector-container .range-info-title {
	font-size: 16px;
	font-weight: var(--fw-bold);
	color: var(--grey-black);
}

.selector-container .range-label {
	font-weight: var(--fw-bold);
	font-size: 14px;
	color: var(--grey-black);
}

.selector-container .btn-plus-minus {
	background: var(--grey-white);
	border: 1px solid var(--grey-g200);
	color: var(--grey-black);
	outline: none;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
}

.selector-container .btn-plus-minus:hover {
	background: var(--grey-g200) !important;
	border: 1px solid var(--grey-black) !important;
}

.selector-container .plus-minus-icon {
	width: 15px;
	height: 15px;
	margin-left: 1px;
	margin-bottom: 2px;
}

.selector-container input[type="range"].custom-range-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	background: transparent;
	accent-color: transparent;
}

.selector-container input[type="range"].custom-range-slider:hover{
	background-color: transparent !important;
}

.selector-container input[type="range"].custom-range-slider::-webkit-slider-runnable-track {
	height: 4px;
	background: var(--grey-g300, #dcdcdc);
	border-radius: 10px;
}

.selector-container input[type="range"].custom-range-slider::-moz-range-track {
	height: 4px;
	background: var(--grey-g300, #dcdcdc);
	border-radius: 10px;
}

.selector-container input[type="range"].custom-range-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--blue-primary);
	box-shadow: 0 2px 6px rgba(0,0,0,0.25);
	cursor: pointer;
	margin-top: -11px;
	background-image: url("https://bpmdev.arggo.consulting/BPM202412/BPMElacinPortal/content/resources/left-arrow.svg"), url("https://bpmdev.arggo.consulting/BPM202412/BPMElacinPortal/content/resources/right-arrow.svg");
	background-position: left 6px center, right 6px center;
	background-repeat: no-repeat, no-repeat;
	background-size: 8px 8px, 8px 8px;
}

.selector-container .material-select {
	text-indent: 12px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url('dropdown-arrow.svg');
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-color: var(--grey-white);
	padding: 12px;
	outline: 1px solid var(--grey-g400);
	outline-offset: -1px;
	border: none;
	border-radius: 12px;
	color: var(--grey-black);
	font-size: 14px;
	font-weight: var(--fw-medium);
	line-height: 24px;
	letter-spacing: 0.42px;
}

select.material-select:disabled {
    background-color: var(--clr-form-ctrl-disabled-bg);
}

.selector-container .form-control.form-control-sm > div.ss-single-selected,
.selector-container .form-control.form-control-sm > div.ss-multi-selected {
	height: calc(1.5em + .5rem + 2px);
	font-size: .875rem;
	line-height: 1.5;
	border-radius: 10px;
}

.selector-container .form-control > div.ss-single-selected,
.selector-container .form-control > div.ss-multi-selected {
	border-radius: 10px;
}

.selector-container .ss-deselect {
	display: inline-flex !important;
}

.selector-container .radio-inline {
	display: flex;
	align-items: center;
	gap: 0px;
	border: 1px solid var(--grey-be);
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 10px;
	background-color: var(--grey-white);
	width: 100%;
	cursor: pointer;
	transition: all 0.2s ease;
	color: var(--grey-black);
	font-size: 16px;
	font-style: normal;
	font-weight: var(--fw-bold);
	line-height: 19.2px;
	letter-spacing: 0.48px;
}

.selector-container .radio-inline:hover {
	border-color: var(--grey-black);
	background-color: var(--grey-g100);
}

.selector-container .radio-inline .text-block {
	display: flex;
	flex-direction: column;
}

.selector-container .radio-inline .title {
	font-weight: var(--fw-bold);
	font-size: 16px;
	color: var(--grey-black);
}

.selector-container .radio-inline .desc {
	font-size: 13px;
	color: var(--grey-g600);
}

.selector-container .radio-inline + br,
.selector-container .horizontal-group br {
	display: none;
}

.selector-container .horizontal-group {
	display: flex !important;
	flex-direction: row !important;
	width: 100%;
}

.selector-container .horizontal-group .radio-inline {
	width: auto !important;
	flex: 1;
	margin-bottom: 0 !important;
}

.selector-container .color-radio .radio-inline {
	display: inline-flex !important;
	align-items: center;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
	background: transparent !important;
	box-shadow: none !important;
}

.selector-container .color-radio .radio-inline:hover {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

.selector-container .color-radio.horizontal-group {
	display: flex !important;
	flex-wrap: wrap;
	gap: 10px;
}

.selector-container .grip-radio.horizontal-group {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	width: 100%;
}

.selector-container .grip-radio .radio-inline {
	justify-content: flex-start !important;
	padding: 20px !important;
	gap: 0px !important;
	align-items: center !important;
	display: flex !important;
	flex-direction: row !important;
	text-align: left !important;
}

.selector-container .grip-radio.horizontal-group .radio-inline {
	width: 100% !important;
	font-weight: var(--fw-bold);
}

.selector-container .grip-radio .radio-inline span,
.selector-container .grip-radio .radio-inline .text-block {
	margin-left: 6px !important;
	flex: none !important;
	text-align: left !important;
}

.selector-container .grip-radio .radio-inline * {
	justify-self: start !important;
	align-self: center !important;
}

.selector-container .metal-ball .radio-inline:first-child {
	grid-column: span 2;
}

.selector-container .horizontal-group .radio-inline input[type="radio"],
.selector-container .radio-card .radio-inline input[type="radio"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	border: 1px solid var(--grey-g600) !important;
	border-radius: 50% !important;
	margin-right: 16px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
}

.selector-container .grip-radio input[type="radio"] {
	width: 13px !important;
	min-width: 13px !important;
	max-width: 13px !important;
	height: 13px !important;
	flex: none !important;
}

.selector-container .radio-card .radio-inline input[type="radio"]:hover,
.selector-container .horizontal-group .radio-inline input[type="radio"]:hover {
	background-color: var(--grey-g200) !important;
	border: 1px solid var(--grey-black) !important;
}


.selector-container .radio-card .radio-inline input[type="radio"]:checked,
.selector-container .horizontal-group .radio-inline input[type="radio"]:checked {
	background-color: var(--blue-primary) !important;
	border-color: var(--blue-primary) !important;
}

.selector-container .radio-card .radio-inline:has(input:checked),
.selector-container .horizontal-group .radio-inline:has(input:checked) {
	outline: 2px solid var(--blue-primary) !important;
	outline-offset: -2px;
	background-color: rgba(0, 157, 204, 0.05);
}

.selector-container .radio-card .radio-inline input[type="radio"]:checked:hover,
.selector-container .horizontal-group .radio-inline input[type="radio"]:checked:hover {
	background-color: var(--blue-primary-hov) !important;
	border-color: var(--blue-primary-hov) !important;
}

.selector-container .radio-card .radio-inline input[type="radio"]:checked::after,
.selector-container .horizontal-group .radio-inline input[type="radio"]:checked::after {
	content: '' !important;
	border-left: 2px solid var(--grey-white) !important;
	border-bottom: 2px solid var(--grey-white) !important;
	transform: rotate(-45deg);
	margin-bottom: 2px;
}

.selector-container .radio-card .radio-inline input[type="radio"]:checked::after {
	width: 9px;
	height: 5px;
}

.selector-container .horizontal-group .radio-inline input[type="radio"]:checked::after {
	width: 7px;
	height: 4px;
}

.selector-container .grip-radio input[type="radio"]:checked + .text-block,
.selector-container .grip-radio input[type="radio"]:checked ~ * {
	font-weight: var(--fw-bold);
}

.modal-dialog:has(.product-selector-wrapper) {
	margin-right: 10px;
}

.modal-content:has(.product-selector-wrapper) {
	border: none;
	padding: 0px 24px 40px 24px !important;
	border-radius: 15px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.mt-40 { margin-top: 40px !important; }
.mt-24 { margin-top: 24px !important; }
.mb-12px { margin-bottom: 12px !important; }
.mb-3px { margin-bottom: 3px !important; }


.product-selector-wrapper .suggestion-card-img {
	width: 80px;
	height: 80px;
	object-fit: contain;
}

.product-selector-wrapper .selector-container-selected-product {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	background-color: var(--grey-white);
}

.product-selector-wrapper .panel-header {
	flex-shrink: 0 !important;
	padding: 24px 0px !important;
	border-bottom: 1px solid var(--grey-g200) !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	background: var(--grey-white) !important;
}

.product-selector-wrapper .panel-title-text {
	color: var(--grey-black);
	font-feature-settings: 'liga' off, 'clig' off;
	font-size: 24px;
	font-style: normal;
	font-weight: var(--fw-bold);
	line-height: 120%;
	letter-spacing: 0.72px;
}

.product-selector-wrapper .btn-figma-primary {
	background-color: var(--btn-primary); 
	color: var(--grey-white) !important;
	border-radius: 999px;
	padding: 16px 20px;
	font-weight: var(--fw-bold);
	font-size: 14px;
	border: none;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 40px;
	transition: all 0.2s ease-in-out;
}

.product-selector-wrapper .btn-figma-primary:hover {
	background-color: var(--btn-primary-active);
}

.modal-content:has(.product-selector-wrapper) client-combo-box .ss-main.form-control {
	padding-left: 0 !important;
}

.modal-content:has(.product-selector-wrapper) client-combo-box .ss-main::before {
    content: "";
    background: url(search.svg) no-repeat center !important;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.modal-content:has(.product-selector-wrapper) client-combo-box .ss-main.form-control .ss-single-selected span.placeholder {
	padding-left: 2.5em !important;
}

.modal-content:has(.product-selector-wrapper) input:not(:disabled):hover,
.modal-content:has(.product-selector-wrapper) select:not(:disabled):hover,
.modal-content:has(.product-selector-wrapper) .form-control:not(:disabled):hover,
.modal-content:has(.product-selector-wrapper) client-combo-box:not(:has(.company-select)):not([disabled]):hover {
	border-radius: 12px;
}

.product-selector-wrapper .selector-section .form-control > div.ss-single-selected:hover {
	outline: 1px solid var(--grey-black) !important;
}

.product-selector-wrapper .ss-main .ss-deselect {
	margin-right: 12px !important;
}

/* === POPUP CALCULATOR === */

/* 1. Modal Dialog & Container Overrides */
.modal-dialog:has(.popup-calculator) {
	margin-right: 10px;
}

.modal-content:has(.popup-calculator) {
	padding: 0 !important;
	border-radius: 24px;
	border: none;
}

.modal-content:has(.popup-calculator) .modal-header {
	padding: 22px 24px 11px 24px !important;
	border-bottom: 1px solid var(--grey-g200);
}

.popup-calculator {
	width: 100%;
	height: 82vh;
	padding: 0px 24px 0px 24px !important;
	margin-top: 40px;
}

/* 2. Micro Layout Utilities */
.popup-calculator .mb-40 { margin-bottom: 40px; }
.popup-calculator .mb-24 { margin-bottom: 24px; }
.popup-calculator .mb-16 { margin-bottom: 16px; }
.popup-calculator .mb-12 { margin-bottom: 12px; }
.popup-calculator .mb-10 { margin-bottom: 10px; }

/* 3. Inputs & Forms */
.popup-calculator .custom-input {
	width: 100%;
	padding: 12px 12px 12px 16px;
	border: 1px solid var(--grey-g400);
	border-radius: 12px;
	font-size: 14px;
	outline: none;
	transition: border-color 0.2s ease-in-out;
	height: 48px;
	background: var(--grey-white);
	font-weight: var(--fw-medium);
	letter-spacing: 0.42px;
}

.popup-calculator .custom-input::placeholder {
	color: var(--grey-g500);
}

.popup-calculator .custom-input:focus {
	border-color: var(--blue-input);
}

/* 4. Alert Boxes (Success & Info) */
.popup-calculator .alert-layout {
	width: 100%;
	display: inline-flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 16px;
}

.popup-calculator .alert-icon-wrap {
	width: 24px;
	height: 24px;
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}

.popup-calculator .alert-content {
	flex: 1 1 0;
	display: inline-flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 4px;
}

.popup-calculator .alert-title {
	color: var(--grey-black);
	font-size: 17px;
	font-weight: var(--fw-bold);
	line-height: 20.40px;
	letter-spacing: 0.51px;
	word-wrap: break-word;
	align-self: stretch;
}

.popup-calculator .alert-desc {
	color: var(--grey-black);
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 24px;
	letter-spacing: 0.48px;
	word-wrap: break-word;
	align-self: stretch;
}

/* Success State Box */
.popup-calculator .alert-success-box {
	width: 100%;
	padding: 16px 24px;
	background: var(--protection-success-bg);
	border-radius: 16px;
	outline: 1px solid var(--protection-success-border);
	outline-offset: -1px;
	margin-bottom: 40px;
	overflow: hidden;
}

/* Info State Box */
.popup-calculator .alert-info-box {
	width: 100%;
	padding: 24px;
	background: var(--blue-primary-alpha-05);
	border-radius: 16px;
	outline: 1px solid var(--blue-primary);
	outline-offset: -1px;
	margin-bottom: 40px;
	overflow: hidden;
}

/* 5. Pricing Breakdown */
.popup-calculator .pricing-row {
	display: flex;
	align-items: center;
	margin-left: -15px;
	margin-right: -15px;
}

.popup-calculator .custom-prices-labels {
	color: var(--grey-black);
	font-feature-settings: 'liga' off, 'clig' off;
	font-size: 16px;
	font-style: normal;
	font-weight: var(--fw-bold);
	line-height: 120%;
	letter-spacing: 0.48px;
}

.popup-calculator .custom-prices {
	color: var(--brand-grey);
	font-size: 16px;
	font-style: normal;
	font-weight: var(--fw-medium);
	line-height: 150%;
	letter-spacing: 0.48px;
}

.popup-calculator .custom-prices-total {
	color: var(--grey-black);
	font-feature-settings: 'liga' off, 'clig' off;
	font-size: 24px;
	font-style: normal;
	font-weight: var(--fw-bold);
	line-height: 120%;
	letter-spacing: 0.72px;
}

/* 6. Buttons & Grid Actions */
.popup-calculator .action-grid {
	display: grid;
	gap: 16px;
	margin-top: 24px;
	padding-bottom: 40px;
}

.popup-calculator .btn-calc-primary,
.popup-calculator .btn-calc-secondary {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	padding: 16px 20px;
	border-radius: 999px;
	width: 100%;
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.42px;
	font-feature-settings: 'liga' off, 'clig' off;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
}

.popup-calculator .btn-calc-primary {
	background: var(--btn-primary);
	border: none;
	color: var(--grey-white);
}

.popup-calculator .btn-calc-primary:hover {
	background: var(--btn-primary-active);
}

.popup-calculator .btn-calc-secondary {
	background: var(--grey-white);
	border: 1px solid var(--grey-g400);
	color: var(--grey-black);
}

.popup-calculator .btn-calc-secondary:hover {
	background: var(--grey-g200);
	border-color: var(--grey-black);
}

.popup-calculator .icon-white {
	filter: brightness(0) invert(1);
}