/* ═══════════════════════════════════════════════════════════════
   Vehicle Repair Management — Website Booking
   Only the model-name autocomplete dropdown needs custom CSS.
   Everything else is handled by Bootstrap.
   ═══════════════════════════════════════════════════════════════ */

/* ── Autocomplete dropdown ───────────────────────────────────── */
.vrm-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--bs-primary, #714b67);
    border-radius: var(--bs-border-radius, .375rem);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
    z-index: 1050;
    max-height: 200px;
    overflow-y: auto;
}

.vrm-suggestions--open {
    display: block;
}

.vrm-suggestion-item {
    padding: .45rem .875rem;
    font-size: .875rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color .1s ease;
}

.vrm-suggestion-item:last-child {
    border-bottom: none;
}

.vrm-suggestion-item:hover {
    background-color: var(--bs-primary, #714b67);
    color: #fff;
}

.vrm-suggestions::-webkit-scrollbar { width: 4px; }
.vrm-suggestions::-webkit-scrollbar-track { background: #f8f9fa; }
.vrm-suggestions::-webkit-scrollbar-thumb {
    background: var(--bs-primary, #714b67);
    border-radius: 10px;
}