.rtds-popover__panel {
    --_popover-bg:     var(--popover-bg,     var(--color-background-01, var(--color-neutral-50)));
    --_popover-border: var(--popover-border, var(--color-border-gray-01, var(--color-neutral-300)));
    --_popover-shadow: var(--popover-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
    --_popover-radius: var(--popover-radius, 0.375rem);
    --_popover-width:  var(--popover-width,  calc(var(--spacing-base) * 80));
    --_popover-arrow-size: var(--popover-arrow-size, var(--spacing-2-5, 0.625rem));

    background-color: var(--_popover-bg);
    border: 1px solid var(--_popover-border);
    border-radius: var(--_popover-radius);
    box-shadow: var(--_popover-shadow);
    width: var(--_popover-width);
    max-width: calc(100vw - var(--spacing-8));
    padding: var(--spacing-4);
    position: absolute;
    z-index: 100;
    margin: 0;
    overflow: visible;
  }
.rtds-popover__panel:popover-open {
    display: block;
  }
.rtds-popover__panel[hidden] {
    display: none;
  }
.rtds-popover__header {
    margin-block-end: var(--spacing-2);
  }
.rtds-popover__title {
    font-size: var(--fontsize-text-base);
    font-weight: 600;
    color: var(--color-content-01);
    margin: 0;
  }
.rtds-popover__body {
    color: var(--color-content-01);
    font-size: var(--fontsize-text-sm);
    outline: none;
  }
.rtds-popover__body:focus-visible {
    outline: 2px solid var(--color-content-primary);
    outline-offset: 2px;
  }
.rtds-popover__close {
    margin-block-start: var(--spacing-3);
    display: flex;
    margin-inline-start: auto;
  }
/* ================================
     Arrow
     ================================ */
.rtds-popover__arrow {
    position: absolute;
    width: var(--_popover-arrow-size);
    height: var(--_popover-arrow-size);
    background: var(--_popover-bg);
    border: 1px solid var(--_popover-border);
    pointer-events: none;
    z-index: -1;
  }
/* bottom: panel sotto il trigger → arrow sul bordo superiore, punta verso l'alto */
:where(.rtds-popover__panel[data-placement="bottom"]) .rtds-popover__arrow,
  :where(.rtds-popover__panel:not([data-placement])) .rtds-popover__arrow {
    top: calc(var(--_popover-arrow-size) / -2);
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    border-bottom-color: transparent;
    border-right-color: transparent;
  }
/* top: panel sopra il trigger → arrow sul bordo inferiore, punta verso il basso */
:where(.rtds-popover__panel[data-placement="top"]) .rtds-popover__arrow {
    bottom: calc(var(--_popover-arrow-size) / -2);
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    border-top-color: transparent;
    border-left-color: transparent;
  }
/* right: panel a destra del trigger → arrow sul bordo sinistro, punta verso sinistra */
:where(.rtds-popover__panel[data-placement="right"]) .rtds-popover__arrow {
    left: calc(var(--_popover-arrow-size) / -2);
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    border-top-color: transparent;
    border-right-color: transparent;
  }
/* left: panel a sinistra del trigger → arrow sul bordo destro, punta verso destra */
:where(.rtds-popover__panel[data-placement="left"]) .rtds-popover__arrow {
    right: calc(var(--_popover-arrow-size) / -2);
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    border-bottom-color: transparent;
    border-left-color: transparent;
  }