/* Vegas Bowling – Custom-Dropdown + Hinweis-Kasten. Kein Tailwind-Rebuild. */
.vb-select { position: relative; width: 100%; }
.vb-select__native {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none; /* sichtbar genug für HTML5-Validierung, unsichtbar fürs Auge */
}
.vb-select__button {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .75rem; font: inherit; font-weight: 600; font-size: .875rem; color: #221a0f; text-align: left;
    background: var(--vb-surface, #fffaf3); border: 1px solid rgba(88,65,63,.30); border-radius: .75rem;
    cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.vb-select__button:hover { border-color: rgba(88,65,63,.5); }
.vb-select.is-open .vb-select__button,
.vb-select__button:focus-visible { outline: none; border-color: #ba1434; box-shadow: 0 0 0 3px rgba(186,20,52,.15); }
.vb-select__button:disabled { opacity: .55; cursor: not-allowed; }
.vb-select__value--empty { color: #85756a; font-weight: 500; }
.vb-select__chev { color: #ba1434; font-size: .8em; }

.vb-select__panel {
    position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
    background: #fff; border: 1px solid rgba(88,65,63,.20); border-radius: .9rem;
    box-shadow: 0 12px 28px -10px rgba(88,65,63,.45); padding: .5rem; max-height: 280px; overflow: auto;
}
.vb-select__group {
    font-size: .625rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    color: #85756a; margin: .5rem .25rem .25rem;
}
.vb-select__list { display: flex; flex-direction: column; gap: 1px; }
.vb-select__list--time { display: flex; flex-direction: column; gap: 1px; }

.vb-select__opt {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .5rem .625rem; font-size: .8rem; font-weight: 600; color: #221a0f;
    border-radius: .55rem; cursor: pointer; border: 1px solid transparent;
}
.vb-select__opt:hover { background: #fff4ea; }
.vb-select__opt.is-selected { background: #ba1434; border-color: #ba1434; color: #fff; }

/* Uhrzeit-Liste: etwas großzügigere Zeilen + dezente Anfrage-Markierung (kein lautes Kästchen) */
.vb-select__list--time .vb-select__opt { padding: .6rem .75rem; font-size: .85rem; }
.vb-select__list--time .vb-select__opt.is-request { color: #9a6a30; box-shadow: inset 3px 0 0 #c79a5a; }
.vb-select__opt.is-request.is-selected { background: #ba1434; border-color: #ba1434; color: #fff; box-shadow: none; }
.vb-select__tag { font-size: .55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.vb-select__tag--open { color: #3f7d34; }
.vb-select__tag--request { color: #9a6a30; }
.vb-select__opt.is-selected .vb-select__tag { color: rgba(255,255,255,.85); }

@media (max-width: 640px) {
    .vb-select__panel { max-height: min(62vh, 420px); }
    .vb-select__list--time {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .25rem;
    }
    .vb-select__list--time .vb-select__opt {
        min-height: 42px;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: .55rem .45rem;
        gap: .2rem;
    }
    .vb-select__list--time .vb-select__tag {
        font-size: .5rem;
        line-height: 1;
    }
}

/* Hinweis-Kasten: dezent, aber erkennbar */
.vb-hint {
    display: flex; gap: .6rem; align-items: flex-start;
    background: #fff8ee; border: 1px solid rgba(199,154,90,.45); border-left: 4px solid #c79a5a;
    border-radius: .6rem; padding: .6rem .75rem; margin-top: .6rem;
    font-size: .75rem; line-height: 1.45; color: #6a5740;
}
.vb-hint__icon { flex: none; font-size: .95rem; line-height: 1.2; }
.vb-hint strong { color: #5a4630; }

/* Breit gezogene, flache Variante: volle Formularbreite, eine Zeile statt hoher Block */
.vb-hint--wide { align-items: center; padding: .45rem .8rem; line-height: 1.35; }
.vb-hint--wide .vb-hint__lead { white-space: nowrap; }