/* Colours */
/*
Dark:   #343848;
Light:  #ededed
Background: #f0f8ff

/* Form Styles */
.energy2 {
	color:#343848;
	font-size: 16px;
	text-align: left;
}

.energy2 h2{
	text-align: left;
	font-weight: 400;
	color: #343848;
	font-size: 24px;
	padding: 0;
	margin: 0;
}

/* Fieldsets */
#energy2 div.fieldsets { width: 100%; position: relative; overflow: hidden;  -webkit-transition: height 1s; /* Safari prior 6.1 */ transition: height 1s;}
#energy2 div.fieldsets fieldset { width: 100%; display: none; position: absolute;  border: none; float: left; padding: 1px 0 50px 0;text-align:center;}

#energy2 div.fieldsets fieldset.section1 {text-align:center;}
#energy2 div.fieldsets fieldset.section5 {text-align:left;} 


#energy2 div.fieldsets fieldset.section6 {position:relative} 

/* Paragraphs */
#energy2 p {margin:0;padding:0;text-align: center; line-height: 1.3em;color: #343848;}
#energy2 p, .energy2 p a {color: #343848;}
#energy2 div.energy2warning, #energy2 p.energy2warning {color:red;}
#energy2 p.energy2warning > label { color: red;}
#energy2 p.energy2warning input, #energy2 p.energy2warning select, #energy2 p.energy2warning textarea  { border-color: red !important; }

/* Inputs */
#energy2 .inputfield {font-size: 22px;font-weight: 900;text-align:center;margin-top: 12px;} 

.postcode_label {font-size:20px;font-weight: 900;}
#regionname{display:none;font-size:20px;font-weight: 900;}

#checkingpostcode{display:none;margin-bottom: 10px;}
#invalidpostcode{display:none;margin-bottom: 10px;color:red}

.dontknow_hidden {display:none;}
#energy2 .inputfield.label_dontknow {cursor: pointer; background-color: #009f1e; padding: 8px 8px; border-radius: 21px; margin: 6px 0;color:#ffffff; font-weight: 300;width: 60%; margin: 0 20%;}

#energy2 input[type=button] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

#energy2 span.select {
	position: relative !important;
	display: block !important;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: auto;
}
#energy2 input[type=text] {
	font-size: 24px;
	font-weight: 900;
	width:200px;
	padding: 10px;
	border: 1px solid #343848;
	border-radius: 3px;
	margin: 3px 0 10px 0;
	box-sizing: border-box;
	color: #343848;
	outline: none;
	text-align: center;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

#energy2 .validator, .energy2_page .validator{margin-left: -999px;height:0;}

/* Radio Buttons */
#energy2 .selectbutton input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}
#energy2 .selectbutton label {
	display: block;
	text-align: center;
	padding: 10px 18px;
	margin: 6px;
	border-radius: 30px;
	border: 2px solid #ddd;
	background: #f5f5f5;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	transition: all .2s ease;
}
#energy2 .selectbutton label:hover, #energy2 .selectbutton  input[type="radio"]:checked + label {background-color:#ececec !important;}

/* Results Table */
#energy2 table {border-collapse: collapse;width:100%}
#energy2 td {padding: 5px 0 !important;border-bottom: 1px solid #343848;}
#energy2 .tablelabel {color:#343848;}
#energy2 .tableoutput {color:#343848;text-align: right;font-weight: 900;}
#energy2 .comment {margin: 12px 0 0 0;}

/* Action Buttons */
#energy2 .buttons { height: 50px; }
#energy2 .action-button {
	width: 140px;
	padding: 10px 14px;
	margin: 6px;
	border-radius: 30px;
	border: none;
	background-color: #009f1e;;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	transition: all .2s ease;
	color: #ffffff;
}
#energy2 .action-button:hover, #energy2 .action-button:focus {
	background-color: #343848;
}
#energy2 .next, #energy2 .submit {position:absolute;right:0;-webkit-appearance: none;}
#energy2 .previous {position:absolute; left:0;}

/* Progressbar */
#energy2 progress[value] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 12px;
	background-color: #eee;
	color: #009f1e;
	left: 0;
	position: absolute;
	border: none;
	border-radius: 6px;
}

#energy2 progress::-webkit-progress-value { background-color: #009f1e; border-radius: 6px;}
#energy2 progress::-webkit-progress-bar {background-color: #eee;}
#energy2 progress::-moz-progress-bar  {background-color: #009f1e;border-radius: 6px;}
#energy2 #progressvalue {color: #343848; font-style: italic;margin: 16px 0 0 0;text-align: center;}

/* Filters */
#energy2 .filtergrid {margin-bottom: 8px;display: flex;flex-wrap: wrap;gap: 8px;}
#energy2 .filterslabel {font-weight: 900;padding: 0 4px;margin-bottom:8px;text-align: left;}

#energy2 .filtergrid input[type=checkbox] {display: none;}
#energy2 .filtergrid input[type=checkbox]+label {
	border-radius: 13px;
	padding: 4px 12px;
	line-height: 16px;
	margin-right: 6px;
	border:1px solid #4a618e;
	background: #f5f5f5;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	transition: all .2s ease;
	white-space: nowrap;
}
#energy2 .filtergrid input[type=checkbox]:checked+label, #energy2 .filtergrid input[type="radio"]:hover + label {background-color: #4a618e;color:#ffffff;outline: 0;}

/* Sorting */
#energy2 .sorting {text-align: left;margin-bottom: 18px;}
#energy2 .sortinglabel {cursor: pointer;font-weight: 900;padding-bottom: 4px;}
#energy2 .showsorting {display:block;}
#energy2 .sorting input[type="radio"] {display: none;}
#energy2 .sorting input[type=radio]+label {margin: 0; cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;color:#343848;background-color: #fff;border:1px solid #4a618e;border-radius: 13px; padding:4px 12px; line-height: 16px;white-space: nowrap;display: inline-block;text-align: center;}
#energy2 .sorting input[type="radio"]:checked + label, #energy2 .sorting input[type="radio"]:hover + label{outline: 0;background-color: #4a618e;color:#ffffff;}

/* Promo Ribbon */
.company_box .ribbon {position: absolute;top: 0;left: 50%;transform: translate(-50%, -16px);padding: 4px 8px;background-color: #fa6314; color: #ffffff; border-radius: 4px; font-size: 15px;}

/* Company Box Rules */
.company_box {text-align: center;box-sizing: border-box;position: relative; padding: 18px 12px 12px 12px; margin: 30px 0;border: 1px solid #E7E7E7;box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 0 15px rgba(0, 0, 0, 0.05);border-radius: 12px;}

.top_line {text-align: left; font-size: 80%; border-bottom: 1px solid #cccccc; padding-bottom: 4px; margin-bottom: 8px;}

/* Desktop */
.company_box .desktop {align-items: center;}
.company_box .desktop .top {display:grid;grid-template-columns:repeat(6, 1fr);grid-column-gap: 1%;}
.company_box .top_block {background-color: #f2f5f7; padding:6px; border-radius: 6px;font-size: 20px; font-weight: 900;}
.company_box .company_logo img {max-height: 80px;margin:0;}

.company_box .desktop .lastblock span{font-weight: 900;display:block;}

.company_box .desktop .middle {display:grid;grid-template-columns:16.66667% 50.3333% 25%;grid-column-gap: 3%; margin-top: 18px;}

.company_box .production_block {display: inline-block;border: 1px solid #343848;padding: 0 12px;border-radius: 16px;line-height: 32px;height: 32px;margin: 0 auto;background-color: #f1f5f8;}

.features_block {text-align: left;font-size: 90%;}
.features_block img {width:60px;height:60px;}

/* Mobile */
.company_box .mobile {display:none;background-color: #ffffff;border-top-left-radius: 18px;border-top-right-radius: 18px;padding: 10px;align-items: center;}

.top_mobile_block {display: grid;grid-template-columns:49% 49%;grid-column-gap: 2%;  }

.company_box .mobile .middle {display:block;margin-top: 12px;}

.company_box .top_block .logo_block {text-align: left;}
.product {font-size:12px;font-weight: 600;text-align: center;}
.company_box .top_block.price_block {background-color: #4a608d; color: #ffffff;}
.top_block.tlign-itriff_block span {color: #343848;}
.company_box .smaller {font-size:14px;}
.company_box .small {font-size:12px;margin-bottom: 6px;font-weight: 300;}

/* Apply Button */
.company_apply {line-height: 36px;text-align: center;}
.company_apply a {display:block;font-weight:500;text-decoration: none;border-radius: 4px;background-color: #4fa02f;color:#ffffff;}
.company_apply a svg {fill: #FFF;vertical-align: text-bottom;}

/* Tooltip */
.offer-tooltip {display:none; position:absolute; background:#333; color:#fff; padding:12px; border-radius:4px; z-index:1000; min-width:200px; font-size:12px; font-weight: 300;line-height:1.4; top:150%; left:50%; transform:translateX(-80%); box-shadow: 0 4px 12px rgba(0,0,0,0.3); text-align:left;}
.top_block.tariff_block span .close-tooltip {display:none; position:absolute; top:-15px; right:-15px; cursor:pointer; font-weight:bold;width: 30px; height: 30px;border-radius: 15px;background-color: #ffffff;}

/* Cell Phone */
@media only screen and (max-width: 600px) {
	.energy2 {display: block;padding: 16px;}
	.energy2 h2{font-size: 20px;}
	.company_box .desktop {display: none;}
	.company_box .mobile {display: block;}
	.company_box .mobile .top {display:grid;grid-template-columns:repeat(2, 1fr);grid-column-gap: 1%;grid-row-gap: 12px;}
	.company_box .company_logo img {max-height: 40px;}
	#energy2 .outputradio label {font-size: 12px;}
	.company_box table  td:nth-child(2) {width:30%}
	#energy2 .filtergrid {grid-template-columns: repeat(2, 1fr);grid-row-gap: 12px;margin-bottom: 12px;}
	.offer-tooltip {transform: translateX(-80%)}
	.top_block.tariff_block span .close-tooltip {display:block;}
	.company_box .production_block {margin: 12px auto;}
	.company_box .ribbon {width:90%;}
}
/* ── Loading screen (summary → results transition) ── */
#energy2_loading_screen {
	padding: 32px 24px;
	box-sizing: border-box;
}

#energy2_progress_bar_wrap {
	width: 100%;
	max-width: 480px;
	height: 10px;
	background: #e5e7eb;
	border-radius: 999px;
	overflow: hidden;
	margin: 0 auto 20px;
}

#energy2_progress_bar_fill {
	height: 100%;
	width: 0%;
	background: var(--energy2-primary, #009f1e);
	border-radius: 999px;
	/* transition set via JS so the 3s kick-off is precise */
}

#energy2_loading_message {
	text-align: center;
	font-size: 15px;
	color: #555;
	min-height: 1.4em;
	transition: opacity 0.3s ease;
}