/* Select2 theme matching the Figma combobox (Feedback frame, node 477:4598):
   the field and the open panel read as one rounded box — the 12px radius
   splits between them; options are 14/20 rows with hairline dividers and an
   #EBEFFF highlight bar. !important mirrors the CDN stylesheet, which loads
   after app.css. */

.select2-selection
{
    padding: 10px 40px 10px 15px !important;
    height: auto !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    background-color: var(--color-bg-alt) !important;
    /* heroicons-mini chevron-down, same glyph as the blog filter selects. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23100C0C'%3E%3Cpath fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 20px 20px !important;
}
.select2-selection__placeholder,
.select2-selection__rendered
{
    font-family: 'Manrope', -apple-system, sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    padding: 0 !important;
}
.select2-selection__rendered
{
    color: var(--color-text) !important;
}
.select2-selection__placeholder
{
    color: var(--color-text-link) !important;
}
.select2-selection__arrow
{
    display: none !important;
}

/* Open state: the panel continues the field — flatten the touching corners. */
.select2-container--open .select2-selection--single
{
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.select2-container--open.select2-container--above .select2-selection--single
{
    border-radius: 0 0 12px 12px !important;
}

.select2-dropdown
{
    border: 1px solid var(--color-border) !important;
    background-color: var(--color-bg-alt) !important;
    overflow: hidden;
}
.select2-dropdown--below
{
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
}
.select2-dropdown--above
{
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
}

/* The mock types straight into the box — a flat search row with a hairline
   divider before the options, not a framed input. */
.select2-search--dropdown
{
    padding: 10px 15px !important;
    border-bottom: 1px solid var(--color-border);
}
.select2-search--dropdown .select2-search__field
{
    border: none !important;
    outline: none !important;
    height: auto;
    padding: 0 !important;
    font-family: 'Manrope', -apple-system, sans-serif !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--color-text);
}

.select2-results > .select2-results__options
{
    max-height: 250px !important;
}
.select2-results__option
{
    padding: 10px 15px !important;
    color: var(--color-text);
    font-family: 'Manrope', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    border-bottom: 1px solid var(--color-border) !important;
    background-color: transparent !important;
}
.select2-results__option:last-child
{
    border-bottom: none !important;
}
.select2-results__option.select2-results__option--highlighted
{
    color: var(--color-text) !important;
    background-color: var(--color-bg-third) !important;
}
.select2-results__option--selected
{
    background-color: var(--color-bg) !important;
}

.select2-selection__clear
{
    margin-right: 24px !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--color-text-link) !important;
    display: flex !important;
    align-items: center !important;
}
.select2-selection__clear:hover
{
    color: var(--color-text) !important;
}

@media (max-width: 576px) {

    /* Follows the .form-control mobile shrink. */
    .select2-selection
    {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}