/* AJ Buddy — the offer dialog. Deliberately plain: it appears at a moment the
   visitor is trying to do something else, so it should read as a quick aside
   rather than a second website. */
.aj-buddy {
  position: fixed; inset: 0; z-index: 100000;
  /* Centred rather than top-anchored: the sheet is short, and pinned to the top
     it reads as a notification bar rather than something asking for an answer. */
  display: flex; align-items: center; justify-content: center;
  padding: 5vh 1rem;
  box-sizing: border-box;
}
.aj-buddy[hidden] { display: none; }
.aj-buddy__overlay { position: absolute; inset: 0; background: rgba(20, 32, 46, 0.55); }
.aj-buddy__sheet {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* The sheet is always a white panel, so it states its own ink rather than
     inheriting whatever the theme had going on where the footer markup sits. */
  background: #fff;
  color: #14202e;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 20px 60px rgba(20, 32, 46, 0.3);
}
@media (max-width: 600px) {
  .aj-buddy { padding: 0; }
  .aj-buddy__sheet { max-width: none; max-height: none; min-height: 100%; border-radius: 0; }
}
body.aj-buddy-open { overflow: hidden; }
.aj-buddy__x {
  position: absolute; top: 0.6rem; right: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0;
  border: 0; border-radius: 50%; background: none;
  font-size: 1.5rem; line-height: 1; cursor: pointer; color: #14202e;
}
.aj-buddy__x:hover, .aj-buddy__x:focus-visible { background: rgba(20, 32, 46, 0.07); color: #14202e; }
.aj-buddy__title { margin: 0 2rem 0.35rem 0; font-size: 1.25rem; line-height: 1.2; }
.aj-buddy__lede { margin: 0 0 0.75rem; opacity: 0.7; font-size: 0.92rem; }
.aj-buddy__field { display: block; margin-bottom: 0.7rem; }
.aj-buddy__field span { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.2rem; opacity: 0.85; }
.aj-buddy__field input,
.aj-buddy__field textarea {
  display: block; width: 100%; box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(20, 32, 46, 0.2); border-radius: 9px;
  /* 16px: anything smaller and iOS zooms the page when the field is focused. */
  font-size: 16px;
  font-family: inherit;
}
/* Off-screen *and* zero-sized: password managers and form fillers skip a field
   they can't lay out, and a filled honeypot silently bins the request. */
.aj-buddy__hp { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; pointer-events: none; }
.aj-buddy__actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.aj-buddy__btn {
  appearance: none; border: 1px solid rgba(20, 32, 46, 0.2);
  background: #fff; color: #14202e;
  padding: 0.7rem 1.1rem; border-radius: 9px; font: inherit; font-weight: 600; cursor: pointer;
}
.aj-buddy__btn--primary { background: var(--wp--preset--color--brand-blue, #0592ce); border-color: transparent; color: #fff; }
/* Hover states restate all three colours. A bare `button:hover` in the theme
   (0,1,1) outranks our plain `.aj-buddy__btn` (0,1,0), so anything left unsaid
   here gets repainted by the theme the moment the pointer lands. */
.aj-buddy__btn:hover,
.aj-buddy__btn:focus-visible { background: #eef1f4; color: #14202e; border-color: rgba(20, 32, 46, 0.35); }
.aj-buddy__btn--primary:hover,
.aj-buddy__btn--primary:focus-visible { background: #047cae; color: #fff; border-color: transparent; }
.aj-buddy__btn:disabled,
.aj-buddy__btn:disabled:hover { opacity: 0.6; cursor: default; }
.aj-buddy__msg:empty { display: none; }
.aj-buddy__msg { margin: 0.6rem 0 0; font-size: 0.9rem; }
.aj-buddy__fine { margin: 0.6rem 0 0; font-size: 0.8rem; opacity: 0.6; }
