/* ==========================================================================
   Overrides loaded after the main stylesheet.

   The main CSS is embedded inside assets.php, which cannot be edited by hand.
   Anything new goes here instead — it is a plain root-level file, so it uploads
   reliably and takes effect immediately.
   ========================================================================== */

/* --------------------------------------------------------------------------
   NAVBAR FIT

   The nav is one flex row where nothing is allowed to wrap: logo, six links,
   the phone and the CTA. Adding the phone pushed the total past the container
   width, so the CTA broke out of the white pill on the right, and the logo got
   squeezed into the rounded left corner.

   Fixed-width breakpoints alone were too brittle here — the row overflows
   anywhere between roughly 1150px and 1400px. So the link padding is fluid
   instead: it scales with the viewport and simply cannot push the row past its
   container. Breakpoints then only handle the two things that must be dropped
   rather than shrunk.
   -------------------------------------------------------------------------- */
.bt-nav { flex-wrap: nowrap; min-width: 0; }

/* NOTE: the .bt-navtel rules now live inline in includes/header.php, next to
   the markup. They were here and in style.css, and on the live site neither
   was reaching the browser — the number rendered unstyled, wrapping onto two
   lines and staying visible on phones. Inline is the one place that cannot go
   stale, so that is where they belong. Do not re-add them here. */

/* The pill's rounded corner ate into the logo. Give it room to clear the curve. */
@media (min-width: 992px) {
  .bt-nav      { padding-left: 2.1rem; }
  .bt-logo     { margin-right: .25rem; }
  .bt-logo img { max-width: none; }
}

/* Fluid link padding — wide and airy on a large screen, tight on a small one,
   with no jump at any point in between. */
@media (min-width: 992px) {
  .bt-menu          { margin-left: clamp(.4rem, 1vw, 1.25rem); min-width: 0; }
  .bt-menu > li > a { padding: .6rem clamp(.42rem, 1.05vw, .95rem); }
  .bt-cta           { padding: .8rem clamp(1rem, 1.5vw, 1.4rem); }
}

/* Tightest desktop band: the CTA arrow is decoration, so it goes first */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .bt-nav     { padding-left: 1.5rem; gap: .5rem; }
  .bt-cta svg { display: none; }
}

/* Below lg the menu and CTA collapse into the burger panel anyway */

/* The call button inside the mobile burger panel */
.bt-mobile .bt-cta[href^="tel:"] { gap: .5rem; white-space: nowrap; }
.bt-mobile .bt-cta[href^="tel:"] svg { color: var(--bt-red, #EA0000); flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Phone row in the footer and on the contact page
   -------------------------------------------------------------------------- */
.bt-footer__contact a[href^="tel:"],
.bt-infolist a[href^="tel:"] {
  white-space: nowrap;
}

/* Make the number tappable rather than a hairline target on phones */
@media (max-width: 575.98px) {
  .bt-footer__contact a[href^="tel:"],
  .bt-infolist a[href^="tel:"] {
    display: inline-block;
    padding: .15rem 0;
  }
}

/* --------------------------------------------------------------------------
   SERVICE IMAGES

   .bt-srow__media is normally a flat colour panel with the tagline centred on
   it. When a service has an image uploaded in the CMS, the image fills that
   same panel and the tagline sits on top.

   A photo can be light anywhere, so the text needs its own scrim rather than
   relying on the image being dark. The gradient is bottom-weighted, which is
   also where the tagline and tags sit.
   -------------------------------------------------------------------------- */
/* The row centres its two columns, which left the panel as a short box with
   dead space above and below it. With an image the panel instead fills the
   whole row; the text column keeps its centred look by centring its own
   contents rather than itself.

   Bounded at 768px because below that the row is a single column and the panel
   is deliberately short — a 340px block above the text on a phone is just a
   wall to scroll past. */
@media (min-width: 768px) {
  .bt-srow.has-media { align-items: stretch; }
  .bt-srow.has-media > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .bt-srow.has-media .bt-srow__media {
    height: 100%;
    min-height: clamp(340px, 33vw, 500px);
  }
}

.bt-srow__media.has-img { padding: 1.75rem; align-items: end; }

.bt-srow__media.has-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.bt-srow:hover .bt-srow__media.has-img > img { transform: scale(1.04); }

/* Scrim sits above the image, below the text. Also overrides the diagonal
   hatch that the plain panel uses, which reads as noise over a photo. */
.bt-srow__media.has-img::after {
  background-image: linear-gradient(
    to top,
    rgba(4, 10, 40, .82) 0%,
    rgba(4, 10, 40, .55) 34%,
    rgba(4, 10, 40, .12) 68%,
    rgba(4, 10, 40, .04) 100%
  );
  z-index: 1;
}
.bt-srow__media.has-img span  { z-index: 2; text-align: left; }
.bt-srow__media.has-img .bt-srow__stack { justify-content: flex-start; }
.bt-srow__media.has-img .bt-srow__stack li {
  background: rgba(255, 255, 255, .22);
  backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: reduce) {
  .bt-srow__media.has-img > img { transition: none; }
  .bt-srow:hover .bt-srow__media.has-img > img { transform: none; }
}

/* --------------------------------------------------------------------------
   FLOATING CHAT — WhatsApp + Tawk.to live chat
   Tawk's own bubble is hidden; this is the button visitors actually see, so it
   carries the brand blue and red rather than Tawk's stock green.
   -------------------------------------------------------------------------- */
.bt-chat {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1045;              /* under Bootstrap modals (1055), over everything else */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
  font-family: var(--bt-font-body, "Inter", system-ui, sans-serif);
}

/* While the real Tawk window is open, our launcher steps aside */
.bt-chat.is-hidden { opacity: 0; pointer-events: none; transform: scale(.9); }

/* Stock-bubble mode: Tawk sits bottom-left, our WhatsApp button keeps the
   bottom-right, so the two never overlap. */
.bt-chat__launch--wa { background: #25D366; box-shadow: 0 10px 28px rgba(37, 211, 102, .38), 0 2px 6px rgba(0, 0, 0, .12); }
.bt-chat__launch--wa:hover { box-shadow: 0 16px 34px rgba(37, 211, 102, .46); }

/* ---- launcher button ---- */
.bt-chat__launch {
  position: relative;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: var(--bt-blue, #001E96);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 30, 150, .34), 0 2px 6px rgba(0, 0, 0, .12);
  transition: transform .3s cubic-bezier(.34, 1.4, .64, 1),
              background .3s ease, box-shadow .3s ease;
}
.bt-chat__launch:hover  { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 34px rgba(0, 30, 150, .42); }
.bt-chat__launch:active { transform: translateY(0) scale(.97); }
.bt-chat__launch:focus-visible { outline: 3px solid var(--bt-red, #EA0000); outline-offset: 3px; }

.bt-chat__launch-open,
.bt-chat__launch-close {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition: opacity .22s ease, transform .28s cubic-bezier(.4, 0, .2, 1);
}
.bt-chat__launch-close { opacity: 0; transform: rotate(-90deg) scale(.7); }
.bt-chat.is-open .bt-chat__launch       { background: var(--bt-ink, #0A0A0F); }
.bt-chat.is-open .bt-chat__launch-open  { opacity: 0; transform: rotate(90deg) scale(.7); }
.bt-chat.is-open .bt-chat__launch-close { opacity: 1; transform: none; }

/* Attention dot after a while on the visitor's first page */
.bt-chat__dot {
  position: absolute;
  top: 3px; right: 3px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--bt-red, #EA0000);
  border: 2.5px solid #fff;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.5, .64, 1);
}
.bt-chat.has-dot .bt-chat__dot { opacity: 1; transform: none; }
.bt-chat.has-dot .bt-chat__launch { animation: btChatNudge 2.6s ease-in-out 3; }

@keyframes btChatNudge {
  0%, 70%, 100% { transform: none; }
  76% { transform: rotate(-9deg); }
  82% { transform: rotate(7deg); }
  88% { transform: rotate(-4deg); }
}

/* ---- panel ---- */
.bt-chat__panel {
  width: min(340px, calc(100vw - 48px));
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(10, 10, 15, .07);
  box-shadow: 0 24px 60px rgba(10, 10, 25, .18), 0 4px 14px rgba(10, 10, 25, .07);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .24s ease, transform .28s cubic-bezier(.34, 1.24, .64, 1);
}
.bt-chat.is-open .bt-chat__panel { opacity: 1; transform: none; }

.bt-chat__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.05rem;
  background: linear-gradient(118deg, var(--bt-blue, #001E96) 0%, #0B2FC4 78%);
  color: #fff;
  position: relative;
}
/* red accent hairline, echoing the logo */
.bt-chat__head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bt-red, #EA0000) 0%, rgba(234, 0, 0, 0) 62%);
}
.bt-chat__avatar {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  display: grid; place-items: center;
  font-family: var(--bt-font-head, "Poppins", sans-serif);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .02em;
}
.bt-chat__title {
  margin: 0;
  font-family: var(--bt-font-head, "Poppins", sans-serif);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
}
.bt-chat__status {
  margin: .15rem 0 0;
  font-size: .74rem;
  color: rgba(255, 255, 255, .78);
  display: flex; align-items: center; gap: .35rem;
}
.bt-chat__status i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2BD97C;
  box-shadow: 0 0 0 0 rgba(43, 217, 124, .7);
  animation: btChatPulse 2.2s infinite;
}
@keyframes btChatPulse {
  70%  { box-shadow: 0 0 0 7px rgba(43, 217, 124, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 217, 124, 0); }
}
.bt-chat__x {
  margin-left: auto;
  width: 28px; height: 28px;
  border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .22s ease;
}
.bt-chat__x:hover { background: rgba(255, 255, 255, .26); }

.bt-chat__body { padding: 1.05rem; }
.bt-chat__greet {
  margin: 0 0 .9rem;
  font-family: var(--bt-font-head, "Poppins", sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--bt-ink, #0A0A0F);
  line-height: 1.35;
}
.bt-chat__label {
  margin: 0 0 .5rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7A7A8C;
}

/* ---- quick questions ---- */
.bt-chat__qs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.bt-chat__q {
  border: 1px solid rgba(0, 30, 150, .16);
  background: rgba(0, 30, 150, .04);
  color: var(--bt-blue, #001E96);
  border-radius: 999px;
  padding: .42rem .78rem;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}
.bt-chat__q:hover {
  background: var(--bt-blue, #001E96);
  border-color: var(--bt-blue, #001E96);
  color: #fff;
  transform: translateY(-1px);
}
.bt-chat__q.is-on {
  background: var(--bt-red, #EA0000);
  border-color: var(--bt-red, #EA0000);
  color: #fff;
}

/* ---- action rows ---- */
.bt-chat__actions { display: grid; gap: .45rem; }
.bt-chat__go {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .62rem .7rem;
  border: 1px solid rgba(10, 10, 15, .09);
  border-radius: 13px;
  background: #fff;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .22s ease, background .22s ease, transform .22s ease;
}
.bt-chat__go:hover { transform: translateX(2px); background: #FAFAFC; }
.bt-chat__go > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.bt-chat__go strong {
  font-family: var(--bt-font-head, "Poppins", sans-serif);
  font-size: .86rem;
  font-weight: 600;
  color: var(--bt-ink, #0A0A0F);
  line-height: 1.25;
}
.bt-chat__go span span,
.bt-chat__go > span:last-child > span {
  font-size: .74rem;
  color: #7A7A8C;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bt-chat__go-ic {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  color: #fff;
}
.bt-chat__go--live .bt-chat__go-ic { background: var(--bt-blue, #001E96); }
.bt-chat__go--wa   .bt-chat__go-ic { background: #25D366; }
.bt-chat__go--mail .bt-chat__go-ic { background: var(--bt-red, #EA0000); }

.bt-chat__go--live:hover { border-color: rgba(0, 30, 150, .3); }
.bt-chat__go--wa:hover   { border-color: rgba(37, 211, 102, .45); }
.bt-chat__go--mail:hover { border-color: rgba(234, 0, 0, .3); }

.bt-chat__foot {
  margin: .9rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid rgba(10, 10, 15, .07);
  font-size: .76rem;
  color: #7A7A8C;
}
.bt-chat__link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--bt-blue, #001E96);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.bt-chat__link:hover { color: var(--bt-red, #EA0000); }

/* ---- phones ---- */
@media (max-width: 575.98px) {
  .bt-chat { right: 16px; bottom: 16px; gap: .6rem; }
  .bt-chat__launch { width: 54px; height: 54px; }
  .bt-chat__panel  { width: calc(100vw - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .bt-chat *, .bt-chat { animation: none !important; transition-duration: .01ms !important; }
}