﻿.custom-combobox {
    position: relative;
    display: flex;
    width: 100%;
}

.custom-combobox.input-group {
    width: 100%;
}

.custom-combobox-toggle {
    border: 1px solid #ced4da;
    border-left: none !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    height: 100%;
    padding: 0.6em 1em;
}

.custom-combobox-input {
    padding: 7.1px 0.5rem;
}

.custom-combobox-input:focus {
    box-shadow: none;
    border-color: #c8beaf;
}

.custom-combobox-toggle:focus {
    box-shadow: none;
    border-color: #c8beaf;
}

.custom-combobox-toggle:hover {
    background-color: #f8f9fa;
}

/* Ensure combobox matches answer-input styling */
.custom-combobox-input.answer-input {
    font-size: 1.6rem;
    padding: 0.6em;
    border: 1px solid #c8beaf;
}

/* Make combobox wrapper take full width when w-100 class is applied */
.w-100 + div.custom-combobox {
    width: 100%;
}

ul.ui-autocomplete {
    z-index: 9999;
}