/* ab_popup.css
 * Contenitore popover headless.
 * L'interno può usare classi Framework7 (list/item-content/...) e quindi viene stilato da F7.
 */

.ab-popover {
  position: fixed;
  z-index: 9999;

  /* dimensioni conservative (puoi cambiare) */
  min-width: 220px;
  max-width: min(380px, calc(100vw - 24px));

  /* look neutro (se vuoi identico a F7 puoi allineare i colori alle sue var) */
  background: var(--ab-surface, #fff);
  color: var(--ab-text, #111);
  border-radius: 0px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);

  display: none;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition:
    transform 0.12s ease,
    opacity 0.12s ease;
}

.ab-popover.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ab-popover-angle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--ab-surface, #fff);
  transform: rotate(45deg);
  box-shadow: -6px -6px 14px rgba(0, 0, 0, 0.06);
}

/* Placement modifiers: la freccia si piazza sul bordo giusto */
.ab-popover--bottom .ab-popover-angle {
  top: -7px;
}

.ab-popover--top .ab-popover-angle {
  bottom: -7px;
  box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.06);
}

.ab-popover--left .ab-popover-angle {
  right: -7px;
}

.ab-popover--right .ab-popover-angle {
  left: -7px;
}

/* ------------------------------------------------ */
/* un po' di grafica compatta per l'interno popover */
.ab-popover {overflow: visible;}
/* .ab-popover .item-content {
  padding: 0px;
} */
.ab-popover .list .item-media,
.ab-popover .list .item-inner {
  margin: 0px;
  padding: 0px;
  padding-right: 8px;
}