/* ============================================================
   SELECT.CSS — Кастомный выпадающий список
   ============================================================ */

.sort-control select {
    padding: 6px 36px 6px 14px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 8px !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    background-color: var(--surface) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
    cursor: pointer !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    min-width: 130px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.sort-control select:hover {
    border-color: var(--primary) !important;
    background-color: var(--surface) !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08) !important;
}

.sort-control select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    background-color: var(--surface) !important;
}

.sort-control select option {
    padding: 8px 14px !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    color: var(--text) !important;
    background: var(--surface) !important;
    border: none !important;
    cursor: pointer !important;
}

.sort-control select:-moz-focusring {
    color: transparent !important;
    text-shadow: 0 0 0 var(--text) !important;
}

.sort-control select::-ms-expand {
    display: none !important;
}

/* ===== ТЕЛЕФОНЫ (до 768px) ===== */
@media (max-width: 768px) {
    .sort-control select {
        padding: 5px 30px 5px 12px !important;
        font-size: 0.78rem !important;
        min-width: 100px !important;
        background-position: right 10px center !important;
        background-size: 10px 7px !important;
        border-radius: 6px !important;
    }
    .sort-control select option {
        font-size: 0.78rem !important;
        padding: 6px 12px !important;
    }
}

/* ===== МАЛЕНЬКИЕ ТЕЛЕФОНЫ (до 480px) ===== */
@media (max-width: 480px) {
    .sort-control select {
        padding: 4px 24px 4px 10px !important;
        font-size: 0.7rem !important;
        min-width: 80px !important;
        background-position: right 8px center !important;
        background-size: 9px 6px !important;
        border-radius: 5px !important;
    }
    .sort-control select option {
        font-size: 0.7rem !important;
        padding: 5px 10px !important;
    }
}

/* ===== ПЛАНШЕТЫ (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .sort-control select {
        padding: 5px 32px 5px 14px !important;
        font-size: 0.8rem !important;
        min-width: 110px !important;
        background-position: right 12px center !important;
        background-size: 11px 7px !important;
    }
    .sort-control select option {
        font-size: 0.8rem !important;
        padding: 7px 14px !important;
    }
}