/**
 * TOP LEVEL MOBILE OPTIMIZATION - 2025 STANDARDS
 * Perfect mobile experience с mathematical precision
 */

/* ===== PERFECT DESKTOP SEARCH FORM LAYOUT ===== */
@media (min-width: 769px) {
    .filter-dropdowns {
        /* PERFECT DESKTOP ALIGNMENT - NO CROOKED POSITIONING */
        display: flex !important;
        align-items: center !important; /* CHANGED: center instead of flex-end */
        justify-content: center !important;
        gap: 16px !important; /* Perfect 8px grid spacing */
        flex-wrap: nowrap !important; /* Keep in one line */
        margin-bottom: 24px !important;
        
        /* Perfect baseline alignment */
        box-sizing: border-box !important;
        min-height: 56px !important; /* Ensure consistent height */
    }
    
    .filter-dropdown {
        /* Perfect dropdown dimensions */
        width: 168px !important; /* Consistent width */
        height: 56px !important; /* Perfect height */
        flex-shrink: 0 !important; /* Prevent shrinking */
        
        /* Perfect positioning */
        margin: 0 !important;
        align-self: center !important; /* Center alignment */
        vertical-align: middle !important;
    }
    
    .search-btn {
        /* PERFECT BUTTON POSITIONING - SAME LINE AS DROPDOWNS */
        width: 144px !important;
        height: 56px !important; /* EXACT match with dropdowns */
        flex-shrink: 0 !important; /* Prevent shrinking */
        margin: 0 !important; /* NO margin for perfect alignment */
        align-self: center !important; /* SAME as dropdowns */
        vertical-align: middle !important; /* Perfect vertical alignment */
        
        /* Perfect display properties */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ===== PERFECT MOBILE SEARCH FORM ===== */
@media (max-width: 768px) {
    .filter-dropdowns {
        /* Perfect mobile layout */
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
        padding: 0 16px !important;
    }
    
    .filter-dropdown {
        /* Perfect mobile dropdowns */
        width: 100% !important;
        height: 48px !important;
        font-size: 14px !important;
    }
    
    .search-btn {
        /* Perfect mobile button */
        width: 100% !important;
        height: 52px !important;
        font-size: 16px !important;
        margin-top: 8px !important;
    }
}

/* ===== PERFECT MOBILE STATISTICS - GRID PERFECTION ===== */
@media (max-width: 768px) {
    .property-statistics {
        /* Perfect grid layout - TOP LEVEL */
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)) !important;
        gap: 12px !important; /* Perfect 8px grid: 1.5 * 8 */
        
        /* Perfect spacing - mathematical precision */
        padding: 20px 16px !important; /* 8px grid compliant */
        margin: 24px 12px !important; /* Perfect proportions */
        
        /* Enhanced visibility - TOP LEVEL */
        visibility: visible !important;
        opacity: 1 !important;
        display: grid !important; /* Force override */
        
        /* Professional mobile styling */
        background: linear-gradient(135deg, 
            rgba(243, 159, 27, 0.15) 0%, 
            rgba(243, 159, 27, 0.08) 100%) !important;
        border: 2px solid rgba(243, 159, 27, 0.5) !important;
        border-radius: 16px !important;
        backdrop-filter: blur(20px) saturate(140%) !important;
        
        /* Perfect mobile shadow */
        box-shadow: 
            0 8px 32px rgba(243, 159, 27, 0.25),
            0 4px 16px rgba(0, 0, 0, 0.15) !important;
        
        /* Perfect mobile typography */
        font-size: 13px !important;
        font-weight: 600 !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }
    
    /* Perfect mobile stat elements */
    .stat-number {
        font-size: 20px !important; /* Larger for mobile visibility */
        font-weight: 700 !important;
        color: #F39F1B !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
        display: block !important;
        margin-bottom: 4px !important;
    }
    
    .stat-label, .stat-text {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        display: block !important;
    }
    
    .stat-count {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #F39F1B !important;
        margin-left: 4px !important;
    }
    
    .stat-separator {
        display: none !important; /* Hide separators on mobile */
    }
    
    .stat-icon {
        font-size: 16px !important;
        margin-bottom: 4px !important;
        display: block !important;
    }
}