/*!
 * Overbeauty Pets — stylesheet
 * The stage never intercepts pointer events; only the pet's own hit area and
 * its little toolbar do.
 */

.obpets-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9990;
  contain: layout style;
}

/* A second stage painted behind the page's block backgrounds, so the pet can
   genuinely walk behind a card and reappear on the far side. Only used for
   brief, deliberate moves — the pet always returns to the front layer. */
.obpets-stage--back {
  z-index: -1;
}

/* Stay out of the way of modals, offcanvas panels and print. */
body.modal-open .obpets-stage,
body.offcanvas-open .obpets-stage,
body.obpets-quiet .obpets-stage { display: none; }

@media print { .obpets-stage { display: none !important; } }

.obpets-pet {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  will-change: transform;
}

.obpets-svg {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  shape-rendering: geometricPrecision;
  /* Themes ship Bootstrap's reboot, which includes `img, svg { max-width: 100% }`.
     The pet's wrapper is a deliberately zero-sized anchor point, so that rule
     resolves to max-width: 0 and the whole animal collapses out of sight —
     leaving only the speech bubble, which is a plain div. Same story for the
     scoped `svg { width: 1.25rem }` icon rules. Neutralise all of it. */
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  vertical-align: baseline !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  filter: none !important;
}

.obpets-hit {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -91%);
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.obpets-hit:focus-visible {
  outline: 2px solid #6d1f19;
  outline-offset: 3px;
}

/* ---------- speech bubble ---------- */

.obpets-bubble {
  position: absolute;
  left: 0;
  bottom: calc(var(--obp-size, 66px) + 16px);
  transform: translate(-50%, 6px) scale(.86);
  transform-origin: 50% 100%;
  /* The wrapper is a zero-width anchor point, so a percentage max-width would
     collapse to nothing and the browser would wrap on every word. Size the
     bubble to its own content instead and cap it in absolute units. */
  width: max-content;
  max-width: min(300px, 74vw);
  min-width: 66px;
  padding: 8px 13px 9px;
  border-radius: 14px;
  background: #fffdfa;
  border: 2px solid #4a3129;
  box-shadow: 0 6px 16px rgba(74, 49, 41, .18);
  color: #3b2721;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 600;
  text-align: center;
  direction: rtl;
  white-space: normal;
  word-break: break-word;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1), visibility .18s;
}

.obpets-bubble::after,
.obpets-bubble::before {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid #4a3129;
}
.obpets-bubble::after {
  bottom: -6px;
  border-top-color: #fffdfa;
}

.obpets-bubble[data-edge="start"] { transform: translate(-22%, 6px) scale(.86); }
.obpets-bubble[data-edge="start"]::before,
.obpets-bubble[data-edge="start"]::after { left: 22%; }
.obpets-bubble[data-edge="end"] { transform: translate(-78%, 6px) scale(.86); }
.obpets-bubble[data-edge="end"]::before,
.obpets-bubble[data-edge="end"]::after { left: 78%; }

.obpets-pet.is-talking .obpets-bubble {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}
.obpets-pet.is-talking .obpets-bubble[data-edge="start"] { transform: translate(-22%, 0) scale(1); }
.obpets-pet.is-talking .obpets-bubble[data-edge="end"] { transform: translate(-78%, 0) scale(1); }

/* ---------- the choice bubble ---------- */

.obpets-ask {
  position: absolute;
  left: 0;
  bottom: calc(var(--obp-size, 66px) + 16px);
  transform: translate(-50%, 8px) scale(.9);
  transform-origin: 50% 100%;
  width: 236px;
  padding: 12px 14px 13px;
  border-radius: 16px;
  background: #fffdfa;
  border: 2px solid #4a3129;
  box-shadow: 0 10px 26px rgba(74, 49, 41, .22);
  color: #3b2721;
  font-family: inherit;
  direction: rtl;
  text-align: center;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .26s cubic-bezier(.34, 1.56, .64, 1), visibility .2s;
}
.obpets-pet.is-asking .obpets-ask {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}
.obpets-ask::after,
.obpets-ask::before {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid #4a3129;
}
.obpets-ask::after { bottom: -6px; border-top-color: #fffdfa; }

.obpets-ask p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.75;
  font-weight: 700;
}
.obpets-ask .obpets-ask-row {
  display: flex;
  gap: 8px;
}
.obpets-ask button {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  border-radius: 10px;
  border: 2px solid #e0cfc6;
  background: #fff;
  color: #3b2721;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.obpets-ask button:hover { background: #f7efe9; border-color: #6d1f19; transform: translateY(-1px); }
.obpets-ask button b { font-size: 16px; font-weight: 400; line-height: 1; }
.obpets-ask .obpets-ask-close {
  margin-top: 8px;
  display: block;
  width: 100%;
  padding: 4px;
  border: 0;
  background: none;
  color: #9a8478;
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.obpets-ask .obpets-ask-close:hover { color: #6d1f19; text-decoration: underline; }

/* ---------- hover toolbar ---------- */

.obpets-tools {
  position: absolute;
  left: 0;
  bottom: calc(var(--obp-size, 66px) + 2px);
  transform: translate(-50%, 4px);
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 253, 250, .96);
  border: 1.5px solid #e0cfc6;
  box-shadow: 0 4px 12px rgba(74, 49, 41, .16);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.obpets-pet.is-tools .obpets-tools {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* Invisible bridge down to the pet, so the pointer never crosses dead space
   on its way to the buttons and the toolbar does not vanish mid-reach. */
.obpets-tools::after {
  content: "";
  position: absolute;
  left: -14px;
  right: -14px;
  top: 100%;
  height: 26px;
}
.obpets-pet.is-talking .obpets-tools,
.obpets-pet.is-asking .obpets-tools { opacity: 0; visibility: hidden; pointer-events: none; }

.obpets-tools button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background .14s, transform .14s;
}
.obpets-tools button:hover { background: #f2e7e0; transform: scale(1.12); }
.obpets-tools button[data-obp="off"] { color: #9a8478; font-size: 12px; }

/* ---------- puff ---------- */

.obpets-puff {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.obpets-puff i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #f4ece4;
  border: 2px solid #cbb6a6;
  opacity: .95;
  animation: obpets-puff .62s cubic-bezier(.22, .9, .3, 1) forwards;
}
@keyframes obpets-puff {
  0%   { transform: translate(-50%, -50%) scale(.2); opacity: .95; }
  60%  { opacity: .8; }
  100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
}

/* ---------- recall button ---------- */

.obpets-recall {
  position: fixed;
  inset-inline-end: 14px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #e0cfc6;
  background: #fffdfa;
  box-shadow: 0 4px 12px rgba(74, 49, 41, .18);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  z-index: 9989;
  opacity: .72;
  transition: opacity .16s, transform .16s;
}
.obpets-recall:hover { opacity: 1; transform: scale(1.08); }

/* ---------- courtesies paid to page elements ---------- */

.obpets-nudge-tip { animation: obpets-tip 1.05s cubic-bezier(.36, .07, .19, .97) 1; }
@keyframes obpets-tip {
  0%, 100% { transform: rotate(0) translateY(0); }
  18% { transform: rotate(-1.6deg) translateY(1px); }
  40% { transform: rotate(2deg) translateY(4px); }
  62% { transform: rotate(-1.1deg) translateY(1px); }
  82% { transform: rotate(.5deg); }
}

.obpets-nudge-lift { animation: obpets-lift .85s ease 1; }
@keyframes obpets-lift {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-6px) scale(1.022); }
}

.obpets-nudge-pulse { animation: obpets-pulse 1.25s ease 1; }
@keyframes obpets-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(109, 31, 25, .38); }
  55%  { box-shadow: 0 0 0 10px rgba(109, 31, 25, 0); }
  100% { box-shadow: 0 0 0 0 rgba(109, 31, 25, 0); }
}

.obpets-nudge-press { animation: obpets-press .55s ease 1; }
@keyframes obpets-press {
  0%, 100% { transform: translateY(0) scale(1); }
  35%, 65% { transform: translateY(2px) scale(.985); }
}

.obpets-nudge-wiggle { animation: obpets-wiggle .6s ease 1; }
@keyframes obpets-wiggle {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .obpets-stage, .obpets-recall { display: none !important; }
  .obpets-nudge-tip, .obpets-nudge-lift, .obpets-nudge-pulse, .obpets-nudge-wiggle { animation: none !important; }
}