/* ========================================
   PE Forms - Page Builder Compatibility CSS
   ======================================== */

/* This file contains high-specificity CSS overrides for page builders
   like Bricks Builder, Elementor, Divi, etc. */

/* ========================================
   High Specificity Overrides
   ======================================== */

/* Force calculator container styles */
.pe-calculator,
div.pe-calculator,
section.pe-calculator,
article.pe-calculator,
.bricks-container .pe-calculator,
.elementor-widget-container .pe-calculator,
.et_pb_module .pe-calculator,
.vc_column_container .pe-calculator {
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 20px !important;
	font-family: "Montserrat", sans-serif !important;
	line-height: 1.6 !important;
	color: #081022 !important;
	box-sizing: border-box !important;
	position: relative !important;
	z-index: 1 !important;
}

/* Force calculator row layout */
.pe-calculator-row,
div.pe-calculator-row,
section.pe-calculator-row,
.bricks-container .pe-calculator-row,
.elementor-widget-container .pe-calculator-row,
.et_pb_module .pe-calculator-row,
.vc_column_container .pe-calculator-row {
	display: flex !important;
	gap: 30px !important;
	align-items: stretch !important;
	flex-wrap: wrap !important;
	position: relative !important;
}

/* Force calculator main area */
.pe-calculator-main,
div.pe-calculator-main,
section.pe-calculator-main,
.bricks-container .pe-calculator-main,
.elementor-widget-container .pe-calculator-main,
.et_pb_module .pe-calculator-main,
.vc_column_container .pe-calculator-main {
	flex: 2 !important;
	min-width: 0 !important;
	position: relative !important;
}

/* Force calculator sidebar */
.pe-calculator-sidebar,
div.pe-calculator-sidebar,
section.pe-calculator-sidebar,
.bricks-container .pe-calculator-sidebar,
.elementor-widget-container .pe-calculator-sidebar,
.et_pb_module .pe-calculator-sidebar,
.vc_column_container .pe-calculator-sidebar {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	min-width: 300px !important;
	position: relative !important;
}

/* Force calculator background */
.pe-calculator-background,
div.pe-calculator-background,
section.pe-calculator-background,
.bricks-container .pe-calculator-background,
.elementor-widget-container .pe-calculator-background,
.et_pb_module .pe-calculator-background,
.vc_column_container .pe-calculator-background {
	background: #f8f8f8 !important;
	padding: 30px !important;
	border-radius: 10px !important;
	border: 1px solid #eceef2 !important;
	box-shadow: 0 2px 10px rgba(8, 16, 34, 0.05) !important;
	height: 100% !important;
	position: relative !important;
}

/* Force field layout */
.pe-calculator-field,
div.pe-calculator-field,
section.pe-calculator-field,
.bricks-container .pe-calculator-field,
.elementor-widget-container .pe-calculator-field,
.et_pb_module .pe-calculator-field,
.vc_column_container .pe-calculator-field {
	margin-bottom: 90px !important;
	position: relative !important;
	overflow: hidden !important;
	clear: both !important;
}

/* Force field labels */
.pe-field-label,
div.pe-field-label,
label.pe-field-label,
.bricks-container .pe-field-label,
.elementor-widget-container .pe-field-label,
.et_pb_module .pe-field-label,
.vc_column_container .pe-field-label {
	width: 75% !important;
	float: left !important;
	margin-top: 5px !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	color: #081022 !important;
	line-height: 1.4 !important;
	font-family: "Montserrat", sans-serif !important;
	position: relative !important;
}

/* Force field inputs */
.pe-field-input,
div.pe-field-input,
input.pe-field-input,
.bricks-container .pe-field-input,
.elementor-widget-container .pe-field-input,
.et_pb_module .pe-field-input,
.vc_column_container .pe-field-input {
	width: 20% !important;
	float: right !important;
	margin-bottom: 10px !important;
	position: relative !important;
}

/* Force slider inputs */
.pe-slider-input,
div.pe-slider-input,
input.pe-slider-input,
.bricks-container .pe-slider-input,
.elementor-widget-container .pe-slider-input,
.et_pb_module .pe-slider-input,
.vc_column_container .pe-slider-input {
	width: 100% !important;
	padding: 12px 15px !important;
	border: 2px solid #e4e4e4 !important;
	border-radius: 5px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #081022 !important;
	background: #ffffff !important;
	text-align: center !important;
	font-family: "Montserrat", sans-serif !important;
	transition: all 0.3s ease !important;
	position: relative !important;
	z-index: 2 !important;
}

.pe-slider-input:focus,
input.pe-slider-input:focus,
.bricks-container .pe-slider-input:focus,
.elementor-widget-container .pe-slider-input:focus,
.et_pb_module .pe-slider-input:focus,
.vc_column_container .pe-slider-input:focus {
	outline: none !important;
	border-color: #00c853 !important;
	box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.1) !important;
}

/* Force slider container */
.pe-slider-container,
div.pe-slider-container,
section.pe-slider-container,
.bricks-container .pe-slider-container,
.elementor-widget-container .pe-slider-container,
.et_pb_module .pe-slider-container,
.vc_column_container .pe-slider-container {
	margin-top: 15px !important;
	position: relative !important;
}

/* Force slider styling */
.pe-slider,
div.pe-slider,
input.pe-slider,
.bricks-container .pe-slider,
.elementor-widget-container .pe-slider,
.et_pb_module .pe-slider,
.vc_column_container .pe-slider {
	width: 100% !important;
	height: 8px !important;
	border-radius: 4px !important;
	background: linear-gradient(to right, #00c853 0%, #00c853 50%, #e4e4e4 50%, #e4e4e4 100%) !important;
	outline: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	cursor: pointer !important;
	position: relative !important;
	z-index: 1 !important;
}

/* Force slider thumb */
.pe-slider::-webkit-slider-thumb,
input.pe-slider::-webkit-slider-thumb,
.bricks-container .pe-slider::-webkit-slider-thumb,
.elementor-widget-container .pe-slider::-webkit-slider-thumb,
.et_pb_module .pe-slider::-webkit-slider-thumb,
.vc_column_container .pe-slider::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	background: #00c853 !important;
	cursor: pointer !important;
	box-shadow: 0 2px 6px rgba(0, 200, 83, 0.3) !important;
	border: 3px solid #ffffff !important;
	position: relative !important;
	z-index: 3 !important;
}

.pe-slider::-moz-range-thumb,
input.pe-slider::-moz-range-thumb,
.bricks-container .pe-slider::-moz-range-thumb,
.elementor-widget-container .pe-slider::-moz-range-thumb,
.et_pb_module .pe-slider::-moz-range-thumb,
.vc_column_container .pe-slider::-moz-range-thumb {
	width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	background: #00c853 !important;
	cursor: pointer !important;
	box-shadow: 0 2px 6px rgba(0, 200, 83, 0.3) !important;
	border: 3px solid #ffffff !important;
	-moz-appearance: none !important;
	position: relative !important;
	z-index: 3 !important;
}

/* Force results styling */
.pe-results-box,
div.pe-results-box,
section.pe-results-box,
.bricks-container .pe-results-box,
.elementor-widget-container .pe-results-box,
.et_pb_module .pe-results-box,
.vc_column_container .pe-results-box {
	background: #ffffff !important;
	padding: 25px !important;
	border-radius: 10px !important;
	box-shadow: 0 4px 20px rgba(8, 16, 34, 0.1) !important;
	border: 1px solid #eceef2 !important;
	position: relative !important;
}

.pe-result-item,
div.pe-result-item,
section.pe-result-item,
.bricks-container .pe-result-item,
.elementor-widget-container .pe-result-item,
.et_pb_module .pe-result-item,
.vc_column_container .pe-result-item {
	margin-bottom: 20px !important;
	position: relative !important;
}

.pe-result-item h4,
div.pe-result-item h4,
section.pe-result-item h4,
.bricks-container .pe-result-item h4,
.elementor-widget-container .pe-result-item h4,
.et_pb_module .pe-result-item h4,
.vc_column_container .pe-result-item h4 {
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #081022 !important;
	margin: 0 0 8px 0 !important;
	font-family: "Montserrat", sans-serif !important;
	position: relative !important;
}

.pe-result-item p,
div.pe-result-item p,
section.pe-result-item p,
.bricks-container .pe-result-item p,
.elementor-widget-container .pe-result-item p,
.et_pb_module .pe-result-item p,
.vc_column_container .pe-result-item p {
	font-size: 24px !important;
	font-weight: 700 !important;
	color: #00c853 !important;
	margin: 0 !important;
	font-family: "Montserrat", sans-serif !important;
	position: relative !important;
}

/* Force chart styling */
.pe-chart-box,
div.pe-chart-box,
section.pe-chart-box,
.bricks-container .pe-chart-box,
.elementor-widget-container .pe-chart-box,
.et_pb_module .pe-chart-box,
.vc_column_container .pe-chart-box {
	background: #ffffff !important;
	padding: 25px !important;
	border-radius: 10px !important;
	box-shadow: 0 4px 20px rgba(8, 16, 34, 0.1) !important;
	border: 1px solid #eceef2 !important;
	text-align: center !important;
	position: relative !important;
}

/* Force chart placeholder */
.pe-chart-placeholder,
div.pe-chart-placeholder,
section.pe-chart-placeholder,
.bricks-container .pe-chart-placeholder,
.elementor-widget-container .pe-chart-placeholder,
.et_pb_module .pe-chart-placeholder,
.vc_column_container .pe-chart-placeholder {
	background: #f8f9fa !important;
	border: 2px dashed #dee2e6 !important;
	border-radius: 10px !important;
	padding: 40px 20px !important;
	text-align: center !important;
	color: #6c757d !important;
	transition: all 0.3s ease !important;
	position: relative !important;
}

/* ========================================
   Mobile Responsive Overrides
   ======================================== */

@media (max-width: 768px) {
	/* Force mobile layout */
	.pe-calculator-row,
	div.pe-calculator-row,
	section.pe-calculator-row,
	.bricks-container .pe-calculator-row,
	.elementor-widget-container .pe-calculator-row,
	.et_pb_module .pe-calculator-row,
	.vc_column_container .pe-calculator-row {
		flex-direction: column !important;
		gap: 20px !important;
	}
	
	.pe-calculator-main,
	div.pe-calculator-main,
	section.pe-calculator-main,
	.pe-calculator-sidebar,
	div.pe-calculator-sidebar,
	section.pe-calculator-sidebar,
	.bricks-container .pe-calculator-main,
	.bricks-container .pe-calculator-sidebar,
	.elementor-widget-container .pe-calculator-main,
	.elementor-widget-container .pe-calculator-sidebar,
	.et_pb_module .pe-calculator-main,
	.et_pb_module .pe-calculator-sidebar,
	.vc_column_container .pe-calculator-main,
	.vc_column_container .pe-calculator-sidebar {
		flex: none !important;
		width: 100% !important;
	}
	
	.pe-field-label,
	div.pe-field-label,
	label.pe-field-label,
	.bricks-container .pe-field-label,
	.elementor-widget-container .pe-field-label,
	.et_pb_module .pe-field-label,
	.vc_column_container .pe-field-label {
		width: 100% !important;
		float: none !important;
		margin-bottom: 10px !important;
	}
	
	.pe-field-input,
	div.pe-field-input,
	input.pe-field-input,
	.bricks-container .pe-field-input,
	.elementor-widget-container .pe-field-input,
	.et_pb_module .pe-field-input,
	.vc_column_container .pe-field-input {
		width: 100% !important;
		float: none !important;
		margin-bottom: 15px !important;
	}
}

/* ========================================
   Specific Page Builder Overrides
   ======================================== */

/* Bricks Builder specific */
.bricks-container .pe-calculator {
	width: 100% !important;
	max-width: 1200px !important;
}

/* Elementor specific */
.elementor-widget-container .pe-calculator {
	width: 100% !important;
}

/* Divi specific */
.et_pb_module .pe-calculator {
	width: 100% !important;
}

/* Visual Composer specific */
.vc_column_container .pe-calculator {
	width: 100% !important;
}

/* ========================================
   Z-Index Management
   ======================================== */

/* Ensure calculators appear above page builder elements */
.pe-calculator {
	z-index: 10 !important;
}

.pe-slider {
	z-index: 5 !important;
}

.pe-slider-input {
	z-index: 6 !important;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
	.pe-calculator,
	div.pe-calculator,
	section.pe-calculator,
	article.pe-calculator {
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		box-shadow: none !important;
		border: none !important;
	}
	
	.pe-slider,
	div.pe-slider,
	input.pe-slider {
		display: none !important;
	}
}