/* Green Belt CTA + comparison enhancements */

/* Contact icons: markup ships without the helper class, so target the img */
.floating-contact-button img,
.contact-icon-art {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Official brand colours */
.floating-contact-whatsapp { background: #25D366; border-color: rgba(255,255,255,.35); }
.floating-contact-whatsapp:hover,
.floating-contact-whatsapp:focus-visible { background: #1EBE5A; }
.floating-contact-phone { background: #0B6BCB; border-color: rgba(255,255,255,.35); }
.floating-contact-phone:hover,
.floating-contact-phone:focus-visible { background: #0A57A5; }

/* Mobile sticky bar */
.mobile-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
}
.mobile-cta .btn .gbx-ico {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  display: block;
  filter: brightness(0) invert(1);
}
.mobile-cta .js-whatsapp {
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #fff !important;
}
.mobile-cta .js-whatsapp:hover { background: #1EBE5A !important; border-color: #1EBE5A !important; }
.mobile-cta a[href^="tel:"] {
  background: #0B6BCB !important;
  border-color: #0B6BCB !important;
  color: #fff !important;
}
.mobile-cta a[href^="tel:"]:hover { background: #0A57A5 !important; border-color: #0A57A5 !important; }

/* Mobile nav actions */
.mobile-nav-actions .js-whatsapp {
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #fff !important;
}
.mobile-nav-actions .js-whatsapp .gbx-ico { filter: brightness(0) invert(1); }
.mobile-nav-actions a[href^="tel:"] {
  border-color: #0B6BCB !important;
  color: #0B6BCB !important;
}
.mobile-nav-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mobile-nav-actions .gbx-ico { width: 18px; height: 18px; flex: 0 0 18px; display: block; }

/* Comparison table: clickable rows */
.compare-table tbody tr.gbx-linked { cursor: pointer; transition: background .18s ease; }
.compare-table tbody tr.gbx-linked:hover,
.compare-table tbody tr.gbx-linked:focus-within { background: #F3EFE7; }
.compare-table a.gbx-project-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
}
.compare-table td.gbx-go { width: 1%; white-space: nowrap; text-align: center; }
.gbx-go-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--forest, #14352A);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.gbx-go-btn:hover { background: var(--carbon, #0A1628); transform: translateY(-1px); }

/* Comparison CTA reliability */
.compare-footer { flex-wrap: wrap; }
.compare-footer .btn { min-height: 50px; padding: 14px 26px; font-weight: 700; }
@media (max-width: 780px) {
  .compare-footer { flex-direction: column; align-items: stretch; text-align: center; }
  .compare-footer .btn { width: 100%; }
  .compare-table td.gbx-go { text-align: right; }
}

/* Floating compare button */
.floating-contact-compare {
  background: #B8860B;
  border-color: rgba(255,255,255,.35);
}
.floating-contact-compare:hover,
.floating-contact-compare:focus-visible { background: #966D09; }

/* gbx-mobile-compare: keep the compare button visible on phones.
   The theme hides the whole floating stack under 760px and shows the bottom bar
   instead. WhatsApp and phone already live in that bar, so on mobile we re-show
   the stack but keep only the compare button, floated just above the bar. */
@media (max-width: 760px) {
  .floating-contact-stack:has(.floating-contact-compare) {
    display: grid !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    z-index: 91;
  }
  .floating-contact-stack .floating-contact-whatsapp,
  .floating-contact-stack .floating-contact-phone { display: none !important; }
  .floating-contact-compare {
    width: 50px;
    height: 50px;
    box-shadow: 0 6px 18px rgba(10,22,40,.28);
  }
  .floating-contact-compare .floating-contact-tooltip { display: none; }
  /* Slide it away with the bottom bar so it never covers the footer. */
  .mobile-cta.is-hidden ~ .floating-contact-stack,
  body:has(.mobile-cta.is-hidden) .floating-contact-stack:has(.floating-contact-compare) {
    transform: translateY(150%);
    opacity: 0;
    pointer-events: none;
  }
  .floating-contact-stack:has(.floating-contact-compare) {
    transition: transform .28s ease, opacity .28s ease;
  }
}

/* gbx-fallback: class-based twin of the :has() rules above. */
@media (max-width: 760px) {
  .floating-contact-stack.has-gbx-compare {
    display: grid !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    z-index: 91;
    transition: transform .28s ease, opacity .28s ease;
  }
  .floating-contact-stack.has-gbx-compare.is-hidden {
    transform: translateY(150%);
    opacity: 0;
    pointer-events: none;
  }
}