/*
|--------------------------------------------------------------------------
| Search Form Controls
|--------------------------------------------------------------------------
*/

.finder select {
    width: 100%;
    min-width: 0;

    padding: 0 22px 0 0;

    background-color: transparent;
    color: var(--text, #211d1c);

    border: 0;
    outline: none;

    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    cursor: pointer;

    appearance: auto;
}


/*
|--------------------------------------------------------------------------
| Focus State
|--------------------------------------------------------------------------
*/

.finder select:focus-visible {
    outline: 2px solid
        color-mix(
            in srgb,
            var(--brand) 55%,
            transparent
        );

    outline-offset: 4px;

    border-radius: 4px;
}


/*
|--------------------------------------------------------------------------
| Age Range
|--------------------------------------------------------------------------
*/

.finder-age-fields {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: 6px;

    width: 100%;
    min-width: 0;

    color: var(--muted, #6e6663);
}

.finder-age-fields select {
    min-width: 0;

    padding-right: 14px;
}


/*
|--------------------------------------------------------------------------
| Age Separator
|--------------------------------------------------------------------------
*/

.finder-age-fields > span,
.finder-age-fields > small {
    flex: none;

    color: var(--muted, #6e6663);

    font-size: 12px;
    font-weight: 500;

    white-space: nowrap;
}


/*
|--------------------------------------------------------------------------
| Finder Button
|--------------------------------------------------------------------------
*/

.finder button {
    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| Disabled State
|--------------------------------------------------------------------------
*/

.finder select:disabled,
.finder button:disabled {
    cursor: not-allowed;

    opacity: 0.55;
}

.finder-control {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.finder-control > svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--brand);
    stroke-width: 1.8;
}

.finder-control > select,
.finder-control > .finder-age-fields {
    flex: 1;
    min-width: 0;
} 


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .finder select {
        font-size: 14px;
    }

    .finder-age-fields {
        gap: 8px;
    }

}