/**
 * AJ Toaster — floating "buy me a beer" tab + slide-out panel.
 *
 * A warm amber tab pinned to the viewport edge, with a light brand-consistent
 * panel that slides out. Amber sets it apart as a distinct "tip jar" without
 * clashing with the blue toaster.
 */

.ajbt-root {
  --ajbt-amber: #e8a33d;
  --ajbt-ink: var(--wp--preset--color--ink, #14202e);
  --ajbt-paper: #ffffff;
  --ajbt-line: rgba(20, 32, 46, 0.12);
  position: fixed;
  /* Above the theme's sticky header/menu, which otherwise covers the top of the
     flyout on mobile. */
  z-index: 2147483000;
  transform: translateY(-50%);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.ajbt-root.ajbt-right { right: 0; }
.ajbt-root.ajbt-left { left: 0; }

/* Slide off-edge (used on mobile once the visitor scrolls into the page). */
.ajbt-root.is-hidden { opacity: 0; pointer-events: none; }
.ajbt-root.ajbt-right.is-hidden { transform: translateY(-50%) translateX(120%); }
.ajbt-root.ajbt-left.is-hidden { transform: translateY(-50%) translateX(-120%); }

/* ---- Tab (the edge nub) -------------------------------------------------- */
.ajbt-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 52px;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 6px 20px rgba(20, 32, 46, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* Lock appearance across every state so the theme's <button> styles can't turn
   the nub blue or resize it on hover/focus/active. */
.ajbt-tab,
.ajbt-tab:hover,
.ajbt-tab:focus,
.ajbt-tab:active {
  background: var(--ajbt-amber);
  color: #3a2400;
  border: 0;
}
/* The emoji has its own fixed size, independent of the button's font-size, so
   theme button styles can't shrink it. */
.ajbt-tab-ico { font-size: 24px; line-height: 1; }
.ajbt-right .ajbt-tab { border-radius: 12px 0 0 12px; transform-origin: right center; }
.ajbt-left .ajbt-tab { border-radius: 0 12px 12px 0; transform-origin: left center; }
/* Grow from the edge on hover — movement, but anchored to the edge so no gap
   opens up. No colour change (the darken read as mustard). */
.ajbt-tab:hover,
.ajbt-tab:focus-visible {
  transform: scale(1.12);
  box-shadow: 0 9px 26px rgba(20, 32, 46, 0.3);
}
.ajbt-tab:focus-visible { outline: 2px solid #b9781a; outline-offset: 2px; }

/* ---- Panel --------------------------------------------------------------- */
.ajbt-panel {
  position: absolute;
  top: 50%;
  width: 280px;
  max-width: calc(100vw - 72px);
  padding: 18px 18px 16px;
  background: var(--ajbt-paper);
  color: var(--ajbt-ink);
  border: 1px solid var(--ajbt-line);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(20, 32, 46, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  font-family: inherit;
  line-height: 1.4;
}
.ajbt-right .ajbt-panel {
  right: calc(100% + 10px);
  transform: translateY(-50%) translateX(14px);
}
.ajbt-left .ajbt-panel {
  left: calc(100% + 10px);
  transform: translateY(-50%) translateX(-14px);
}
.ajbt-root.is-open .ajbt-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.ajbt-emoji { font-size: 30px; line-height: 1; margin-bottom: 6px; }
.ajbt-heading { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--ajbt-ink); }
.ajbt-message { margin: 0 0 14px; font-size: 13px; color: rgba(20, 32, 46, 0.7); }

.ajbt-options { display: flex; flex-direction: column; gap: 8px; }
.ajbt-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--ajbt-amber);
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Lock the colour + no underline across every link state so the theme's
   a:hover (blue text / underline) can't touch it. */
.ajbt-opt,
.ajbt-opt:link,
.ajbt-opt:visited,
.ajbt-opt:hover,
.ajbt-opt:focus,
.ajbt-opt:active {
  color: #3a2400;
  text-decoration: none;
}
/* Movement, not colour: a small lift + shadow. The amber stays amber. */
.ajbt-opt:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(232, 163, 61, 0.45);
}
.ajbt-opt:active { transform: translateY(0); }
.ajbt-opt .ajbt-amount { font-weight: 700; }

/* ---- Close --------------------------------------------------------------- */
.ajbt-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  color: rgba(20, 32, 46, 0.4);
  font-size: 18px;
  line-height: 1;
  border-radius: 50%;
}
.ajbt-close:hover { background: var(--ajbt-line); color: var(--ajbt-ink); }

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width: 600px) {
  .ajbt-tab { width: 40px; height: 46px; }
  .ajbt-tab-ico { font-size: 21px; }
  .ajbt-panel { width: 250px; }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ajbt-panel, .ajbt-tab { transition: opacity 0.15s ease; }
  .ajbt-right .ajbt-panel, .ajbt-left .ajbt-panel { transform: translateY(-50%); }
  .ajbt-root.is-open .ajbt-panel { transform: translateY(-50%); }
  .ajbt-tab:hover, .ajbt-opt:hover { transform: none; }
}