/* ===== Click-to-Call button (bottom-left) — image + HTML number overlay ===== */
.aa-c2c {
  position: fixed !important;
  left: 18px;
  bottom: 86px;
  z-index: 99999;
  display: block !important;
  width: 300px;
  max-width: 74vw;
  aspect-ratio: 914 / 292;
  text-decoration: none !important;
  background-image: url("images/click-to-call-blank.png?v=8") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  filter: drop-shadow(0 6px 14px rgba(6,36,83,.22));
  container-type: inline-size;
}
/* the phone number, over the yellow "YOUR NUMBER" banner, matching template font */
.aa-c2c .aa-c2c-num {
  position: absolute;
  left: calc(58% + 7px);
  top: calc(68% + 5px);
  transform: translate(-50%, -50%);
  color:#111;
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 5.9cqw;
  letter-spacing: 1px;
  white-space: nowrap;
}
@media (max-width: 575px) {
  .aa-c2c { width: 250px; left: 10px; bottom: 70px; }
}

/* ===== TEXT US button, directly under the click-to-call number ============
   The call button is position:fixed. Wrapping both in .aa-c2c-stack moves
   the fixed positioning onto the wrapper, so the two sit together and the
   pair stays anchored bottom-left as one unit.
   The link is sms:+1...?&body=... — the "?&" form is what both iOS and
   Android accept for a pre-filled message. */
.aa-c2c-stack {
  position: fixed !important;
  left: 18px;
  bottom: 86px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
/* the call button is now positioned by the stack, not by itself */
.aa-c2c-stack .aa-c2c {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
}
.aa-c2c-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 300px;
  max-width: 74vw;
  box-sizing: border-box;
  justify-content: center;
  padding: 10px 14px;
  background:#0B2A5B;
  color:#D01A28 !important;
  -webkit-text-fill-color:#D01A28;
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 1px;
  text-decoration: none !important;
  border:2px solid #D01A28;
  border-radius: 10px;
  box-shadow:0 6px 14px rgba(6,36,83,.22);
  transition: background .15s ease, color .15s ease;
}
.aa-c2c-text:hover,
.aa-c2c-text:focus-visible {
  background:#D01A28;
  color:#0B2A5B !important;
  -webkit-text-fill-color:#0B2A5B;
}
.aa-c2c-text svg { width: 19px; height: 19px; flex: 0 0 19px; fill:currentColor; }

@media (max-width: 575px) {
  .aa-c2c-stack { left: 10px; bottom: 70px; }
  .aa-c2c-text  { width: 250px; font-size: 15px; padding: 9px 12px; }
}