/* ===================================
          Utility Rates Style
=================================== */

/* =========== Theme ========== */
  /* >> color << */
  /* font color */
  body{
	color: var(--si-black);
  }
  .btn{
	background-color: transparent;
	border:0;
  }
  .hero, 
  footer ul li,
  footer ul li ul li a,
  .business-btn,
  .btn.btn-secondary-ur:hover,
  .nav-link,
  .navigation .dropdown-menu a,
  .hamburger,
  .hero-v3 .shield-container-2025 dd a{
	color: var(--si-white);
  }
  .zipcode-container .btn.btn-find {
	color: var(--si-black);
  }
  nav ul li .nav-link:hover,
  footer ul li .nav-link:hover,
  .nav-link:focus, .nav-link:hover,
  footer ul li .c-link-text-secondary,
  footer p a:hover,
  section ul li a:hover,
  .navigation .dropdown-menu a:hover {
	color:var(--si-blue) !important;
  }
  .hero h1 span,
  .text-si-blue,
  .text-primary-lc,
  .btn.btn-blog-ur:hover {
	color: var(--si-blue);
  }
  .text-success {
	color: var(--si-blue) !important;
  }
  .text-si-darker-blue,
  .zipcode-container .btn-find{
	color: var(--si-darker-blue);
  }
  .tagline {
	color: var(--si-very-pale-blue);
  }
  .btn-find:hover {
	color: var(--si-orange);
  }
  .hero .superwidget-container{
	color:var(--si-black) !important;
  }
/*------- lotus_two_col layout -------*/
.lotus_two_col h3 a{
	color: var(--si-black);
}
@media (max-width: 980px) {
	.hero .superwidget-container li.filter-sort-item label{
	  color:var(--si-white);
	}
	.hero .superwidget-containe ul li{
		color:var(--si-black) !important;
	}
}
/* background */
/* >> hero << */
.hero {
  background: url('https://www.utilityrates.com/images/family-home.webp') no-repeat center bottom;
}
	.hero-v3 .shield-container-2025 ul li::before {
		background-image: url(/images/icons/icon-check-green.svg);
	}
	.step-by-step.v1 .row .col-md-4:nth-child(2) span::after{
		background-image: url("../images/icons/icon-arrow-head-right-gray.png");
	  }
/*------- quote -------*/
.quote{
}
  .quote::before {
	background-image: url(/images/icons/quote-start-white.svg);
  }
  .quote::after {
	background-image: url(/images/icons/quote-end-white.svg);
  }
/*------- step-by-step -------*/  
.step-by-step.v1 .row .col-md-4:nth-child(2) span,
  .step-by-step.v1 .row .col-md-4:last-child span{
	background-color: var(--si-white);
  }
  .step-by-step.v1 .row .col-md-4:first-child span::after{
	background-image: url("../images/icons/icon-arrow-head-right-blue.png");
  }
  .sticky-on-scroll{
	background-color: var(--si-black);
  }
  .bg-si-blue,
  .step-by-step.v3 .row span,
  .step-by-step.v1 .row .col-md-4:first-child span,
  .step-by-step.v1 .row .col-md-4:first-child span::before{
	background-color: var(--si-blue);
  }
@media (min-width: 769px) {
	.step-by-step.v1 .row .col-md-4:first-child span::after{
	  background-image: url("../images/icons/icon-arrow-head-right-blue.png");
	}
	.step-by-step.v1 .row .col-md-4:nth-child(2) span::after{
	  background-image: url("../images/icons/icon-arrow-head-right-gray.png");
	}
}
  .bg-darker-blue{
	background-color: var(--si-darker-blue-rgb);
  }
  .bg-light-gray{
	background-color: var(--si-light-gray);
  }
  .bg-si-gray-100{
	background-color:var(--si-gray-100);
  }
  .step-by-step.v1 .row .col-md-4:nth-child(2) span::before{
	background-color: var(--si-gray-300);
  }
  .hero .overlay{
	background:rgba(0, 0, 0, 0.8);
  }
  .hero-v3 .zip-container, .hero-v3 .shield-container-2025{
	background:rgba(0, 0, 0, 0.7);
  }
	.hero-v3 .shield-container-2025 .zip-container{
		background: transparent;
	}
  .business-btn:hover {
	background: rgba(255,255,255,0.1);
  }
  .zipcode-container .btn-find {
	background-color: var(--si-orange);
  }
  .zipcode-container .btn-find:hover,
	.navbar,
	.navigation .dropdown-menu,
	.sticky-header,
	.sticky-on-scroll #mobileMenu.show{
	  background-color: var(--si-darker-blue);
	}
  .btn.btn-secondary-ur{
	background-color: var(--si-blue);
  }
	.btn.btn-secondary-ur:hover{
	  background-color: var(--si-darker-blue);
	}
	.navigation .dropdown-menu a:hover {
	background-color: rgba(255, 255, 255, 0.1);
  }
  .utilityrates_2025 .h5, .h6 {
    font-weight: 600 !important;
}
#stickyHeader .btn-find {
    background-color: var(--si-orange);
}
.zipcode-container .btn-find:hover,
#stickyHeader .btn-find:hover{
    color:var(--si-white);
    background-color: var(--si-darker-blue);
}

/* >> affiliates banner << */
.hero .affiliates-logo-container div:first-child::after{
	background-color: #074962;
}
/* >> button << */
#stickyHeader .btn-find {
    background-color: var(--si-orange);
}
.zipcode-container .btn-find:hover,
#stickyHeader .btn-find:hover{
		color:var(--si-white);
		background-color: var(--si-darker-blue);
}
.btn.btn-blog-ur{
  }
		.btn.btn-blog-ur:hover{
			background-color: transparent;
		}
.btn-success {
    border: 1px solid var(--si-blue) !important;
    background-color: var(--si-blue) !important;
    color: var(--si-black);
}
	.btn-success:hover {
		border: 1px solid var(--si-darker-blue) !important;
		background-color: var(--si-darker-blue) !important;
		color: var(--si-white);
	}
/*------- company card -------*/
.company-logo-card-container .card {
	background: var(--si-white);
}
.utility{
	background-color: transparent;
}
	.utility .company-logo-card-container .card {
		background: var(--si-gray-100);
	}
	.utility .company-logo-card-container .card .row div:first-child::after{
		background-color: var(--si-gray-400);
	}
/*------- lotus_two_col layout -------*/
.lotus_two_col section {
    border-bottom-color: var(--si-pale-blue);
}
/*------- Providers -------*/
.subpages .logo-list li {
	background: var(--si-gray-100);
}
		.subpages.bg-si-gray-100 .logo-list li {
			background: var(--si-white) !important;
		}
@media (max-width: 1200px) {
	.grid-4-cols .row:nth-child(1)::after,
	  .grid-4-cols .row:nth-child(3)::after{
		background-color: var(--si-dark-blue-50);
	}
}
@media (min-width: 1201px) {
	.grid-4-cols .row::after{
	  background-color: var(--si-dark-blue-50);
	}
	
}
@media (max-width: 1000px) {
	.mobile-menu{
	  background-color: var(--si-darker-blue);
	}
}

  /* border */
  .border-color-si-blue,
  .step-by-step.v3 .row span{
	border-color:var(--si-blue) !important;
  }
  .border-color-si-gray-400{
	border-color:var(--si-gray-400);
  }
  .business-btn:hover {
	border-color: var(--si-darker-blue);
  }
  
  /* >> font << */
  .utilityrates_2025 body {
	font-family: var(--base-font-family);
  }
  .utilityrates_2025 .material-symbols {
	font-family: 'Material Symbols Outlined';
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
  .hero h1, h2, h3, h4, h5,
  body, input, label,
  li, span {
    font-family: var(--base-font-family);
  }
  h1, h2, h3, h4, h5 {
	line-height: 1.2;
	letter-spacing: 0;
  }
  body, input, label,
  li{
	line-height: var(--bs-body-line-height);
  }
  .superwidget-container span {
    font-family: var(----bs-body-font-family) !important;
	}

/* >> font size << */
.utilityrates_2025 h1, .utilityrates_2025 h2, .utilityrates_2025 h3, .utilityrates_2025 h4, .utilityrates_2025 h5 {
	font-weight: bolder;
}
.utilityrates_2025 .hero h1 {
	font-size: 3.5rem;
	font-weight: 700;
}
.utilityrates_2025 .h2, .utilityrates_2025 h2 {
	font-size: 2rem;
}
.utilityrates_2025 .h3, .utilityrates_2025 h3 {
	font-size: 1.8rem;
   }
.utilityrates_2025 .h4, .utilityrates_2025 h4 {
	font-size: 1.3rem;
}
.utilityrates_2025 .h5, .utilityrates_2025 h5 {
	font-size: 1.3rem;
}
.utilityrates_2025 .h6, .utilityrates_2025 h6 {
	font-size: 1.6rem;
}
.utilityrates_2025 .h1{
	font-size: 2.5rem;
}
.utilityrates_2025 body, .utilityrates_2025 .tagline, .utilityrates_2025 p,
  .utilityrates_2025 li, .utilityrates_2025 a, .utilityrates_2025 dt, .utilityrates_2025 dd {
	font-size: 1.2rem;
}
  .utilityrates_2025 .lotus_two_col .h5, .utilityrates_2025 .lotus_two_col h5{
	font-size: 1.1rem;
  }
  .utilityrates_2025 .material-symbols {
	font-size: 42px !important;
  }
  .utilityrates_2025 .hamburger {
	font-size: 1.75rem;
  }
  footer ul li,
  footer ul li ul li a{
	
  }
  @media (max-width: 980px) {
	.utilityrates_2025 .hero h1 {
	  font-size: 35px!important;
	}
	.utilityrates_2025 .h2, .utilityrates_2025 h2 {
		font-size: 30px;
	}
	.utilityrates_2025 .h3, .utilityrates_2025 h3 {
		font-size: 25px;
	   }
	.utilityrates_2025 .h4, .utilityrates_2025 h4 {
		font-size: 20px;
	}
	.utilityrates_2025 .h5, .utilityrates_2025 h5 {
		font-size: 20px;
	}
	.utilityrates_2025 .h6, .utilityrates_2025 h6 {
		font-size: 16px;
	}
	.utilityrates_2025 .h1{
		font-size: 25px;
	}
	.utilityrates_2025 body, .utilityrates_2025 .tagline, .utilityrates_2025 p,
  .utilityrates_2025 li, .utilityrates_2025 a, .utilityrates_2025 dt, .utilityrates_2025 dd {
		font-size: 16px;
	  }
	  .utilityrates_2025 .hero .superwidget-container{
		color:var(--si-white);
	  }
  }
/* For Optimize Template only */
.template_optimize .hero h1 {
	font-size: 3rem;
	font-weight: 700;
}
.template_optimize .h2, .template_optimize h2 {
	font-size: 2rem;
}
.template_optimize .h3, .template_optimize h3 {
	font-size: 1.8rem;
   }
.template_optimize .h4, .template_optimize h4 {
	font-size: 1.2rem;
}
.template_optimize .h5, .template_optimize h5 {
	font-size: 1.2rem;
}
.template_optimize .h6, .template_optimize h6 {
	font-size: 1.6rem;
}
.template_optimize .h1{
	font-size: 2.5rem;
}
.template_optimize body, .template_optimize .tagline, .template_optimize p,
.template_optimize li, .template_optimize a, .template_optimize dt, .template_optimize dd {
	font-size: 1.1rem;
}
@media (max-width: 980px) {
	.template_optimize .hero h1 {
	  font-size: 35px!important;
	}
	.template_optimize .h2, .template_optimize h2 {
		font-size: 30px;
	}
	.template_optimize .h3, .template_optimize h3 {
		font-size: 25px;
	   }
	   .template_optimize .h4, .template_optimize h4 {
		font-size: 20px;
	}
	.template_optimize .h5, .template_optimize h5 {
		font-size: 20px;
	}
	.template_optimize .h6, .template_optimize h6 {
		font-size: 16px;
	}
	.template_optimize .h1{
		font-size: 25px;
	}
	.template_optimize body, .template_optimize .tagline, .template_optimize p,
.template_optimize li, .template_optimize a, .template_optimize dt, .template_optimize dd {
		font-size: 16px;
	  }
  }
/* ------------------------------------------------------------------------- */
/* Guided plan selection popup                                               */
/*                                                                           */
/* Owned by base/application/views/lite_widget/superwidget_guided_popup.php,  */
/* which gates itself to UtilityRates, to the filtergrid superwidget instance */
/* and to phone widths.                                                      */
/*                                                                           */
/* Deliberately not mirrored into the shared superwidget stylesheet pair. The */
/* popup is first-party UtilityRates only, so putting it in                   */
/* superwidget-layout-embedded.css would ship dead CSS to affiliate embeds    */
/* and take on the pairing obligation for no benefit. Decision of 2026-10-23. */
/*                                                                           */
/* No media query here, on purpose. The script is the only thing that opens   */
/* the popup and it checks the viewport itself. Hiding the panel by width as  */
/* well would leave a visitor who rotates to a wider screen mid-flow looking  */
/* at a scroll-locked page behind an invisible overlay.                       */
/*                                                                           */
/* Icon URLs are not set here. utilityrates_2025_head_optimize.php inlines    */
/* this stylesheet through utilityrates_snippet_css_inline_min_2025.php, and  */
/* a relative url() inside inlined CSS resolves against the document rather   */
/* than the stylesheet. The partial builds the icon URLs from $base_url so    */
/* they hold under either head and under DEV branch routing.                  */
/* ------------------------------------------------------------------------- */

.ur-guided[hidden] {
	display: none;
}

/* The z-index is measured against the layers this page actually uses, not     */
/* guessed. An earlier value of 1080 put this overlay BELOW .filter-container  */
/* (2000) and header.hero (1200), so the popup opened and the page's own       */
/* filter bar painted straight over it - it looked like the feature did not    */
/* exist at all. Measured layers on compare-energy-rates: 10000 .zip-modal and */
/* .plandetails-modal, 20000 #priceAlertOverlay, 100000 .modal-shade,          */
/* 999999 .tooltip-box-trubill, 1000000 .modal-content.                        */
/*                                                                             */
/* 50000 clears every piece of page chrome and the in-page modals, and stays   */
/* deliberately BELOW the site's modal layer so the "Select Your Utility"      */
/* question wins if the two are ever on screen together - plans cannot exist   */
/* until it is answered, so it must never sit behind this. They are not        */
/* currently reachable together; this is the safe failure mode if that changes.*/
/* The trubill tooltips at 999999 remain above, which is harmless: they are    */
/* plan-row hover tooltips, and the rows are covered and scroll-locked while   */
/* the popup is open.                                                          */
.ur-guided {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 50000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ur-guided-shade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.55);
}

body.ur-guided-open {
	overflow: hidden;
}

.ur-guided-panel {
	position: relative;
	width: 100%;
	max-width: 520px;
	margin: 20px 0;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 0 16px 24px;
	background: var(--si-white, #fff);
	border-radius: 10px;
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);
}

.ur-guided-panel:focus {
	outline: none;
}

.ur-guided-head {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 56px;
	margin: 0 -16px;
	padding: 8px 8px 0;
	background: var(--si-white, #fff);
}

/* Back and close keep a 44px tap target. The back button is only hidden with */
/* the hidden attribute, never removed, so the row never reflows mid-flow.    */
.ur-guided-chrome {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
}

.ur-guided-chrome[hidden] {
	display: block;
	visibility: hidden;
}

.ur-guided-chrome:active {
	background: var(--si-gray-200, #eff2fc);
}

.ur-guided-progress {
	flex: 1 1 auto;
	margin: 0;
	color: var(--si-gray-600, #9397ad);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
}

/* The opening screen leads with the plan count, so its heading outranks the
   question below it. The question itself is the dialog's accessible label on
   every screen, so it keeps the h2 and is stepped down in size with a modifier
   the script adds on the opening screen only.

   These three rules are scoped to the panel, and the count's weight is forced,
   because the page they open over sets type on the bare tags at a higher
   specificity than a lone class: measured on compare-energy-rates,
   .utilityrates_2025 p wins font-size 16px and font-weight 300 !important,
   .utilityrates_2025 h2 wins font-size 30px, and .superwidget-container p plus
   p:last-of-type zero the margins. A single class loses all of those. */
.ur-guided-panel .ur-guided-count {
	margin: 4px 0 0;
	font-size: 24px;
	font-weight: 700 !important;
	line-height: 1.25;
	text-align: center;
}

.ur-guided-count[hidden] {
	display: none;
}

.ur-guided-title {
	margin: 20px 0 20px;
	font-size: 22px;
	line-height: 1.3;
}

.ur-guided-panel .ur-guided-title-sub {
	margin: 8px 0 6px;
	font-size: 18px;
}

.ur-guided-panel .ur-guided-lead {
	margin: 0 0 20px;
	color: #5d5d5d;
	font-size: 14px;
	line-height: 1.4;
}

.ur-guided-lead[hidden] {
	display: none;
}

.ur-guided-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ur-guided-option {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 68px;
	padding: 12px 16px;
	background: var(--si-white, #fff);
	border: 1px solid var(--si-gray-300, #e2e5f1);
	border-radius: 5px;
	text-align: left;
}

/* The first option of every screen is the recommended one, so it is tinted.
   Both rules go through the list item rather than the button alone so they
   outrank the plain .ur-guided-option declarations they replace, and the
   pressed state is restated for the same reason: without it the tint would
   win over .ur-guided-option:active and the first option would be the only
   one with no tap feedback. */
.ur-guided-options li:first-child .ur-guided-option {
	background: #e0f7ff;
	border-color: #013245;
}

.ur-guided-options li:first-child .ur-guided-option:active {
	background: var(--si-gray-200, #eff2fc);
}

/* The forward chevron is drawn from two borders rather than shipped as another
   icon file: it is pure decoration, so it stays out of the accessibility tree
   and out of the icon directory. */
.ur-guided-option::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-left: auto;
	border-top: 2px solid #013245;
	border-right: 2px solid #013245;
	transform: rotate(45deg);
}

.ur-guided-option:active {
	background: var(--si-gray-200, #eff2fc);
	border-color: var(--si-dark-blue, #008cc0);
}

.ur-guided-option-icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
}

.ur-guided-option-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ur-guided-option-label {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
}

.ur-guided-option-note {
	color: #5d5d5d;
	font-size: 13px;
	line-height: 1.3;
}

/* Hides the recommended cards once the guided flow has been completed. Applied
   to the cards container only, never to the superwidget instance, which also
   carries the "Select Your Utility" and error modals. Deliberately not inside a
   media query: the class is only ever added by the guided popup, which runs at
   phone widths, and a visitor who answered the questions should not have the
   cards reappear just because the device was rotated. */
.ur-guided-hidden {
	display: none !important;
}

/* The guided popup's own explanation for an empty grid. The grid's results bar
   is not used for this: it stays hidden on the popup's filter path.

   Scoped to the instance, and the weight forced, for the same reason the count
   and lead rules are: this paragraph is inserted into the page rather than into
   the panel, so the page's own bare-tag rules outrank a lone class. Measured on
   compare-energy-rates, a single .ur-guided-reason lost padding to .container p
   and .superwidget-container p, font-size 14px to .utilityrates_2025 p, the
   weight to its font-weight 300 !important, and both margins to
   .superwidget-container p and p:last-of-type. */
.superwidget-container .ur-guided-reason {
	margin: 0 0 16px;
	padding: 14px 16px;
	font-weight: 400 !important;
	background: var(--si-gray-200, #eff2fc);
	/*border-left: 3px solid var(--si-dark-blue, #008cc0);*/
	border-radius: 6px;
	color: var(--si-gray-800, #4a4b65);
	font-size: 14px;
	line-height: 1.45;
}

.ur-guided-reason[hidden] {
	display: none;
}