/* Variables for easy theme tweaks */
:root {
    --select-bg: #fff;
    --select-text: #212529;
    --select-border: #ced4da;
    --select-focus: #0d6efd; /* match your brand/primary */
    --select-arrow: #6c757d; /* arrow color */
    --select-radius: 12px; /* roundness */
}

/* Wrap the select to draw a custom chevron */
.select-wrap {
    position: relative;
    display: block;
}

/* Size variants (pick one) */
.select-lg .select-clean {
    padding: .75rem 2.75rem .75rem .9rem;
    font-size: 1.05rem;
}

.select-xl .select-clean {
    padding: .9rem 2.9rem .9rem 1rem;
    font-size: 1.125rem;
}

/* The select itself */
.select-clean {
    width: 100%;
    padding: .75rem 2.5rem .75rem 1rem;
    line-height: 1.6;
    border: 1px solid #ced4da;
    border-radius: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%236c757d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right .9rem center / 14px 14px, #fff;
}

    .select-clean:focus {
        outline: none;
        border-color: var(--select-focus);
        box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
    }

/* The chevron (CSS only, crisp on all DPIs) */
.select-wrap::after {
    content: "";
    position: absolute;
    right: .95rem;
    top: 50%;
    width: .55rem;
    height: .55rem;
    transform: translateY(-45%) rotate(45deg);
    border-right: 2px solid var(--select-arrow);
    border-bottom: 2px solid var(--select-arrow);
    pointer-events: none;
}

/* High-contrast/dark-friendly tweak (optional) */
@media (prefers-color-scheme: dark) {
    :root {
        --select-bg: #1f1f1f;
        --select-text: #f3f3f3;
        --select-border: #3a3a3a;
        --select-arrow: #c9c9c9;
    }
}