/*
Theme Name:   Twenty Twenty-Four CG
Theme URI:    (Optional)
Description:  A child theme for the Parent Theme Name (e.g., A child theme for Twenty Twenty-Four)
Author:       Enervek
Author URI:   https://enervek.charge.guide
Template:     twentytwentyfour
Version:      1.0.49
License:      GNU General Public License v2 or later (Optional)
License URI:  http://www.gnu.org/licenses/gpl-2.0.html (Optional)
Tags:         child-theme (Optional)
Text Domain:  
*/

/* Your custom CSS will go below this line */

h1 {
	font-size: 2.2em;
	font-family: "Geologica";
	color: #2b435e;
}
h2 {
	font-size: 2em;
	color: #2b435e;
	font-family: "Comfortaa";
}
h3 {
	font-size: 1.6em;
	font-family: "Geologica", Helvetica, Arial;
	font-weight: 200;
	color: #80786B;
}
h4, .heading4 {
	font-size: 1.2em;
	color: #4F667D;
	font-weight: 700;
	font-family: "Geologica", Helvetica, Arial;
}
.heading4-light {
	font-size: 1.2em;
	color: #677e99 !important;
	font-weight: 700 !important;
	font-family: "Geologica", Helvetica, Arial  !important;
}
h5 {
	font-size: 1em;
	color: #677e99;
	font-family: "Comfortaa";
}
h6, .heading6 {
	font-size: 16px;
	color: #5C6A7A;
	font-family: "Geologica", Helvetica, Arial;
	font-weight: 300;
}
p {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #273D56;
}
li {
  color: #273D56;
}
a {
}
.note1, .note2 {
	color: #8c979e;
	font-size: 14px !important;
	line-height: 20px;
}
p.note1 {
	margin: 8px 0px 0px 0px !important;
}
ul.note1 {
	margin: 5px 0px 0px 0px !important;
}	

/* make scrolling to anchor smooth */
html {
	scroll-behavior: smooth;
}
/* end */

/* ==========================================================================
   Layout Utilities & Grouping Containers
   ========================================================================== */
.group-container {
    display: flex;
    align-items: stretch;
}

.group-2 {
	padding: 1px 30px;
	min-width: 300px;
	max-width: 450px;
	flex: 1;
}

.group-4 { /* used */
  background: rgba(194, 221, 251, 0.5);
	border-radius: 16px;
	min-width: 300px;
	max-width: 450px;
	flex: 1;
  min-height: 265px;
}

.group-5 {
	border-radius: 16px;
	min-width: 150px;
	max-width: 250px;
	flex: 1;
}

.group-6 { /* used */
  background: rgba(255, 205, 117, 0.25);
	border-radius: 16px;
	min-width: 300px;
	max-width: 450px;
	flex: 1;
  min-height: 240px;
}

/* ==========================================================================
   Highlighted Title Effect
   ========================================================================== */

/* --- Base Styles for ALL Highlighted Titles --- */
.highlight-title-1,
.highlight-title-2,
.highlight-title-3,
.highlight-title-4,
.highlight-title-5,
.highlight-title-6 {
  position: relative;
  z-index: 1;
  background: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  display: inline;
  padding: 0.1em 0.2em;
  margin: 0;
}

/* --- Highlight Color Variable Definitions --- */
.highlight-title-1 { --highlight-color: #527FB3; } /* Blue */
.highlight-title-2 { --highlight-color: #71B0F6; } /* Light Blue */
.highlight-title-3 { --highlight-color: #ACDAFF; } /* Lighter Blue */
.highlight-title-4 { --highlight-color: #B1D4F8; } /* Pale Blue */
.highlight-title-5 { --highlight-color: #682323; } /* Dark Red */
.highlight-title-6 { --highlight-color: #E8C3C3; } /* Pale Red */


/* --- Gradient Application for H3 (Opaque Highlight) --- */
h3.highlight-title-1,
h3.highlight-title-2,
h3.highlight-title-3,
h3.highlight-title-4,
h3.highlight-title-5,
h3.highlight-title-6 {
  background: linear-gradient(to top, var(--highlight-color) 36%, transparent 36%);
}

/* --- Gradient Application for SPAN (Opaque Highlight) --- */
span.highlight-title-1,
span.highlight-title-2,
span.highlight-title-3,
span.highlight-title-4,
span.highlight-title-5,
span.highlight-title-6 {
  padding: 0.1em 0.1em;
  background: linear-gradient(to top, var(--highlight-color) 25%, transparent 25%);
}

/* --- Gradient Application & Text Color for H4 (Transparent Highlight) --- */
h4.highlight-title-1 {
  color: #527FB3; /* Text color set ONLY for h4 */
/*  background: linear-gradient(to top, rgba(82, 127, 179, 0.2) 36%, transparent 36%); /* opaque blue background */
}
h4.highlight-title-2 {
  color: #71B0F6; /* Text color set ONLY for h4 */
  background: linear-gradient(to top, rgba(113, 176, 246, 0.2) 36%, transparent 36%); /* opaque light blue background */
}
h4.highlight-title-3 {
  color: #ACDAFF; /* Text color set ONLY for h4 */
  background: linear-gradient(to top, rgba(172, 218, 255, 0.2) 36%, transparent 36%); /* opaque lighter blue background */
}
h4.highlight-title-4 {
  color: #B1D4F8; /* Text color set ONLY for h4 */
  background: linear-gradient(to top, rgba(177, 212, 248, 0.2) 36%, transparent 36%); /* opaque pale blue background */
}
h4.highlight-title-5 {
  color: #682323; /* Text color set ONLY for h4 */
/*  background: linear-gradient(to top, rgba(104, 35, 35, 0.2) 36%, transparent 36%); /* opaque dark red background */
}
h4.highlight-title-6 {
  color: #E8C3C3; /* Text color set ONLY for h4 */
  background: linear-gradient(to top, rgba(232, 195, 195, 0.2) 36%, transparent 36%); /* opaque pale red background */
}

/* ==========================================================================
   CALCULATOR AND CFF (CALCULATED FIELDS FORM) STYLES
   ========================================================================== */

/* Used for the main CFF container */
.group-1 {
	background: #f5f5f7;
	border-radius: 16px;
	padding: 1px 30px;
}

/* Default styling for fieldsets in CFF forms */
fieldset {
	border: 2px solid #527FB3 !important;
	border-radius: 5px;
	box-shadow: 0px 0px 5px #88A2BF;
	background: #F9F9F9;
}

/* Legend for CFF form pages */
#fbuilder legend {
	border: 2px solid #527FB3;
	border-radius: 5px;
	padding: 0px 10px;
	background: #527FB3;
	color: #F9F9F9;
}

/* Padding for columns in calculator layouts */
.cal-column,
.cal-column-infrastructure {
	padding: 1% 3% !important;
}
.cal-column-infrastructure {
	padding: 0% 1% !important;
}

/* Utility class for CFF input sections */
.max-width {
	max-width: 300px;
}

.left-margin {
	margin: 0px 10px 0px 0px;
}


/* --- CFF Text Align Utilities --- */
.center, .center .dfield { text-align: center !important; }
.center .field { text-align: center !important; }
.left { text-align: left !important; }
.left label { text-align: left; }
.right { text-align: right !important; }


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

/* Common box styling for calculator sections */
.comm-cal2, .bal-cal-entry1, .comm-cal-cp1, .comm-cal-cp2,
.save-cal-fuel, .save-cal-elec, .tips, .forms {
	border-radius: 16px;
	font-size: 16px;
	box-shadow: 0px 0px 15px #ccc;
	padding: 10px !important;
	background: #fff;
}
.tips { padding: 20px !important; }
.forms { padding: 10px 40px 0px 20px !important; }

/* Gap between calculator boxes */
.bal-cal-entry1, .comm-cal-cp1, .comm-cal-cp2 {
	margin-bottom: 40px;
}

/* Load balance calculation results/tips */
.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;
}

/* Load balance & installation cost calculation tips */
.bal-cal-tip2, .cal-cable-tip {
	color: #2B435E;
	border: 0px solid #2B435E;
	border-radius: 8px;
	font-size: 14px;
	background: #FFDC2E;
	box-shadow: 0px 0px 3px #474747;
}
.bal-cal-tip2 { margin: 0px 5px 5px 0px; padding: 10px !important; }

/* More tips for cost calculation */
.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;
}

/* Specific layout for cable tip */
.cal-cable-tip {
	max-width: 300px;
	padding: 5px 10px 10px 10px !important;
	margin-top: 10px !important;
}


/* --- CFF Calculator Box Styles --- */

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

/* Wrapper for a group of boxes */
.cal-box-style-4 {
	border-radius: 20px;
	box-shadow: 0px 0px 1px #A5A5A5;
	background: #E9E9E9;
}
.cal-box-style-4-1, .cal-box-style-4-2, .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;
}
.cal-box-style-4-1 { width: 300px; }
.cal-box-style-4-3 { background: #F9F9F9; top: 10px; position: relative; }

/* Cost results boxes */
.cal-box-style-5-1, .cal-box-style-5-2, .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;
}
.cal-box-style-5-1 { background: #f5f5f7; border: 2px solid #94A0AE; border-left: 10px solid #94A0AE; box-shadow: 0px 0px 1px #E9E9E9; }
.cal-box-style-5-2 { background: #f5f5f7; border: 2px solid #94A0AE; border-left: 10px solid #94A0AE; box-shadow: 0px 0px 1px #E9E9E9; }
.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) {
  .cal-box-style-5-2 { margin-right: 20px; }
}

/* Login prompt box for non-logged users in calculators */
.cal-box-style-6 {
	display: grid;
	place-items: center;
	align-content: center;
	height: 350px;
	width: 100%;
}
.cal-box-style-6 h3 { padding: 0 25px 0 25px; }

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

.cal-box-style-5,
.cal-box-style-8 {} /* Placeholders */

.cabinet-components-box-1, .cabinet-components-box-2, .cabinet-components-box-3 {
	padding-right: 20px !important;
	padding-left: 20px !important;
	width: fit-content !important;
}
.cabinet-components-list-1 .large,
.cabinet-components-list-2 .large {
	background: none;
	border: none !important;
	box-shadow: none;
}
.cabinet-components-list-1 .large { color: #F9F9F9; }
.cabinet-components-list-2 .large { color: #4F667D; font-size: 18px; }
.cabinet-components-list-1 .codepeoplecalculatedfield { padding-left: 15px; font-size: 0.95em; }
.cabinet-components-list-1.cff-calculated-field { padding: 0px !important; }
.cabinet-components-list-2.standout .large  {
	border-left: 10px solid #677e99 !important;
	border-radius: 5px;
}
.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;
}
.charge-guide-system-status .fields {
	padding: 2px !important;
}


/* --- CFF Typography (Headings, Titles, Results) --- */
.cal-title {
	font-size: 16px;
	color: #2B435E;
	font-family: "Comfortaa";
}
.cal-heading-1 {
	font-size: 25px;
	color: #677e99;
	font-weight: 900;
	font-family: "Geologica", Helvetica, Arial;
	margin-bottom: 5px;
}
.cal-heading-1.light { color: #BACADB; }
.cal-heading-2, .cal-heading-3, .cal-heading {
	color: #4F667D;
	font-weight: 700;
	font-family: "Geologica", Helvetica, Arial ;
}
.cal-heading-2 { font-size: 20px; }
.cal-heading-3 { font-size: 18px; }
.cal-heading-4 { font-size: 16px; }

.dfield h4 {
	margin: 0px 0px 10px 0px;
}

.cal-save { color: #68942F; } /* Text color for savings */
.save-cal-loss { color: #bb0711; } /* Text color for losses */


/* --- CFF Result Fields --- */
.cost-cal-results .codepeoplecalculatedfield.field.medium,
.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;
}
.cost-cal-results-2,
.cost-cal-results-2 .field { text-align: center !important; }

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

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


/* --- CFF General & Calculated Field Styling --- */

/* Base style for CFF calculated fields */
.codepeoplecalculatedfield.field.medium.valid,
.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;
}

#fbuilder .medium {
  width: 90% !important;
}

/* --- CFF Field Styling (Inputs, Sliders, Calculated Fields, Radio/Checkbox) --- */
#fbuilder input[type="radio"]:focus { /* Remove outline on focus for CFF radio */
	outline: none;
}
#fbuilder input[type="radio"],
#fbuilder input[type="checkbox"] { /* Fix for radio/checkbox buttons in Safari for CFF */
  margin-right: 10px;
}

#fbuilder .medium {
  width: 90% !important;
}

/* Special style for cost field in 'comm-cal2' context */
.comm-cal2 .field {
	color: #750000 !important;
	background: #FFEDED !important;
	text-align: center;
	padding: 10px !important;
}

/* Cost calculation meter field appearance */
.field.digits.medium {
	background: #fff;
}

/* --- CFF Input, Number & Slider Fields --- */

#fbuilder input[type="radio"]:focus {
	outline: none;
}
#fbuilder input[type="radio"],
#fbuilder input[type="checkbox"] {
  margin-right: 10px;
}

.slider-container .slider-caption,
.field.digits.medium,
.field.number.medium,
.field.cffcurrency.medium {
	font-family: "Geologica", Helvetica, Arial;
	font-size: 18px !important;
	color: #2B435E;
}
.cff-slider-field {
	padding: 0px 10px !important;
}
.dfield.slider-container {
	padding: 30px 0px 0px 0px !important;
	margin: 20px 0px 0px 0px !important;
}

/* CFF jQuery UI Slider Overrides */
.ui-widget-header {
	background: #677e99;
}
.ui-slider-handle.ui-corner-all.ui-state-default:focus {
	background: #4F667D !important;
	outline: none;
}
#field_1-528 .slider { background-color: #BACADB; }
#field_1-528 .ui-widget-header { background: #682323; }


/* CFF Switch Styling */
#fbuilder .cff-switch-container input:checked+span.cff-switch {
	background: #2B435E;
	transition: background 0.3s;
}

/* Specific CFF input field styling by ID */
#fieldname719_1, #fieldname738_1, #fieldname782_1, #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;
}

/* Styling for markup section fields */
#fieldname610_1, #fieldname673_1, #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;
}
#fieldname673_1 , #fieldname690_1 {
	border: none !important;
}


/* --- CFF Button Styling (Next/Prev & Submit) --- */

/* CGF - CFF Buttons */
.cgf-button1,
.pbNext,
.cff-button-field .field {
	color: #fff !important; /* important - necessary for pbNext */
	background-color: #2b435e !important; /* important - necessary for pbNext */
	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; /* the border make the button the same size as button 2 */
}
.cgf-button1:hover,
.pbNext:hover,
.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;
}
.action-button2,
.cgf-button2,
.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;
}
.action-button2:hover,
.cgf-button2:hover,
.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 Fields styled to look like buttons */
#fieldname809_1.field {
	background-color: #677e99;
	border: 2px solid #677e99;
}

/* --- CFF Form Structure, State & Interaction --- */

/* To prevent layout jumps during CFF calculations */
.fixed-height {
	height: 108px;
}

/* Hides back button on the last page of a CFF multi-page form */
.pbEnd .pbPrevious {
	display: none !important;
}

/* To align content/buttons within CFF fields */
#fieldname785_1, #fieldname800_1 {
	display: contents;
	text-align: center;
}

/* Field alignment adjustments */
#field_1-250, #field_1-253 { min-width: 310px !important; }
#field_1-190 label { text-align: left; padding-left: 40px; }
#fieldname784_1 { margin-left: 15px !important; }
#field_1-249 { padding-top: 0px !important; }
#field_1-33 { padding-bottom: 0px !important; }
#fieldname105_1 .comm-cal-note1 { margin: 0px !important; }
#field_1-80 { max-width: 300px; }

/* Hiding "required" marks for specific CFF fields */
#field_1-217 .r,
#field_1-19 .r,
#field_1-232 .r,
#field_1-323 .r {
	display: none !important;
}

/* Hiding specific CFF radio buttons */
#fieldname151_1_rb2, #fieldname107_1_rb2, #fieldname129_1_rb2, #fieldname130_1_rb3 {
	display: none;
}

/* Hides more technically complex charging infrastructure fields */
.infrastructure-3, .infrastructure-4, .infrastructure-5 {
	display: none !important;
}

/* CFF Image Adjustments */
#fieldname272_1 img {
	max-width: 100%;
	height: auto;
}

/* CFF Error Message Styling */
.cpefb_error.message {
	box-shadow: 0px 0px 3px #5C6A7A !important;
	border-radius: 10px !important;
  left: 20px !important;
}
.cff-error-dlg {
	display: none !important;
}


/* --- CFF Form Loading & Button Display Delays --- */
/* .cff-form-buttons-container {
	visibility: hidden;
} */
/* .post-load-container {
    display: none;
} */
.loading-icon-container,
.loading-calculation-container {
	display: block;
	position: relative;
	width: auto;
	height: 300px;
	align-content: center;
	text-align: center;
}
.loading-icon {
	width: 50px;
	height: auto;
}


/* --- Miscellaneous CFF Context Styling --- */

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

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

/* ==========================================================================
   Popup, Login & User Account Styling
   ========================================================================== */

/* --- Popup Maker Container --- */
.pum-container {
    border: 2px solid #273D56 !important;
    box-shadow: 0px 0px 15px #5C6A7A !important;
}

.pum-container input {
	background: #fff !important;
}

.pum-container h4,
.pum-container h6 {
	margin-top: 10px;
	margin-bottom: 5px;
}

/* --- Login Box Layout & Card --- */
.card {
	position: relative;
	border-radius: 16px !important;
	box-shadow: 0px 0px 20px #5C6A7A;
}

.custom-login-box {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto !important;
	margin-right: auto !important;
}

/* --- Hiding Default Form Elements --- */
/* This hides the default WP login form elements when using social login or custom forms */
.custom-login-box p.login-username,
.custom-login-box p.login-password,
.custom-login-box p.login-remember,
.custom-login-box p.login-submit,
.custom-login-box p.lost-password-link {
	display: none;
}
.custom-login-box .card-title {
	display: none;
}


/* --- OR Separator Styling (for login forms) --- */
.or-separator {
  display: flex;
  align-items: center;
  text-align: center;
  width: 100%;
  margin: 0;
}
.or-separator::before,
.or-separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #BACADB;
}
.or-separator span {
  padding: 0 10px;
  color: #94A0AE;
  font-size: 0.8em;
	font-family: "Comfortaa";
}

/* Login with Google styling */

.nsl-button-google { /* Nextend Social Login Google button styling */
	box-shadow: 0px 0px 8px #677e99;
	border-radius: 10px !important;
	padding: 5px; /* Inner padding for the button content */
	border: 2px solid #4F667D; /* Thick border */
}
.nsl-button-google:hover {
	box-shadow: 0px 0px 10px #4F667D !important;
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
}

/* ==========================================================================
   Expand/Collapse Section Styling
   ========================================================================== */
.collapseomatic_content {
	margin-left: 0px !important;
    margin-top: 0px;
	margin-left: 16px;
}
.collapseomatic {
	padding: 0 !important;
}

/* ==========================================================================
   General Form Element Styling
   ========================================================================== */

/* --- General Input & Textarea Styling --- */
input[type="text"],
input[type="email"],
input[type="password"] {
	padding: 10px;
	border: 1px solid #4F667D !important;
	width: 100%;
	border-radius: 10px;
}

/* --- Radio Button & Checkbox Styling --- */
input[type="radio"],
input[type="checkbox"] {
	-ms-transform: scale(1.4) !important;
	-webkit-transform: scale(1.4) !important;
	transform: scale(1.4) !important;
}

/* Checkbox styling from BSUI (likely for UserWP) */
.bsui .form-check-input:empty {
  border-color: #677e99 !important;
}
.bsui .form-check-input:checked {
  border-color: #677e99 !important;
}
.bsui .form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23677e99' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

/* --- UserWP Captcha --- */
.uwp-captcha-render iframe {
	border-radius: 0px;
}

/* ==========================================================================
   Button Styling
   ========================================================================== */
/* This is a general button style that will apply to the UserWP buttons and default WordPress buttons */
.button.wp-element-button,
.btn.btn-primary { /* Targeting UserWP button */
	background-color: #2b435e !important;
	color: #fff !important;
	font-weight: 300;
	min-width: 100px;
	max-width: 230px;
	min-height: 25px;
	display: block;
	border-radius: 30px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	font-family: "Geologica";
	border: 2px solid #2b435e;
	padding: 10px;
}

.button.wp-element-button:hover,
.btn.btn-primary:hover {
	background-color: #702457 !important;
	box-shadow: 0px 0px 7px #4F667D;
	border: 2px solid #702457;
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
}

/* ==========================================================================
   GOV Logo Styled Text (Branding Element)
   ========================================================================== */
/* Import a font */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@800&display=swap');
/* Or try Montserrat: @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap'); */

.govgr-logo {
  /* Use a font that resembles the logo - Nunito Sans (ExtraBold 800) or Montserrat (Bold 700) are decent approximations */
  font-family: 'Nunito Sans', sans-serif;
  /* font-family: 'Montserrat', sans-serif; */
  font-weight: 800; /* Adjust weight as needed (e.g., 700 for Montserrat) */
  font-size: 2.5rem; /* Adjust size as needed */
  letter-spacing: -0.5px; /* Optional: adjust letter spacing if needed */
  text-align: center;
}

.govgr-dark-blue {
  color: #003366; /* Approximate dark blue color from the logo */
}

.govgr-light-blue {
  color: #00AEEF; /* Approximate light blue/cyan color from the logo */
}

/* Optional: If the logo is a link, remove underline */
a.govgr-logo {
  text-decoration: none;
}

/* ==========================================================================
   preview page specific styling
   ========================================================================== */

h2.value-prop-1-title {
	color: #527FB3;
}

.value-prop-1 {
	padding: 20px;
	background: rgba(182, 198, 217, 0.5);
	border-radius: 15px;
}
.preview-note-container {
  position: relative;
}

/* STEP 2: This is the updated CSS for your floating note.
*/
.preview-note {
  /* This positions the note relative to '.preview-note-container' */
  position: absolute;

  /* Use top/left to adjust the position. 
     A larger 'top' value moves it down. 
     A negative value would move it up. 
  */
  top: -100px; 
  left: 50%;
  transform: translateX(-50%); /* Keeps the element centered */
  z-index: 1000;   /* Ensures it appears on top of other content */
  
  /* Set a specific width to maintain its shape. */
  width: 95%; 
  box-sizing: border-box;

  /* Your custom styles */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px #88A2BF;
  border: 2px dotted #BD0000;
  background: #FFE9A1;

  /* --- Animation Properties --- */
  
  /* Initial, hidden state */
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  transition-delay: 2s;
}

/* Final, visible state (triggered by JavaScript) */
.preview-note.is-inViewport {
  opacity: 1;
}

/* ==========================================================================
   Functional properties
   ========================================================================== */
/* disable for debugging */
.hidden {
	display: none !important;
 	visibility: hidden;
}
/* popup interface fix */
.pum-overlay,
.pum-container {
    z-index: 10 !important;
}
/* hide back button */
.pbPrevious {
	display: none !important;
}