/* =====================================================
   PLAYGOSPEL UI — DROPDOWN
   Markup:
   <div class="pgui-dropdown" data-pgui-dropdown>
     <button class="pgui-btn pgui-btn-secondary" data-pgui-dropdown-trigger
             aria-haspopup="listbox" aria-expanded="false">...</button>
     <div class="pgui-dropdown__menu" role="listbox">
       <button class="pgui-dropdown__item" role="option">Opção</button>
     </div>
   </div>
   ===================================================== */

.pgui-dropdown {
  position: relative;
  display: inline-block;
}

.pgui-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--pgui-bg-surface);
  border: 1px solid var(--pgui-border-strong);
  border-radius: var(--pgui-radius-md);
  box-shadow: var(--pgui-shadow-floating);
  padding: var(--pgui-space-8);
  z-index: var(--pgui-z-dropdown);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--pgui-transition-fast), transform var(--pgui-transition-fast);
}

.pgui-dropdown.is-open .pgui-dropdown__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pgui-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--pgui-space-8);
  width: 100%;
  padding: var(--pgui-space-8) var(--pgui-space-12);
  border-radius: var(--pgui-radius-sm);
  text-align: left;
  color: var(--pgui-text-primary);
  font-size: var(--pgui-fs-small);
}

.pgui-dropdown__item:hover,
.pgui-dropdown__item:focus-visible {
  background: rgba(255, 255, 255, .06);
}