/* ==========================================================================
   BCG Energy — contact architecture
   --------------------------------------------------------------------------
   A visitor shopping for a R40k–R150k solar system arrives in one of three
   states, and each wants a different door:

     researching  -> not ready to talk; will read, then leave and come back
     has a doubt  -> WhatsApp. Asynchronous, low commitment, no salesman.
                     In SA this is the default channel, and it is the one a
                     nervous buyer reaches for first.
     ready / hot  -> Call. Wants a number and a date from a human, now.
     after hours  -> Form. Browsing at 22:00, wants to be called back.

   So all three doors stay open on every screen, and none is buried. Before
   this, Call and WhatsApp appeared three times each while the form — the
   action that actually captures the lead and fires the Ads conversion — had
   no persistent affordance at all. You had to scroll three screens to find it.

   Mobile  : one bottom bar in the thumb arc. Call on the far left, WhatsApp
             on the far right (opposite one another, as asked), quote between.
   Desktop : sticky header carries the numbers and the form CTA; the floating
             Call / WhatsApp pair keeps the bottom corners.

   Styles for both live here rather than inline in five files, so the next
   change to any of it is one edit.
   ========================================================================== */

:root{
  --ab-orange:#f7941d;
  --ab-orange-deep:#d97b0d;
  --ab-green:#25d366;
  --ab-green-ink:#128c7e;
  --ab-ink:#14201a;
}

/* --------------------------------------------------------------------------
   Bottom action bar — mobile only
   -------------------------------------------------------------------------- */
.action-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9998;
  display:none;
  padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(0,0,0,.09);
  box-shadow:0 -6px 22px rgba(0,0,0,.13);
}

.action-bar-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.ab{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-height:56px;
  padding:7px 4px;
  border-radius:13px;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,filter .12s ease;
}
.ab:active{transform:scale(.97)}
.ab:focus-visible{outline:3px solid var(--ab-ink);outline-offset:2px}
.ab-kicker{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:.57rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  opacity:.85;
}
.ab-kicker svg{width:12px;height:12px;flex:none;fill:currentColor}
.ab-main{
  font-size:.83rem;
  font-weight:800;
  letter-spacing:-.01em;
  white-space:nowrap;
}

/* Dark for the number so it reads at a glance and is easy to copy down,
   orange for the form to match the Submit button it leads to, WhatsApp
   green because that colour is doing the work of a label. */
.ab-call{background:var(--ab-ink);color:#fff}
.ab-wa{background:var(--ab-green);color:#0b2e20}

@media (max-width:768px){
  .action-bar{display:block}
  body{padding-bottom:116px}
}
@media (max-width:340px){
  .ab-main{font-size:.75rem}
  .ab-kicker{font-size:.53rem}
  .action-bar-row{gap:5px}
}

/* --------------------------------------------------------------------------
   Floating Call / WhatsApp pair — desktop only
   The bar covers small screens; two pills in opposite corners keep the same
   idea where there is room for a label.
   -------------------------------------------------------------------------- */
.wa-fab,
.call-fab{
  position:fixed;
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  z-index:9999;
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:56px;
  padding:0 20px 0 16px;
  border-radius:28px;
  font:700 15px/1 inherit;
  font-family:inherit;
  text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease,box-shadow .15s ease;
}
.wa-fab{right:16px;background:var(--ab-green);color:#0b2e20}
.call-fab{left:16px;background:var(--ab-ink);color:#fff}
.wa-fab:hover,.wa-fab:focus-visible{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.34);color:#0b2e20}
.call-fab:hover,.call-fab:focus-visible{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.34);color:#fff}
.wa-fab:focus-visible,.call-fab:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wa-fab svg,.call-fab svg{width:28px;height:28px;flex:none;fill:currentColor}

@media (max-width:768px){
  .wa-fab,.call-fab{display:none}
}

/* --------------------------------------------------------------------------
   "Rather not fill in a form?" — beside the form itself
   Seven fields is a wall for someone who is ready now and just wants a price.
   Giving them the two fast lanes at the moment they hit the wall keeps them
   from bouncing instead of converting.
   -------------------------------------------------------------------------- */
.talk-instead{
  margin-top:22px;
  padding:18px 20px;
  border:1px solid rgba(20,32,26,.12);
  border-radius:16px;
  background:rgba(20,32,26,.03);
}
.talk-instead h3{
  margin:0 0 4px;
  font-size:1rem;
  font-weight:800;
  letter-spacing:-.015em;
}
/* Inherit rather than fix a grey: this block sits on the hub's near-black
   panel and on the product pages' white card, and a single hard-coded colour
   is unreadable on one of them. */
.talk-instead p{margin:0 0 14px;font-size:.88rem;color:inherit;opacity:.75;line-height:1.45}
.talk-instead-row{display:flex;flex-wrap:wrap;gap:9px}
.talk-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex:1 1 165px;
  min-height:48px;
  padding:12px 16px;
  border-radius:12px;
  font-size:.93rem;
  font-weight:800;
  text-decoration:none;
  transition:transform .12s ease,filter .15s ease;
}
.talk-btn svg{width:17px;height:17px;flex:none;fill:currentColor}
.talk-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.talk-btn.call{background:var(--ab-ink);color:#fff}
.talk-btn.wa{background:var(--ab-green);color:#0b2e20}

/* On the dark panel an ink button is invisible, so it flips to white. */
.talk-instead--on-dark{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
.talk-instead--on-dark .talk-btn.call{background:#fff;color:#14201a}

@media (prefers-reduced-motion:reduce){
  .ab,.wa-fab,.call-fab,.talk-btn{transition:none}
  .ab:active,.talk-btn:hover,.wa-fab:hover,.call-fab:hover{transform:none}
}