/*
 * GX SELECT MENU
 * Flamingo Pink dark-mode animated dropdown
 */

.gx-select {
    position: relative;
    width: 100%;
    user-select: none;
}

.gx-select-trigger {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    color: var(--color-text-primary);
    font-size: 1rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

    transition: border var(--transition-fast), background var(--transition-fast);
}

.gx-select-trigger:hover {
    border-color: var(--color-brand);
}

.gx-select-trigger .arrow {
    margin-left: 0.5rem;
    transition: transform var(--transition-fast);
}

.gx-select.open .gx-select-trigger .arrow {
    transform: rotate(180deg);
}

/* DROPDOWN PANEL */
.gx-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    max-height: 260px;
    overflow-y: auto;

    background: var(--color-bg-card);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    padding: 6px 0;

    opacity: 0;
    scale: 0.96;
    pointer-events: none;

    box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.6),
    0 0 24px rgba(255, 79, 163, 0.20);

    transition:
    opacity 0.17s ease-out,
    scale 0.14s cubic-bezier(0.15, 0.9, 0.25, 1.3);

    z-index: 9999;
}

/* When open */
.gx-select.open .gx-select-menu {
    opacity: 1;
    pointer-events: auto;
    scale: 1;
}

/* ITEM */
.gx-select-item {
    padding: 0.75rem 1rem;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    cursor: pointer;

    transition: background var(--transition-fast),
    color var(--transition-fast);
}

.gx-select-item:hover {
    background: rgba(255, 79, 163, 0.12);
    color: var(--color-brand);
}

/* Selected state */
.gx-select-item.selected {
    background: rgba(255, 79, 163, 0.18);
    color: var(--color-brand-hover);
}

/* Divider option */
.gx-select-divider {
    height: 1px;
    background: rgba(255, 79, 163, 0.15);
    margin: 6px 0;
}

/* Scrollbar */
.gx-select-menu::-webkit-scrollbar {
    width: 10px;
}

.gx-select-menu::-webkit-scrollbar-thumb {
    background: var(--color-brand);
    border-radius: 6px;
    box-shadow: var(--shadow-glow-pink-soft);
}