/**
 * Simple Price Range Slider Styles - Clean & Minimal
 * Fixed range: 0 DH to 5000 DH
 * 
 * @package Zdesigner
 * @version 2.0.0
 */

/* ===================================
   Price Filter Container - Simple
   =================================== */
.price-filter-simple {
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Prevent text selection during drag */
body.price-slider-dragging {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    cursor: grabbing !important;
}

body.price-slider-dragging * {
    cursor: grabbing !important;
}

/* ===================================
   Input Fields - Simple
   =================================== */
.price-filter-simple input[type="number"] {
    width: 100%;
    appearance: textfield;
    -moz-appearance: textfield;
}

.price-filter-simple input[type="number"]::-webkit-outer-spin-button,
.price-filter-simple input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.price-filter-simple input[type="number"]:focus {
    outline: none;
}

/* ===================================
   Slider Track - Simple
   =================================== */
#price-slider-track,
#mobile-price-slider-track {
    position: relative;
    height: 1px;
    background: #cbd5e1; /* slate-300 */
    cursor: pointer;
    touch-action: none;
    transition: background-color 0.2s ease;
}

.dark #price-slider-track,
.dark #mobile-price-slider-track {
    background: #475569; /* slate-600 */
}

/* ===================================
   Active Range Bar - Simple
   =================================== */
#price-slider-range,
#mobile-price-slider-range {
    position: absolute;
    height: 100%;
    background: #d4af37; /* gold */
    transition: left 0.15s ease, right 0.15s ease;
}

.dark #price-slider-range,
.dark #mobile-price-slider-range {
    background: #f4d03f; /* lighter gold for dark mode */
}

/* ===================================
   Slider Handles - Simple
   =================================== */
.price-slider-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #d4af37; /* gold - match slider bar */
    border: 3px solid #d4af37; /* gold - thicker border */
    border-radius: 50%;
    cursor: pointer;
    touch-action: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    z-index: 10;
}

.price-slider-handle:hover,
.price-slider-handle:focus {
    transform: translate(-50%, -50%) scale(1.1);
    background: #d4af37; /* gold */
    border-color: #d4af37; /* gold - keep same color on hover */
    box-shadow: 0 2px 4px rgba(212, 175, 55, 0.3);
    outline: none;
}

.price-slider-handle:active,
.price-slider-handle.dragging {
    transform: translate(-50%, -50%) scale(1.15);
    background: #d4af37; /* gold */
    border-color: #d4af37; /* gold - keep same color when dragging */
    box-shadow: 0 3px 6px rgba(212, 175, 55, 0.4);
}

.dark .price-slider-handle {
    background: #f4d03f; /* lighter gold */
    border-color: #f4d03f; /* lighter gold */
}

.dark .price-slider-handle:hover,
.dark .price-slider-handle:focus {
    background: #f4d03f; /* lighter gold */
    border-color: #f4d03f; /* lighter gold - keep consistent */
}

.dark .price-slider-handle:active,
.dark .price-slider-handle.dragging {
    background: #f4d03f; /* lighter gold */
    border-color: #f4d03f; /* lighter gold - keep consistent */
}

/* ===================================
   Slider Wrapper - Simple
   =================================== */
.slider-wrapper {
    position: relative;
    padding: 12px 0;
}

/* ===================================
   Accessibility - Keyboard Focus
   =================================== */
.price-slider-handle:focus-visible {
    outline: 2px solid #3b82f6; /* blue-500 */
    outline-offset: 2px;
}

/* ===================================
   Mobile Optimizations
   =================================== */
@media (max-width: 768px) {
    .price-slider-handle {
        width: 18px;
        height: 18px;
    }
    
    .slider-wrapper {
        padding: 16px 0;
    }
}

/* ===================================
   Loading State
   =================================== */
.price-filter-simple.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ===================================
   Smooth Transitions
   =================================== */
.price-slider-handle,
#price-slider-range,
#mobile-price-slider-range {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}