/* Dropdown (language, currency): trigger and menu. The trigger takes the colour of where it sits (the dark top bar, a light page). */
@layer components {
    .dropdown { position: relative; }
    .dropdown-trigger { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
    .dropdown-caret { transition: transform .15s; }
    .dropdown.is-open .dropdown-caret { transform: rotate(180deg); }
    .dropdown-menu { position: absolute; top: calc(100% + var(--space-2)); z-index: 60; display: none; min-width: 180px; padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--color-text); }
    .dropdown-menu-left { left: 0; }
    .dropdown-menu-right { right: 0; }
    .dropdown.is-open .dropdown-menu { display: block; }
    .dropdown-item { display: block; width: 100%; min-height: 40px; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
    .dropdown-item:hover { background: var(--color-surface-alt); color: var(--color-primary); }
    .dropdown-item.is-current { color: var(--color-primary); font-weight: 700; }
}