/* =============================================================================
   PBS FUNNEL CHROME — one header + one footer for the whole funnel
   Scope: body.pbs-funnel-chrome (added by pbs-funnel-chrome.php on
   /boiler-recommendations/, /basket/ and /checkout/ ONLY — never on
   /get-your-quote/, which is the reference).

   It renders the SAME header/footer markup as /get-your-quote/ (the canonical
   `.pbs-quote-header` / `footer.pbs-quote-footer` pair) and hides each page's
   own legacy chrome, then restyles the basket/checkout trust band and primary
   CTAs to the funnel design language.

   Presentation only: no page content, no form, no price, no product id, no
   link, no engine, no cart/checkout logic and no tracking hook is touched.
   Loaded LAST and excluded from WP Rocket RUCSS/minify so it always wins.
   ============================================================================= */

/* ---- tokens (mirror the /get-your-quote/ skin) ----------------------------- */
body.pbs-funnel-chrome{
  --fc-navy:#071C3D; --fc-blue:#073B78; --fc-orange:#F7941D; --fc-orange-h:#E8860F;
  --fc-bg:#F5F8FC; --fc-white:#FFFFFF; --fc-border:#DCE4EE; --fc-ink:#111827;
  --fc-muted:#667085; --fc-success:#167C4B;
  --fc-font:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* =============================================================================
   1. CANONICAL HEADER  (identical to /get-your-quote/)
   ============================================================================= */
body.pbs-funnel-chrome .pbs-quote-header{
  background:#fff !important; border-bottom:1px solid #E8EDF3 !important; box-shadow:none !important;
}
body.pbs-funnel-chrome .pbs-quote-header__inner{
  max-width:1180px !important; width:100% !important; margin:0 auto !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:1fr auto !important; align-items:center !important; gap:12px !important;
}
body.pbs-funnel-chrome .pbs-quote-brand{ display:flex !important; align-items:center !important; min-width:0 !important; }
body.pbs-funnel-chrome .pbs-quote-brand__logo{ display:flex !important; align-items:center !important; text-decoration:none !important; }
body.pbs-funnel-chrome .pbs-quote-brand__logo img{ display:block !important; }
body.pbs-funnel-chrome .pbs-quote-contact{
  display:flex !important; flex-direction:row !important; align-items:center !important;
  justify-content:flex-end !important; gap:14px !important; text-align:right !important; margin-left:auto !important;
}
body.pbs-funnel-chrome .pbs-qv2-hchip{
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  font-family:var(--fc-font) !important;
  font-size:12.5px !important; font-weight:700 !important; color:var(--fc-blue) !important;
  background:var(--fc-bg) !important; border:1px solid var(--fc-border) !important;
  border-radius:999px !important; padding:6px 11px !important; white-space:nowrap !important;
}
body.pbs-funnel-chrome .pbs-qv2-hchip::before{ content:"\2713" !important; color:var(--fc-success) !important; font-weight:900 !important; }
/* the orange Call us button itself is styled by the shared pbs-funnel-header layer
   (it targets .pbs-quote-contact__phone / .pbs-callbtn); reinforce here so the
   injected header is correct even before that JS runs. */
body.pbs-funnel-chrome .pbs-quote-contact__phone.pbs-callbtn,
body.pbs-funnel-chrome .pbs-quote-contact__phone{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  background:var(--fc-orange) !important; border:1px solid var(--fc-orange) !important;
  color:#fff !important; font-weight:800 !important; font-size:15px !important; line-height:1 !important;
  padding:0 20px !important; min-height:46px !important; border-radius:999px !important;
  text-decoration:none !important; white-space:nowrap !important;
  box-shadow:0 8px 18px rgba(247,148,29,.30) !important; margin:0 !important;
}

/* =============================================================================
   2. HIDE each page's own (legacy) chrome — the canonical pair replaces it
   ============================================================================= */
body.pbs-funnel-chrome .pbs-funnel-header,
body.pbs-funnel-chrome .pbs-reco-header,
body.pbs-funnel-chrome .pbs-funnel-footer,
body.pbs-funnel-chrome .pbs-reco-footer{ display:none !important; }

/* =============================================================================
   3. TRUST BAND — match /get-your-quote/ light chips (was a solid blue bar)
   ============================================================================= */
body.pbs-funnel-chrome .pbs-funnel-trustbar{ background:var(--fc-bg) !important; }
body.pbs-funnel-chrome .pbs-funnel-trustbar__inner{
  max-width:1180px !important; width:100% !important; margin:0 auto !important;
  padding:14px 20px 4px !important; display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:10px !important; box-sizing:border-box !important;
}
body.pbs-funnel-chrome .pbs-funnel-trustbar__inner span{
  display:flex !important; align-items:center !important; justify-content:center !important;
  min-height:38px !important; padding:8px 12px !important; text-align:center !important;
  background:#fff !important; border:1px solid var(--fc-border) !important; border-radius:999px !important;
  color:var(--fc-blue) !important; font-size:13px !important; line-height:1.2 !important; font-weight:700 !important;
}
body.pbs-funnel-chrome .pbs-funnel-trustbar__inner span::before{
  content:"\2713" !important; color:var(--fc-success) !important; font-weight:900 !important; margin-right:7px !important;
}

/* =============================================================================
   4. CANONICAL FOOTER  (identical to /get-your-quote/)
   ============================================================================= */
body.pbs-funnel-chrome footer.pbs-quote-footer{
  background:var(--fc-navy) !important; border-top:none !important; margin-top:8px !important;
  padding:0 16px 28px !important;
  font-family:var(--fc-font) !important;
}
body.pbs-funnel-chrome .pbs-quote-footer__inner{
  max-width:1180px !important; margin:0 auto !important; padding:22px 20px !important;
  display:flex !important; flex-wrap:wrap !important; align-items:center !important;
  justify-content:space-between !important; gap:10px !important; box-sizing:border-box !important;
}
body.pbs-funnel-chrome .pbs-quote-footer__brand{
  font-size:12px !important; line-height:1.5 !important; color:rgba(255,255,255,.72) !important; font-weight:600 !important;
}
body.pbs-funnel-chrome .pbs-quote-footer__links{ display:flex !important; flex-wrap:wrap !important; gap:8px 16px !important; justify-content:flex-end !important; }
body.pbs-funnel-chrome .pbs-quote-footer__links a{
  color:rgba(255,255,255,.86) !important; text-decoration:none !important;
  font-size:12px !important; line-height:1.5 !important; font-weight:600 !important;
}
body.pbs-funnel-chrome .pbs-quote-footer__links a:hover{ color:#fff !important; text-decoration:underline !important; }
/* the WooCommerce checkout template hides every <footer> (master CSS);
   re-show only the canonical funnel footer so the funnel still ends the same. */
body.pbs-funnel-chrome footer.pbs-quote-footer{ display:block !important; }

/* =============================================================================
   5. BASKET / CHECKOUT restyle → funnel design language
   ============================================================================= */
/* primary forward CTAs are the funnel ORANGE (was a mid blue) */
body.pbs-funnel-chrome .pbs-funnel-summary__btn,
body.pbs-funnel-chrome .pbs-upgrade-card__btn,
body.pbs-funnel-chrome .pbs-upgrade-card_btn:not(.pbs-upgrade-card_btn--selected),
body.pbs-funnel-chrome .pbs-upgrades-page .button,
body.pbs-funnel-chrome .pbs-funnel-page .button,
body.pbs-funnel-chrome #place_order,
body.pbs-funnel-chrome button.button.alt,
body.pbs-funnel-chrome .woocommerce-checkout #place_order,
body.pbs-funnel-chrome .wc-block-components-checkout-place-order-button{
  background:var(--fc-orange) !important;
  border-color:var(--fc-orange) !important;
  color:#fff !important;
  box-shadow:0 6px 16px rgba(247,148,29,.28) !important;
}
body.pbs-funnel-chrome .pbs-funnel-summary__btn:hover,
body.pbs-funnel-chrome .pbs-upgrade-card__btn:hover,
body.pbs-funnel-chrome .pbs-upgrades-page .button:hover,
body.pbs-funnel-chrome #place_order:hover,
body.pbs-funnel-chrome button.button.alt:hover,
body.pbs-funnel-chrome .woocommerce-checkout #place_order:hover{
  background:var(--fc-orange-h) !important; border-color:var(--fc-orange-h) !important;
}
/* keep the "Selected" state visually distinct (navy, not orange) */
body.pbs-funnel-chrome .pbs-upgrade-card_btn--selected,
body.pbs-funnel-chrome .pbs-upgrade-card__btn--selected{
  background:var(--fc-blue) !important; border-color:var(--fc-blue) !important; color:#fff !important;
  box-shadow:none !important;
}

/* =============================================================================
   6. MOBILE
   ============================================================================= */
@media (max-width:780px){
  body.pbs-funnel-chrome .pbs-qv2-hchip{ display:none !important; }
  body.pbs-funnel-chrome .pbs-quote-contact__phone.pbs-callbtn,
  body.pbs-funnel-chrome .pbs-quote-contact__phone{
    min-height:42px !important; font-size:14px !important; padding:0 16px !important;
  }
  body.pbs-funnel-chrome .pbs-funnel-trustbar__inner{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; padding:12px 14px 2px !important;
  }
  body.pbs-funnel-chrome .pbs-funnel-trustbar__inner span{ font-size:12px !important; min-height:34px !important; }
  body.pbs-funnel-chrome .pbs-quote-footer__inner{
    flex-direction:column !important; align-items:center !important; text-align:center !important;
  }
  body.pbs-funnel-chrome .pbs-quote-footer__links{ justify-content:center !important; }
  body.pbs-funnel-chrome footer.pbs-quote-footer{ padding:0 14px 24px !important; }
}