/* ========= Listbox (JetForm Builder) ========= */
/* Palette via CSS variables (change-les pour matcher ton design) */
.jfb-listbox {
    --jfb-bg: var(--e-global-color-2ecf6f4) !important;
    /* fond du bouton et du menu (dark) */
    --jfb-fg: var(--e-global-color-e3ec2ad) !important;
    /* texte */
    --jfb-border: var(--e-global-color-a448eb8) !important;
    /* bordure bouton/menu */
    --jfb-ring: #6366f1;
    /* focus ring */
    --jfb-item-hover: rgba(255, 255, 255, .06);
    --jfb-item-selected: rgba(255, 255, 255, .12);
    --jfb-shadow-1: 0 10px 15px -3px rgba(0, 0, 0, .1);
    --jfb-shadow-2: 0 25px 50px -12px rgba(0, 0, 0, .25);
}

/* Variante claire prête à l’emploi */
/*
  :root {
    --jfb-bg:#fff; --jfb-fg:#111827; --jfb-border:#e5e7eb; --jfb-ring:#6366f1;
    --jfb-item-hover:#f3f4f6; --jfb-item-selected:#eef2ff;
    --jfb-shadow-1:0 10px 15px -3px rgba(0,0,0,.07);
    --jfb-shadow-2:0 25px 50px -12px rgba(0,0,0,.15);
  }
  */

.jfb-listbox {
    position: relative;
}

/* Bouton */
.jfb-listbox__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: 18px !important;
    padding: 8px 16px;
    background: var(--jfb-bg);
    color: var(--e-global-color-e3ec2ad) !important;
    border: 1px solid var(--jfb-border);
}

.jfb-listbox__btn:hover {
    background: var(--e-global-color-2ecf6f4) !important;
    color: var(--e-global-color-e3ec2ad) !important;
}

.jfb-listbox__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jfb-listbox__icon {
    width: 18px;
    height: 18px;
    opacity: .65;
    transition: transform .15s ease;
}

.jfb-listbox[data-open="1"] .jfb-listbox__icon {
    transform: rotate(180deg);
}

/* Menu */
.jfb-listbox__options {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + .35rem);
    z-index: 9999;
    max-height: 15rem;
    overflow: auto;
    padding: 4px;
    list-style: none;
    margin: 0;
    border-radius: 14px;
    border: 1px solid var(--jfb-border);
    background: var(--jfb-bg);
    color: var(--jfb-fg);
    backdrop-filter: saturate(140%) blur(8px);
    display: none;
}

.jfb-listbox[data-open="1"] .jfb-listbox__options {
    display: block;
}

/* Item */
.jfb-listbox__opt {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: default;
}

.jfb-listbox__opt:first-child {
    display: none;
}   

.jfb-listbox__opt[data-active="1"] {
    background: var(--jfb-item-hover);
}

.jfb-listbox__opt[data-selected="1"] {
    background: var(--jfb-item-selected);
}

.jfb-listbox__check {
    margin-left: auto;
    opacity: .9;
    width: 18px;
    height: 18px;
}

.jfb-listbox__opt:hover {
    background: var(--e-global-color-4dfc279) !important;
    color: var(--e-global-color-e3ec2ad) !important;
}

/* Select masqué mais accessible */
.jfb-vhidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Scrollbar (facultatif) */
.jfb-listbox__options::-webkit-scrollbar {
    width: 10px;
}

.jfb-listbox__options::-webkit-scrollbar-thumb {
    background: var(--jfb-border);
    border-radius: 10px;
}