.bg-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.spin {
    display: inline-block;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.ts-dropdown {
    --bs-body-bg: var(--tblr-body-bg);
    opacity: 1;
}

.ts-dropdown .option {
    background: white;
    opacity: 1;
}

.ts-control {
    min-height: 38px;
}

/*
 * A single-select TomSelect built over a text input (e.g. the city/municipality autocomplete)
 * renders as a Bootstrap .form-control wrapper. The bootstrap5 theme reserves the caret space
 * for every .single wrapper but only paints the chevron SVG for non-.form-control/.form-select
 * wrappers — and .form-control (unlike .form-select) has no arrow of its own. The result is
 * reserved-but-empty space. Paint the same chevron the country (.form-select) field uses.
 */
.ts-wrapper.form-control.single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}