/*
 * Collecting Template Import: make dropdowns and search boxes on public
 * Collecting forms match the size of normal text fields.
 * Adjust the variables to suit your theme.
 */
form[name^="collecting_form_"] {
    --cti-width: 36em;
    --cti-border: #c8c8c8;
    --cti-radius: 3px;
    --cti-bg: #fff;
}

form[name^="collecting_form_"] .cti-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    width: var(--cti-width);
    max-width: 100%;
}

form[name^="collecting_form_"] select.cti-select,
form[name^="collecting_form_"] input.cti-filter {
    font: inherit;
    font-size: 1em;
    line-height: 1.4;
    color: inherit;
    height: auto;
    min-height: 2.6em;
    width: var(--cti-width);
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.45em 0.7em;
    margin: 0;
    border: 1px solid var(--cti-border);
    border-radius: var(--cti-radius);
    background-color: var(--cti-bg);
}

/* Native dropdowns (Safari especially) ignore height and padding, so draw our own arrow. */
form[name^="collecting_form_"] select.cti-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3-3 3 3M3 7.5l3 3 3-3' fill='none' stroke='%23555' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7em center;
    background-size: 0.8em;
    text-overflow: ellipsis;
}

form[name^="collecting_form_"] input.cti-filter::placeholder {
    font-style: italic;
    opacity: 0.7;
}

form[name^="collecting_form_"] .cti-filter-count {
    display: block;
    font-size: 0.85em;
    opacity: 0.75;
}

form[name^="collecting_form_"] .cti-filter-count:empty {
    display: none;
}