@charset "UTF-8";

/**
 * Modern Sort Dropdown - Apple-Inspired Design
 * 
 * Purpose: Small, modern sort dropdown with Apple theme styling
 * Light background, compact size, clean design
 * 
 * @version 2.0.0
 * @date 2026-01-25
 */

/* ============================================================
   SORT DROPDOWN CONTAINER
   ============================================================ */

.custom-select-z {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

/* ============================================================
   SORT SELECT - Apple-Inspired Small & Clean
   ============================================================ */

.custom-select-z select.form-select-sm,
.custom-select-z select.form-select-sm.w-auto,
.custom-select-z select.no-nice-select {
    /* Size - Very Small & Compact */
    height: 24px !important;
    padding: 0 20px 0 6px !important;
    font-size: 11px !important;
    line-height: 22px !important;
    min-width: 100px !important;
    max-width: 140px !important;
    
    /* Apple Theme - Light Background (NOT black) */
    background-color: #f5f5f7 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 5px center !important;
    background-size: 8px !important;
    
    /* Border & Styling - Apple Style */
    border: 0.5px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 6px !important;
    color: #1d1d1f !important;
    font-weight: 400 !important;
    
    /* Remove default appearance */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* Transition */
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    
    /* Apple-style subtle shadow */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Hover State - Apple Style */
.custom-select-z select.form-select-sm:hover,
.custom-select-z select.form-select-sm.w-auto:hover,
.custom-select-z select.no-nice-select:hover {
    background-color: #e8e8ed !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Focus State - Apple Style */
.custom-select-z select.form-select-sm:focus,
.custom-select-z select.form-select-sm.w-auto:focus,
.custom-select-z select.no-nice-select:focus {
    outline: none !important;
    background-color: #ffffff !important;
    border-color: rgba(0, 122, 255, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1) !important;
}

/* Active/Selected State */
.custom-select-z select.form-select-sm:active,
.custom-select-z select.form-select-sm.w-auto:active,
.custom-select-z select.no-nice-select:active {
    background-color: #e8e8ed !important;
    transform: scale(0.98) !important;
}

/* When option is selected (not default) */
.custom-select-z select.form-select-sm:not([value=""]),
.custom-select-z select.form-select-sm.w-auto:not([value=""]),
.custom-select-z select.no-nice-select:not([value=""]) {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: #1d1d1f !important;
    font-weight: 500 !important;
}

/* Disabled State */
.custom-select-z select.form-select-sm:disabled,
.custom-select-z select.form-select-sm.w-auto:disabled,
.custom-select-z select.no-nice-select:disabled {
    background-color: #f5f5f7 !important;
    color: #8e8e93 !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}

/* ============================================================
   OPTION STYLING - Apple Theme
   ============================================================ */

.custom-select-z select.form-select-sm option {
    padding: 4px 8px;
    font-size: 11px;
    color: #1d1d1f;
    background-color: #ffffff;
}

.custom-select-z select.form-select-sm option:hover {
    background-color: #f5f5f7;
}

.custom-select-z select.form-select-sm option:checked {
    background-color: #007aff;
    color: #ffffff;
}

/* ============================================================
   RESPONSIVE - MOBILE (Very Small)
   ============================================================ */

@media (max-width: 575px) {
    .custom-select-z select.form-select-sm,
    .custom-select-z select.form-select-sm.w-auto,
    .custom-select-z select.no-nice-select {
        height: 22px !important;
        padding: 0 18px 0 5px !important;
        font-size: 10px !important;
        min-width: 90px !important;
        max-width: 120px !important;
        background-size: 7px !important;
        background-position: right 4px center !important;
        line-height: 20px !important;
    }
}

/* ============================================================
   RESPONSIVE - TABLET (Slightly Larger)
   ============================================================ */

@media (min-width: 768px) {
    .custom-select-z select.form-select-sm,
    .custom-select-z select.form-select-sm.w-auto,
    .custom-select-z select.no-nice-select {
        height: 26px !important;
        padding: 0 22px 0 8px !important;
        font-size: 12px !important;
        min-width: 120px !important;
        max-width: 160px !important;
        background-size: 9px !important;
        background-position: right 6px center !important;
        line-height: 24px !important;
    }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .custom-select-z select.form-select-sm {
        border: 2px solid #000000;
        background-color: #ffffff;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .custom-select-z select.form-select-sm {
        transition: none;
    }
}