#solarflow-wizard {



  max-width: 720px;



  margin: 40px auto;



  padding: 35px;



  background: #ffffff;



  border-radius: 20px;



  box-shadow: 0 12px 45px rgba(0,0,0,0.10);



  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;



}







.sfp-main-title {



  text-align: center;



  font-size: 26px;



  font-weight: 800;



  margin-bottom: 25px;



  color: #111827;



}







.sfp-step {



  display: none;



  animation: fadeIn 0.25s ease-in-out;



  background: #ffffff;



  border: 1px solid #eef2f7;



  padding: 22px;



  border-radius: 16px;



  box-shadow: 0 6px 20px rgba(0,0,0,0.04);



}







.sfp-step.active {



  display: block;



}







@keyframes fadeIn{







	from {



		opacity: 0;



		transform: translateY(6px);



	}



	to {



		opacity: 1;



		transform: translateY(0);



	}







}







.sfp-step h3 {



  font-size: 18px;



  font-weight: 700;



  margin-bottom: 15px;



  color: #1f2937;



}







input[type="range"] {



  width: 100%;



  accent-color: #2ecc71;



}







#bill-value {



  font-size: 28px !important;



  font-weight: 900 !important;



  color: #2ecc71 !important;



}







input[type="text"],input[type="email"],input[type="tel"],select {



  width: 100%;



  padding: 12px 14px;



  margin-top: 10px;



  border-radius: 10px;



  border: 1px solid #e5e7eb;



  font-size: 15px;



  background: #fff;



  transition: 0.2s;



}







input:focus,select:focus {



  border-color: #2ecc71;



  outline: none;



  box-shadow: 0 0 0 3px rgba(46,204,113,0.15);



}







button {



  width: 100%;



  padding: 12px;



  margin-top: 15px;



  border: none;



  border-radius: 10px;



  font-weight: 700;



  cursor: pointer;



  background: #2ecc71;



  color: #fff;



  transition: 0.2s;



}







button:hover {



  background: #27ae60;



}







.sfp-next {



  background: linear-gradient(135deg, #22c55e, #16a34a) !important;



}







.sfp-back {



  display: block;



  width: auto;



  padding: 12px 24px;



  font-size: 12px;



  font-weight: 600;



  margin: 10px auto 0 auto;



  background: transparent;



  color: #6b7280;



  border: 1px solid #d1d5db;



  border-radius: 10px;



  text-align: center !important;



  cursor: pointer;



  opacity: 1 !important;



  margin-right: 10px;



}







.sfp-back:hover {



  background: #e5e7eb;



  color: #000 !important;



}







.sfp-step[data-step="2"] {



  display: flex;



  flex-direction: column;



}







.sfp-step[data-step="2"] .sfp-next {



  order: 1;



}







.sfp-step[data-step="2"] .sfp-back {



  order: 2;



  align-self: center;



}







#sfp-result,#sfp-total-25 {



  font-size: 26px;



  font-weight: 800;



  color: #2ecc71;



  margin-top: 5px;



}







#solarflow-wizard a {



  color: #ef4444;



  font-weight: 600;



  text-decoration: none;



}







.sfp-modal {



  display: none;



  position: fixed;



  z-index: 999999999;



  left: 0;



  top: 0;



  width: 100%;



  height: 100%;



  background: rgba(0,0,0,0.6);



}







@keyframes fadeIn{







	from {



		opacity: 0;



		transform: translateY(6px);



	}



	to {



		opacity: 1;



		transform: translateY(0);



	}







}







.sfp-step div[style*="text-align:center"] {



  margin-top: 18px !important;



  padding: 10px 0;



}







.sfp-step[data-step="3"] {



  display: block;



}







.sfp-step[data-step="3"] > div:nth-of-type(1),.sfp-step[data-step="3"] > div:nth-of-type(2) {



  display: inline-block;



  width: 48%;



  vertical-align: top;



  text-align: center;



  background: linear-gradient(135deg, #ffffff, #f8fafc);



  border: 1px solid #e5e7eb;



  border-radius: 14px;



  padding: 14px;



  margin-bottom: 15px;



}







.sfp-step[data-step="3"] > div:nth-of-type(1) {



  margin-right: 3%;



}







.sfp-step[data-step="3"] > div > div:first-child {



  font-size: 12px;



  font-weight: 700;



  color: #6b7280;



  text-transform: uppercase;



}







.sfp-step[data-step="3"] > div:nth-of-type(2) {



  border: 1px solid rgba(46,204,113,0.3);



}







.sfp-step[data-step="3"] > div:nth-of-type(2) #sfp-total-25 {



  color: #2ecc71 !important;



}







.sfp-step[data-step="3"] > div:nth-of-type(3) {



  display: block;



  width: 100%;



  margin-top: 20px;



}







.sfp-modal-content {



  background: #fff;



  max-width: 550px;



  margin: 10% auto;



  padding: 25px;



  border-radius: 15px;



  position: relative;



  text-align: center;



  box-shadow: 0 5px 30px rgba(0,0,0,0.3);



}







.sfp-modal-content img {



  width: 100%;



  height: auto;



  border-radius: 8px;



  margin: 15px 0;



}







.sfp-shade-help {



  margin-top: 14px;



  margin-bottom: 18px;



  text-align: center;



}







#sfp-show-shade {



  display: inline-block;



  padding: 6px 10px;



  border-radius: 6px;



  font-size: 13px;



  color: #2563eb;



  font-weight: 600;



  cursor: pointer;



  text-decoration: underline;



  transition: 0.2s ease;



  margin-top: 8px;



}







#sfp-show-shade:hover {



  color: #27ae60;



  background: rgba(46, 204, 113, 0.08);



  text-decoration: underline;



}







#solarflow-wizard select {



  font-size: 16px;



  color: red;



  font-weight: 600;



  padding: 12px 14px;



  border-radius: 10px;



}







#solarflow-wizard select option {



  font-weight: 700;



  color: #111;



}







#solarflow-wizard select:focus {



  outline: none;



  border: 1px solid #2ecc71;



  box-shadow: 0 0 0 3px rgba(46,204,113,0.15);



}







#solarflow-wizard .sfp-main-title {



  display: block !important;



  visibility: visible !important;



  opacity: 1 !important;



  color: #2c3e50 !important;



  text-align: center !important;



  margin: 20px 0 !important;



}







html body #solarflow-wizard h2.sfp-main-title {



  display: block !important;



  visibility: visible !important;



  opacity: 1 !important;



  color: #111827 !important;



  font-size: 28px !important;



  font-weight: 800 !important;



  text-align: center !important;



  margin: 0 auto 30px auto !important;



  padding: 10px 0 !important;



  line-height: 1.2 !important;



}







.wp-list-table.widefat.striped > tbody > tr:nth-child(odd),.widefat.striped > tbody > tr:nth-child(odd) {



  background-color: #dbeafe !important;



}







.wp-list-table.widefat.striped > tbody > tr:nth-child(even),.widefat.striped > tbody > tr:nth-child(even) {



  background-color: #ffffff !important;



}







.wp-list-table.widefat.striped > tbody > tr:hover,.widefat.striped > tbody > tr:hover {



  background-color: #93c5fd !important;



}







.wp-list-table.widefat.striped td,.widefat.striped td {



  padding: 12px 10px !important;



}







.sfp-form-group {



  margin-bottom: 22px;



}







.sfp-form-group label {



  display: block;



  font-weight: 600;



  font-size: 14px;



  color: #222;



  margin-bottom: 6px;



}







.sfp-form-group input,.sfp-form-group select {



  width: 100%;



  padding: 12px 14px;



  border: 1px solid #dcdcdc;



  border-radius: 8px;



  font-size: 15px;



  transition: all 0.2s ease;



  background: #fff;



}







.sfp-form-group input:focus,.sfp-form-group select:focus {



  border-color: #2ecc71;



  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.15);



  outline: none;



}







.sfp-form-group input::placeholder {



  color: #999;



  font-size: 14px;



}







.sfp-form-group select {



  appearance: none;



  -webkit-appearance: none;



  -moz-appearance: none;



}







.sfp-form-group input:hover,.sfp-form-group select:hover {



  border-color: #bbb;



}






.sfp-form-group + .sfp-form-group {



  margin-top: 10px;



}







#sfp-calc-form {



  max-width: 600px;



  margin: 2rem auto;



  font-family: 'Inter', -apple-system, sans-serif;



  background: #ffffff;



  border-radius: 20px;



  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);



  color: #1f2937;



}







#sfp-calc-form h3 {



  font-size: 1.5rem;



  font-weight: 700;



  margin-bottom: 1.5rem;



  color: #111827;



  line-height: 1.2;



}







.sfp-input-group {



  display: flex;



  flex-direction: column;



  margin-bottom: 1.25rem;



  text-align: left;



}







.sfp-input-group label {



  font-size: 0.9rem;



  font-weight: 600;



  color: #4b5563;



  margin-bottom: 0.5rem;



  line-height: 1.2;



  display: block;



}







#sfp-calc-form input[type="text"],#sfp-calc-form input[type="email"],#sfp-calc-form input[type="tel"],#sfp-calc-form select {



  width: 100%;



  padding: 12px 14px;



  border-radius: 10px;



  border: 1px solid #d1d5db;



  font-size: 15px;



  background: #fff;



  transition: all 0.2s ease;



}







#sfp-calc-form input:focus,#sfp-calc-form select:focus {



  border-color: #2ecc71;



  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.15);



  outline: none;



}







#sfp-calc-form input:hover,#sfp-calc-form select:hover {



  border-color: #9ca3af;



}







#sfp-calc-form select {



  margin-bottom: 14px;



}







#bill-range {



  width: 100%;



  margin-top: 10px;



  height: 8px;



  background: #e5e7eb;



  border-radius: 5px;



  outline: none;



  accent-color: #2ecc71;



}







#sfp-calc-form button {



  width: 100%;



  padding: 14px;



  border-radius: 10px;



  border: none;



  font-size: 15px;



  font-weight: 700;



  cursor: pointer;



  transition: all 0.2s ease;



  margin-top: 10px;



}







.sfp-next,#sfp-calc-form button[type="submit"] {



  background: #2ecc71;



  color: #fff;



}







.sfp-next:hover,#sfp-calc-form button[type="submit"]:hover {



  background: #27ae60;



}







.sfp-input-group input,.sfp-input-group select {



  margin-top: 0 !important;



}







.sfp-input-group * {



  margin-top: 0;



}







#sfp-calc-form input,#sfp-calc-form select {



  box-shadow: 0 1px 2px rgba(0,0,0,0.05);



  transition: border 0.2s ease, box-shadow 0.2s ease;



}







#sfp-calc-form button[type="submit"] {



  margin-top: 20px;



  font-size: 16px;



}







.wsf-logo {



  display: flex;



  align-items: center;



  flex-grow: 1;



  justify-content: center;



  height: 100%;



}







.wsf-logo img {



  height: 65px !important;



  display: block;



  width: auto !important;



  max-height: 75px;



  object-fit: contain;



}







.wsf-shortcode-display {



  font-size: 2.5rem;



  color: #2ecc71;



  font-family: 'Courier New', monospace;



  font-weight: bold;



  display: block;



  text-align: center;



  word-break: break-all;



}







.wsf-header {



  display: flex;



  align-items: center;



  justify-content: space-between;



  padding: 0 15px;



  background: #fff;



  border-bottom: 1px solid #f1f5f9;



  position: sticky;



  top: 0;



  z-index: 9999;



  height: 85px;



}







.wsf-mobile-toggle {



  display: none;



  cursor: pointer;



  background: none;



  border: none;



  padding: 10px;



  flex: 0 0 50px;



  order: -1;



}







.wsf-side-drawer {



  position: fixed;



  top: 0;



  left: -300px;



  width: 280px;



  height: 100%;



  background: #fff;



  z-index: 10001;



  box-shadow: 10px 0 30px rgba(0,0,0,0.1);



  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);



  padding: 40px 30px;



}







.wsf-side-drawer.is-active {



  left: 0;



}







.wsf-drawer-overlay {



  position: fixed;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  background: rgba(15, 23, 42, 0.4);



  backdrop-filter: blur(4px);



  z-index: 10000;



  visibility: hidden;



  opacity: 0;



  transition: 0.3s;



}







.wsf-drawer-overlay.is-active {



  visibility: visible;



  opacity: 1;



}







.sfp-modal-close {



  position: absolute;



  top: 1px !important;



  right: 15px;



  font-size: 26px;



  cursor: pointer;



}







#sfp-calc-form input[type="text"],



#sfp-calc-form input[type="email"],



#sfp-calc-form select {



  width: 100%;



  padding: 12px 16px;



  border: 1.5px solid #e5e7eb;



  border-radius: 10px;



  font-size: 1rem;



  transition: all 0.2s ease;



  background-color: #f9fafb;



}







#sfp-calc-form input:focus, 



#sfp-calc-form select:focus {



  outline: none;



  border-color: #2ecc71;



  background-color: #fff;



  box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.1);



}







.sfp-next, button[type="submit"] {



  background: #2ecc71;



  color: white;



  border: none;



  padding: 14px 28px;



  border-radius: 10px;



  font-weight: 600;



  font-size: 1rem;



  cursor: pointer;



  width: 100%;



  transition: transform 0.1s, background 0.2s;



}







.sfp-next:hover, button[type="submit"]:hover {



  background: #27ae60;



}







.sfp-results-grid {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 15px;



  margin-bottom: 20px;



}







.sfp-result-card {



  background: #f0fdf4;



  padding: 15px;



  border-radius: 12px;



  text-align: center;



  border: 1px solid #dcfce7;



}







.sfp-result-value {



  font-size: 1.4rem;



  font-weight: 800;



  color: #166534;



}







@media (max-width: 600px) {



  .sfp-form-group {



    margin-bottom: 18px;



  }



  



  .sfp-form-group label {



    font-size: 13px;



  }



  



  .sfp-form-group input, .sfp-form-group select {



    font-size: 14px;



    padding: 10px 12px;



  }



}







@media (max-width: 600px) {



  #sfp-calc-form {



    padding: 10px;



  }



  



  #sfp-calc-form h3 {



    font-size: 18px;



  }



  



  #sfp-calc-form input, #sfp-calc-form select {



    font-size: 14px;



    padding: 11px;



  }



}







@media (min-width: 769px) {



  .wsf-logo img {



    min-width: 300px !important;



    max-width: 375px !important;



    width: 100%;



  }



}







@media (max-width: 768px) {



  .wsf-logo img {



    min-width: unset !important;



    max-width: 220px !important;



    height: 50px !important;



  }



}







@media (max-width: 768px) {



  .wsf-shortcode-display {



    font-size: 1.2rem !important;



    letter-spacing: -0.02em;



  }



}







@media (max-width: 768px) {



  .wsf-nav {



    display: none;



  }



  



  .wsf-mobile-toggle {



    display: block;



  }



  



  .wsf-logo {



    margin-right: 50px;



  }



}







@media (min-width: 769px) {



  .wsf-logo {



    justify-content: flex-start;



    margin-right: 0;



  }



  



  .wsf-nav {



    display: flex;



    align-items: center;



  }



}







@media (max-width: 768px) {



  #demo {



    padding-left: 0 !important;



    padding-right: 0 !important;



  }



  



  .wsf-demo-container {



    padding: 15px 10px !important;



    margin: 0 auto !important;



    width: 95% !important;



    max-width: 100% !important;



    border-radius: 12px !important;



  }



  



  .sfp-container {



    padding: 10px 5px !important;



  }



  



  .sfp-step h3 {



    font-size: 1.3rem !important;



    line-height: 1.3 !important;



  }



  



  .sfp-input-group input,.sfp-input-group select {



    width: 100% !important;



    box-sizing: border-box !important;



    font-size: 16px !important;



  }



  



  #sfp-result, #sfp-total-25 {



    font-size: 1.8rem !important;



  }



}



.sfp-eco-results {



	font-size: 14px !important;



}



#sfp-show-shade {



	border-radius: 6px;



	color: #2563eb !important;



	font-weight: 600;



	cursor: pointer !important;



	text-decoration: underline !important;



	transition: 0.2s ease;



	margin-top: 8px !important;



	font-size: 14px !important;



	margin-bottom: -25px;



}



/* Container for the entire footer area */



#calc-footer-wrapper {



    margin-top: 40px;



    padding-top: 20px;



    border-top: 1px solid #eef2f6;



    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;



}







/* Reset Link - Styled to look like a clean utility button */



#sfp-reset-form {



    color: #9ca3af !important; /* Subtle gray by default */



    text-decoration: none !important;



    font-size: 13px;



    font-weight: 600;



    text-transform: uppercase;



    letter-spacing: 0.05em;



    transition: color 0.2s ease;



}







#sfp-reset-form:hover {



    color: #ef4444 !important; /* Turns red only on hover */



}







/* Empty div spacing */



#footer-txt-1 p {



    margin: 5px 0;



}







/* The Disclaimer text */



#footer-txt-2 {



    font-size: 11px;



    line-height: 1.6;



    color: #94a3b8; /* Slate gray */



    max-width: 500px;



    margin: 15px auto;



    font-style: italic;



}







/* The Copyright/Branding line */



#footer-txt-3 {



    font-size: 12px;



    color: #64748b;



    font-weight: 500;



    margin-top: 10px;



    letter-spacing: 0.01em;



}







/* Responsive adjustment */



@media (max-width: 480px) {



    #footer-txt-2 {



        font-size: 10px;



        padding: 0 10px;



    }



}/* --- SolarFlow Step 3 Visibility Fix --- *//* Force the wizard container and form to expand for the long results page */div#solarflow-wizard, form#sfp-calc-form, .sfp-container {    height: auto !important;    max-height: none !important;    overflow: visible !important;    display: block !important;}/* Ensure Step 3 has enough room for the chart, form, and button */#solarflow-wizard .sfp-step[data-step="3"] {    height: auto !important;    min-height: 900px !important; /* Forces the container to stay open */    overflow: visible !important;    padding-bottom: 80px !important;}/* Ensure the Submit button isn't hidden by the footer or chart */#solarflow-wizard button[type="submit"] {    display: block !important;    visibility: visible !important;    margin: 30px auto 60px auto !important;    opacity: 1 !important;    position: relative !important;    z-index: 100 !important;}/* Prevents the chart from 'cutting off' the form below it */#solarflow-wizard canvas#sfp-savings-chart {    max-height: 300px !important;    margin-bottom: 40px !important;}







jQuery(document).ready(function($) {



    $('#sfp-state-select').on('change', function() {



        var state = $(this).val();



        var citySelect = $('#sfp-city-select');







        // Show a "Loading..." message



        citySelect.html('<option value="">Loading cities...</option>');







        $.ajax({



            url: ajaxurl, // WordPress defines this in the admin, or you may need to localize it



            type: 'POST',



            data: {



                action: 'wpsf_get_cities',



                state: state



            },



            success: function(response) {



                citySelect.html(response);



            }



        });



    });



});















/*******************************************************************************************************************************************/







/* Force Step 2 to behave as a flexible container */



.sfp-stretch-fix[data-step="2"] {



    display: none; /* Default */



    height: auto !important;



    min-height: 100px !important;



    max-height: none !important;



    overflow: visible !important;



    clear: both !important;



    padding-bottom: 50px !important;



}



/* Force Step 2 to behave as a flexible container */



.sfp-stretch-fix[data-step="3"] {



    display: none; /* Default */



    height: auto !important;



    min-height: 300px !important;



    max-height: none !important;



    overflow: visible !important;



    clear: both !important;



    padding-bottom: 50px !important;



}



/* Force the WPBakery wrapper and its parents to grow */



.wpb_wrapper, 



.wpb_column, 



.vc_column-inner, 



.vc_row,



#solarflow-wizard {



    height: auto !important;



    min-height: 0px !important;



    overflow: visible !important;



}







/* Ensure Step 3 doesn't overlap the footer */



[data-step="3"] {



    display: block;



    padding-bottom: 80px !important;



    clear: both;



}







.sfp-input-group label {



	display: flex;



	flex-direction: column;



	margin-bottom: 1.0rem !important;



	text-align: left;



	font-weight: 600 !important;



	font-size: 14px !important;



	margin-top: 1.6rem !important;



}







/*-----------------------------*/



/*   Custom Colors            */



/*-----------------------------*/







#solarflow-wizard {



	background-color: aqua !important;



}







.sfp-step {



    position: relative !important;



    z-index: 1;



    pointer-events: auto !important;



}







.sfp-step[style*="display: block"] {



    z-index: 10;



}







/* --- Restoration of Main Container --- */



#solarflow-wizard {



  max-width: 720px;



  margin: 40px auto;



  padding: 35px;



  background-color: #ffffff; /* Reverted from Aqua for safety, change as needed */



  border-radius: 20px;



  box-shadow: 0 12px 45px rgba(0,0,0,0.10);



  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;



}







/* --- THE FIX: TIGHTENING VERTICAL GAPS --- */



.sfp-input-group {



  display: flex;



  flex-direction: column;



  margin-bottom: 8px !important; /* Heavily reduced from 1.25rem */



  text-align: left;



}






.sfp-input-group label {



  display: block !important;



  font-weight: 600 !important;



  font-size: 14px !important;



  color: #4b5563;



  margin-top: 0 !important;    /* Killed the 1.6rem gap */



  margin-bottom: 4px !important; /* Tiny gap to the input */



  line-height: 1.2;



}







#sfp-calc-form select, 



#sfp-calc-form input {



  margin-top: 0 !important;



  margin-bottom: 0 !important;



  padding: 10px 14px !important; /* Slightly slimmer padding */



}







/* --- STEP 3 SPECIFIC TIGHTENING --- */



.wsf-lead-hook {



  text-align: center; 



  margin-top: 15px !important;    /* Reduced from 30px */



  margin-bottom: 15px !important; /* Reduced from 30px */



  padding: 20px !important;



  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);



  border-radius: 16px;



  border: 1px solid #dcfce7;



}







/* Restoring your Step 3 Result Cards */



.sfp-step[data-step="3"] > div:nth-of-type(1),



.sfp-step[data-step="3"] > div:nth-of-type(2) {



  display: inline-block;



  width: 48%;



  vertical-align: top;



  text-align: center;



  background: linear-gradient(135deg, #ffffff, #f8fafc);



  border: 1px solid #e5e7eb;



  border-radius: 14px;



  padding: 14px;



  margin-bottom: 10px;



}







/* --- CORE FUNCTIONAL CSS (Kept from your original) --- */



.sfp-step {



  display: none;



  animation: fadeIn 0.25s ease-in-out;



  background: #ffffff;



  border: 1px solid #eef2f7;



  padding: 22px;



  border-radius: 16px;



}







.sfp-step.active { display: block; }







@keyframes fadeIn{



	from { opacity: 0; transform: translateY(6px); }



	to { opacity: 1; transform: translateY(0); }



}







input[type="text"], input[type="email"], input[type="tel"], select {



  width: 100%;



  border-radius: 10px;



  border: 1px solid #e5e7eb;



  font-size: 15px;



  background: #fff;



}







button, .sfp-next {



  width: 100%;



  padding: 12px;



  margin-top: 15px;



  border: none;



  border-radius: 10px;



  font-weight: 700;



  cursor: pointer;



  background: #2ecc71;



  color: #fff;



}







/* --- FOOTER FIX --- */



#calc-footer-wrapper {



  margin-top: 20px !important;



  padding-top: 15px !important;



  border-top: 1px solid #eee;



}







/* Target the specific 5th child (Address) to prevent jumping */



div.sfp-step:nth-child(4) > div:nth-child(5) {



  margin-top: 0 !important;



  padding-top: 0 !important;



}



.sfp-tagline {



  font-size: 18px;



  font-weight: 500;



  text-align: center;



  color: #2c3e50;



  margin: 10px 0 20px;



  line-height: 1.4;



}







/* Optional: make it pop slightly on larger screens */



@media (min-width: 768px) {



  .sfp-tagline {



    font-size: 20px;



  }



}



.sfp-main-title {



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    gap: 15px;



    margin-bottom: 30px !important;



    text-align: center;



}







/* Logo control */



/* 1. Main Logo Control */
.sfp-logo {
    display: block;
    width: auto;
    height: auto;
    
    /* Minimum size requirement */
    min-width: 150px !important;
    min-height: 125px !important;
    
    /* Maximum size requirement */
    max-width: 200px !important;
    max-height: 150px !important;
    
    object-fit: contain;
    margin: 0 auto;
}

/* 2. Desktop Specific Override */
@media (min-width: 769px) {
    .wsf-logo img, 
    .sfp-logo {
        min-width: 150px !important;
        min-height: 125px !important;
        max-width: 200px !important; 
        max-height: 150px !important;
        width: 100%;
        height: auto;
    }
}

/* 3. Mobile Specific Override */
@media (max-width: 768px) {
    .wsf-logo img,
    .sfp-logo {
        /* Respects your 150x125 minimum but caps width slightly for smaller screens */
        min-width: 150px !important;
        min-height: 125px !important;
        max-width: 180px !important; 
        max-height: 140px !important;
        height: auto !important;
    }
}







/* Calculator name (THIS will inherit your dynamic text color) */



.sfp-calc-name {



    display: block;



    width: 100%;



    text-align: center;



    font-weight: 700;



    font-size: 22px;



}



.sfp-logo {



    max-width: 150px;



    max-height: 150px;



    width: auto;



    height: auto;



    object-fit: contain;



}



.sfp-footer {



    margin-top: 25px;



    padding: 20px 15px;



    border-top: 1px solid #eee;



    text-align: center;



    font-size: 12px;



    color: #777;



}







.sfp-footer-disclaimer {



    line-height: 1.5;



    padding: 0 12px;



    max-width: 650px;



    margin: 0 auto;



}







.sfp-disclaimer-text {



    margin-bottom: 10px;



    color: #666;



}







.sfp-footer-copyright {



    margin-top: 12px;



    color: #999;



    font-size: 12px;



}

/* ************************************************* Eco ******************************************* */

/* ============================================================
   WPSOLARFLOW: STEP 3 SAVINGS BOXES & CENTERING
   ============================================================ */

/* 1. Main Wrappers: Force 100% width and kill any side floats */
#solar-savings-box,
#main-savings-wrapper,
#eco-wrapper,
#eco-box-1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 20px !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
}

/* 2. Inner Flex Rows: This handles the "Year 1 | Total" centering */
#main-savings-wrapper > div[style*="display: flex"],
#eco-wrapper > div[style*="display: flex"],
#solar-savings-box div[style*="display: flex"] {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important; /* Horizontally centers the boxes */
    align-items: center !important;     /* Vertically centers the boxes */
    gap: 20px !important;               /* Space between Year 1 and Total */
    width: 100% !important;
    margin: 10px auto 0 auto !important;
}

/* 3. Result Individual Boxes: Ensure text stays centered inside */
#saving-box-500,
#savings-box-500-b-cc,
#savings-100-b,
div[id^="saving"] {
    flex: 1 !important; /* Allow boxes to grow equally */
    max-width: 200px !important; /* Keep them from getting too wide on desktop */
    text-align: center !important;
}

/* 4. Mobile Responsiveness (Screen < 600px) */
@media screen and (max-width: 600px) {
    /* Stack the Year 1 and Total boxes vertically */
    #main-savings-wrapper > div[style*="display: flex"],
    #eco-wrapper > div[style*="display: flex"],
    #solar-savings-box div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* Hide the 1px vertical divider line on mobile */
    #savings-box-500-b,
    div[style*="width: 1px"] {
        display: none !important;
    }

    /* Environmental Impact Box: Stack icons and text */
    #eco-box-1 div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Remove right margin from SVG icons on mobile */
    #eco-box-1 div[style*="margin-right: 12px"] {
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }

    /* Increase font size for better mobile readability */
    #sfp-result-pro, #sfp-total-25, #sfp-result, #sfp-total-5 {
        font-size: 22px !important;
    }
}

/* --- Calculator Footer Stretching & Alignment --- */

#calc-footer-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    clear: both !important;
    box-sizing: border-box !important;
}

.sfp-footer {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.sfp-footer-disclaimer {
    width: 100% !important;
    max-width: 800px; /* Optional: keeps text lines from getting too long on ultra-wide screens */
    margin: 0 auto 15px auto !important;
}

.sfp-disclaimer-text {
    font-size: 12px !important;
    color: #888 !important;
    line-height: 1.5 !important;
    margin-bottom: 5px !important;
    display: block !important;
    width: 100% !important;
}

.sfp-footer-copyright {
    font-size: 13px !important;
    color: #666 !important;
    margin-top: 10px !important;
    width: 100% !important;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    #calc-footer-wrapper {
        padding: 20px 10px !important;
    }
    
    .sfp-disclaimer-text {
        font-size: 11px !important;
    }
}