/* Shared dropdown controls for the animal picker and activity pages. */
.filter-field { position: relative; min-width: 0; }
.filter-field > summary { list-style: none; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; background: var(--white); cursor: pointer; }
.filter-field > summary::-webkit-details-marker { display: none; }
.filter-field.is-active > summary { border-color: #eeb39d; background: #fff8f2; }
.filter-label { display: block; font-size: 10px; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.filter-value { display: block; font-size: 12px; font-weight: 600; padding-right: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-field > summary::after { content: ""; position: absolute; right: 15px; top: 39px; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }
.filter-field[open] > summary::after { transform: rotate(225deg); top: 42px; }
.filter-menu { position: absolute; z-index: 5; top: calc(100% + 8px); left: 0; width: max(100%, 238px); max-height: 360px; overflow-y: auto; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--white); box-shadow: 0 16px 36px rgba(32,42,57,.12); }
.filter-field:last-child .filter-menu { left: auto; right: 0; }
.filter-options { border: 0; padding: 0; margin: 0; min-width: 0; }
.filter-option { display: flex; align-items: center; gap: 9px; padding: 8px 6px; min-height: 38px; font-size: 12px; line-height: 1.45; cursor: pointer; border-radius: 5px; }
.filter-option:hover { background: #f5f0e7; }
.filter-option input { accent-color: var(--coral-dark); margin: 0; width: 15px; height: 15px; flex: 0 0 15px; }
.option-count { margin-left: auto; padding-left: 6px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }

.filter-field summary:focus-visible, .filter-option input:focus-visible { outline: 3px solid #758bb2; outline-offset: 3px; }