.elementor-2842 .elementor-element.elementor-element-6acd74e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:5em;--padding-bottom:5em;--padding-left:0em;--padding-right:0em;}.elementor-2842 .elementor-element.elementor-element-6acd74e:not(.elementor-motion-effects-element-type-background), .elementor-2842 .elementor-element.elementor-element-6acd74e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F8FC;}.elementor-2842 .elementor-element.elementor-element-2f05875{--display:flex;}.elementor-2842 .elementor-element.elementor-element-1109d55{--display:flex;--border-radius:15px 15px 15px 15px;--padding-top:40px;--padding-bottom:40px;--padding-left:30px;--padding-right:30px;}.elementor-2842 .elementor-element.elementor-element-1109d55:not(.elementor-motion-effects-element-type-background), .elementor-2842 .elementor-element.elementor-element-1109d55 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2842 .elementor-element.elementor-element-fb3d353{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 5px) 0px;}.elementor-2842 .elementor-element.elementor-element-fb3d353 .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:27px;font-weight:700;letter-spacing:0px;color:var( --e-global-color-d5f9489 );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-2842 .elementor-element.elementor-element-4ca66cc{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;color:#4F5863;}.elementor-2842 .elementor-element.elementor-element-4ca66cc p{margin-block-end:20px;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-2842 .elementor-element.elementor-element-30052bf{margin:15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--e-icon-list-icon-size:13px;--icon-vertical-offset:0px;}.elementor-2842 .elementor-element.elementor-element-30052bf .elementor-icon-list-icon i{color:var( --e-global-color-accent );transition:color 0.3s;}.elementor-2842 .elementor-element.elementor-element-30052bf .elementor-icon-list-icon svg{fill:var( --e-global-color-accent );transition:fill 0.3s;}.elementor-2842 .elementor-element.elementor-element-30052bf .elementor-icon-list-item > .elementor-icon-list-text, .elementor-2842 .elementor-element.elementor-element-30052bf .elementor-icon-list-item > a{font-family:"DM Sans", Sans-serif;font-size:13px;font-weight:400;}.elementor-2842 .elementor-element.elementor-element-30052bf .elementor-icon-list-text{color:var( --e-global-color-text );transition:color 0.3s;}@media(min-width:768px){.elementor-2842 .elementor-element.elementor-element-2f05875{--width:55%;}.elementor-2842 .elementor-element.elementor-element-1109d55{--width:45%;}}@media(max-width:767px){.elementor-2842 .elementor-element.elementor-element-6acd74e{--padding-top:4em;--padding-bottom:4em;--padding-left:1em;--padding-right:1em;}.elementor-2842 .elementor-element.elementor-element-1109d55{--padding-top:30px;--padding-bottom:30px;--padding-left:15px;--padding-right:15px;}.elementor-2842 .elementor-element.elementor-element-fb3d353 .elementor-heading-title{font-size:22px;}.elementor-2842 .elementor-element.elementor-element-4ca66cc{font-size:13px;}.elementor-2842 .elementor-element.elementor-element-30052bf .elementor-icon-list-item > .elementor-icon-list-text, .elementor-2842 .elementor-element.elementor-element-30052bf .elementor-icon-list-item > a{font-size:10px;}}/* Start custom CSS for shortcode, class: .elementor-element-f3757bd *//* ========================================================= SOLAR PRIME ENERGY WPForms MULTI-STEP QUOTE FORM UPDATED STEP 1 ========================================================= */ /* --------------------------------------------------------- GLOBAL --------------------------------------------------------- */ .solar-quote-form, .solar-quote-form * { box-sizing: border-box; } .solar-quote-form, .solar-quote-form input, .solar-quote-form select, .solar-quote-form textarea, .solar-quote-form button, .solar-quote-form label { font-family: "Plus Jakarta Sans", sans-serif !important; } .solar-quote-form { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; background: #FFFFFF !important; color: #071B2E !important; } /* --------------------------------------------------------- FIELD SPACING --------------------------------------------------------- */ .solar-quote-form .wpforms-field { margin: 0 0 18px !important; padding: 0 !important; } /* --------------------------------------------------------- TITLE --------------------------------------------------------- */ .solar-quote-form .wpforms-title { margin: 0 0 5px !important; padding: 0 !important; font-family: "Plus Jakarta Sans", sans-serif !important; font-size: 24px !important; line-height: 1.25 !important; font-weight: 800 !important; letter-spacing: -0.5px !important; color: #071B2E !important; } /* --------------------------------------------------------- DESCRIPTION --------------------------------------------------------- */ .solar-quote-form .wpforms-description { margin: 0 0 18px !important; padding: 0 !important; font-family: "Plus Jakarta Sans", sans-serif !important; font-size: 13px !important; line-height: 1.5 !important; font-weight: 400 !important; color: #50667A !important; } /* --------------------------------------------------------- PROGRESS BAR --------------------------------------------------------- */ .solar-quote-form .wpforms-page-indicator { margin: 0 0 3px !important; padding: 0 !important; border: 0 !important; } .solar-quote-form .wpforms-page-indicator-steps { display: block !important; width: 100% !important; height: 4px !important; margin: 0 !important; padding: 0 !important; background: #EAF0F4 !important; border-radius: 50px !important; overflow: hidden !important; } .solar-quote-form .wpforms-page-indicator-steps .wpforms-page-indicator-step { height: 4px !important; background: #F99C19 !important; border-radius: 50px !important; } /* --------------------------------------------------------- LABELS --------------------------------------------------------- */ .solar-quote-form .wpforms-field-label { display: block !important; margin: 0 0 12px !important; padding: 0 !important; font-family: "Plus Jakarta Sans", sans-serif !important; font-size: 14px !important; line-height: 1.45 !important; font-weight: 600 !important; color: #071B2E !important; } .solar-quote-form .wpforms-required-label { color: #F99C19 !important; } /* --------------------------------------------------------- INPUTS --------------------------------------------------------- */ .solar-quote-form input[type="text"], .solar-quote-form input[type="email"], .solar-quote-form input[type="tel"], .solar-quote-form input[type="number"], .solar-quote-form input[type="url"], .solar-quote-form input[type="date"], .solar-quote-form select, .solar-quote-form textarea { width: 100% !important; min-height: 52px !important; padding: 10px 12px !important; background: #FFFFFF !important; border: 1px solid #D2DEE7 !important; border-radius: 8px !important; outline: none !important; box-shadow: none !important; font-family: "Plus Jakarta Sans", sans-serif !important; font-size: 13px !important; line-height: 1.4 !important; font-weight: 400 !important; color: #17344C !important; transition: border-color .2s ease, box-shadow .2s ease !important; } /* --------------------------------------------------------- PLACEHOLDER --------------------------------------------------------- */ .solar-quote-form input::placeholder, .solar-quote-form textarea::placeholder { font-family: "Plus Jakarta Sans", sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: #304A61 !important; opacity: 1 !important; } /* --------------------------------------------------------- INPUT FOCUS --------------------------------------------------------- */ .solar-quote-form input:focus, .solar-quote-form select:focus, .solar-quote-form textarea:focus { border-color: #F99C19 !important; box-shadow: 0 0 0 3px rgba(249,156,25,.10) !important; } /* ========================================================= CHOICE BUTTONS INCREASED ~10% ========================================================= */ .solar-quote-form .wpforms-field-radio ul, .solar-quote-form .wpforms-field-checkbox ul { display: flex !important; flex-wrap: wrap !important; gap: 9px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .solar-quote-form .wpforms-field-radio li, .solar-quote-form .wpforms-field-checkbox li { position: relative !important; margin: 0 !important; padding: 0 !important; } /* Hide native radio / checkbox */ .solar-quote-form .wpforms-field-radio input, .solar-quote-form .wpforms-field-checkbox input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } /* Choice buttons */ .solar-quote-form .wpforms-field-radio label, .solar-quote-form .wpforms-field-checkbox label { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 46px !important; padding: 13px 18px !important; background: #FFFFFF !important; border: 1px solid #D3DFE8 !important; border-radius: 8px !important; font-family: "Plus Jakarta Sans", sans-serif !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 500 !important; color: #304A61 !important; cursor: pointer !important; transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease !important; } /* Hover */ .solar-quote-form .wpforms-field-radio label:hover, .solar-quote-form .wpforms-field-checkbox label:hover { border-color: #F99C19 !important; background: #FFF9F0 !important; } /* Selected */ .solar-quote-form .wpforms-field-radio input:checked + label, .solar-quote-form .wpforms-field-checkbox input:checked + label { background: #FFF8EC !important; border-color: #F99C19 !important; color: #071B2E !important; font-weight: 600 !important; box-shadow: inset 0 0 0 1px #F99C19 !important; } /* ========================================================= TWO COLUMN FIELDS ========================================================= */ .solar-quote-form .wpforms-field-layout-two { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px !important; } /* Name row */ .solar-quote-form .wpforms-field-name .wpforms-field-row { display: flex !important; gap: 18px !important; width: 100% !important; } .solar-quote-form .wpforms-field-name .wpforms-field-row-block { width: 50% !important; padding: 0 !important; } /* ========================================================= STEP BUTTON AREA ========================================================= */ .solar-quote-form .wpforms-page-button-container { display: flex !important; align-items: center !important; width: 100% !important; gap: 12px !important; margin-top: 0 !important; padding: 0 !important; } /* ========================================================= STEP 1 CONTINUE 100% FULL WIDTH ========================================================= */ /* ========================================================= PREMIUM CONTINUE BUTTON — REFERENCE STYLE ========================================================= */ .solar-quote-form .wpforms-page-next, .solar-quote-form .wpforms-submit { background: linear-gradient( 90deg, #FFB52F 0%, #FF8F22 100% ) !important; border: none !important; border-radius: 14px !important; min-height: 52px !important; font-family: "Montserrat", sans-serif !important; font-size: 12px !important; font-weight: 500 !important; text-transform: uppercase !important; color: #000000 !important; box-shadow: 0 8px 20px rgba(249, 156, 25, 0.20) !important; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important; } /* Hover */ .solar-quote-form .wpforms-page-next:hover, .solar-quote-form .wpforms-submit:hover { background: linear-gradient( 90deg, #FFB52F 0%, #FF8F22 100% ) !important; color: #000000 !important; transform: translateY(-1px) !important; box-shadow: 0 10px 24px rgba(249, 156, 25, 0.28) !important; } /* Active / Click */ .solar-quote-form .wpforms-page-next:active, .solar-quote-form .wpforms-submit:active { transform: translateY(0) !important; box-shadow: 0 5px 12px rgba(249, 156, 25, 0.20) !important; } /* ========================================================= MAKE STEP 1 BUTTON CONTAINER FULL WIDTH ========================================================= */ .solar-quote-form .wpforms-page-next-container { display: block !important; width: 100% !important; flex: 1 1 100% !important; margin: 0 !important; } /* ========================================================= BACK BUTTON — STEP 2/3 ========================================================= */ .solar-quote-form .wpforms-page-prev-container { flex: 0 0 48px !important; width: 48px !important; margin: 0 !important; } .solar-quote-form .wpforms-page-prev { width: 48px !important; min-width: 48px !important; height: 48px !important; padding: 0 !important; background: #FFFFFF !important; border: 1px solid #D3DFE8 !important; border-radius: 7px !important; color: #17344C !important; font-size: 0 !important; box-shadow: 0 2px 5px rgba(0,0,0,.05) !important; } .solar-quote-form .wpforms-page-prev::before { content: "‹" !important; display: block !important; font-family: Arial, sans-serif !important; font-size: 25px !important; font-weight: 300 !important; line-height: 45px !important; color: #17344C !important; } .solar-quote-form .wpforms-page-prev:hover { background: #FFF9F0 !important; border-color: #F99C19 !important; } /* ========================================================= FINAL SUBMIT ========================================================= */ .solar-quote-form .wpforms-submit { width: 100% !important; min-height: 48px !important; margin: 0 !important; padding: 0 20px !important; background: #F99C19 !important; border: 1px solid #F99C19 !important; border-radius: 7px !important; font-family: "Montserrat", sans-serif !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; color: #000000 !important; box-shadow: 0 3px 8px rgba(249,156,25,.16) !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .solar-quote-form .wpforms-title { font-size: 21px !important; } .solar-quote-form .wpforms-description { font-size: 13px !important; } .solar-quote-form .wpforms-field { margin-bottom: 17px !important; } .solar-quote-form .wpforms-field-name .wpforms-field-row { flex-direction: column !important; gap: 16px !important; } .solar-quote-form .wpforms-field-name .wpforms-field-row-block { width: 100% !important; } .solar-quote-form .wpforms-field-layout-two { grid-template-columns: 1fr !important; gap: 16px !important; } .solar-quote-form .wpforms-field-radio label, .solar-quote-form .wpforms-field-checkbox label { min-height: 46px !important; padding: 10px 13px !important; font-size: 13px !important; } .solar-quote-form input[type="text"], .solar-quote-form input[type="email"], .solar-quote-form input[type="tel"], .solar-quote-form input[type="number"], .solar-quote-form select { min-height: 46px !important; } .solar-quote-form .wpforms-page-button, .solar-quote-form .wpforms-submit { min-height: 48px !important; } } .solar-quote-form .wpforms-field-checkbox { font-size: 10px!important; } .solar-quote-form .wpforms-field { margin: 0 0 15px !important; padding: 0 !important; } .wpforms-container-full .wpforms-field.wpforms-field-gdpr-checkbox ul li input + label { font-size: 12px!important; } /* ========================================================= WPForms STEP BUTTONS — FINAL ========================================================= */ /* --------------------------------------------------------- REMOVE PAGE BREAK SPACING --------------------------------------------------------- */ .solar-quote-form .wpforms-field-pagebreak { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .solar-quote-form .wpforms-pagebreak-left { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= STEP 1 — CONTINUE 100% ========================================================= */ .solar-quote-form .wpforms-pagebreak-left .wpforms-page-button-group:has(.wpforms-page-next):not(:has(.wpforms-page-prev)) { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .solar-quote-form .wpforms-pagebreak-left .wpforms-page-button-group:has(.wpforms-page-next):not(:has(.wpforms-page-prev)) .wpforms-page-next { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; } /* ========================================================= STEP 2 — BUTTON ROW BACK 30% / NEXT 70% ========================================================= */ .solar-quote-form .wpforms-pagebreak-left:has(.wpforms-page-prev) { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 12px !important; /* Remove the 10–11px side gap visible in your screenshot */ width: calc(100% + 22px) !important; max-width: none !important; margin-left: -11px !important; margin-right: -11px !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= STEP 2 — BACK WRAPPER = 30% ========================================================= */ .solar-quote-form .wpforms-pagebreak-left:has(.wpforms-page-prev) .wpforms-page-button-group:has(.wpforms-page-prev) { flex: 0 0 calc(30% - 6px) !important; width: calc(30% - 6px) !important; max-width: calc(30% - 6px) !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= STEP 2 — NEXT WRAPPER = 70% ========================================================= */ .solar-quote-form .wpforms-pagebreak-left:has(.wpforms-page-prev) .wpforms-page-button-group:has(.wpforms-page-next) { flex: 0 0 calc(70% - 6px) !important; width: calc(70% - 6px) !important; max-width: calc(70% - 6px) !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= STEP 2 — BACK BUTTON ========================================================= */ .solar-quote-form .wpforms-pagebreak-left:has(.wpforms-page-prev) .wpforms-page-button-group:has(.wpforms-page-prev) .wpforms-page-prev { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } /* ========================================================= STEP 2 — NEXT BUTTON ========================================================= */ .solar-quote-form .wpforms-pagebreak-left:has(.wpforms-page-prev) .wpforms-page-button-group:has(.wpforms-page-next) .wpforms-page-next { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } /* ========================================================= PREMIUM REQUIRED FIELD ERROR — BRAND ORANGE ========================================================= */ .solar-quote-form .wpforms-error { display: inline-flex !important; align-items: center !important; width: fit-content !important; max-width: 100% !important; margin-top: 7px !important; padding: 5px 10px !important; background: #FFF8EC !important; border: 1px solid #FFDCA8 !important; border-radius: 6px !important; font-family: "Plus Jakarta Sans", sans-serif !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.4 !important; color: #F99C19 !important; box-shadow: 0 2px 6px rgba(249, 156, 25, 0.06) !important; } /* Brand-orange warning icon */ .solar-quote-form .wpforms-error::before { margin-right: 5px !important; } /* Error input border — brand orange */ .solar-quote-form input.wpforms-error, .solar-quote-form select.wpforms-error, .solar-quote-form textarea.wpforms-error { border-color: #F99C19 !important; box-shadow: 0 0 0 2px rgba(249, 156, 25, 0.06) !important; } /* ========================================================= STEP COUNTER — ABOVE PROGRESS BAR ========================================================= */ .solar-quote-form .solar-step-counter { position: absolute !important; top: -50px !important; right: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 78px !important; height: 32px !important; padding: 0 12px !important; background: #FFF8EC !important; border: 1px solid #F99C19 !important; border-radius: 18px !important; font-family: "Plus Jakarta Sans", sans-serif !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important; color: #17344C !important; box-shadow: 0 3px 10px rgba(249,156,25,.10) !important; z-index: 20 !important; }/* End custom CSS */