/* =========================================================================
   ds-dropdown.css — Pattern dropdown brand-coerente
   ─────────────────────────────────────────────────────────────────────────
   Riferimento: brief sess.34 + memo feedback_button_family3_convergence
   Scope: mobile-only <1099.98px (gating body.ds-vp-app + @media max-width)
   Pattern target: DMX modal WORKING MODE — pill list dark card filled-active

   Convenzioni rispettate:
   - feedback_mobile_touch_universal_overrides: min-height 44px sui touch
   - feedback_css_cascade_order_trap: dark .is-active regole esplicite
   - feedback_sticky_hover_ios: :hover gated in @media (hover: hover)
   - feedback_mobile_css_bleed_audit: body.ds-vp-app + @media bounded
   sess.39: esteso a 1399.98 per coprire compact-narrow (1100-1399 touch).
   ========================================================================= */

@media (max-width: 1399.98px){
  /* ── TRIGGER (pill outline gold famiglia 3 Pattern A toggle) ─────────── */
  body.ds-vp-app .ds-dropdown-trigger{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 1px solid rgba(244,181,50,.45);
    border-radius: 999px;
    padding: 0 14px;
    min-height: 44px; /* universal touch target — _mobile-touch.css contract */
    height: 44px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(0,0,0,.82);
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    white-space: nowrap;
  }
  body.ds-vp-app .ds-dropdown-trigger:active{
    background: rgba(244,181,50,.12);
    transform: scale(.97);
  }
  body.ds-vp-app .ds-dropdown-trigger[aria-expanded="true"]{
    background: rgba(244,181,50,.16);
    border-color: rgba(244,181,50,.85);
  }

  body.ds-vp-app .ds-dropdown-label{
    opacity: .68;
    font-weight: 500;
    margin-right: 2px;
  }
  body.ds-vp-app .ds-dropdown-value{
    font-weight: 600;
  }
  body.ds-vp-app .ds-dropdown-caret{
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #F4B532;
    margin-left: 4px;
    transition: transform 200ms ease;
    flex: 0 0 auto;
  }
  body.ds-vp-app .ds-dropdown-trigger[aria-expanded="true"] .ds-dropdown-caret{
    transform: rotate(180deg);
  }

  /* ── PANEL (dark glass card riferimento DMX modal) ───────────────────── */
  body.ds-vp-app .ds-dropdown-panel{
    position: fixed;
    z-index: 9999;
    min-width: 160px;
    max-width: calc(100vw - 16px);
    background: rgba(20,18,15,.85);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 12px 36px rgba(0,0,0,.45);
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateY(-4px) scale(.98);
    transform-origin: top center;
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
    box-sizing: border-box;
  }
  body.ds-vp-app .ds-dropdown-panel[data-position="above"]{
    transform: translateY(4px) scale(.98);
    transform-origin: bottom center;
  }
  body.ds-vp-app .ds-dropdown-panel.is-open{
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  /* ── OPTION pill (outline gold ultra-subtle inactive, filled active) ── */
  body.ds-vp-app .ds-dropdown-option{
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid rgba(244,181,50,.30);
    border-radius: 999px;
    padding: 0 18px;
    min-height: 44px; /* universal touch target */
    height: 44px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255,255,255,.88);
    cursor: pointer;
    text-align: center;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
  }
  body.ds-vp-app .ds-dropdown-option:active{
    background: rgba(244,181,50,.16);
  }
  body.ds-vp-app .ds-dropdown-option.is-active{
    background: #F4B532;
    border-color: #C9A800;
    color: #111;
  }
  body.ds-vp-app .ds-dropdown-option[aria-disabled="true"]{
    opacity: .45;
    pointer-events: none;
  }
  body.ds-vp-app .ds-dropdown-option:focus-visible{
    outline: 2px solid #F4B532;
    outline-offset: 2px;
  }

  /* ── DARK MODE explicit (cascade-order-trap rule) ────────────────────── */
  body.ds-dark.ds-vp-app .ds-dropdown-trigger{
    color: rgba(255,255,255,.88);
    border-color: rgba(244,181,50,.45);
  }
  body.ds-dark.ds-vp-app .ds-dropdown-trigger[aria-expanded="true"]{
    background: rgba(244,181,50,.16);
    border-color: rgba(244,181,50,.85);
  }
  body.ds-dark.ds-vp-app .ds-dropdown-trigger.is-active,
  body.ds-dark.ds-vp-app .ds-dropdown-option.is-active{
    background: #F4B532;
    border-color: #C9A800;
    color: #111;
  }

  /* ── LIGHT MODE: il panel rimane scuro per parity con DMX modal target.
        Se in futuro serve light panel, scrivere override esplicito qui.  */
}

/* ── HOVER gated — feedback_sticky_hover_ios ─────────────────────────── */
@media (hover: hover) and (max-width: 1099.98px){
  body.ds-vp-app .ds-dropdown-trigger:hover{
    background: rgba(244,181,50,.16);
    border-color: rgba(244,181,50,.65);
  }
  body.ds-vp-app .ds-dropdown-option:hover:not(.is-active){
    background: rgba(244,181,50,.18);
    border-color: rgba(244,181,50,.65);
  }
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  body.ds-vp-app .ds-dropdown-panel,
  body.ds-vp-app .ds-dropdown-caret,
  body.ds-vp-app .ds-dropdown-trigger,
  body.ds-vp-app .ds-dropdown-option{
    transition: none;
  }
}