/* ============================================================
   UTILITY CLUB — PILLAR / CATEGORY LANDING PAGES
   (/electricity, /gas, …). Mirrors the 2026 homepage design
   system (index.php inline styles) so pillar pages look like
   the home page. All classes namespaced .uch- / .ucp-.
   ============================================================ */
:root {
    --uc-navy: #0c2233;
    --uc-navy-deep: #081826;
    --uc-green: #19ce67;
    --uc-green-dark: #12b155;
    --uc-green-ink: #03200f;
    --uc-mint: #e8faf0;
    --uc-cloud: #f5f9fc;
    --uc-ink: #16283a;
    --uc-slate: #55687a;
    --uc-line: #e3ecf3;
    --uc-radius: 18px;
    --uc-shadow: 0 18px 45px rgba(12, 34, 51, 0.10);
}
#web-callback-widget #web-callback-title { display: none !important; }
#web-callback-widget #web-callback-logo { display: none !important; }
h1, h2, h3 { text-transform: none; }
body { overflow-x: hidden; }

/* ---------- Shared section furniture ---------- */
.uch-section { padding: 90px 0; }
.uch-section--tight { padding: 60px 0; }
.uch-section--cloud { background: var(--uc-cloud); }
.uch-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 1.6px; font-size: 13px; font-weight: 800; color: var(--uc-green-dark); margin-bottom: 12px; }
.uch-heading { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.2; color: var(--uc-ink); font-weight: 800; margin-bottom: 14px; }
.uch-lede { color: var(--uc-slate); font-size: 1.05rem; max-width: 640px; margin: 0 auto; }
.uch-center { text-align: center; }
.uch-center .uch-lede { margin-left: auto; margin-right: auto; }

/* ---------- HERO (pillar variant: shorter than homepage) ---------- */
.ucp-hero {
    position: relative;
    background:
        linear-gradient(90deg, rgba(8, 24, 38, 0.95) 0%, rgba(8, 24, 38, 0.88) 38%, rgba(8, 24, 38, 0.5) 70%, rgba(8, 24, 38, 0.25) 100%),
        url('../img/uc-hero-min.png') right center/cover no-repeat;
    color: #ffffff;
    overflow: hidden;
    padding: 28px 0 70px;
}
.ucp-hero .container { position: relative; z-index: 2; }
.ucp-hero .uc-crumbs { padding: 0 0 22px; }
.ucp-hero .uc-crumbs .container { padding-left: 0; padding-right: 0; }
.uch-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(25, 206, 103, 0.14); border: 1px solid rgba(25, 206, 103, 0.45); color: #b8f5d3; font-weight: 700; font-size: 13.5px; letter-spacing: 0.4px; padding: 8px 16px; border-radius: 999px; margin-bottom: 20px; }
.uch-hero-badge i { font-size: 17px; color: var(--uc-green); }
.ucp-hero h1 { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.3rem); line-height: 1.12; font-weight: 800; color: #ffffff; margin-bottom: 16px; }
.ucp-hero h1 .uch-hl { color: var(--uc-green); white-space: nowrap; }
.uch-hero-sub { color: #cfe0ec; font-size: 1.1rem; line-height: 1.6; max-width: 560px; margin-bottom: 30px; }

/* Search card (same markup contract as homepage) */
.uch-search-card { background: #ffffff; border-radius: var(--uc-radius); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); padding: 26px; max-width: 600px; }
.uch-search-label { display: flex; align-items: center; gap: 8px; color: var(--uc-ink); font-weight: 800; font-size: 15.5px; margin-bottom: 12px; }
.uch-search-label i { color: var(--uc-green-dark); font-size: 20px; }
.hero-search-input-wrap { position: relative; }
.hero-search-input { width: 100%; padding: 17px 50px 17px 18px; border-radius: 12px; border: 2px solid var(--uc-line); font-size: 16px; color: var(--uc-ink); background: var(--uc-cloud); outline: none; transition: border-color 0.2s ease, background 0.2s ease; }
.hero-search-input:focus { border-color: var(--uc-green); background: #ffffff; }
.hero-search-input::placeholder { color: #8d9eac; }
.hero-spin { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; pointer-events: none; }
.hero-items { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 99; background: #ffffff; border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); max-height: 320px; overflow-y: auto; text-align: left; }
.hero-items:empty { display: none; }
.hero-items .address { padding: 12px 16px; color: var(--uc-ink); cursor: pointer; border-bottom: 1px solid #eef3f7; background: #fff; font-size: 15px; }
.hero-items .address:hover, .hero-items .address.selected { background: var(--uc-mint); }
.hero-items .address:last-child { border-bottom: none; }
.hero-units { display: none; margin-top: 12px; color: var(--uc-ink); font-weight: 700; }
.hero-units input { margin-left: 8px; padding: 8px 12px; border-radius: 8px; border: 2px solid var(--uc-line); color: var(--uc-ink); width: 90px; }
.hero-submit { display: block; width: 100%; margin-top: 14px; padding: 17px 30px; font-size: 18px; font-weight: 800; color: var(--uc-green-ink); background: linear-gradient(135deg, #19ce67, #1de575); border: none; border-radius: 12px; cursor: pointer; box-shadow: 0 10px 30px rgba(25, 206, 103, 0.35); transition: all 0.3s ease; }
.hero-submit:hover { background: linear-gradient(135deg, #17c05f, #1acc6d); transform: translateY(-1px); box-shadow: 0 14px 34px rgba(25, 206, 103, 0.4); }
.hero-submit.search-disabled, .hero-submit[disabled] { background: linear-gradient(135deg, #19ce67, #1de575); color: var(--uc-green-ink); box-shadow: none; cursor: not-allowed; transform: none; opacity: 0.7; }
.uch-search-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--uc-line); }
.uch-search-trust span { display: inline-flex; align-items: center; gap: 6px; color: var(--uc-slate); font-size: 13.5px; font-weight: 600; }
.uch-search-trust i { color: var(--uc-green-dark); font-size: 17px; }
.ucp-hero-alt { margin-top: 18px; color: #cfe0ec; font-size: 14.5px; }
.ucp-hero-alt a { color: #ffffff; font-weight: 700; text-decoration: underline; }
.ucp-hero-alt a:hover { color: var(--uc-green); }

/* Spinner (address lookup) */
.lds-dual-ring { color: #19ce67; display: inline-block; width: 28px; height: 28px; }
.lds-dual-ring, .lds-dual-ring:after { box-sizing: border-box; }
.lds-dual-ring:after { content: " "; display: block; width: 22px; height: 22px; margin: 3px; border-radius: 50%; border: 2.5px solid currentColor; border-color: currentColor transparent currentColor transparent; animation: lds-dual-ring-spin 1.2s linear infinite; }
@keyframes lds-dual-ring-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ---------- Partner logo strip ---------- */
.uch-logos { background: #ffffff; padding: 30px 0 34px; border-bottom: 1px solid var(--uc-line); }
.uch-logos-label { text-align: center; color: var(--uc-slate); font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 18px; }
.ucp-logo-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 44px; }
.ucp-logo-row img { max-height: 46px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: 0.65; transition: filter 0.25s ease, opacity 0.25s ease; }
.ucp-logo-row img:hover { filter: none; opacity: 1; }

/* ---------- Article / SEO copy ---------- */
.ucp-article { max-width: 780px; }
.ucp-article h2 { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; color: var(--uc-ink); margin: 0 0 14px; }
.ucp-article h3 { font-size: 1.15rem; font-weight: 800; color: var(--uc-ink); margin: 26px 0 8px; }
.ucp-article p, .ucp-article li { color: var(--uc-slate); font-size: 1.02rem; line-height: 1.7; }
.ucp-article p { margin-bottom: 16px; }
.ucp-article ul { padding-left: 20px; margin-bottom: 18px; }
.ucp-article li { margin-bottom: 8px; }
.ucp-article a { color: var(--uc-green-dark); font-weight: 700; }
.ucp-article a:hover { text-decoration: underline; }
.ucp-article strong { color: var(--uc-ink); }
.ucp-callout { background: var(--uc-mint); border-left: 4px solid var(--uc-green); border-radius: 12px; padding: 18px 22px; margin: 22px 0; }
.ucp-callout p { margin: 0; color: var(--uc-ink); }
.ucp-side { position: sticky; top: 110px; }
.ucp-side-card { background: #ffffff; border: 1px solid var(--uc-line); border-radius: var(--uc-radius); padding: 24px; box-shadow: 0 8px 24px rgba(12, 34, 51, 0.05); margin-bottom: 20px; }
.ucp-side-card h3 { font-size: 1.05rem; font-weight: 800; color: var(--uc-ink); margin-bottom: 12px; }
.ucp-side-card ul { list-style: none; margin: 0; padding: 0; }
.ucp-side-card li { padding: 8px 0; border-bottom: 1px solid #eef3f7; }
.ucp-side-card li:last-child { border-bottom: none; }
.ucp-side-card li a { color: var(--uc-ink); font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.ucp-side-card li a i { color: var(--uc-green-dark); font-size: 18px; }
.ucp-side-card li a:hover { color: var(--uc-green-dark); }
.ucp-side-card--cta { background: linear-gradient(135deg, var(--uc-navy-deep), #10344e); color: #ffffff; border: none; }
.ucp-side-card--cta h3 { color: #ffffff; }
.ucp-side-card--cta p { color: #c6d8e5; font-size: 0.95rem; }
.ucp-side-card--cta .uch-btn { width: 100%; text-align: center; padding: 14px 20px; font-size: 16px; }
.ucp-side-card--cta .ucp-side-phone { display: block; text-align: center; margin-top: 12px; color: #ffffff; font-weight: 800; font-size: 1.15rem; }

/* ---------- Category / related cards ---------- */
.uch-cat-grid { margin-top: 44px; }
.uch-cat-card { display: flex; flex-direction: column; height: 100%; background: #ffffff; border: 1px solid var(--uc-line); border-radius: var(--uc-radius); padding: 30px 26px; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.uch-cat-card:hover { transform: translateY(-5px); box-shadow: var(--uc-shadow); border-color: rgba(25, 206, 103, 0.5); }
.uch-cat-icon { width: 58px; height: 58px; border-radius: 15px; background: var(--uc-mint); display: grid; place-items: center; margin-bottom: 18px; }
.uch-cat-icon i { font-size: 28px; color: var(--uc-green-dark); }
.uch-cat-card h3 { font-size: 1.2rem; font-weight: 800; color: var(--uc-ink); margin-bottom: 8px; }
.uch-cat-card p { color: var(--uc-slate); font-size: 0.95rem; line-height: 1.55; margin-bottom: 18px; }
.uch-cat-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--uc-green-dark); font-weight: 800; font-size: 15px; }
.uch-cat-link i { font-size: 20px; transition: transform 0.2s ease; }
.uch-cat-card:hover .uch-cat-link i { transform: translateX(4px); }

/* ---------- How it works ---------- */
.uch-steps { margin-top: 50px; position: relative; }
.uch-step { text-align: center; padding: 0 24px; position: relative; }
.uch-step-num { width: 64px; height: 64px; border-radius: 50%; background: var(--uc-navy); color: #ffffff; display: grid; place-items: center; font-size: 1.4rem; font-weight: 800; margin: 0 auto 20px; position: relative; z-index: 2; box-shadow: 0 0 0 8px var(--uc-mint); }
.uch-step h3 { font-size: 1.15rem; font-weight: 800; color: var(--uc-ink); margin-bottom: 10px; }
.uch-step p { color: var(--uc-slate); font-size: 0.96rem; line-height: 1.6; max-width: 300px; margin: 0 auto; }
.uch-step-tag { display: inline-block; margin-top: 12px; background: var(--uc-mint); color: var(--uc-green-dark); font-weight: 800; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.6px; }
@media (min-width: 992px) { .uch-steps::before { content: ''; position: absolute; top: 32px; left: 18%; right: 18%; border-top: 2px dashed #bfe9d2; z-index: 1; } }
.uch-steps-cta { text-align: center; margin-top: 46px; }

/* ---------- Buttons ---------- */
.uch-btn { display: inline-block; padding: 16px 36px; font-size: 17px; font-weight: 800; border-radius: 50px; text-decoration: none; transition: all 0.25s ease; }
.uch-btn--green { color: var(--uc-green-ink); background: linear-gradient(135deg, #19ce67, #1de575); box-shadow: 0 10px 30px rgba(25, 206, 103, 0.35); }
.uch-btn--green:hover { color: var(--uc-green-ink); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(25, 206, 103, 0.45); }
.uch-btn--ghost { color: #ffffff; border: 2px solid rgba(255, 255, 255, 0.4); }
.uch-btn--ghost:hover { color: #ffffff; border-color: #ffffff; transform: translateY(-2px); }

/* ---------- Why / feature cards ---------- */
.uch-why-grid { margin-top: 44px; }
.uch-why-card { background: #ffffff; border-radius: var(--uc-radius); border: 1px solid var(--uc-line); padding: 28px 24px; height: 100%; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.uch-why-card:hover { transform: translateY(-4px); box-shadow: var(--uc-shadow); }
.uch-why-card i { font-size: 30px; color: var(--uc-green-dark); margin: 0 auto 16px; width: 62px; height: 62px; border-radius: 50%; background: var(--uc-mint); display: grid; place-items: center; }
.uch-why-card h3 { font-size: 1.08rem; font-weight: 800; color: var(--uc-ink); margin-bottom: 8px; }
.uch-why-card p { color: var(--uc-slate); font-size: 0.93rem; line-height: 1.6; margin: 0; }

/* ---------- State chips ---------- */
.ucp-states { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ucp-state { display: inline-flex; align-items: center; gap: 8px; background: #ffffff; border: 1px solid var(--uc-line); border-radius: 999px; padding: 9px 16px; color: var(--uc-ink); font-weight: 700; font-size: 14px; }
.ucp-state i { color: var(--uc-green-dark); }

/* ---------- FAQ (theme accordion, tightened) ---------- */
.faq-area .faq-accordion .accordion .accordion-item { background: #ffffff; border: 1px solid var(--uc-line); border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
.faq-area .faq-accordion .accordion .accordion-title { text-transform: none; font-size: 1.02rem; }
.faq-area .faq-accordion .accordion .accordion-content { color: var(--uc-slate); line-height: 1.65; }
.faq-area .faq-accordion .accordion .accordion-content a { color: var(--uc-green-dark); font-weight: 700; }

/* ---------- Final CTA ---------- */
.uch-final { background: linear-gradient(110deg, rgba(8, 24, 38, 0.96) 20%, rgba(8, 24, 38, 0.82) 60%, rgba(8, 24, 38, 0.6) 100%); background-color: var(--uc-navy-deep); color: #ffffff; text-align: center; padding: 84px 0; }
.uch-final h2 { color: #ffffff; font-weight: 800; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); margin-bottom: 14px; }
.uch-final p { color: #c6d8e5; font-size: 1.08rem; max-width: 560px; margin: 0 auto 30px; }
.uch-final-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .uch-section { padding: 64px 0; }
    .uch-step { margin-bottom: 40px; }
    .uch-steps .col-lg-4:last-child .uch-step { margin-bottom: 0; }
    .ucp-side { position: static; margin-top: 30px; }
}
@media (max-width: 768px) {
    .ucp-hero { padding: 20px 0 60px; text-align: center; background: linear-gradient(180deg, rgba(8, 24, 38, 0.93) 0%, rgba(8, 24, 38, 0.88) 100%), url('../img/uc-hero-min.png') center 30%/cover no-repeat; }
    .ucp-hero .uc-crumbs ol { justify-content: center; }
    .ucp-hero h1 .uch-hl { white-space: normal; }
    .uch-hero-sub { margin-left: auto; margin-right: auto; }
    .uch-search-card { margin-left: auto; margin-right: auto; text-align: left; }
    .uch-search-trust { justify-content: center; }
    .uch-cat-card { margin-bottom: 4px; }
    .uch-final-actions .uch-btn { width: 100%; max-width: 340px; }
}