/* ==========================================================================
   Charge Guide Calculator CSS (Scoped)
   Scope: flagged pages only via body.cgp-calculator-page
   ========================================================================== */

body.cgp-calculator-page {

  /* Optional tokens (safe to expand later) */
  --cg-text: #2B435E;
  --cg-muted: #5C6A7A;
  --cg-surface: #fff;
  --cg-surface-2: #F9F9F9;
  --cg-shadow: 0px 0px 15px #ccc;
  --cg-radius: 16px;
}

/* --- General CFF Container & Layout Styling --- */

body.cgp-calculator-page .group-1 {
  background: #f5f5f7;
  border-radius: 16px;
  padding: 1px 30px;
}

/* IMPORTANT: was global "fieldset" in theme — now scoped */
body.cgp-calculator-page fieldset {
  border-radius: 20px;
  border: 7px solid #677e99 !important;
  box-shadow: 0px 0px 5px #94A0AE !important;
  background: #F9F9F9;
}

body.cgp-calculator-page #fbuilder legend {
  border: 2px solid #5C6A7A;
  border-radius: 20px;
  padding: 5px 10px;
  background: #F9F9F9;
}

body.cgp-calculator-page .cal-column,
body.cgp-calculator-page .cal-column-infrastructure {
  padding: 1% 3% !important;
}

body.cgp-calculator-page .cal-column-infrastructure {
  padding: 0% 1% !important;
}

body.cgp-calculator-page .max-width { max-width: 300px; }
body.cgp-calculator-page .left-margin { margin: 0px 10px 0px 0px; }

/* --- CFF Text Align Utilities --- */
body.cgp-calculator-page .center,
body.cgp-calculator-page .center .dfield,
body.cgp-calculator-page .center .field { text-align: center !important; }

body.cgp-calculator-page .left { text-align: left !important; }
body.cgp-calculator-page .left label { text-align: left; }
body.cgp-calculator-page .right { text-align: right !important; }

/* --- CFF Specific Box & Component Styling --- */

body.cgp-calculator-page .comm-cal2,
body.cgp-calculator-page .bal-cal-entry1,
body.cgp-calculator-page .comm-cal-cp1,
body.cgp-calculator-page .comm-cal-cp2,
body.cgp-calculator-page .save-cal-fuel,
body.cgp-calculator-page .save-cal-elec,
body.cgp-calculator-page .tips,
body.cgp-calculator-page .forms {
  border-radius: 16px;
  font-size: 16px;
  box-shadow: 0px 0px 15px #ccc;
  padding: 10px !important;
  background: #fff;
}

body.cgp-calculator-page .tips { padding: 20px !important; }
body.cgp-calculator-page .forms { padding: 10px 40px 0px 20px !important; }

body.cgp-calculator-page .bal-cal-entry1,
body.cgp-calculator-page .comm-cal-cp1,
body.cgp-calculator-page .comm-cal-cp2 {
  margin-bottom: 40px;
}

body.cgp-calculator-page .bal-cal-tip1 {
  color: #2B435E;
  border: 0px solid #2B435E;
  border-radius: 8px;
  font-size: 14px;
  background: #BBE08B;
  box-shadow: 0px 0px 5px #244804;
  padding: 10px !important;
  margin: 0px 5px 3px 0px;
}

body.cgp-calculator-page .bal-cal-tip2,
body.cgp-calculator-page .cal-cable-tip {
  color: #2B435E;
  border: 0px solid #2B435E;
  border-radius: 8px;
  font-size: 14px;
  background: #FFDC2E;
  box-shadow: 0px 0px 3px #474747;
}

body.cgp-calculator-page .bal-cal-tip2 {
  margin: 0px 5px 5px 0px;
  padding: 10px !important;
}

body.cgp-calculator-page .bal-cal-tip3 {
  color: #2B435E;
  border: 0px solid #2B435E;
  border-radius: 8px;
  font-size: 14px;
  background: #FFDC2E;
  box-shadow: 0px 0px 3px #FFAA2E;
  padding: 10px !important;
  margin: 0px 5px 5px 0px;
}

body.cgp-calculator-page .cal-cable-tip {
  max-width: 300px;
  padding: 5px 10px 10px 10px !important;
  margin-top: 10px !important;
}

body.cgp-calculator-page .cal-box-style-3 {
  border-radius: 20px;
  box-shadow: 0px 0px 3px #5C6A7A;
  background: #2B435E;
}

body.cgp-calculator-page .cal-box-style-3 label,
body.cgp-calculator-page .cal-box-style-3 .codepeoplecalculatedfield.field.medium {
  color: #F9F9F9 !important;
}

body.cgp-calculator-page .cal-box-style-4 {
  border-radius: 20px;
  box-shadow: 0px 0px 1px #A5A5A5;
  background: #E9E9E9;
}

body.cgp-calculator-page .cal-box-style-4-1,
body.cgp-calculator-page .cal-box-style-4-2,
body.cgp-calculator-page .cal-box-style-4-3 {
  border-radius: 15px;
  box-shadow: 0px 0px 5px #94A0AE;
  background: #677e99;
  padding: 0px 5px 5px 5px !important;
  margin-bottom: 10px;
}

body.cgp-calculator-page .cal-box-style-4-1 { width: 300px; }
body.cgp-calculator-page .cal-box-style-4-3 {
  background: #F9F9F9;
  top: 10px;
  position: relative;
}

body.cgp-calculator-page .cal-box-style-5-1,
body.cgp-calculator-page .cal-box-style-5-2,
body.cgp-calculator-page .cal-box-style-5-3 {
  border-radius: 10px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0px 20px 5px 5px !important;
  text-align: right;
  margin-right: 20px;
}

body.cgp-calculator-page .cal-box-style-5-1 {
  background: #f5f5f7;
  border: 2px solid #94A0AE;
  border-left: 10px solid #94A0AE;
  box-shadow: 0px 0px 1px #E9E9E9;
}

body.cgp-calculator-page .cal-box-style-5-2 {
  background: #f5f5f7;
  border: 2px solid #94A0AE;
  border-left: 10px solid #94A0AE;
  box-shadow: 0px 0px 1px #E9E9E9;
}

body.cgp-calculator-page .cal-box-style-5-3 {
  background: #f5f5f7;
  border: 2px solid #BD0000;
  border-left: 10px solid #BD0000;
  box-shadow: 0px 0px 1px #E9E9E9;
}

@media only screen and (max-width: 640px) {
  body.cgp-calculator-page .cal-box-style-5-2 { margin-right: 20px; }
}

@media only screen and (max-width: 1280px) {
  body.cgp-calculator-page .cal-box-style-2 { margin: 0 0 20px 0px; }
}

body.cgp-calculator-page .cal-box-style-6 {
  display: grid;
  place-items: center;
  align-content: center;
  height: 350px;
  width: 100%;
}

body.cgp-calculator-page .cal-box-style-6 h3 { padding: 0 25px 0 25px; }

body.cgp-calculator-page .cal-box-style-7 {
  border-radius: 20px;
  box-shadow: 0px 0px 10px #BDC5C5;
  margin-bottom: 20px;
  background: #f5f5f7;
  padding: 10px !important;
}

/* Cabinet components */
body.cgp-calculator-page .cabinet-components-box-1,
body.cgp-calculator-page .cabinet-components-box-2,
body.cgp-calculator-page .cabinet-components-box-3 {
  padding-right: 20px !important;
  padding-left: 20px !important;
  width: fit-content !important;
}

body.cgp-calculator-page .cabinet-components-list-1 .large,
body.cgp-calculator-page .cabinet-components-list-2 .large {
  background: none;
  border: none !important;
  box-shadow: none;
}

body.cgp-calculator-page .cabinet-components-list-1 .large { color: #F9F9F9; }
body.cgp-calculator-page .cabinet-components-list-2 .large { color: #4F667D; font-size: 18px; }

body.cgp-calculator-page .cabinet-components-list-1 .codepeoplecalculatedfield {
  padding-left: 15px;
  font-size: 0.95em;
}

body.cgp-calculator-page .cabinet-components-list-1.cff-calculated-field {
  padding: 0px !important;
}

body.cgp-calculator-page .cabinet-components-list-2.standout .large {
  border-left: 10px solid #677e99 !important;
  border-radius: 5px;
}

body.cgp-calculator-page .charge-guide-system-status {
  border-radius: 16px;
  background-color: rgba(255, 220, 46, 0.2);
  padding: 10px !important;
  box-shadow: 0px 0px 5px #94A0AE;
  padding: 0px 5px 5px 5px !important;
}

body.cgp-calculator-page .charge-guide-system-status .fields { padding: 2px !important; }

/* --- CFF Typography --- */

body.cgp-calculator-page .cal-title {
  font-size: 16px;
  color: #2B435E;
  font-family: "Comfortaa";
}

body.cgp-calculator-page .cal-heading-1 {
  font-size: 34px;
  color: #677e99;
  font-weight: 900;
  font-family: "Geologica", Helvetica, Arial;
  margin-bottom: 5px;
}

body.cgp-calculator-page .cal-heading-1.light { color: #BACADB; }

body.cgp-calculator-page .cal-heading-2,
body.cgp-calculator-page .cal-heading-3,
body.cgp-calculator-page .cal-heading {
  color: #4F667D;
  font-weight: 700;
  font-family: "Geologica", Helvetica, Arial;
}

body.cgp-calculator-page .cal-heading-2 { font-size: 20px; }
body.cgp-calculator-page .cal-heading-3 { font-size: 18px; }
body.cgp-calculator-page .cal-heading-4 { font-size: 16px; }

body.cgp-calculator-page .dfield h4 { margin: 0px 0px 10px 0px; }

body.cgp-calculator-page .cal-save { color: #68942F; }
body.cgp-calculator-page .save-cal-loss { color: #bb0711; }

body.cgp-calculator-page .cost-cal-results .codepeoplecalculatedfield.field.medium,
body.cgp-calculator-page .cost-cal-results-2 .codepeoplecalculatedfield.field.medium {
  font-size: 18px !important;
  font-weight: 500;
  text-align: right;
  padding: 0px;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
  min-width: 90px;
}

body.cgp-calculator-page .cost-cal-results-2,
body.cgp-calculator-page .cost-cal-results-2 .field { text-align: center !important; }

body.cgp-calculator-page .cal-final-result .codepeoplecalculatedfield.field.medium,
body.cgp-calculator-page .cal-final-result .codepeoplecalculatedfield.field.medium.valid { font-size: 30px !important; }

body.cgp-calculator-page .line-above .cost-cal-results .codepeoplecalculatedfield.field.medium,
body.cgp-calculator-page .line-above-red .cost-cal-results .codepeoplecalculatedfield.field.medium { font-weight: 700 !important; }

/* --- CGF / CFF Buttons (scoped) --- */

body.cgp-calculator-page .cgf-button1,
body.cgp-calculator-page .pbNext,
body.cgp-calculator-page .cff-button-field .field {
  color: #fff !important;
  background-color: #2b435e !important;
  box-shadow: 0px 0px 2px #BACADB;
  max-width: 240px;
  min-height: 25px;
  padding: 10px;
  display: block;
  border-radius: 30px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-family: "Geologica";
  border: 5px solid #2b435e;
}

body.cgp-calculator-page .cgf-button1:hover,
body.cgp-calculator-page .pbNext:hover,
body.cgp-calculator-page .cff-button-field .field:hover {
  background-color: #702457 !important;
  box-shadow: 0px 0px 7px #4F667D;
  border: 5px solid #702457;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  color: #fff !important;
}

body.cgp-calculator-page .action-button2,
body.cgp-calculator-page .cgf-button2,
body.cgp-calculator-page .pbPrevious {
  color: #2B435E;
  background-color: #fff !important;
  box-shadow: 0px 0px 2px #BACADB;
  max-width: 240px;
  min-height: 25px;
  padding: 10px;
  display: block;
  border-radius: 30px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-family: "Geologica";
  border: 5px solid #4F667D;
}

body.cgp-calculator-page .action-button2:hover,
body.cgp-calculator-page .cgf-button2:hover,
body.cgp-calculator-page .pbPrevious:hover {
  background-color: #fff !important;
  box-shadow: 0px 0px 7px #4F667D;
  border: 5px solid #2b435e;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  color: #2b435e !important;
}

/* --- CFF Field Styling --- */

body.cgp-calculator-page #fbuilder input[type="radio"]:focus { outline: none; }

body.cgp-calculator-page #fbuilder input[type="radio"],
body.cgp-calculator-page #fbuilder input[type="checkbox"] { margin-right: 10px; }

body.cgp-calculator-page #fbuilder .medium { width: 90% !important; }

body.cgp-calculator-page .codepeoplecalculatedfield.field.medium.valid,
body.cgp-calculator-page .codepeoplecalculatedfield.field.medium {
  font-family: "Geologica", Helvetica, Arial;
  font-size: 18px !important;
  color: #5C6A7A;
  font-weight: 700;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
}

body.cgp-calculator-page .comm-cal2 .field {
  color: #750000 !important;
  background: #FFEDED !important;
  text-align: center;
  padding: 10px !important;
}

body.cgp-calculator-page .field.digits.medium { background: #fff; }

body.cgp-calculator-page .slider-container .slider-caption,
body.cgp-calculator-page .field.digits.medium,
body.cgp-calculator-page .field.number.medium,
body.cgp-calculator-page .field.cffcurrency.medium {
  font-family: "Geologica", Helvetica, Arial;
  font-size: 18px !important;
  color: #2B435E;
}

body.cgp-calculator-page .cff-slider-field { padding: 0px 10px !important; }

body.cgp-calculator-page .dfield.slider-container {
  padding: 30px 0px 0px 0px !important;
  margin: 20px 0px 0px 0px !important;
}

/* Specific CFF input field styling by ID */
body.cgp-calculator-page #fieldname719_1,
body.cgp-calculator-page #fieldname738_1,
body.cgp-calculator-page #fieldname782_1,
body.cgp-calculator-page #fieldname271_1 {
  font-weight: 300;
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  font-family: "Geologica";
  border: 2px solid #4F667D !important;
  height: 50px;
  max-width: 300px !important;
}

body.cgp-calculator-page #fieldname610_1,
body.cgp-calculator-page #fieldname673_1,
body.cgp-calculator-page #fieldname690_1 {
  height: 20px;
  text-align: center;
  max-width: 120px !important;
  border: 2px solid #BD0000 !important;
  background: #fff;
  box-shadow: 0px 0px 3px #BDC5C5;
  min-width: 70px;
}

body.cgp-calculator-page #fieldname673_1,
body.cgp-calculator-page #fieldname690_1 { border: none !important; }

/* jQuery UI Slider overrides (WERE GLOBAL; now scoped) */
body.cgp-calculator-page .ui-widget-header { background: #677e99; }

body.cgp-calculator-page .ui-slider-handle.ui-corner-all.ui-state-default:focus {
  background: #4F667D !important;
  outline: none;
}

body.cgp-calculator-page #field_1-528 .slider { background-color: #BACADB; }
body.cgp-calculator-page #field_1-528 .ui-widget-header { background: #682323; }

/* Switch styling */
body.cgp-calculator-page #fbuilder .cff-switch-container input:checked+span.cff-switch {
  background: #2B435E;
  transition: background 0.3s;
}

body.cgp-calculator-page #fieldname809_1.field {
  background-color: #677e99;
  border: 5px solid #677e99;
}

/* Button-in-field styling */
body.cgp-calculator-page .action-button1 .field,
body.cgp-calculator-page .action-button2 .field {
  background: none;
  border: none;
  font-weight: 300;
  text-decoration: none;
  font-size: 15px;
  font-family: "Geologica";
  margin-top: 0px !important;
  padding: 0;
  height: auto;
  width: auto;
  text-align: center;
  vertical-align: baseline;
}

body.cgp-calculator-page .action-button1 .field { color: #fff !important; }
body.cgp-calculator-page .action-button2 .field { color: #2b435e !important; }

body.cgp-calculator-page .action-button1 .field:focus,
body.cgp-calculator-page .action-button2 .field:focus { outline: none; }

body.cgp-calculator-page .action-button1 .field:hover,
body.cgp-calculator-page .action-button2 .field:hover { background: none !important; }

/* Form structure / interaction */
body.cgp-calculator-page .fixed-height { height: 108px; }
body.cgp-calculator-page .pbEnd .pbPrevious { display: none !important; }

body.cgp-calculator-page #fieldname785_1,
body.cgp-calculator-page #fieldname800_1 {
  display: contents;
  text-align: center;
}

body.cgp-calculator-page #field_1-250,
body.cgp-calculator-page #field_1-253 { min-width: 310px !important; }

body.cgp-calculator-page #field_1-190 label { text-align: left; padding-left: 40px; }
body.cgp-calculator-page #fieldname784_1 { margin-left: 15px !important; }
body.cgp-calculator-page #field_1-249 { padding-top: 0px !important; }
body.cgp-calculator-page #field_1-33 { padding-bottom: 0px !important; }
body.cgp-calculator-page #fieldname105_1 .comm-cal-note1 { margin: 0px !important; }
body.cgp-calculator-page #field_1-80 { max-width: 300px; }

/* Hide "required" marks */
body.cgp-calculator-page #field_1-214 .r,
body.cgp-calculator-page #field_1-19 .r,
body.cgp-calculator-page #field_1-232 .r,
body.cgp-calculator-page #field_1-18 .r,
body.cgp-calculator-page #field_1-308 .r,
body.cgp-calculator-page #field_1-309 .r {
  display: none !important;
}

/* Hide specific radio buttons */
body.cgp-calculator-page #fieldname151_1_rb2,
body.cgp-calculator-page #fieldname107_1_rb2,
body.cgp-calculator-page #fieldname129_1_rb2,
body.cgp-calculator-page #fieldname130_1_rb3 {
  display: none;
}

/* Hide complex infra fields */
body.cgp-calculator-page .infrastructure-3,
body.cgp-calculator-page .infrastructure-4,
body.cgp-calculator-page .infrastructure-5 {
  display: none !important;
}

/* EV image responsive */
body.cgp-calculator-page #fieldname272_1 img {
  max-width: 100%;
  height: auto;
}

/* Error styling */
body.cgp-calculator-page .cpefb_error.message {
  box-shadow: 0px 0px 3px #5C6A7A !important;
  border-radius: 10px !important;
  left: 20px !important;
}

body.cgp-calculator-page .cff-error-dlg { display: none !important; }

/* Loading containers */
body.cgp-calculator-page .loading-icon-container,
body.cgp-calculator-page .loading-calculation-container {
  display: block;
  position: relative;
  width: auto;
  height: 300px;
  align-content: center;
  text-align: center;
}

body.cgp-calculator-page .loading-icon { width: 50px; height: auto; }

body.cgp-calculator-page .uwp-captcha-render iframe { border-radius: 0px; }

/* Misc */
body.cgp-calculator-page .internal-use { background: #FFDC2E; }
body.cgp-calculator-page .internal-use-2 { background: #FFAA2E; }
body.cgp-calculator-page .line-above { border-top: 2px solid #94A0AE; }
body.cgp-calculator-page .line-above-red { border-top: 2px solid #BD0000; }

body.cgp-calculator-page .cal-box-style-5 .field.percent.number.medium.valid {
  border: none !important;
  box-shadow: none;
}

/* IMPORTANT: was global ".hidden" in theme — now scoped */
body.cgp-calculator-page .hidden {
  display: none !important;
  visibility: hidden;
}

/* IMPORTANT: was global ".pbPrevious { display:none }" in theme — now scoped */
body.cgp-calculator-page .pbPrevious {
  display: none !important;
}